/* ===================================================================
   VARIABLES CSS NAVIGATION - ACLG 2026
   Architecture : PURE BURGER (Hamburger-First)
   Responsabilite : Variables communes pour TOUS les fichiers navigation
   Palette : Trust Premium Navy Gold Enrichi
   Migration : Trust Blue -> Navy Gold (2026-02-12)
   ================================================================== */

:root {
  /* Couleurs Navy Gold Premium Enrichi (palette officielle 2026) */
  --nav-navy-deep: #0a1628;
  --nav-navy-medium: #1e3a5f;
  --nav-navy-light: #2d4a6f;
  --nav-gold-primary: #c4a35a;
  --nav-gold-light: #d4b86a;
  --nav-gold-glow: rgba(196, 163, 90, 0.3);
  --nav-white: #ffffff;
  --nav-text-light: rgba(255, 255, 255, 0.9);
  --nav-text-muted: rgba(255, 255, 255, 0.7);

  /* Legacy aliases - backwards compatibility Trust Blue -> Navy Gold */
  /* WARNING: deprecated, migrate to --nav-navy-* / --nav-gold-* */
  --trust-blue-dark: var(--nav-navy-deep);
  --trust-blue: var(--nav-navy-medium);
  --trust-blue-light: var(--nav-navy-light);
  --trust-turquoise: var(--nav-gold-primary);
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-800: var(--nav-navy-light);
  --gray-900: var(--nav-navy-deep);
  --white: var(--nav-white);
  --black: #000000;

  /* Z-index stratifies (ordre strict PURE BURGER) */
  --z-header: 1000;              /* Header sticky minimaliste (logo + burger) */
  --z-urgencybar: 999;           /* Module Flywheel urgencybar (sous header) */
  --z-drawer-overlay: 9997;      /* Overlay Drawer Left (fond semi-transparent) */
  --z-drawer-sidebar: 9998;      /* Drawer Left sidebar UNIFIE (desktop + mobile) */
  --z-search-overlay: 10001;     /* Overlay fullscreen recherche (au-dessus de tout) */

  /* Spacing harmonise (eviter valeurs magiques) */
  --spacing-xs: 0.25rem;     /* 4px */
  --spacing-sm: 0.5rem;      /* 8px */
  --spacing-md: 1rem;        /* 16px */
  --spacing-lg: 1.5rem;      /* 24px */
  --spacing-xl: 2rem;        /* 32px */
  --spacing-2xl: 3rem;       /* 48px */

  /* Transitions standardisees (GPU-accelerated) */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 400ms ease-in-out;

  /* Breakpoints Mobile First */
  --breakpoint-mobile: 320px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;

  /* Dimensions fixes PURE BURGER */
  --header-height: 70px;         /* Header unifie (logo + burger uniquement) */
  --drawer-width-mobile: 100vw;  /* Drawer fullscreen sur mobile */
  --drawer-width-desktop: 420px; /* Drawer panneau gauche sur desktop */
  --search-overlay-padding: 2rem; /* Overlay fullscreen recherche */

  /* Bordures et radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* Ombres */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Polices */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */

  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}

/* ===================================================================
   MEDIA QUERIES BREAKPOINTS (Mobile First)
   ================================================================== */

/* Tablet et plus (768px+) */
@media (min-width: 768px) {
  :root {
    --drawer-width: var(--drawer-width-desktop);
  }
}

/* Desktop et plus (1024px+) */
@media (min-width: 1200px) {
  :root {
    --header-height: 80px; /* Header legerement plus grand sur desktop */
  }
}

/* ===================================================================
   ANIMATIONS GPU-ACCELERATED
   Architecture PURE BURGER : Pas de dropdowns flottants,
   seulement drawer slide et overlay fade
   ================================================================== */

@keyframes drawer-slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes overlay-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Preference utilisateur pour reduction mouvement */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}