.timeline-section { 
  padding: 4rem 0 8rem 0; 
  position: relative; 
  overflow: hidden; /* Prevent horizontal scroll */
}

.timeline-scroll-wrapper { 
  overflow: hidden; 
  height: 53vh; /* Responsive height that scales with viewport */
  min-height: 350px; /* Minimum height for very small screens */
  max-height: 500px; /* Maximum height for very large screens */
  position: relative; 
  padding-top: 70px;
}

.timeline-container { 
  width: 2000px; 
  height: 100%;
  position: relative;
  padding: 0 200px; /* Robust padding to prevent edge step cutoff */
}

.timeline-text-container { 
  position: absolute;
  z-index: 10;
}

/* Step text positioned dynamically based on curve height */
.timeline-text {
  color: white;
  z-index: 2;
  opacity: 0;
  transition: all 0.5s ease-out;
  /* Dynamic positioning based on curve - no fixed top */
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  /* Better text layout with improved spacing */
  width: 140px;
  text-align: left;
  /* Ensure text doesn't interfere with layout */
  pointer-events: none;
}

/* Special positioning for edge steps to prevent cutoff */
.timeline-text-container[data-step="1"] .timeline-text {
  /* First step: align left edge instead of center to prevent cutoff */
  left: 0 !important;
  transform: translateX(0) !important;
  width: 160px; /* Slightly wider for first step */
}

.timeline-text-container[data-step="4"] .timeline-text {
  /* Last step: align right edge instead of center */
  left: 100% !important;
  transform: translateX(-100%) !important;
  width: 160px; /* Slightly wider for last step */
}

