/* ============================================
   TIMELINE PROGRESSIVE - REMPLISSAGE AU SCROLL
   CLASSE INDÉPENDANTE POUR ÉVITER LES FILTRES
   ============================================ */

/* Désactiver TOUS les filtres sur la section process et ses enfants - SAUF la timeline */
.section_home-process {
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
}

/* Réactiver la timeline wrapper - FORCER l'affichage */
.section_home-process .process_content-right {
  position: relative !important;
  /* Désactiver les filtres sur le conteneur parent */
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
  isolation: isolate !important;
}

/* Classe indépendante pour éviter les filtres de la section - RÈGLE GLOBALE */
.timeline-independent,
.timeline-independent *,
.timeline-independent-bottom,
.timeline-independent-circles,
.timeline-independent-circle,
.timeline-progress {
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
  isolation: isolate !important; /* Crée un nouveau contexte d'empilement */
  will-change: auto !important;
  /* Ne pas désactiver transform car on en a besoin pour le positionnement */
}

/* Forcer l'isolation au niveau du wrapper */
.timeline-independent {
  isolation: isolate !important;
  contain: layout style paint !important;
  transform: translateZ(0) !important; /* Force un nouveau contexte de rendu */
  backface-visibility: hidden !important;
}

/* Forcer la couleur bleue sur tous les éléments de la timeline indépendante */
.timeline-independent-bottom {
  background-color: rgba(29, 68, 161, 0.2) !important;
}

.timeline-progress {
  background-color: #1d44a1 !important;
}

.timeline-independent-circle {
  background-color: #1d44a1 !important;
  box-shadow: 0 0 0 2px #1d44a1 !important;
}

.section_home-process .process_content-right .timeline-wrapper.timeline-independent {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 4px !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  overflow: visible !important;
  z-index: 100 !important;
  /* Désactiver tous les filtres pour garder la couleur bleue */
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
}

/* Désactiver les filtres sur tous les enfants de la timeline */
.section_home-process .timeline-wrapper * {
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
}

/* Ligne de base de la timeline (fond) - Classe indépendante */
.timeline-independent-bottom,
.section_home-process .timeline-bottom.timeline-independent-bottom {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  min-height: 500px !important; /* Hauteur minimale pour être visible */
  background-color: rgba(29, 68, 161, 0.5) !important; /* Bleu plus visible pour test */
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  height: 100% !important;
  /* Désactiver tous les filtres pour garder la couleur bleue */
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
}

/* Ligne de remplissage progressif (au-dessus) - Même couleur que les cartes - Classe indépendante */
.timeline-progress,
.section_home-process .timeline-progress {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 0%; /* Sera mis à jour par JavaScript */
  background-color: #1d44a1 !important; /* Même bleu que les cartes (var(--brand-primary)) */
  transform: translateX(-50%);
  z-index: 2;
  transition: height 0.3s ease-out;
  border-radius: 2px;
  /* Désactiver tous les filtres pour garder la couleur bleue */
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
}

/* Cercles de timeline - MASQUÉS */
.section_home-process .circles-wrapper,
.timeline-independent-circles {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Cercles individuels - Même couleur que les cartes - Classe indépendante */
.timeline-independent-circle,
.section_home-process .timeline-circle.timeline-independent-circle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 12px;
  height: 12px;
  background-color: #1d44a1 !important; /* Même bleu que les cartes */
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 2px #1d44a1 !important; /* Même bleu que les cartes */
  flex-shrink: 0;
  /* Désactiver tous les filtres pour garder la couleur bleue */
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
}

/* Masquer le timeline-mask original */
.section_home-process .timeline-mask {
  display: none !important;
}

/* Responsive - ajuster sur mobile */
@media (max-width: 768px) {
  .section_home-process .process_content-right .timeline-wrapper {
    width: 3px;
  }
  
  .section_home-process .timeline-bottom,
  .section_home-process .timeline-progress {
    width: 3px;
  }
  
  .section_home-process .timeline-circle {
    width: 10px;
    height: 10px;
  }
}