Itinéraire

Départ :

⬇

Arrivée :

Départ après : Maintenant

display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--spacing-10); color: var(--gray-500); } .empty-icon, .no-search-icon { color: var(--gray-300); margin-bottom: var(--spacing-4); } .no-search-state { background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); } .no-search-state h2 { color: var(--gray-700); margin-bottom: var(--spacing-2); } /* Journey Summary */ .journey-summary { background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%); border-radius: var(--radius-lg); padding: var(--spacing-5); color: var(--white); margin-bottom: var(--spacing-6); } .summary-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-4); } .summary-duration { font-size: var(--font-size-2xl); font-weight: 700; } .summary-meta { text-align: right; opacity: 0.9; font-size: var(--font-size-sm); } .summary-times { display: flex; align-items: center; gap: var(--spacing-4); } .summary-point { display: flex; align-items: center; gap: var(--spacing-2); } .summary-point-icon { width: 12px; height: 12px; border-radius: 50%; background: var(--white); } .summary-point-icon.arrival { background: #10b981; } .summary-point-time { font-size: var(--font-size-lg); font-weight: 600; } .summary-point-label { font-size: var(--font-size-sm); opacity: 0.8; } .summary-line { flex: 1; height: 2px; background: rgba(255,255,255,0.3); position: relative; } .summary-line::after { content: ''; position: absolute; right: -6px; top: -4px; border: 5px solid transparent; border-left-color: rgba(255,255,255,0.5); } /* Timeline */ .journey-timeline { position: relative; } .timeline-section { display: flex; gap: var(--spacing-4); padding-bottom: var(--spacing-4); } .timeline-section:last-child { padding-bottom: 0; } .timeline-marker { display: flex; flex-direction: column; align-items: center; width: 40px; flex-shrink: 0; } .timeline-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-600); font-size: 16px; position: relative; z-index: 1; } .timeline-icon.transport { color: var(--white); } .timeline-icon.walk { background: var(--gray-200); } .timeline-icon.waiting { background: #fef3c7; color: #d97706; } .timeline-line { flex: 1; width: 3px; background: var(--gray-200); margin-top: var(--spacing-1); } .timeline-section.transport .timeline-line { width: 4px; } .timeline-content { flex: 1; padding-bottom: var(--spacing-2); } .timeline-header { display: flex; align-items: center; gap: var(--spacing-3); margin-bottom: var(--spacing-2); } .timeline-time { font-size: var(--font-size-sm); font-weight: 600; color: var(--gray-700); min-width: 45px; } .timeline-title { font-weight: 600; color: var(--gray-900); } .timeline-subtitle { font-size: var(--font-size-sm); color: var(--gray-500); margin-top: 2px; } .timeline-direction { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--font-size-sm); color: var(--gray-600); margin-top: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); background: var(--gray-50); border-radius: var(--radius-md); } .timeline-stops { margin-top: var(--spacing-3); } .timeline-stops-toggle { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--font-size-sm); color: var(--primary); cursor: pointer; padding: var(--spacing-2); background: none; border: none; font-weight: 500; } .timeline-stops-toggle:hover { text-decoration: underline; } .timeline-stops-list { display: none; margin-top: var(--spacing-2); padding-left: var(--spacing-4); border-left: 2px solid var(--gray-200); } .timeline-stops-list.open { display: block; } .timeline-stop { padding: var(--spacing-2) 0; font-size: var(--font-size-sm); color: var(--gray-600); display: flex; align-items: center; gap: var(--spacing-2); } .timeline-stop::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gray-300); margin-left: -var(--spacing-4); margin-right: var(--spacing-2); } /* Error state */ .error-state { background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-lg); padding: var(--spacing-6); text-align: center; } .error-state .error-icon { color: #ef4444; margin-bottom: var(--spacing-3); } .error-state p { color: #b91c1c; margin: 0; } /* Responsive */ @media (max-width: 1024px) { .itinerary-content { grid-template-columns: 1fr; } .journeys-sidebar { position: static; max-height: none; } .journeys-list { display: flex; overflow-x: auto; gap: var(--spacing-3); padding-bottom: var(--spacing-2); } .journey-card { flex-shrink: 0; width: 280px; margin-bottom: 0; } .journey-map-container { height: 280px; } } @media (max-width: 640px) { .search-bar-inputs { flex-direction: column; } .swap-btn { align-self: center; transform: rotate(90deg); } .search-bar-options { flex-direction: column; } .datetime-inline { width: 100%; } .datetime-inline select, .datetime-inline input { flex: 1; } .search-bar-options .btn { width: 100%; justify-content: center; } }