/* Step number styling */
.step-number {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: left;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-number {
  opacity: 0;
  transform: translateY(10px);
}

.fade-in-number.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Step description styling - better layout for various text lengths */
.step-description {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  /* Responsive width that adapts to content */
  width: 220px;
  text-align: left;
  display: block;
  /* Better text breaking for French content */
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Enhanced visibility state for better animations */
.timeline-text.visible {
  opacity: 1 !important;
}

/* Special handling for edge steps visibility - Safari compatible */
.timeline-text-container[data-step="1"] .timeline-text.visible {
  transform: translateX(0) !important;
  /* Safari fix: prevent animation conflicts */
  -webkit-transform: translateX(0) !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.timeline-text-container[data-step="4"] .timeline-text.visible {
  transform: translateX(-100%) !important;
  /* Safari fix: prevent animation conflicts */
  -webkit-transform: translateX(-100%) !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Standard center positioning for middle steps */
.timeline-text-container:not([data-step="1"]):not([data-step="4"]) .timeline-text.visible {
  transform: translateX(-50%) translateY(0) !important;
}

/* SVG Dots styling with improved animations - using elegant mobile styling for all devices */
.timeline-dot-bg {
  transition: all 0.5s ease-out;
  r: 10; /* Larger, more elegant size from mobile */
  stroke-width: 3; /* Thicker, more defined border from mobile */
}

.timeline-dot-fill {
  /* Removed CSS transition to prevent flying effect - GSAP handles all animations */
  /* transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); */
  transform: scale(0);
  transform-origin: center;
  r: 8; /* Perfect circle size for better visual balance */
}

/* Ascending line styling with enhanced effects - using elegant mobile thickness for all devices */
.timeline-line-svg { 
  z-index: 1;
}

.timeline-line-progress {
  transition: stroke-dashoffset 0.1s linear;
  stroke-width: 4; /* Thicker, more visible line from mobile styling */
}

.timeline-line-bg {
  stroke-width: 4; /* Thicker, more visible line from mobile styling */
}

/* Animation states for revealed elements */
.timeline-text.visible {
  opacity: 1 !important;
}

.timeline-dot-fill.visible {
  opacity: 1 !important;
}

.timeline-dot-fill.filled {
  transform: scale(1) !important;
}

/* Effect for dots when faded (scroll up) */
.timeline-dot-fill.faded {
  opacity: 0.6 !important;
  transform: scale(1) !important;
}

/* All dots should have blue outline when active */
.timeline-dot-fill.filled {
  stroke: #1CA9C9 !important;
  stroke-width: 2 !important;
}

/* Enhanced Mobile Experience - Progressive Enhancement */

/* Tablet and smaller laptops */
@media (max-width: 1024px) {
  .timeline-text {
    width: 130px;
  }
  
  .step-description {
    width: 170px;
    font-size: 0.8rem;
    line-height: 1.4;
  }
}

/* Tablet portrait and mobile landscape */
@media (max-width: 768px) {
  .timeline-section {
   padding: 3rem 0 3rem 0 !important;

  }
  
  .timeline-scroll-wrapper {
    height: 50vh; /* Better height for tablet */
    min-height: 320px; /* Increased minimum for tablet */
    max-height: 400px; /* Increased maximum for tablet */
    margin-top: 3rem; /* Better spacing from content */
    padding-top: 50px; /* Added padding for text space */
  }
  
  .timeline-container {
    width: 180vw; /* Responsive width for tablet scroll */
  }
  
  /* Enhanced mobile text positioning */
  .timeline-text {
    width: 140px; /* Wider for better readability */
  }
  
  .timeline-text-container[data-step="1"] .timeline-text,
  .timeline-text-container[data-step="4"] .timeline-text {
    width: 150px; /* Even wider for edge steps */
  }
  
  .step-number {
    font-size: 1.1rem; /* Larger for better visibility */
    margin-bottom: 0.4rem;
    font-weight: 800; /* Bolder for mobile */
  }
  
  .step-description {
    font-size: 0.8rem; /* Larger than before */
    width: 140px;
    line-height: 1.5; /* Better line spacing */
    font-weight: 500; /* Slightly bolder for readability */
  }
  
  /* Larger, more touch-friendly dots */
  .timeline-dot-bg {
    r: 10; /* Larger touch target */
    stroke-width: 3; /* Thicker border for visibility */
  }
  
  .timeline-dot-fill {
    r: 7; /* Proportionally larger fill */
  }
  
  /* Enhanced line visibility on mobile */
  .timeline-line-progress,
  .timeline-line-bg {
    stroke-width: 4; /* Thicker line for mobile */
  }
}

/* Mobile portrait - Enhanced UX */
@media (max-width: 480px) {
  .timeline-section {
    padding: 3rem 0 2rem 0 !important;
  }
  
  .timeline-scroll-wrapper {
    height: 45vh; /* Increased viewport ratio for mobile portrait */
    min-height: 360px; /* Increased minimum for text visibility */
    max-height: 420px; /* Increased maximum for mobile screens */
    margin-top: 2rem;
    padding-top: 60px; /* Increased padding for text space */
  }
  
  .timeline-container {
    width: 1600px; /* Adjusted for mobile scroll feel */
    padding: 0 160px; /* Proportional padding for mobile */
  }
  
  /* Mobile-optimized text sizing */
  .timeline-text {
    width: 120px;
  }
  
  .timeline-text-container[data-step="1"] .timeline-text,
  .timeline-text-container[data-step="4"] .timeline-text {
    width: 130px;
  }
  
  .step-number {
    font-size: 1rem;
    margin-bottom: 0.3rem;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Better visibility */
    font-family: 'Forest';
  }
  
  .step-description {
    font-size: 0.75rem;
    width: 230px;
    line-height: 1.4;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Better visibility */
  }
  
  /* Mobile-optimized dots */
  .timeline-dot-bg {
    r: 8;
    stroke-width: 2.5;
  }
  
  .timeline-dot-fill {
    r: 5.5;
  }
  
  /* Mobile-optimized line */
  .timeline-line-progress,
  .timeline-line-bg {
    stroke-width: 3.5;
  }
}

/* Small mobile devices */
@media (max-width: 360px) {
  .timeline-section {
    padding: 5rem 0 3rem;
  }

  
  .timeline-scroll-wrapper {
    height: 42vh; /* Increased for small devices */
    min-height: 340px; /* Increased minimum for text visibility */
    max-height: 380px; /* Increased maximum for small screens */
    padding-top: 50px; /* Added padding for text space */
  }
  
  .timeline-container {
    width: 1400px;
    padding: 0 140px; /* Proportional padding for small mobile */
  }
  
  .timeline-text {
    width: 100px;
  }
  
  .timeline-text-container[data-step="1"] .timeline-text,
  .timeline-text-container[data-step="4"] .timeline-text {
    width: 110px;
  }
  
  .step-number {
    font-size: 0.95rem;
  }
  
  .step-description {
    font-size: 0.7rem;
    width: 100px;
    line-height: 1.3;
  }
  
  .timeline-dot-bg {
    r: 7;
  }
  
  .timeline-dot-fill {
    r: 5;
  }
}

/* Enhanced hover effects for interactive elements */
.timeline-dot-bg:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Mobile-specific interaction improvements */
@media (max-width: 768px) {
  /* Remove hover effects on mobile and replace with better touch feedback */
  .timeline-dot-bg:hover {
    transform: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  }
  
  /* Removed pulsing animation to prevent flying effect */
  /* .timeline-dot-fill.filled {
    animation: mobileDotPulse 2s ease-in-out infinite;
  } */
  
  /* Enhanced mobile scroll smoothness */
  .timeline-scroll-wrapper {
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    scroll-behavior: smooth;
  }
  
  /* Better touch target spacing */
  .timeline-text-container {
    min-height: 60px; /* Ensure adequate touch target area */
  }
  
  /* Mobile-specific text shadows for better readability */
  .timeline-text {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }
  
  /* Enhanced French text rendering on mobile */
  .step-description {
    /* Better French language support */
    word-spacing: 0.1em;
    letter-spacing: 0.02em;
    /* Improved hyphenation for French */
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 2;
  }
}

/* Mobile dot pulsing animation - removed to prevent flying effect */
/*
@keyframes mobileDotPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1; 
  }
  50% { 
    transform: scale(1.1); 
    opacity: 0.9; 
  }
}
*/

/* Smooth entrance animations */
@keyframes textFadeInUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.timeline-text.visible {
  animation: textFadeInUp 0.5s ease-out forwards;
}

/* Print styles (if needed) */
@media print {
  .timeline-section {
    padding: 2rem 0;
  }
  
  .timeline-scroll-wrapper {
    height: auto;
    overflow: visible;
  }
  
  .timeline-text {
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    width: auto;
    margin-bottom: 1rem;
  }
}

/* Animation de rivière qui coule à l'infini */
@keyframes flowingRiver {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flowingRiverReverse {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1000;
  }
}

/* Animation pour les particules qui coulent */
@keyframes flowingParticles {
  0% {
    transform: translateX(-100px) translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(100px) translateY(-20px);
    opacity: 0;
  }
}

/* Animation pour l'effet de vague */
@keyframes waveEffect {
  0%, 100% {
    transform: translateX(0) scaleY(1);
  }
  50% {
    transform: translateX(10px) scaleY(1.1);
  }
}

/* Animation pour l'effet de rivière qui coule */
@keyframes riverFlow {
  0% {
    stroke-dasharray: 0 1000;
  }
  50% {
    stroke-dasharray: 500 500;
  }
  100% {
    stroke-dasharray: 1000 0;
  }
}

/* Animation pour les bulles qui montent */
@keyframes bubbleRise {
  0% {
    transform: translateY(0) scale(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translateY(-10px) scale(1);
  }
  80% {
    opacity: 1;
    transform: translateY(-30px) scale(1.2);
  }
  100% {
    transform: translateY(-50px) scale(0);
    opacity: 0;
  }
}

/* Application de l'animation de rivière */
.timeline-line-progress {
  transition: stroke-dashoffset 0.1s linear;
  stroke-width: 4;
  /* animation: riverFlow 8s linear infinite; */
}

/* Ajout d'un effet de particules qui coulent */
.timeline-line-svg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(28, 169, 201, 0.3) 20%, 
    rgba(28, 169, 201, 0.6) 50%, 
    rgba(28, 169, 201, 0.3) 80%, 
    transparent 100%);
  /* animation: flowingParticles 4s linear infinite; */
  pointer-events: none;
  z-index: 2;
}

/* Effet de vague sur la ligne de fond */
.timeline-line-bg {
  stroke-width: 4;
  /* animation: waveEffect 3s ease-in-out infinite; */
}

/* Animation des points pour simuler le mouvement de l'eau */
/* .timeline-dot-fill.filled {
  animation: flowingRiver 6s linear infinite;
} */

/* Effet de brillance qui coule */
.timeline-line-svg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.1) 30%, 
    rgba(255, 255, 255, 0.3) 50%, 
    rgba(255, 255, 255, 0.1) 70%, 
    transparent 100%);
  /* animation: flowingParticles 6s linear infinite; */
  pointer-events: none;
  z-index: 3;
}

/* Effet de reflet sur la ligne pour simuler l'eau */
.timeline-line-progress::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.2) 20%, 
    rgba(255, 255, 255, 0.4) 50%, 
    rgba(255, 255, 255, 0.2) 80%, 
    transparent 100%);
  /* animation: flowingParticles 4s linear infinite; */
  pointer-events: none;
  z-index: 4;
}

/* Animation plus fluide pour mobile */
@media (max-width: 768px) {
  /* .timeline-line-progress {
    animation: flowingRiver 6s linear infinite;
  }
  
  .timeline-line-svg::before {
    animation: flowingParticles 3s linear infinite;
  }
  
  .timeline-line-svg::after {
    animation: flowingParticles 5s linear infinite;
  } */
}