/* v1.89 : Espace technicien — style industriel KAMSA (noir, bleu nuit, rouge), pensé téléphone. */
.tp { --tp-navy: #0b1626; --tp-navy2: #17263d; --tp-red: #d71920; --tp-redd: #b3171d; --tp-ink: #14223b; --tp-muted: #5b6678; --tp-line: #dde3eb; --tp-ok: #1d6b3f; --tp-warn: #7a4a00;
  max-width: 760px; margin: 0 auto; padding: 0 0 24px; color: var(--tp-ink); font-family: 'Barlow', system-ui, sans-serif; }
.tp-hero { background: var(--tp-navy); color: #fff; padding: 18px 16px 0; border-bottom: 3px solid var(--tp-red); border-radius: 0 0 18px 18px; margin-bottom: 14px; }
.tp-hero h1 { margin: 2px 0; font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 30px; line-height: 1.05; font-weight: 700; color: #fff; }
.tp-hero-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.tp-kick { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #aab4c3; } .tp-kick.red { color: #ff6b6f; }
.tp-sub { font-size: 13px; color: #c4ccd8; text-transform: capitalize; }
.tp-preview { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #c4ccd8; }
.tp-preview select { min-height: 38px; border-radius: 9px; border: 1px solid #34465f; background: var(--tp-navy2); color: #fff; padding: 0 10px; font: inherit; }
.tp-tabs { display: flex; gap: 4px; margin-top: 14px; overflow-x: auto; }
.tp-tabs button { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: #aab4c3; font: inherit; font-weight: 600; font-size: 14px; border-bottom: 3px solid transparent; margin-bottom: -3px; cursor: pointer; }
.tp-tabs button.on { color: #fff; border-bottom-color: var(--tp-red); }
.tp-body { padding: 0 12px; display: flex; flex-direction: column; gap: 12px; }
.tp-card { display: block; background: #fff; border: 1px solid var(--tp-line); border-radius: 14px; padding: 14px; color: inherit; text-decoration: none; }
.tp-card > b, .tp-row > b { font-size: 15px; }
.tp-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tp-muted { font-size: 12px; color: var(--tp-muted); } .tp-muted-l { font-size: 12px; color: #c4ccd8; }
.tp-empty { display: flex; gap: 8px; align-items: center; color: var(--tp-muted); }
.tp-now { background: var(--tp-navy); color: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 24px rgba(11, 22, 38, .22); }
.tp-veh { display: flex; gap: 12px; align-items: center; } .tp-veh > svg, .tp-veh > span:first-child { flex: 0 0 auto; }
.tp-veh div { display: flex; flex-direction: column; } .tp-veh b { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 22px; line-height: 1.05; } .tp-veh span { font-size: 13px; color: #c4ccd8; }
.tp-veh.dark span { color: var(--tp-muted); } .tp-veh.dark b { color: var(--tp-ink); }
.tp-task { font-size: 15px; color: #e9edf3; }
.tp-bar { height: 6px; border-radius: 3px; background: #22324a; } .tp-bar i { display: block; height: 6px; border-radius: 3px; background: var(--tp-red); }
.tp-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 14px; border-radius: 11px; border: 1px solid #c4ccd8; background: #fff; color: var(--tp-ink); font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.tp-btn.red { background: var(--tp-red); border-color: var(--tp-red); color: #fff; font-weight: 700; } .tp-btn.sm { min-height: 36px; font-size: 13px; padding: 0 10px; }
.tp-card .tp-btn { margin-top: 10px; }
.tp-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #eef1f5; color: inherit; text-decoration: none; }
.tp-card > .tp-row + .tp-line { border-top: 0; }
.tp-line div { display: flex; flex-direction: column; min-width: 0; } .tp-line small { font-size: 12px; color: var(--tp-muted); }
.tp-pill { display: inline-block; white-space: nowrap; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.tp-s-grey { background: #e7ebf1; color: #3d4a5e; } .tp-s-blue { background: #e3ecfb; color: #1d4a8f; } .tp-s-red { background: #fde8e9; color: #8f1218; }
.tp-s-orange { background: #fff1d6; color: var(--tp-warn); } .tp-s-green { background: #e3f3e9; color: var(--tp-ok); }
.tp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tp-stats > div { background: #fff; border: 1px solid var(--tp-line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.tp-stats b { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 24px; line-height: 1; } .tp-stats span { font-size: 12px; color: var(--tp-muted); }
.tp-stats.dark > div { background: var(--tp-navy2); border-color: transparent; } .tp-stats.dark span { color: #aab4c3; }
.tp-stats b.ok, .ok { color: var(--tp-ok); } .tp-stats.dark b.warn { color: #ffb35c; } .bad, .tp-badtxt { color: #b3171d; } .tp-oktxt { color: #2fae66; font-weight: 600; } .tp-now .tp-badtxt { color: #ff8a8e; font-weight: 600; }
.tp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tp-tile { background: #fff; border: 1px solid var(--tp-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.tp-tile small { font-size: 12px; font-weight: 700; color: var(--tp-muted); letter-spacing: .04em; } .tp-tile b { font-size: 16px; } .tp-tile span { font-size: 12.5px; font-weight: 600; }
.tp-tile .warn { color: var(--tp-warn); } .tp-tile .bad { color: #b3171d; } .tp-tile .ok { color: var(--tp-ok); }
.tp-seg { display: flex; background: #e7ebf1; border-radius: 12px; padding: 4px; gap: 4px; }
.tp-seg button { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-weight: 600; color: #3d4a5e; cursor: pointer; } .tp-seg button.on { background: var(--tp-navy); color: #fff; }
.tp-chips { display: flex; gap: 6px; overflow-x: auto; } .tp-chips button { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #c4ccd8; background: #fff; font: inherit; font-weight: 600; font-size: 13px; text-transform: capitalize; color: #3d4a5e; cursor: pointer; white-space: nowrap; }
.tp-chips button.on { background: var(--tp-navy); border-color: var(--tp-navy); color: #fff; }
.tp-or .tp-itv { display: flex; align-items: center; gap: 8px; padding-top: 8px; font-size: 14px; } .tp-itv span:nth-child(2) { flex: 1; } .tp-itv em { font-style: normal; font-size: 12px; color: var(--tp-muted); }
.tp-back { align-self: flex-start; display: flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--tp-redd); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 0; }
.tp-plate { display: inline-block; margin: 12px 0; border: 2px solid var(--tp-navy); border-radius: 6px; padding: 4px 12px; font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: .06em; }
.tp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tp-facts div { display: flex; flex-direction: column; min-width: 0; }
.tp-facts small { font-size: 11px; font-weight: 700; color: var(--tp-muted); } .tp-facts b { font-size: 14.5px; overflow-wrap: anywhere; }
.tp-note { background: #fff7e6; border: 1px solid #f0d49a; border-radius: 14px; padding: 12px 14px; color: #3b2a07; } .tp-note small { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--tp-warn); }
.tp-pre { white-space: pre-wrap; font-size: 14px; margin-top: 6px; }
.tp-work { padding: 10px 0; border-top: 1px solid #eef1f5; } .tp-work small { display: block; font-size: 12px; color: var(--tp-muted); margin-top: 2px; }
.tp-work.mine { border-left: 3px solid var(--tp-red); padding-left: 10px; margin-left: -14px; padding-right: 0; }
.tp-parts { list-style: none; margin: 6px 0 0; padding: 0; } .tp-parts li { display: flex; justify-content: space-between; font-size: 13.5px; padding: 3px 0; } .tp-parts em { font-style: normal; color: var(--tp-muted); }
.tp-lock { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tp-muted); margin: 0 4px; }
.tp-big { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 42px; font-weight: 700; line-height: 1; }
.tp-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; } .tp-kv em { font-style: normal; color: var(--tp-muted); font-size: 12px; }
.tp-kv.sep { border-top: 1px solid var(--tp-line); margin-top: 4px; } .tp-kv.strong { font-size: 16px; border-top: 1px solid var(--tp-line); } .tp-kv.strong b { font-size: 18px; }
.tp-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; } .tp-table th { text-align: left; font-size: 11px; color: var(--tp-muted); font-weight: 700; padding: 6px 4px; }
.tp-table td { padding: 8px 4px; border-top: 1px solid #eef1f5; } .tp-table td:not(:first-child), .tp-table th:not(:first-child) { text-align: right; }
.tp-boxhead { flex-direction: row; align-items: center; gap: 16px; } .tp-boxname { font-size: 18px; }
.tp-ring { --p: 100; width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: conic-gradient(#2fae66 calc(var(--p) * 1%), var(--tp-red) 0); }
.tp-ring > div { width: 74px; height: 74px; border-radius: 50%; background: var(--tp-navy); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tp-ring b { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 22px; } .tp-ring span { font-size: 11px; color: #aab4c3; }
@media (min-width: 821px) { .tp-hero { border-radius: 18px; margin-top: 12px; } .tp-body { padding: 0; } }
html[data-theme="dark"] .tp { --tp-ink: #e9edf3; --tp-muted: #9aa6b8; --tp-line: #243147; }
html[data-theme="dark"] .tp-card, html[data-theme="dark"] .tp-tile, html[data-theme="dark"] .tp-stats > div:not(.tp-stats.dark > div), html[data-theme="dark"] .tp-btn:not(.red), html[data-theme="dark"] .tp-chips button:not(.on) { background: #111825; color: var(--tp-ink); border-color: #243147; }
html[data-theme="dark"] .tp-seg { background: #111825; } html[data-theme="dark"] .tp-seg button { color: #c4ccd8; }
html[data-theme="dark"] .tp-note { background: #2a2010; border-color: #5a4419; color: #f3e2bf; }
html[data-theme="dark"] .tp-line, html[data-theme="dark"] .tp-work, html[data-theme="dark"] .tp-table td { border-color: #1c2638; }
html[data-theme="dark"] .tp-plate { border-color: #c4ccd8; }