/* Timeline professionnelle publique — version 9.0 */
.arrival-timeline{
    margin:0 0 18px;
    border:1px solid #d7e2ef;
    border-radius:16px;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    box-shadow:0 10px 26px rgba(15,47,86,.08);
    overflow:hidden;
}
.arrival-timeline-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:15px 18px 11px;
    border-bottom:0;
}
.arrival-timeline-head>div{min-width:0}
.arrival-timeline-head h2{
    position:relative;
    margin:0;
    padding-left:28px;
    color:#0a2d58;
    font-size:1.22rem;
    line-height:1.2;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.015em;
}
.arrival-timeline-head h2::before{
    content:"▥";
    position:absolute;
    left:0;
    top:-1px;
    display:grid;
    place-items:center;
    width:21px;
    height:21px;
    color:#0877d8;
    font-size:1.15rem;
}
.arrival-timeline-head p{
    margin:7px 0 0;
    color:#455e7e;
    font-size:.88rem;
    line-height:1.35;
}
.arrival-timeline-live{
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    padding:6px 10px;
    border-radius:999px;
    background:#e9fbf0;
    color:#148348;
    border:1px solid #c8efd7;
    font-size:.72rem;
    font-weight:900;
}
.arrival-timeline-live::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#20bf66;
    box-shadow:0 0 0 0 rgba(32,191,102,.45);
    animation:timelinePulse 1.8s infinite;
}
@keyframes timelinePulse{
    70%{box-shadow:0 0 0 8px rgba(32,191,102,0)}
    100%{box-shadow:0 0 0 0 rgba(32,191,102,0)}
}
.arrival-timeline-body{
    display:grid;
    grid-template-columns:265px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:20px;
    row-gap:11px;
    padding:5px 18px 17px;
}
.arrival-timeline-summary{
    grid-column:1;
    grid-row:1 / span 2;
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    margin:0;
    padding:8px 13px;
    border:1px solid #cddff2;
    border-radius:12px;
    background:linear-gradient(145deg,#f7fbff,#edf5ff);
}
.timeline-kpi{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    min-height:34px;
    padding:7px 3px;
    border:0;
    border-bottom:1px solid rgba(151,180,213,.35);
    border-radius:0;
    background:transparent;
}
.timeline-kpi:last-child{border-bottom:0}
.timeline-kpi span{
    position:relative;
    display:block;
    padding-left:26px;
    color:#183f70;
    font-size:.79rem;
    font-weight:800;
    text-transform:none;
    letter-spacing:0;
}
.timeline-kpi span::before{
    position:absolute;
    left:2px;
    top:50%;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    width:17px;
    height:17px;
    color:#0877d8;
    font-size:.9rem;
}
.timeline-kpi:nth-child(1) span::before{content:"●"}
.timeline-kpi:nth-child(2) span::before{content:"◷"}
.timeline-kpi:nth-child(3) span::before{content:"◷"}
.timeline-kpi:nth-child(4) span::before{content:"⌛"}
.timeline-kpi strong{
    display:block;
    margin:0;
    color:#082f61;
    font-size:.88rem;
    font-weight:900;
    white-space:nowrap;
}
.timeline-track-wrap{
    grid-column:2;
    grid-row:1;
    position:relative;
    min-width:0;
    padding:26px 9px 28px;
}
.timeline-track{
    position:relative;
    height:13px;
    border-radius:999px;
    background:linear-gradient(180deg,#dceafb,#c9ddf3);
    box-shadow:inset 0 1px 3px rgba(23,65,108,.18),0 2px 8px rgba(11,99,182,.08);
}
.timeline-track::before,
.timeline-track::after{
    content:"";
    position:absolute;
    z-index:2;
    top:50%;
    width:21px;
    height:21px;
    border:3px solid #fff;
    border-radius:50%;
    transform:translateY(-50%);
    box-shadow:0 3px 10px rgba(20,55,95,.2);
}
.timeline-track::before{left:-7px;background:#6dc28a}
.timeline-track::after{right:-7px;background:#ef6262}
.timeline-progress{
    position:absolute;
    inset:0 auto 0 0;
    width:100%;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(56,137,219,.28),rgba(20,107,199,.48));
}
.timeline-marker{
    position:absolute;
    z-index:3;
    top:50%;
    width:13px;
    height:13px;
    padding:0;
    border:2px solid #fff;
    border-radius:50%;
    background:#0877d8;
    box-shadow:0 2px 7px rgba(0,70,145,.28);
    transform:translate(-50%,-50%);
    cursor:pointer;
    transition:width .15s ease,height .15s ease,transform .15s ease,box-shadow .15s ease;
}
.timeline-marker:hover{width:18px;height:18px;box-shadow:0 3px 12px rgba(0,70,145,.38)}
.timeline-marker.is-pending{background:#f29a16}
.timeline-marker.is-active{width:21px;height:21px;background:#0877d8;box-shadow:0 0 0 5px rgba(8,119,216,.16),0 4px 12px rgba(0,70,145,.3)}
.timeline-marker:hover::after,
.timeline-marker.is-active::after{
    content:attr(data-label);
    position:absolute;
    left:50%;
    bottom:26px;
    transform:translateX(-50%);
    min-width:155px;
    max-width:235px;
    padding:7px 9px;
    border-radius:8px;
    background:#062f5f;
    color:#fff;
    font-size:.72rem;
    line-height:1.3;
    text-align:center;
    white-space:normal;
    box-shadow:0 9px 22px rgba(0,0,0,.24);
    pointer-events:none;
}
.timeline-axis{
    position:absolute;
    left:2px;
    right:2px;
    top:0;
    display:flex;
    justify-content:space-between;
    margin:0;
    color:#486482;
    font-size:.72rem;
    font-weight:800;
}
.timeline-current{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    min-width:0;
    max-width:90%;
    padding:6px 12px;
    border-radius:999px;
    background:#edf5ff;
    color:#234c7a;
    font-size:.76rem;
    font-weight:700;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.timeline-current strong{color:#0751a1}
.timeline-controls{
    grid-column:2;
    grid-row:2;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    margin:0;
}
.timeline-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:35px;
    padding:0 12px;
    border:1px solid #d8e4f1;
    border-radius:9px;
    background:#edf5ff;
    color:#0751a1;
    font-size:.76rem;
    font-weight:900;
    cursor:pointer;
    white-space:nowrap;
}
.timeline-btn:hover:not(:disabled){background:#dfeeff}
.timeline-btn.primary{
    background:#f0f3f7;
    color:#183b66;
    border-color:#e0e6ed;
}
.timeline-btn:disabled{opacity:.42;cursor:not-allowed}
.timeline-range{
    flex:1;
    min-width:120px;
    height:4px;
    accent-color:#0877d8;
}
.timeline-empty{grid-column:1/-1;padding:22px;text-align:center;color:#64748b}
@media(max-width:980px){
    .arrival-timeline-body{grid-template-columns:220px minmax(0,1fr);column-gap:14px}
    .timeline-current{max-width:80%}
}
@media(max-width:760px){
    .arrival-timeline-head{align-items:flex-start;padding:14px 15px 9px}
    .arrival-timeline-head h2{font-size:1.05rem}
    .arrival-timeline-body{display:block;padding:5px 14px 15px}
    .arrival-timeline-summary{grid-template-columns:1fr 1fr;gap:0 12px;margin-bottom:12px}
    .timeline-kpi:nth-child(3){border-bottom:0}
    .timeline-track-wrap{padding:25px 7px 30px}
    .timeline-controls{margin-top:9px;flex-wrap:wrap}
    .timeline-range{order:5;flex-basis:100%;width:100%}
    .timeline-current{bottom:1px;max-width:94%;font-size:.7rem}
    .timeline-marker:hover::after{display:none}
}
@media(max-width:480px){
    .arrival-timeline-live{display:none}
    .arrival-timeline-summary{grid-template-columns:1fr}
    .timeline-kpi:nth-child(3){border-bottom:1px solid rgba(151,180,213,.35)}
    .timeline-btn{flex:1;padding:0 8px}
}


/* V9 — finition publique et meilleure lisibilité */
.arrival-timeline{margin-bottom:20px}
.timeline-track-wrap{padding-left:16px;padding-right:16px}
.timeline-marker{will-change:transform}
.timeline-controls::after{
    content:"Début   •   Arrivée   •   En attente   •   Fin";
    margin-left:auto;
    color:#526b89;
    font-size:.68rem;
    font-weight:800;
    white-space:nowrap;
}
@media(max-width:1050px){
    .timeline-controls::after{display:none}
}