/* Responsive System - Breakpoints standardisés pour tous les écrans */

/* BREAKPOINTS STANDARDS */
:root {
  /* Breakpoints */
  --breakpoint-xs: 480px;    /* Très petits mobiles */
  --breakpoint-sm: 640px;    /* Mobiles */
  --breakpoint-md: 768px;    /* Tablettes portrait */
  --breakpoint-lg: 1024px;   /* Tablettes paysage / petits laptops */
  --breakpoint-xl: 1280px;   /* Laptops */
  --breakpoint-2xl: 1536px;  /* Grands écrans */
  --breakpoint-3xl: 1920px;  /* Très grands écrans */
  
  /* Container max-widths pour chaque breakpoint */
  --container-xs: 100%;
  --container-sm: 100%;
  --container-md: 100%;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;
  --container-3xl: 1600px;
  
  /* Grid columns par breakpoint */
  --grid-cols-xs: 1;
  --grid-cols-sm: 2;
  --grid-cols-md: 2;
  --grid-cols-lg: 3;
  --grid-cols-xl: 4;
  --grid-cols-2xl: 5;
  --grid-cols-3xl: 6;
  
  /* Spacing responsive */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  
  /* Font sizes responsive */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
}

/* CONTAINER RESPONSIVE */
.responsive-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  padding: 0 var(--spacing-sm);
}

/* Très petits mobiles (320px - 479px) */
@media (max-width: 479px) {
  .responsive-container {
    max-width: 100%;
    max-width: var(--container-xs);
    padding: 0 0.5rem;
    padding: 0 var(--spacing-xs);
  }
  
  .responsive-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    grid-template-columns: repeat(var(--grid-cols-xs), 1fr) !important;
    gap: 0.5rem !important;
    gap: var(--spacing-xs) !important;
  }
  
  .responsive-text {
    font-size: 0.875rem !important;
    font-size: var(--text-sm) !important;
  }
  
  .responsive-heading {
    font-size: 1.125rem !important;
    font-size: var(--text-lg) !important;
  }
  
  .responsive-button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-size: var(--text-sm) !important;
  }
}

/* Petits mobiles (480px - 639px) */
@media (min-width: 480px) and (max-width: 639px) {
  .responsive-container {
    max-width: 100%;
    max-width: var(--container-sm);
    padding: 0 1rem;
    padding: 0 var(--spacing-sm);
  }
  
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-columns: repeat(var(--grid-cols-sm), 1fr) !important;
    gap: 1rem !important;
    gap: var(--spacing-sm) !important;
  }
  
  .responsive-text {
    font-size: 1rem !important;
    font-size: var(--text-base) !important;
  }
  
  .responsive-heading {
    font-size: 1.25rem !important;
    font-size: var(--text-xl) !important;
  }
}

/* Mobiles larges / petites tablettes (640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
  .responsive-container {
    max-width: 100%;
    max-width: var(--container-md);
    padding: 0 1.5rem;
    padding: 0 var(--spacing-md);
  }
  
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-columns: repeat(var(--grid-cols-md), 1fr) !important;
    gap: 1.5rem !important;
    gap: var(--spacing-md) !important;
  }
}

/* Tablettes (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .responsive-container {
    max-width: 1024px;
    max-width: var(--container-lg);
    padding: 0 1.5rem;
    padding: 0 var(--spacing-md);
  }
  
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-columns: repeat(var(--grid-cols-lg), 1fr) !important;
    gap: 1.5rem !important;
    gap: var(--spacing-md) !important;
  }
  
  .responsive-text {
    font-size: 1rem !important;
    font-size: var(--text-base) !important;
  }
  
  .responsive-heading {
    font-size: 1.5rem !important;
    font-size: var(--text-2xl) !important;
  }
}

/* Petits laptops (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .responsive-container {
    max-width: 1280px;
    max-width: var(--container-xl);
    padding: 0 2rem;
    padding: 0 var(--spacing-lg);
  }
  
  .responsive-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-columns: repeat(var(--grid-cols-xl), 1fr) !important;
    gap: 2rem !important;
    gap: var(--spacing-lg) !important;
  }
  
  .responsive-text {
    font-size: 1.125rem !important;
    font-size: var(--text-lg) !important;
  }
  
  .responsive-heading {
    font-size: 1.875rem !important;
    font-size: var(--text-3xl) !important;
  }
}

/* Laptops standard (1280px - 1535px) */
@media (min-width: 1280px) and (max-width: 1535px) {
  .responsive-container {
    max-width: 1400px;
    max-width: var(--container-2xl);
    padding: 0 2rem;
    padding: 0 var(--spacing-lg);
  }
  
  .responsive-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    grid-template-columns: repeat(var(--grid-cols-2xl), 1fr) !important;
    gap: 2rem !important;
    gap: var(--spacing-lg) !important;
  }
  
  .responsive-text {
    font-size: 1.125rem !important;
    font-size: var(--text-lg) !important;
  }
  
  .responsive-heading {
    font-size: 2.25rem !important;
    font-size: var(--text-4xl) !important;
  }
}

