.timeline-section { padding: 64px 24px; margin: 0 auto; max-width: 1100px; } .timeline-title { font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 2.5rem; color: #1a1a1a; } /* Timeline verticale */ .timeline-style-vertical .timeline-vertical { position: relative; margin: 0 auto; padding-left: 32px; border-left: 4px solid #2563eb; max-width: 600px; } .timeline-style-vertical .timeline-event { position: relative; margin-bottom: 2.5rem; } .timeline-style-vertical .timeline-event:last-child { margin-bottom: 0; } .timeline-style-vertical .timeline-date { font-size: 1.1rem; font-weight: 700; color: #2563eb; margin-bottom: 0.2rem; } .timeline-style-vertical .timeline-desc { font-size: 1rem; color: #444; background: #f8f9fa; padding: 1rem 1.5rem; border-radius: 8px; margin: 0; box-shadow: 0 2px 8px rgba(37,99,235,0.04); text-align: center; word-break: break-word; } .timeline-style-vertical .timeline-event::before { content: ""; position: absolute; left: -38px; top: 8px; width: 18px; height: 18px; background: #fff; border: 4px solid #2563eb; border-radius: 50%; z-index: 2; } /* Timeline horizontale */ .timeline-style-horizontal .timeline-horizontal { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; position: relative; margin: 0 auto; max-width: 900px; padding-bottom: 32px; } .timeline-style-horizontal .timeline-horizontal::before { content: ""; position: absolute; left: 0; right: 0; top: 32px; height: 4px; background: #2563eb; z-index: 1; } .timeline-style-horizontal .timeline-event-horizontal { position: relative; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(37,99,235,0.04); padding: 1.2rem 1.5rem; min-width: 180px; text-align: center; z-index: 2; margin-top: 0; } .timeline-style-horizontal .timeline-date { font-size: 1.1rem; font-weight: 700; color: #2563eb; margin-bottom: 0.2rem; } .timeline-style-horizontal .timeline-desc { font-size: 1rem; color: #444; margin: 0; } /* Responsive */ @media (max-width: 900px) { .timeline-style-horizontal .timeline-horizontal { gap: 1rem; max-width: 100%; } .timeline-style-horizontal .timeline-event-horizontal { min-width: 120px; padding: 1rem 0.5rem; } } @media (max-width: 700px) { .timeline-style-horizontal .timeline-horizontal { flex-direction: column; align-items: flex-start; gap: 2.5rem; padding-bottom: 0; } .timeline-style-horizontal .timeline-horizontal::before { display: none; } .timeline-style-horizontal .timeline-event-horizontal { min-width: 0; width: 100%; text-align: left; } } @media (max-width: 600px) { .timeline-section { padding: 32px 4px; } .timeline-title { font-size: 1.2rem; margin-bottom: 1.2rem; } .timeline-style-vertical .timeline-vertical { padding-left: 18px; } .timeline-style-vertical .timeline-event::before { left: -24px; width: 12px; height: 12px; border-width: 3px; } }