/**
 * Fix Continuity Timeline - Assurer que le fil conducteur ne se coupe jamais
 * Correction spécifique pour la continuité parfaite entre tous les événements
 */

/* === Correction Ligne Continue === */
.timeline-horizontal-wrapper {
  /* Forcer la largeur minimale pour couvrir tous les items */
  min-width: 100%;
}

.timeline-horizontal-line {
  /* S'assurer que la ligne couvre absolument tout */
  width: 100% !important;
  min-width: 100%;
  /* Calculer la largeur réelle basée sur le contenu */
  left: 0 !important;
  right: 0 !important;
}

/* === Correction Connecteurs === */
.timeline-horizontal-item {
  /* Position relative pour les connecteurs absolus */
  position: relative;
}

.timeline-horizontal-connector {
  /* Calcul précis pour couvrir tout l'espace entre les items */
  position: absolute;
  top: 80px;
  /* Commencer après le centre de l'icône actuelle */
  left: calc(50% + 28px);
  /* Aller jusqu'au centre de l'icône suivante */
  right: calc(-50% + 28px);
  /* Forcer la largeur minimale */
  min-width: calc(200px - 56px); /* Largeur item - 2x rayon icône */
  height: 3px;
  z-index: 1;
}

/* Ligne de fond continue pour chaque connecteur */
.timeline-horizontal-connector::before {
  content: '';
  position: absolute;
  left: 0;
  right: 20px; /* Laisser place à la flèche */
  top: 0;
  height: 3px;
  background: var(--somef-primary, #d22741);
  z-index: 0;
  /* Assurer la continuité visuelle */
  border-radius: 0;
}

/* === Overlay pour garantir la continuité === */
.timeline-horizontal-items::after {
  content: '';
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--somef-primary, #d22741) 0%,
    var(--somef-primary, #d22741) 50%,
    var(--somef-secondary, #2b3c45) 100%
  );
  z-index: 0;
  pointer-events: none;
  /* Masquer derrière les icônes mais visible entre */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent calc(28px + var(--spacing-sm)),
    black calc(28px + var(--spacing-sm)),
    black calc(100% - 28px - var(--spacing-sm)),
    transparent calc(100% - 28px - var(--spacing-sm)),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent calc(28px + var(--spacing-sm)),
    black calc(28px + var(--spacing-sm)),
    black calc(100% - 28px - var(--spacing-sm)),
    transparent calc(100% - 28px - var(--spacing-sm)),
    transparent 100%
  );
}

/* === Alternative : Ligne continue simple === */
.timeline-horizontal-line-continuous {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  min-width: 100%;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--somef-primary, #d22741) 0%,
    var(--somef-primary, #d22741) 50%,
    var(--somef-secondary, #2b3c45) 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* Masquer la ligne derrière les icônes */
.timeline-horizontal-icon-wrapper {
  position: relative;
  z-index: 2;
  background: var(--color-surface, #ffffff);
}

/* === Responsive Fix === */
@media (max-width: 768px) {
  .timeline-horizontal-connector {
    min-width: calc(160px - 44px); /* Ajuster pour mobile */
  }
  
  .timeline-horizontal-items::after {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      transparent calc(22px + var(--spacing-xs)),
      black calc(22px + var(--spacing-xs)),
      black calc(100% - 22px - var(--spacing-xs)),
      transparent calc(100% - 22px - var(--spacing-xs)),
      transparent 100%
    );
  }
}