/**
 * RDConnect Performance Optimizations CSS
 * Version: 1.0.0
 * Date: 25 janvier 2026
 * 
 * Ce fichier contient des optimisations de performance
 * qui n'affectent PAS le design existant.
 * 
 * SAFE TO ADD - Ne casse rien, améliore seulement
 */

/* ============================================
   1. OPTIMISATIONS DE RENDU (will-change)
   ============================================ */

/* Header fixe - GPU acceleration */
.header-area {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Animations hamburger optimisées */
.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span::before,
.header-area .main-nav .menu-trigger span::after {
  will-change: transform, opacity;
}

/* Sidebar avec GPU */
.app-sidebar {
  will-change: transform;
  transform: translateZ(0);
}

/* ============================================
   2. LAZY LOADING & CRITICAL CSS
   ============================================ */

/* Images lazy load placeholder */
img[loading="lazy"] {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

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

img[loading="lazy"].loaded {
  animation: none;
  background: transparent;
}

/* ============================================
   3. FONT DISPLAY OPTIMIZATION
   ============================================ */

/* Éviter FOUT (Flash of Unstyled Text) */
.fas, .fa, .fab, .far,
[class*="fa-"],
[class*="ri-"] {
  font-display: block;
}

/* ============================================
   4. RÉDUCTION DES REFLOWS
   ============================================ */

/* Dimensions fixes pour éviter les shifts */
.header-area .logo img {
  width: auto;
  height: 45px;
  aspect-ratio: auto;
}

@media (max-width: 991px) {
  .header-area .logo img {
    height: 40px;
  }
}

@media (max-width: 576px) {
  .header-area .logo img {
    height: 35px;
  }
}

/* Cards avec dimensions stables */
.features-small-item {
  contain: layout style;
}

.team-item {
  contain: layout style;
}

.pricing-item {
  contain: layout style;
}

/* ============================================
   5. TOUCH OPTIMIZATIONS (Mobile)
   ============================================ */

/* Zone de touch plus grande sur mobile */
@media (max-width: 991px) {
  .header-area .main-nav .menu-trigger {
    min-width: 48px;
    min-height: 48px;
    touch-action: manipulation;
  }
  
  .header-area .main-nav .nav li a {
    min-height: 48px;
    touch-action: manipulation;
  }
  
  /* Désactiver le zoom sur double-tap pour les boutons */
  button, a, input, select, textarea {
    touch-action: manipulation;
  }
}

/* ============================================
   6. SCROLL PERFORMANCE
   ============================================ */

/* Scroll fluide mais performant */
html {
  scroll-behavior: smooth;
}

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

/* Contenu scrollable avec momentum iOS */
.app-sidebar,
.main-nav .nav {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ============================================
   7. DARK MODE PREPARATION (Future)
   ============================================ */

@media (prefers-color-scheme: dark) {
  /* Préparation pour le mode sombre - désactivé pour l'instant */
  /* body { background: #1a1a1a; color: #f0f0f0; } */
}

/* ============================================
   8. PRINT OPTIMIZATION
   ============================================ */

@media print {
  .header-area,
  .menu-trigger,
  footer,
  .app-sidebar {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }
}

/* ============================================
   9. FOCUS VISIBLE (Accessibilité)
   ============================================ */

/* Focus visible uniquement au clavier */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid #0891b2;
  outline-offset: 2px;
}

/* Skip link pour accessibilité */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #0891b2;
  color: white;
  padding: 8px 16px;
  z-index: 10000;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

/* ============================================
   10. FORM PERFORMANCE
   ============================================ */

/* Désactiver les autocomplete visuels pour perf */
input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}

/* Inputs avec bord stable */
input, select, textarea {
  box-sizing: border-box;
}