# Fix: Route Segment Ergonomics & Layout

## Problem
The user was unhappy with the ergonomics and layout of the `RouteSegment` component.
It was taking up too much space, had weird margins/borders, and the information density was low.
The user specifically asked to "REORGANISE CES PUTAINS DE SEGMENT ET ROUTES".

## Solution
We performed a complete reorganization of the `RouteSegment` component and its placement in the dashboard grid.

1.  **Grid Placement**: Moved `RouteSegment` to `grid-column: 2` in `DashboardPage.web.vue`.
    - This aligns it with the Stage Cards, keeping the timeline (left column) clean for the connector line and badges.
    - It removes the need for weird margin hacks to push it to the right.

2.  **Component Cleanup**:
    - Removed `margin-left`, `padding-left`, and `border-left` from `RouteSegment.vue`.
    - It now sits naturally in the content column.
    - Removed the dashed border which was conflicting with the main timeline connector.

3.  **Ergonomics**:
    - Added `routeType` to the summary text (e.g., "120km • 1h30 • Autoroute probable"). This gives immediate context without needing to expand.
    - Reduced vertical margins to `8px` to make it tighter between stages.

## Changes
- Modified `apps/web/src/modules/planner/pages/DashboardPage.web.vue`:
  - Changed `.stage-route-segment` to `grid-column: 2`.
- Modified `apps/web/src/modules/planner/components/RouteSegment.vue`:
  - Removed offset styles.
  - Updated summary text.
  - Cleaned up responsive styles.

## Verification
- The route segment should now be aligned with the cards.
- The timeline line (left) should be uninterrupted.
- The segment should be compact and informative.
