/* =======================================================================
   File: components/timeline.css                                                   
   Author: Émile SNYERS                                                    
   Date: 2025-08-16                                                       
   Version: v1.0.0                                                 
   Purpose: Frise chronologique (ligne médiane et cartes alternées).                                                  
   Notes: 
   - Code organisé par modules pour un projet plus professionnel.
   - Commentaires présents en tête de fichier et avant chaque bloc.
   - Les couleurs et styles initiaux sont conservés via des variables.
   ======================================================================= */
.timeline { position: relative; padding: 20px 0; margin: 20px 0; }
.timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: var(--aperture-orange); transform: translateX(-50%);
  animation: growHeight 1s ease-out;
}
.timeline-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; position: relative; opacity: 0; }
.timeline-item.visible { animation: fadeIn 0.8s ease-out forwards; }
.timeline-item:nth-child(even) { flex-direction: row-reverse; }
.timeline-content {
  width: 45%; background: rgba(0, 0, 0, 0.4); padding: 20px; border-radius: var(--radius-md);
  border: 1px solid var(--aperture-light-grey); transition: all 0.3s ease; position: relative; overflow: hidden;
}
.timeline-content::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.1), transparent);
  transition: left 0.5s ease;
}
.timeline-content:hover::before { left: 100%; }
.timeline-content:hover { transform: scale(1.02); background: rgba(0, 0, 0, 0.6); box-shadow: 0 5px 20px rgba(78, 205, 196, 0.3); }
.timeline-marker {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; background: var(--aperture-orange);
  border: 3px solid var(--aperture-dark); border-radius: 50%;
  z-index: 1; animation: pulseGlow 2s ease-in-out infinite;
}
.timeline-date { font-size: 0.9em; color: var(--aperture-blue); margin-bottom: 5px; font-family: 'Courier New', monospace; }
/* ===== End of components/timeline.css | Author: Émile SNYERS | Date: 2025-08-16 | v1.0.0 ===== */