/* Performance et optimisations */

/* Optimisation des images */
img {
  loading: lazy;
  image-rendering: auto;
  image-rendering: optimizeQuality;
}

/* Images critiques (hero, logo) */
.critical-image {
  loading: eager !important;
}

/* Transitions optimisées */
.smooth-transition {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Optimisation des cartes */
.card, .box {
  contain: layout style;
}

/* Optimisation du scroll */
.scroll-container {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Optimisation des images de fond */
.hero-bg {
  background-attachment: local;
  background-size: cover;
  background-position: center;
}

/* Masquage d'éléments non-critiques */
.non-critical {
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}

/* Optimisation des grilles */
.columns {
  contain: layout;
}

/* Optimisation des animations */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Optimisation mobile */
@media (max-width: 768px) {
  .is-hidden-mobile {
    display: none !important;
  }
  
  /* Réduction de la complexité visuelle sur mobile */
  .card {
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
  }
}

/* Optimisation des polices */
@font-face {
  font-display: swap;
}

/* Cache des éléments hors écran */
.lazyload {
  opacity: 0;
  transition: opacity 0.3s;
}

.lazyload.loaded {
  opacity: 1;
}

/* Optimisation des images responsives */
.responsive-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Préchargement des ressources critiques */
.preload-critical {
  position: absolute;
  top: -9999px;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}