/**
 * Animations d'apparition pour les cartes de la section "Qui sommes-nous"
 * Priorité maximale pour surcharger tous les autres CSS
 * Fallback automatique après 3 secondes si JavaScript ne se charge pas
 */

/* ===== TITRE ET SOUS-TITRE ===== */
/* État initial */
#about .section-badge,
#about .section-title,
#about .section-subtitle,
.about-section .section-badge,
.about-section .section-title,
.about-section .section-subtitle {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity 0.8s ease, transform 0.8s ease !important;
  /* Fallback automatique après 3s */
  animation: fallback-appear 0.1s ease 3s forwards !important;
}

@keyframes fallback-appear {
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* État visible */
#about .section-badge.visible,
.about-section .section-badge.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0s !important;
}

#about .section-title.visible,
.about-section .section-title.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.2s !important;
}

#about .section-subtitle.visible,
.about-section .section-subtitle.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.4s !important;
}

/* ===== CARTES ===== */
/* État initial - cartes invisibles - Sélecteurs spécifiques */
#about .mission-text,
#about .service-item,
#about .value-card,
.about-section .mission-text,
.about-section .service-item,
.about-section .value-card {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.6s ease, transform 0.6s ease !important;
  /* Fallback automatique après 3s */
  animation: fallback-appear 0.1s ease 3s forwards !important;
}

/* État visible - Sélecteurs spécifiques */
#about .mission-text.visible,
#about .service-item.visible,
#about .value-card.visible,
.about-section .mission-text.visible,
.about-section .service-item.visible,
.about-section .value-card.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Délais progressifs pour un effet cascade */
#about .mission-text:nth-child(1),
.about-section .mission-text:nth-child(1) {
  transition-delay: 0.1s !important;
}

#about .mission-text:nth-child(2),
.about-section .mission-text:nth-child(2) {
  transition-delay: 0.2s !important;
}

#about .service-item:nth-child(1),
.about-section .service-item:nth-child(1) {
  transition-delay: 0.1s !important;
}

#about .service-item:nth-child(2),
.about-section .service-item:nth-child(2) {
  transition-delay: 0.2s !important;
}

#about .service-item:nth-child(3),
.about-section .service-item:nth-child(3) {
  transition-delay: 0.3s !important;
}

#about .service-item:nth-child(4),
.about-section .service-item:nth-child(4) {
  transition-delay: 0.4s !important;
}

#about .value-card:nth-child(1),
.about-section .value-card:nth-child(1) {
  transition-delay: 0.1s !important;
}

#about .value-card:nth-child(2),
.about-section .value-card:nth-child(2) {
  transition-delay: 0.2s !important;
}

#about .value-card:nth-child(3),
.about-section .value-card:nth-child(3) {
  transition-delay: 0.3s !important;
}

/* Effet hover subtil */
#about .mission-text.visible:hover,
#about .service-item.visible:hover,
#about .value-card.visible:hover,
.about-section .mission-text.visible:hover,
.about-section .service-item.visible:hover,
.about-section .value-card.visible:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 30px rgba(138, 76, 255, 0.3) !important;
  transition: all 0.3s ease !important;
}