/* ============================================
   ANIMATIONS — Définitions des mouvements
   Transitions et keyframes
   ============================================ */

/* ============================================
   FADE-IN — Animation d'apparition progressive (Scroll)
   Les éléments apparaissent quand scroll visible
   ============================================ */

/* État initial : caché + bas */
.fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 0.55s ease, transform 0.5s ease;
}

/* État visible : opaque + normal */
.fade-in.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ============================================
   NOUVEAU : ANIMATIONS LATÉRALES (Chargement page)
   Pour la section "Qui sommes nous"
   ============================================ */

/* 1. Venir de la gauche */
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-60px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 2. Venir de la droite */
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Classes utilitaires à ajouter dans le HTML */
.fade-in-left {
  animation: slideInLeft 0.7s ease-out forwards;
  opacity: 0;
}

.fade-in-right {
  animation: slideInRight 0.7s ease-out forwards;
  opacity: 0;
}

/* Délais pour synchroniser (optionnel) */
.delay-200 {
  animation-delay: 0.2s;
}

/* ============================================
   DÉLAIS EN CASCADE — Stagger animation
   ============================================ */

.trust-grid .trust-card:nth-child(1),
.services-grid .service-card:nth-child(1),
.reals-grid .real-card:nth-child(1),
.valeurs-grid .valeur-card:nth-child(1),
.orga-grid .orga-card:nth-child(1) { 
  transition-delay: 0.05s; 
}

.trust-grid .trust-card:nth-child(2),
.services-grid .service-card:nth-child(2),
.reals-grid .real-card:nth-child(2),
.valeurs-grid .valeur-card:nth-child(2),
.orga-grid .orga-card:nth-child(2) { 
  transition-delay: 0.15s; 
}

.trust-grid .trust-card:nth-child(3),
.services-grid .service-card:nth-child(3),
.valeurs-grid .valeur-card:nth-child(3),
.orga-grid .orga-card:nth-child(3) { 
  transition-delay: 0.25s; 
}

.services-grid .service-card:nth-child(4),
.valeurs-grid .valeur-card:nth-child(4),
.orga-grid .orga-card:nth-child(4) { 
  transition-delay: 0.35s; 
}

/* ============================================
   HERO ANIMATION — Entrée du héros
   ============================================ */

.hero__badge { 
  animation: fadeDown 0.5s ease 0.1s both;
}

.hero h1 { 
  animation: fadeDown 0.5s ease 0.2s both;
}

.hero__sub { 
  animation: fadeDown 0.5s ease 0.35s both;
}

.hero__ctas { 
  animation: fadeDown 0.5s ease 0.5s both;
}

@keyframes fadeDown {
  from { 
    opacity: 0; 
    transform: translateY(-12px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0);
  }
}

/* ============================================
   HAMBURGER ANIMATION — Menu mobile
   ============================================ */

.hamburger.active span:nth-child(1) { 
  transform: translateY(7px) rotate(45deg); 
}

.hamburger.active span:nth-child(2) { 
  opacity: 0; 
}

.hamburger.active span:nth-child(3) { 
  transform: translateY(-7px) rotate(-45deg); 
}

/* ============================================
   ANIMATIONS PROFESSIONNELLES — Page à propos
   Scale-up, float, slide, counter animations
   ============================================ */

/* Scale-up au survol pour les cartes */
@keyframes scaleUp {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Float : léger mouvement de flottement */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Slide down : glissement vers le bas */
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apparition avec rotation subtile */
@keyframes rotateIn {
  0% {
    opacity: 0;
    transform: rotateY(90deg) translateX(30px);
  }
  100% {
    opacity: 1;
    transform: rotateY(0) translateX(0);
  }
}

/* Slide bottom : glissement depuis le bas */
@keyframes slideInBottom {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Flip in : retournement 3D */
@keyframes flipInX {
  0% {
    opacity: 0;
    transform: rotateX(90deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0);
  }
}

/* Bounce in : entrée avec rebond */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulse : pulsation légère */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Classes d'animation pour les cartes de valeurs avec bounce */
.valeur-card {
  animation: bounceIn 0.7s ease-out forwards;
  opacity: 0;
}

.valeur-card:nth-child(1) { animation-delay: 0.05s; }
.valeur-card:nth-child(2) { animation-delay: 0.15s; }
.valeur-card:nth-child(3) { animation-delay: 0.25s; }
.valeur-card:nth-child(4) { animation-delay: 0.35s; }

/* Hover effect : float animation */
.valeur-card:hover {
  animation: float 2s ease-in-out infinite !important;
}

/* Timeline items avec entrée décalée */
.timeline-item {
  animation: slideDown 0.6s ease-out forwards;
  opacity: 0;
}

.timeline-item:nth-child(1) { animation-delay: 0.05s; }
.timeline-item:nth-child(2) { animation-delay: 0.15s; }
.timeline-item:nth-child(3) { animation-delay: 0.25s; }
.timeline-item:nth-child(4) { animation-delay: 0.35s; }
.timeline-item:nth-child(5) { animation-delay: 0.45s; }

/* Cartes historique avec animation flip */
.history-card {
  animation: flipInX 0.6s ease-out forwards;
  opacity: 0;
}

.history-card:nth-child(1) { animation-delay: 0.1s; }
.history-card:nth-child(2) { animation-delay: 0.25s; }
.history-card:nth-child(3) { animation-delay: 0.4s; }

/* Cartes organisation avec animation depuis le bas */
.orga-card {
  animation: slideInBottom 0.6s ease-out forwards;
  opacity: 0;
  transition: all 0.3s ease;
}

.orga-card:nth-child(1) { animation-delay: 0.05s; }
.orga-card:nth-child(2) { animation-delay: 0.15s; }
.orga-card:nth-child(3) { animation-delay: 0.25s; }
.orga-card:nth-child(4) { animation-delay: 0.35s; }

/* Hover : levée et ombre */
.orga-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

/* Animation pour le numéro (counter effect) */
.history-card__num {
  transition: all 0.3s ease;
}

.history-card:hover .history-card__num {
  color: var(--vert-fonce);
  transform: scale(1.15);
}

/* Page hero badges avec entrée fluide */
.page-hero .hero__badge {
  animation: slideDown 0.5s ease-out 0.1s both;
}

.page-hero h1 {
  animation: slideDown 0.5s ease-out 0.2s both;
}

.page-hero p {
  animation: slideDown 0.5s ease-out 0.3s both;
}