/* Transitions pour les boutons de filtre par catégorie */
.filter-btn {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* Transitions pour les cartes lors du filtrage */
.news-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  height: auto !important;
}

.news-card .card {
  height: auto !important;
}

.news-card.hidden {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease; /* Disparition rapide */
}

/* Shimmer effect pour les images en cours de chargement */
.card-img-wrapper {
  width: 100%;
  padding-bottom: 50%; /* Ratio 2:1 responsive - taille immédiate */
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  position: relative;
  overflow: hidden;
}

.card-img-wrapper.image-loaded {
  background: none;
  animation: none;
}

.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.card-img-wrapper.image-loaded img {
  opacity: 1;
}

/* Cartes avec hauteur automatique */
.news-card .card-body {
  height: auto !important;
  padding: 1rem 1.25rem;
}

.card-title {
  margin-bottom: 0 !important;
  font-size: 1rem !important;
}

/* Animation d'entrée pour les cartes avec décalage */
.news-card.fade-in {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  animation: slideInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

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

/* Animation pour le compteur de résultats */
.results-counter {
  transition: all 0.3s ease;
}

.results-counter.updating {
  transform: scale(1.1);
  color: #1e40af;
}

#news-grid {
  min-height: 75vh;
  transition: min-height 0.3s ease;
}