/* Grands écrans (1536px - 1919px) */
@media (min-width: 1536px) and (max-width: 1919px) {
  .responsive-container {
    max-width: 1600px;
    max-width: var(--container-3xl);
    padding: 0 3rem;
    padding: 0 var(--spacing-xl);
  }
  
  .responsive-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-columns: repeat(var(--grid-cols-3xl), 1fr) !important;
    gap: 3rem !important;
    gap: var(--spacing-xl) !important;
  }
  
  .responsive-text {
    font-size: 1.25rem !important;
    font-size: var(--text-xl) !important;
  }
  
  .responsive-heading {
    font-size: 3rem !important;
    font-size: var(--text-5xl) !important;
  }
}

/* Très grands écrans (1920px+) */
@media (min-width: 1920px) {
  .responsive-container {
    max-width: 1600px;
    max-width: var(--container-3xl);
    padding: 0 4rem;
    padding: 0 var(--spacing-2xl);
  }
  
  .responsive-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-columns: repeat(var(--grid-cols-3xl), 1fr) !important;
    gap: 4rem !important;
    gap: var(--spacing-2xl) !important;
  }
  
  .responsive-text {
    font-size: 1.25rem !important;
    font-size: var(--text-xl) !important;
  }
  
  .responsive-heading {
    font-size: 3rem !important;
    font-size: var(--text-5xl) !important;
  }
}

/* UTILITIES RESPONSIVE */

/* Affichage/masquage par breakpoint */
.hidden-xs { display: none; }
.hidden-sm { display: none; }
.hidden-md { display: none; }
.hidden-lg { display: none; }
.hidden-xl { display: none; }

@media (min-width: 480px) { .hidden-xs { display: inline; display: initial; } .show-xs-only { display: none; } }
@media (min-width: 640px) { .hidden-sm { display: inline; display: initial; } .show-sm-only { display: none; } }
@media (min-width: 768px) { .hidden-md { display: inline; display: initial; } .show-md-only { display: none; } }
@media (min-width: 1024px) { .hidden-lg { display: inline; display: initial; } .show-lg-only { display: none; } }
@media (min-width: 1280px) { .hidden-xl { display: inline; display: initial; } .show-xl-only { display: none; } }

/* Classes pour forcer l'affichage sur certains breakpoints seulement */
.show-xs-only { display: inline; display: initial; }
.show-sm-only { display: inline; display: initial; }
.show-md-only { display: inline; display: initial; }
.show-lg-only { display: inline; display: initial; }
.show-xl-only { display: inline; display: initial; }

/* Flexbox responsive */
.flex-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  gap: var(--spacing-md);
}

@media (max-width: 767px) {
  .flex-responsive {
    flex-direction: column;
    gap: 1rem;
    gap: var(--spacing-sm);
  }
}

/* Aspect ratio responsive pour les cartes */
.card-responsive {
  aspect-ratio: 16/9;
}

@media (max-width: 767px) {
  .card-responsive {
    aspect-ratio: 4/3;
  }
}

@media (max-width: 479px) {
  .card-responsive {
    aspect-ratio: 1/1;
  }
}

