/* Ligne du temps — même cockpit que le QG (style.css chargé avant). Mobile d'abord. */
.navbtn{display:inline-flex;align-items:center;gap:6px;font:600 13px Inter,system-ui,sans-serif;color:var(--ac);text-decoration:none;
 padding:6px 11px;border:1px solid rgba(62,232,255,.45);border-radius:99px;background:rgba(62,232,255,.07);white-space:nowrap}
.navbtn:hover,.navbtn:focus-visible{background:rgba(62,232,255,.16);outline:none}
.tl-main{max-width:none;gap:10px}
.tl-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 14px}
.tl-head h1{margin:0;font-size:18px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.tl-head p{margin:2px 0 0;color:var(--dim);font-size:13px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.seg button{font:600 13px Inter,system-ui,sans-serif;color:var(--dim);background:transparent;border:0;padding:8px 13px;cursor:pointer;min-height:36px}
.seg button+button{border-left:1px solid var(--line2)}
.seg button.on{background:rgba(62,232,255,.14);color:var(--ac)}
.tbtn{font:600 13px Inter,system-ui,sans-serif;color:var(--tx);background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:8px 12px;cursor:pointer;min-height:36px}
.ctrls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font:600 12px Inter,system-ui,sans-serif;color:var(--dim);background:var(--card);border:1px solid var(--line2);border-radius:99px;padding:6px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:32px}
.chip i{width:9px;height:9px;border-radius:3px;background:var(--c,var(--ac))}
.chip.off{opacity:.38;text-decoration:line-through}
.chip-lab{flex:none;font:600 11px var(--mono);color:var(--mut);letter-spacing:.08em;align-self:center;padding-right:2px}
/* grille */
.tl-wrap{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tl-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-color:var(--line2) transparent}
.tl-canvas{position:relative;min-width:100%}
:root{--lab:150px}
@media(max-width:640px){:root{--lab:94px}}
.tl-axis{display:flex;position:relative;height:48px;border-bottom:1px solid var(--line2);background:var(--bg2)}
.corner,.lane-lab{position:sticky;left:0;z-index:4;flex:none;width:var(--lab);background:var(--bg2);border-right:1px solid var(--line2)}
.corner{display:flex;align-items:flex-end;padding:0 10px 7px;font:600 10px var(--mono);color:var(--mut);letter-spacing:.08em}
.ticks{position:relative;flex:1}
.mo{position:absolute;top:4px;font:700 11px Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#cfe2ef;padding-left:6px;border-left:1px solid var(--line2);height:18px;white-space:nowrap}
.dy{position:absolute;bottom:0;height:24px;font:500 11px var(--mono);color:var(--dim);padding:5px 0 0 4px;border-left:1px solid var(--line);white-space:nowrap}
.dy.we{color:var(--mut)}.dy.td{color:var(--red);font-weight:700}
.lane{display:flex;position:relative;border-bottom:1px solid var(--line)}
.lane:last-child{border-bottom:0}
.lane-lab{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:8px 10px;background:var(--card);min-height:44px}
.lane-lab b{font-size:13px;font-weight:700;line-height:1.2}
.lane-lab .ldot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--gry)}
.ldot.vert{background:var(--ok);box-shadow:0 0 8px var(--ok)}.ldot.ambre{background:var(--amb);box-shadow:0 0 8px var(--amb)}
.ldot.rouge{background:var(--red);box-shadow:0 0 8px var(--red);animation:blink 1.2s infinite}.ldot.gris{background:var(--gry)}
.lane-lab small{font:600 10px var(--mono);letter-spacing:.06em;color:var(--mut);text-transform:uppercase}
.lane-lab small.pz{color:var(--gry);border:1px dashed var(--gry);border-radius:99px;padding:1px 6px;align-self:flex-start}
.lane-lab small.ub{color:var(--red)}
@media(max-width:640px){.lane-lab b{font-size:11px}.lane-lab{padding:6px 7px}}
.lane.yan .lane-lab{background:linear-gradient(90deg,rgba(255,77,94,.10),var(--card))}
.lane-body{position:relative;flex:1;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-repeat:repeat-x}
.lane.yan .lane-body{background-color:rgba(255,77,94,.025)}
/* barres */
.tb{position:absolute;height:24px;border-radius:7px;cursor:pointer;display:flex;align-items:center;min-width:6px;border:1px solid transparent;
 font:600 12px Inter,system-ui,sans-serif;color:#04121a;white-space:nowrap;transition:filter .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.tb span{padding:0 8px;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.tb.out span{position:absolute;left:100%;padding-left:6px;color:#cfe2ef;overflow:visible}
.tb:hover,.tb:focus-visible{filter:brightness(1.15);outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.tb.sel{box-shadow:0 0 0 2px #fff,0 0 18px rgba(62,232,255,.5);z-index:3}
.s-termine{background:var(--ok);color:#03150d}
.s-en_cours{background:var(--ac);box-shadow:0 0 12px rgba(62,232,255,.35)}
.s-a_venir{background:#2a3a49;color:#cfdbe5;border-color:#3b5163}
.s-attente{background:var(--amb);color:#1d1200}
.s-bloque{background:var(--red);color:#fff;animation:blink 2.4s infinite}
.s-pause{background:repeating-linear-gradient(135deg,#3a4652 0 6px,#26313b 6px 12px);color:#c5d0da;border-color:#56636f}
.tb.est{border:1.5px dashed rgba(255,255,255,.7)}
.tb.est.s-a_venir{border-color:#7d93a8}
.tb.open::after{content:"";position:absolute;right:-9px;top:50%;margin-top:-6px;border-style:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent var(--oc,var(--red))}
.tb.open.s-attente{--oc:var(--amb)}
/* jalons */
.ms{position:absolute;height:24px;display:flex;align-items:center;cursor:pointer;white-space:nowrap;font:700 12px Inter,system-ui,sans-serif;color:#fff}
.ms i{width:14px;height:14px;transform:rotate(45deg);background:#fff;border:2px solid var(--ac);box-shadow:0 0 12px rgba(62,232,255,.7);margin:0 7px 0 -7px;flex:none}
.ms.sel i{background:var(--ac)}
/* routines */
.rt-row{position:absolute;left:0;right:0;top:4px;height:16px}
.rt{position:absolute;top:0;width:8px;height:16px;margin-left:-4px;cursor:pointer;background:linear-gradient(90deg,transparent 3px,var(--rc,#5f7a90) 3px,var(--rc,#5f7a90) 5px,transparent 5px)}
.rt.d{height:10px;top:6px}
.rt.h{--rc:var(--ac)}
.rt-lab{position:absolute;left:4px;top:-1px;font:600 9px var(--mono);color:var(--mut);letter-spacing:.06em;pointer-events:none}
/* aujourd'hui */
.today{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--red);box-shadow:0 0 10px rgba(255,77,94,.8);z-index:2;pointer-events:none}
.today b{position:absolute;top:27px;left:4px;font:700 10px var(--mono);color:#fff;background:var(--red);border-radius:5px;padding:2px 5px;white-space:nowrap;letter-spacing:.04em}
/* légende */
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;color:var(--dim);padding:2px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.lg{width:22px;height:11px;border-radius:4px;display:inline-block}
.lg.est{background:transparent;border:1.5px dashed var(--dim)}
.lg.ms{width:10px;height:10px;transform:rotate(45deg);background:#fff;border:2px solid var(--ac);border-radius:1px}
.lg.rt{width:2px;height:12px;background:var(--ac);border-radius:0}
.lg.td{width:2px;height:14px;background:var(--red);border-radius:0}
/* panneau détail */
.det{position:fixed;z-index:20;left:0;right:0;bottom:0;max-height:72vh;overflow:auto;background:#0c131b;border-top:1px solid var(--line2);
 border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.6);padding:16px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .22s ease}
.det.on{transform:none}
.det .x{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--tx);font-size:18px;cursor:pointer}
.det h2{margin:0 44px 8px 0;font-size:18px;line-height:1.3}
.det .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.det dl{margin:0;display:grid;grid-template-columns:1fr;gap:10px}
.det dt{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.det dd{margin:2px 0 0;font-size:14px;color:#d4e2ec}
.det dd a{color:var(--ac);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.det .tag.st-termine{color:var(--ok);border-color:rgba(47,227,154,.5)}.det .tag.st-en_cours{color:var(--ac);border-color:rgba(62,232,255,.5)}
.det .tag.st-attente{color:var(--amb);border-color:rgba(255,176,46,.5)}.det .tag.st-bloque{color:var(--red);border-color:rgba(255,77,94,.5)}
.det .tag.st-pause,.det .tag.st-a_venir{color:#b9c6d1}
@media(min-width:900px){.det{left:auto;top:64px;bottom:14px;right:14px;width:380px;max-height:none;border:1px solid var(--line2);border-radius:16px;transform:translateX(420px)}}
.note{font-size:12px;color:var(--mut)}