/* HEADER MOBILE OPTIMIZATIONS */
@media (max-width: 768px) {
  /* Garantir que le header soit toujours accessible */
  .header-mobile-optimized {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Améliorer les zones tactiles sur mobile */
  .header-mobile-optimized button {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }
  
  /* Optimiser la barre de recherche mobile */
  .search-mobile-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1;
  }
  
  /* Animation fluide pour l'expansion de la recherche */
  .search-expand-animation {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  }
  
  /* Styles pour l'overlay de la sidebar mobile */
  .sidebar-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    z-index: 999;
    animation: fadeIn 0.3s ease;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ===== HOVER PERFORMANCE OPTIMIZATIONS ===== */

/*
  Ces styles optimisent les performances hover pour éviter les chutes de FPS.
  Ils suppriment ou simplifient les effets coûteux.
*/

/* GLOBAL PERFORMANCE OPTIMIZATION */
/* Disable all expensive effects globally for maximum performance */
* {
  /* Force disable expensive properties on all elements */
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
  transform: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* Only allow basic background color changes for interactivity */
button:hover,
.button:hover,
.btn:hover,
.nav-item:hover,
.clickable:hover {
  /* Only the fastest CSS property to animate */
  background-color: rgba(185, 28, 28, 0.2) !important;
  background-color: var(--hover-bg, rgba(185, 28, 28, 0.2)) !important;
}

/* Disable expensive hover effects globally on low-end devices */
.low-end-device *:hover {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Remove expensive transforms on hover */
*:hover {
  /* Disable transforms that cause layout recalculation */
  transform: none !important;
}

/* Optimize sidebar hover specifically */
.sidebar-optimized *:hover {
  transition: none !important;
  will-change: auto !important;
}

/* Fast hover for navigation items */
.nav-item-fast:hover {
  background-color: rgba(185, 28, 28, 0.25) !important;
  transition: none !important;
}

/* Optimize card hover effects */
.card-optimized:hover {
  /* Only change background - no transforms or shadows */
  background-color: rgba(255, 255, 255, 0.05) !important;
  transition: none !important;
}

/* Remove expensive backdrop filters on hover */
*:hover {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* Optimize link hover effects */
a:hover {
  transition: color 0.05s ease !important;
  /* Only animate color - very fast */
}

/* Fast hover for tier badges */
.tier-badge-fast:hover {
  opacity: 1 !important;
  transition: none !important;
}

/* Disable box-shadow on hover for better performance */
*:hover {
  box-shadow: none !important;
}

/* Re-enable only essential shadows with performance optimization */
.essential-shadow:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transition: none !important;
}

/* Performance mode for reduced motion users */
@media (prefers-reduced-motion: reduce) {
  *:hover {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* Mobile hover optimizations */
@media (max-width: 768px) {
  /* Disable hover effects on mobile for better performance */
  *:hover {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
  
  /* Touch-friendly interactions only */
  button:active,
  .button:active {
    background-color: rgba(185, 28, 28, 0.3) !important;
    transition: none !important;
  }
}

/* CPU-intensive effects disabling */
.performance-mode *:hover {
  /* Disable all expensive CSS properties */
  filter: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-clip-path: none !important;
          clip-path: none !important;
  -webkit-mask: none !important;
          mask: none !important;
}

/* GPU acceleration optimization */
.gpu-optimized:hover {
  /* Use only GPU-accelerated properties */
  opacity: 0.8 !important;
  transition: opacity 0.05s ease !important;
  /* Avoid layout-triggering properties */
}

/* Remove will-change on hover to prevent memory issues */
*:hover {
  will-change: auto !important;
}

/* Fast focus states */
*:focus {
  outline: 2px solid var(--secondary) !important;
  outline-offset: 2px !important;
  transition: none !important;
}

/* Optimize text selection */
::selection {
  background-color: var(--secondary) !important;
  color: white !important;
}

/* Remove expensive pseudo-element animations */
*:hover::before,
*:hover::after {
  animation: none !important;
  transition: none !important;
}

/* ===== END HOVER PERFORMANCE OPTIMIZATIONS ===== */

/* ===== ULTRA PERFORMANCE MODE - DISABLE ALL ANIMATIONS ===== */

/*
  Ce fichier contient les styles les plus agressifs pour désactiver 
  COMPLÈTEMENT toutes les animations et transitions qui peuvent causer 
  des chutes de FPS lors du hover ou de l'interaction.
*/

/* FORCE DISABLE ALL ANIMATIONS GLOBALLY */
*,
*::before,
*::after,
*:hover,
*:focus,
*:active {
  /* Désactiver complètement toutes les propriétés coûteuses */
  transition: none !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 4px !important; /* Fixed border-radius to avoid recalculation */
}

/* Override styled-components and CSS-in-JS animations */
[class*="styled"],
[data-styled],
[style*="transition"],
[style*="animation"],
[style*="transform"] {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* Framer Motion overrides */
.framer-motion div,
[data-framer-component],
[data-motion-component],
[data-framer-appear],
[data-framer-exit] {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
}

/* Disable CSS Grid/Flexbox animations */
.grid,
.flex,
[style*="display: grid"],
[style*="display: flex"] {
  transition: none !important;
}

/* Button optimizations - only allow background color change */
button,
.button,
.btn,
input[type="button"],
input[type="submit"],
[role="button"] {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  
  /* Only allow very fast background color change for feedback */
  &:hover {
    background-color: rgba(185, 28, 28, 0.2) !important;
    transition: none !important;
  }
  
  &:active {
    background-color: rgba(185, 28, 28, 0.3) !important;
    transform: none !important;
  }
}

/* Navigation optimizations */
nav *,
.navigation *,
.sidebar *,
.nav-item,
.menu-item {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

/* Card/Container optimizations */
.card,
.container,
.component,
[class*="Card"],
[class*="Container"] {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  
  &:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    transition: none !important;
  }
}

/* List/Grid item optimizations */
.list-item,
.grid-item,
[class*="Item"],
[class*="Tile"] {
  transition: none !important;
  transform: none !important;
  
  &:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
  }
}

/* Input optimizations */
input,
textarea,
select,
.input {
  transition: none !important;
  box-shadow: none !important;
  
  &:focus {
    box-shadow: none !important;
    outline: 2px solid rgba(185, 28, 28, 0.5) !important;
    transition: none !important;
  }
}

/* Modal/Popup optimizations */
.modal,
.popup,
.tooltip,
.dropdown,
[role="dialog"],
[role="tooltip"] {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* Disable scroll animations */
html {
  scroll-behavior: auto !important;
}

/* Media query overrides */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* CSS Variables override for transitions */
:root {
  --transition-fast: none !important;
  --transition-med: none !important;
  --transition-slow: none !important;
  --animation-duration: 0ms !important;
}

/* React specific optimizations */
[data-react-component],
[data-testid],
.react-component {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* Specific library overrides */
.chakra-ui *,
.mui *,
.ant *,
.bootstrap * {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* SIDEBAR EXCEPTION - Allow background and backdrop-filter */
.sidebar-optimized,
[data-sidebar],
aside {
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll !important;
  background: initial !important; /* Don't override background */
  -webkit-backdrop-filter: initial !important;
          backdrop-filter: initial !important; /* Don't override backdrop-filter */
  box-shadow: none !important;
  box-shadow: initial !important; /* Don't override box-shadow for sidebar */
}

/* Force immediate state changes */
.loading,
.spinner,
.skeleton {
  animation: none !important;
}

/* Disable opacity transitions */
.fade,
.fade-in,
.fade-out,
[class*="fade"] {
  transition: none !important;
  opacity: 1 !important;
}

/* Performance class for manual application */
.no-animations,
.performance-mode {
  * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* Base CSS pour l'application avec support mobile amélioré et palette élégante */

/* Import du système responsive global */
/* Import des optimisations de hover pour éviter les chutes de FPS */
/* Import du mode ultra-performance pour désactiver toutes les animations */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* Supprimer le highlight au tap sur mobile */
  /* Performance optimizations - disable expensive hover by default */
  transition: none !important;
  will-change: auto !important;
}

/* Critical rendering optimization */
html, body {
  height: 100%;
  background-color: #0f0f10 !important; /* Force background for FCP */
  font-family: 'Poppins', sans-serif;
  color: #e8e8e8;
  overflow-x: hidden;
  /* Performance optimizations - conservative approach */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  min-height: 100vh;
  background-color: #0f0f10;
}

/* Variables CSS pour mobile */
:root {
  --vh: 1vh; /* Variable pour fix viewport mobile */
}

/* Permet de définir des styles basés sur le touchscreen vs mouse */
@media (hover: hover) and (pointer: fine) {
  /* Styles pour les appareils avec hover (souris) */
}

@media (hover: none) and (pointer: coarse) {
  /* Styles pour les appareils tactiles */
}

/* Thème sombre (défaut) - Palette élégante */

/* Permet de définir des styles basés sur le touchscreen vs mouse */
@media (hover: hover) and (pointer: fine) {
  /* Styles pour les appareils avec hover (souris) */
}

@media (hover: none) and (pointer: coarse) {
  /* Styles pour les appareils tactiles */
}

/* Thème sombre (défaut) - Palette élégante */
:root {
  /* Palette de couleurs principale - Élégante */
  --primary-dark: #0f0f10;        /* Noir profond (fond principal) */
  --primary: #1a1618;             /* Bordeaux très foncé */
  --secondary: #d4af37;           /* Or élégant */
  --secondary-light: #e8c547;     /* Or plus clair/accent */
  --tertiary: #2a1f22;            /* Fond secondaire (bordeaux foncé) */
  --text-light: #e8e8e8;          /* Texte clair */
  --text-dim: #a8a8a8;            /* Texte atténué */
  --card-bg: #2a1f22;             /* Fond de carte (bordeaux foncé) */
  
  /* Couleurs d'accent */
  --accent1: #8b6914;          /* Bronze/or foncé pour les accents UI */
  --accent2: #5d4e0f;          /* Bronze encore plus foncé */
  --accent3: #d4af37;          /* Or premium pour les éléments importants */
    /* Couleurs des tiers - Harmonisées avec le thème Monk rouge/noir */
  --tier-s-plus: #FF0000;       /* Rouge pur Monk (couleur signature) */
  --tier-s: #DC2626;            /* Rouge vif */
  --tier-a: #C89B3C;            /* Or terni/bronze (complément du rouge) */
  --tier-b: #8B7355;            /* Bronze foncé/brun */
  --tier-c: #5D4E37;            /* Brun foncé */
  --tier-d: #3C3C3C;            /* Gris foncé (presque noir) */
  
  /* Couleurs sémantiques */
  --success: #10B981;           /* Vert (moins vif pour rester dans le thème) */
  --warning: #F59E0B;           /* Orange/ambre */
  --danger: #DC2626;            /* Rouge danger */
  
  /* Ombres */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  
  /* Animations */
  --transition-fast: 0.2s ease;
  --transition-med: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Typographie */
  --font-primary: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Roboto Mono', monospace;
  
  /* Tailles d'espacement */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  
  /* Rayons de bordure */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-round: 50%;  /* Z-index - Optimisés pour mobile avec corrections critiques */  --z-tooltip: 10;
  --z-header: 90;              /* Réduit pour rester sous la sidebar */
  --z-sidebar: 100;            /* Augmenté pour être au-dessus du header */
  --z-mobile-nav: 350;         /* Augmenté de 300 à 350 */
  --z-mobile-panel: 400;       /* Augmenté de 350 à 400 */
  --z-modal: 500;              /* Augmenté de 400 à 500 */
  --z-overlay: 1000;
}

/* Thème clair - Noxus */
.theme-light {
  /* Palette de couleurs principale */
  --primary-dark: #F5F7FA;       /* Fond principal (blanc cassé) */
  --primary: #7F1D1D;            /* Rouge foncé Noxus */
  --secondary: #B91C1C;          /* Rouge vif Noxus (inchangé) */
  --secondary-light: #EF4444;    /* Rouge plus clair */
  --tertiary: #E5E7EB;           /* Fond secondaire (gris clair) */
  --text-light: #1F2937;         /* Texte foncé */
  --text-dim: #4B5563;           /* Texte atténué */
  --card-bg: #FFFFFF;            /* Fond de carte */
  
  /* Ombres - plus subtiles pour le thème clair */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
}

html {
  font-size: 16px; /* Taille de base pour les tailles rem */
}

body {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-primary);
  background-color: #0f0f10;
  background-color: var(--primary-dark);
  color: #e8e8e8;
  color: var(--text-light);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-y: hidden; /* Empêcher le scroll au niveau du body */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  height: 100vh; /* Hauteur fixe pour empêcher le scroll */
  /* Support pour les notches sur iPhone et les interfaces mobiles */
  padding-top: env(safe-area-inset-top, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
}

/* Empêcher le pull-to-refresh sur iOS */
html, body {
  overscroll-behavior-y: none;
}

/* Style d'input optimisé pour mobile */
input[type="text"], input[type="search"], input[type="number"] {
  font-size: 16px; /* Empêche le zoom automatique sur iOS */
  -webkit-appearance: none;
          appearance: none; /* Supprime les styles natifs */
  border-radius: 8px;
  border-radius: var(--radius-md);
}

/* Amélioration de la réactivité au toucher et optimisations mobiles */
button, a, .clickable, [role="button"] {
  touch-action: manipulation; /* Améliore la réactivité tactile */
  user-select: none; /* Empêche la sélection de texte sur mobile */
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(185, 28, 28, 0.2); /* Couleur de tap personnalisée */
}

/* Optimisation des inputs pour mobile */
input[type="text"], input[type="search"], input[type="number"], select {
  font-size: 16px; /* Empêche le zoom automatique sur iOS */
  appearance: none; /* Supprime les styles natifs */
  border-radius: 8px;
  border-radius: var(--radius-md);
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Amélioration du scroll sur mobile - optimisé */
@media (max-width: 768px) {
  /* Réduction des animations sur appareils moins puissants */
  @media (max-width: 480px) {
    .fade-in {
      animation-duration: 0.2s;
    }
    
    .slide-up {
      animation-duration: 0.2s;
    }
  }
}

/* Adaptation des tailles sur petit écran */
@media (max-width: 480px) {
  :root {
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-xxl: 32px;
  }
  
  html {
    font-size: 14px; /* Réduction légère de la taille de base pour les écrans très étroits */
  }
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100vh; /* Hauteur fixe */
  width: 100%;
  overflow: hidden; /* Empêcher le scroll au niveau du root */
}

/* Scrollbar personnalisée - Thème Noxus - Plus discrète */
::-webkit-scrollbar {
  width: 6px; /* Réduire la largeur pour être plus discret */
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent; /* Rendre la track transparente */
}

::-webkit-scrollbar-thumb {
  background: rgba(185, 28, 28, 0.4); /* Moins opaque pour être plus discret */
  border-radius: 8px;
  border-radius: var(--radius-md);
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(185, 28, 28, 0.7); /* Plus visible au hover seulement */
}

/* Masquer la scrollbar sur les conteneurs principaux pour une apparence plus propre */
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Classes d'utilité */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  padding: 0 var(--space-lg);
}

/* Animations globales */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ===== FAST ANIMATIONS & PERFORMANCE OPTIMIZATIONS ===== */

/* Ultra-fast animation classes for improved UI responsiveness */
.fast-fade-in {
  animation: fastFadeIn 0.15s ease-out forwards;
}

.fast-slide-up {
  animation: fastSlideUp 0.2s ease-out forwards;
}

.fast-scale-in {
  animation: fastScaleIn 0.15s ease-out forwards;
}

.fast-slide-left {
  animation: fastSlideLeft 0.2s ease-out forwards;
}

.fast-slide-right {
  animation: fastSlideRight 0.2s ease-out forwards;
}

/* Fast keyframes - optimized for 60fps */
@keyframes fastFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes fastScaleIn {
  from { 
    opacity: 0; 
    transform: scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}

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

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

/* Performance optimization classes */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.smooth-transform {
  transform-style: preserve-3d;
}

.contain-layout {
  contain: layout;
}

.contain-paint {
  contain: paint;
}

/* Optimized transitions */
.transition-fast {
  transition: all 0.15s ease-out;
}

.transition-ultra-fast {
  transition: all 0.1s ease-out;
}

/* Sidebar optimizations */
.sidebar-optimized {
  will-change: width, transform;
  contain: layout style;
}

.sidebar-optimized:hover {
  transform: translateZ(0); /* Force GPU layer */
}

/* Content optimizations */
.content-optimized {
  will-change: margin-left, width;
  contain: layout;
}

/* Navigation optimizations */
.nav-item-optimized {
  will-change: background-color, transform;
  transform: translateZ(0);
}

.nav-item-optimized:hover {
  transform: translateZ(0) scale(1.02);
}

/* Page transition optimizations */
.page-transition {
  will-change: opacity, transform;
  transform: translateZ(0);
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
  /* Reduce animation complexity on mobile */
  .mobile-optimized * {
    animation-duration: 0.15s !important;
    transition-duration: 0.15s !important;
  }
  
  /* Disable heavy effects on mobile */
  .mobile-optimized .complex-shadow,
  .mobile-optimized .backdrop-blur {
    filter: none !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  
  /* Optimize scroll performance */
  .mobile-optimized {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
  }
}

/* Low performance device optimizations */
@media (max-width: 480px), (-webkit-max-device-pixel-ratio: 1.5), (max-resolution: 144dpi) {
  .low-performance * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  
  .low-performance .gpu-accelerated {
    transform: none;
    will-change: auto;
  }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .fast-fade-in,
  .fast-slide-up,
  .fast-scale-in,
  .fast-slide-left,
  .fast-slide-right {
    animation: none;
  }
  
  .transition-fast,
  .transition-ultra-fast {
    transition: none;
  }
  
  .gpu-accelerated {
    will-change: auto;
    transform: none;
  }
}

/* ===== END FAST ANIMATIONS ===== */

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Fast animations for better responsiveness */
.fast-fade-in {
  animation: fastFadeIn 0.15s ease-out forwards;
}

.fast-slide-up {
  animation: fastSlideUp 0.2s ease-out forwards;
}

.fast-scale-in {
  animation: fastScaleIn 0.15s ease-out forwards;
}

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

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

@keyframes fastScaleIn {
  from { 
    opacity: 0; 
    transform: scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}

/* GPU acceleration for performance-critical elements */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.smooth-transform {
  transform-style: preserve-3d;
}

/* Optimized transitions for better performance */
.fast-transition {
  transition: all 0.15s ease-out;
}

.ultra-fast-transition {
  transition: all 0.1s ease-out;
}

/* Low-end device optimizations */
.low-end-device * {
  animation-duration: 0.1s !important;
  transition-duration: 0.1s !important;
}

.low-end-device .complex-shadow {
  box-shadow: none !important;
}

.low-end-device .blur-effect {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  filter: none !important;
}

/* Reduced animations for performance */
.reduced-animations * {
  animation-duration: 0.05s !important;
  transition-duration: 0.05s !important;
}

.reduced-animations .motion-reduce {
  transform: none !important;
  animation: none !important;
}

/* Optimized sidebar performance */
.sidebar-optimized {
  will-change: width, transform;
  transform: translateZ(0);
}

.sidebar-optimized:hover {
  transition: width 0.2s ease-out;
}

/* Content wrapper optimization */
.content-wrapper-optimized {
  will-change: margin-left;
  transition: margin-left 0.2s ease-out;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
  .mobile-optimized * {
    animation-duration: 0.15s !important;
    transition-duration: 0.15s !important;
  }
  
  .mobile-optimized .heavy-animation {
    animation: none !important;
  }
  
  .mobile-optimized .complex-gradient {
    background: #0f0f10 !important;
    background: var(--primary-dark) !important;
  }
}

/* Hover optimizations for desktop */
@media (hover: hover) and (pointer: fine) {
  .hover-optimized:hover {
    transform: translateY(-2px);
    transition: transform 0.1s ease-out;
  }
}

/* Touch-friendly optimizations */
@media (hover: none) and (pointer: coarse) {
  .touch-optimized {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .touch-optimized:active {
    transform: scale(0.98);
    transition: transform 0.1s ease-out;
  }
}

/* Memory optimization classes */
.memory-efficient {
  contain: layout style paint;
}

.scroll-optimized {
  contain: layout;
  will-change: scroll-position;
}

/* Layout stability */
.layout-stable {
  contain: layout;
  min-height: 0;
}

/* Critical rendering path optimization */
.critical-content {
  contain: style layout;
  will-change: auto;
}

.non-critical-content {
  contain: layout style paint;
  visibility: visible;
}

/* Framer Motion optimizations */
.framer-optimized {
  will-change: transform, opacity;
  transform: translateZ(0);
}

.framer-optimized[data-framer-appear-id] {
  will-change: auto;
}

/* Performance monitoring styles */
.performance-monitor {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 9999;
  display: none;
}

.performance-monitor.show {
  display: block;
}

.performance-monitor.warning {
  background: rgba(255, 165, 0, 0.9);
  color: black;
}

.performance-monitor.critical {
  background: rgba(255, 0, 0, 0.9);
  color: white;
}

/* ===== END PERFORMANCE OPTIMIZATIONS ===== */