:root {
  --bg: #0b1015;
  --panel: #0f151c;
  --card: #121920;
  --card-on: #1a2531;
  --line: #1f2a35;
  --line-on: #35506b;
  --text: #e6edf3;
  --text-2: #c3d0dc;
  --muted: #9aa7b4;
  --blue: #2f7fd1;
  --blue-soft: #9fcbf5;
  --amber: #f0a33a;
  --green: #3ecf8e;
  --red: #ff6b6b;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --cond: 'Barlow Condensed', 'Barlow', sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Barlow', system-ui, sans-serif; display: flex; flex-direction: column; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h2 { margin: 0; font-family: var(--cond); font-size: 18px; font-weight: 700; letter-spacing: .04em; }
code { font-family: var(--mono); color: #f5c77e; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
[hidden] { display: none !important; }

/* barre du haut */
.topbar { height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 24px; padding: 0 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-title { font-family: var(--cond); font-size: 22px; font-weight: 700; letter-spacing: .04em; line-height: 1.05; }
.brand-sub { font-size: 12px; color: var(--muted); }
.counters { display: flex; gap: 10px; margin-left: 16px; }
.counter { display: flex; align-items: baseline; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; }
.counter b { font-family: var(--mono); font-size: 20px; }
.counter span { font-size: 13px; color: var(--muted); }
.counter.warn { border-color: #3a2a12; background: #1c150b; }
.counter.warn b { color: var(--amber); }
.counter.warn span { color: #e8c894; }
.counter.ok { border-color: #1f3b2e; background: #0f1d17; }
.counter.ok b { color: var(--green); }
.counter.ok span { color: #a8dcc3; }
.spacer { flex-grow: 1; }
.meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--muted); }
.conn { display: flex; align-items: center; gap: 6px; }
.led { width: 8px; height: 8px; border-radius: 50%; background: #8b97a4; }
.conn.live .led { background: var(--green); }
.conn.down .led { background: var(--red); }
.me { padding: 4px 10px; border: 1px solid #27415c; border-radius: 999px; color: var(--blue-soft); background: #0f1c2a; }
.clock { font-family: var(--mono); font-size: 18px; color: var(--text); }

/* structure */
.layout { flex-grow: 1; display: flex; min-height: 0; }
.rail { width: 84px; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 8px; background: var(--panel); border-right: 1px solid var(--line); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; }
.tab:hover { color: var(--text); }
.tab.active { background: #1c2733; color: var(--text); }
.badge { position: absolute; top: 6px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--amber); color: #1a1206; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
main { flex-grow: 1; min-width: 0; display: flex; position: relative; }
.view { flex-grow: 1; display: grid; min-height: 0; }
.view.ops { grid-template-columns: 340px minmax(0, 1fr) 330px; }
.view.calls { grid-template-columns: 340px minmax(0, 1fr); }
.view.sms { grid-template-columns: 360px minmax(0, 1fr); }
.panel { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
.view.ops .panel:last-child { border-right: 0; border-left: 1px solid var(--line); }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.panel-head.column { flex-direction: column; align-items: flex-start; gap: 2px; }
.panel-head > :last-child:not(h2) { margin-left: auto; }
.panel-head.column > :last-child { margin-left: 0; }
.list { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.empty { padding: 16px 4px; font-size: 14px; color: var(--muted); }

/* boutons */
.btn-primary { height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; }
.btn-primary:hover { background: #3a8ee0; }
.btn-ghost { height: 34px; padding: 0 12px; border: 1px solid #27415c; border-radius: 8px; background: #0f1c2a; color: var(--blue-soft); font-size: 13px; font-weight: 600; }
.btn-ghost:hover { background: #13263a; }
.btn-line { height: 34px; padding: 0 12px; border: 1px solid #2a3947; border-radius: 8px; background: transparent; color: var(--text-2); font-size: 13px; }
.btn-line:hover { border-color: var(--line-on); color: var(--text); }
.btn-go { height: 36px; padding: 0 14px; border: 0; border-radius: 6px; background: #1f5f3f; color: #e9fff4; font-size: 13px; font-weight: 600; }
.btn-go:hover { background: #267552; }
.btn-amber { height: 40px; border: 0; border-radius: 8px; background: var(--amber); color: #1a1206; font-size: 14px; font-weight: 700; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #7cc0ff; outline-offset: 2px; }

/* lignes de liste */
.row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-align: left; }
.row:hover { border-color: #2a3a4a; }
.row.on { background: var(--card-on); border-color: var(--line-on); }
.row-line { display: flex; align-items: center; gap: 8px; width: 100%; }
.row-title { font-size: 15px; font-weight: 600; color: var(--text); }
.row-sub { font-size: 13px; color: var(--muted); }
.push { margin-left: auto; }
.prio-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.prio-P1 { color: var(--red); border-color: var(--red); background: #ff6b6b1a; }
.prio-P2 { color: var(--amber); border-color: var(--amber); background: #f0a33a1a; }
.prio-P3 { color: #4aa3ff; border-color: #4aa3ff; background: #4aa3ff1a; }
.prio-pill.lg { height: 52px; width: 52px; justify-content: center; font-size: 20px; border-radius: 10px; }

/* appels entrants */
.incoming-list { display: flex; flex-direction: column; gap: 10px; padding: 0 12px; }
.incoming-list:not(:empty) { padding-bottom: 10px; }
.incoming { padding: 14px; border: 1px solid #6b4a17; background: #1c150b; border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
.incoming.ended { border-color: #3a3f45; background: #15181b; }
.incoming-head { display: flex; align-items: center; gap: 8px; }
.incoming-head b { font-family: var(--cond); font-size: 17px; letter-spacing: .04em; color: #f5c77e; }
.incoming.ended .incoming-head b { color: var(--muted); }
.incoming-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--amber); }
.incoming.ended .incoming-dot { background: #6b7580; }
.incoming-info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #c9b590; }
.incoming-info strong { font-size: 16px; color: var(--text); }
.incoming-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.incoming-actions button { flex-grow: 1; }
/* ligne vocale 911 */
.incoming.ringing { animation: incoming-ring 1.2s ease-in-out infinite; }
@keyframes incoming-ring { 50% { border-color: #f0a33a; box-shadow: 0 0 0 3px rgba(240, 163, 58, .18); } }
.incoming.live { border-color: #1f7a45; background: #0c1a12; }
.incoming.live .incoming-head b { color: #5fe39a; }
.incoming.live .incoming-dot { background: #30d158; }
.voice-timer { font-size: 14px; color: #5fe39a; }
.voice-warn { color: #f0a33a; }
.btn-answer, .btn-hangup { border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 700; cursor: pointer; color: #04140a; }
.btn-answer { background: #30d158; }
.btn-hangup { background: #ff453a; color: #fff; }
@media (prefers-reduced-motion: reduce) { .incoming.ringing { animation: none; } }
.voice-rec { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #ff6b6b; }
.voice-rec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ff453a; }
/* enregistrements (MDT) */
.rec-table td { vertical-align: middle; }
.rec-player-row td { padding-top: 0 !important; border-top: 0 !important; }
.rec-player:empty { display: none; }
.rec-player { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; }
.rec-player audio { flex: 1; min-width: 0; height: 36px; }

/* unités */
.unit-row { flex-direction: row; align-items: stretch; gap: 10px; }
.unit-bar { width: 4px; border-radius: 2px; flex-shrink: 0; }
.unit-body { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.unit-cs { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.unit-detail { margin: 0 12px 12px; padding: 12px; border: 1px solid #27415c; border-radius: 10px; background: #111c27; display: flex; flex-direction: column; gap: 10px; }
.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.status-btn { min-height: 44px; padding: 6px 8px; border-radius: 8px; border: 1px solid; background: transparent; font-size: 13px; font-weight: 600; }
.status-btn.on { color: #0b1015 !important; }

/* carte */
.map-wrap { position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: #0a1a26; }
.leaflet-container { font-family: 'Barlow', sans-serif; }
.map-title, .map-legend { position: absolute; z-index: 500; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: #0f151cee; border: 1px solid var(--line); }
.map-title { left: 16px; top: 14px; }
.map-title b { font-family: var(--cond); font-size: 16px; letter-spacing: .04em; }
.map-title span { font-size: 12px; color: var(--muted); }
.map-legend { left: 16px; bottom: 14px; gap: 14px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.map-card { position: absolute; z-index: 500; right: 16px; top: 14px; width: 300px; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 10px; background: #0f151cf2; border: 1px solid #27415c; }
.map-label { color: #5f7a8c; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; background: none; border: 0; }
.unit-marker, .call-marker { background: none; border: 0; }
.unit-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: #0d1217e8; border: 1px solid; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text); }
.unit-tag.on { border: 2px solid #fff !important; }
.unit-tag i { width: 10px; height: 10px; border-radius: 50%; }
.call-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--mono); font-size: 11px; color: var(--text); border: 1px solid transparent; }
.call-tag.on { background: #0d1217e8; border: 2px solid #fff; }
.call-tag i { width: 12px; height: 12px; transform: rotate(45deg); }
.ring { position: relative; transform: translate(-50%, -50%); width: 12px; height: 12px; }
.ring i { position: absolute; inset: 0; border-radius: 50%; background: var(--amber); }
.ring s { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--amber); animation: ring 1.6s ease-out infinite; }
@keyframes ring { 0% { transform: translate(-50%, -50%) scale(.6); opacity: .9 } 100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0 } }

/* fiche */
.fiche-detail { min-width: 0; overflow-y: auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; }
.fiche-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fiche-head h1 { margin: 0; font-family: var(--cond); font-size: 30px; font-weight: 700; letter-spacing: .02em; }
.fiche-actions { margin-left: auto; display: flex; gap: 8px; }
.fiche-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.field { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field span:first-child { font-size: 12px; color: var(--muted); }
.field span:last-child { font-size: 15px; overflow-wrap: anywhere; }
.desc { white-space: pre-wrap; line-height: 1.45; }
.box { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); display: flex; flex-direction: column; gap: 10px; }
.box h3 { margin: 0; font-family: var(--cond); font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.unit-line { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--card); }
.unit-line .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.unit-line .grow { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }

/* sms */
.conv { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.conv-head { padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; min-height: 72px; }
.conv-head .who { display: flex; flex-direction: column; }
.conv-head .who strong { font-size: 17px; }
.conv-messages { flex-grow: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 70%; display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 14px; background: var(--card-on); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.mine { align-self: flex-end; background: var(--blue); color: #fff; border-radius: 14px; border-bottom-right-radius: 4px; }
.msg .txt { font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .time { font-family: var(--mono); font-size: 11px; opacity: .75; }
.reply { padding: 12px 20px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.reply-row { display: flex; gap: 10px; }
.reply-row input { flex-grow: 1; height: 44px; padding: 0 12px; border: 1px solid #2a3947; border-radius: 8px; background: var(--card); font-size: 15px; }
.reply-row button { height: 44px; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex-shrink: 0; }

/* dialogue */
dialog { width: 680px; max-width: calc(100vw - 32px); padding: 24px; border: 1px solid var(--line-on); border-radius: 14px; background: var(--panel); color: var(--text); }
dialog::backdrop { background: #000a; }
dialog h2 { font-size: 26px; margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid label, fieldset { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; margin-bottom: 6px; }
.form-grid input, .form-grid select, .form-grid textarea { padding: 10px 12px; border: 1px solid #2a3947; border-radius: 8px; background: var(--card); color: var(--text); font-size: 15px; }
.form-grid input, .form-grid select { height: 44px; }
.form-grid textarea { resize: vertical; }
.prio-row { display: flex; gap: 8px; }
.prio { flex-grow: 1; position: relative; }
.prio input { position: absolute; opacity: 0; }
.prio span { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 8px; border: 1px solid; font-family: var(--mono); font-size: 15px; font-weight: 600; cursor: pointer; }
.prio.p1 span { color: var(--red); border-color: var(--red); }
.prio.p2 span { color: var(--amber); border-color: var(--amber); }
.prio.p3 span { color: #4aa3ff; border-color: #4aa3ff; }
.prio.p1 input:checked + span { background: var(--red); color: #0b1015; }
.prio.p2 input:checked + span { background: var(--amber); color: #0b1015; }
.prio.p3 input:checked + span { background: #4aa3ff; color: #0b1015; }
.prio input:focus-visible + span { outline: 2px solid #7cc0ff; outline-offset: 2px; }
.dialog-actions { display: flex; gap: 10px; margin-top: 18px; }
.dialog-actions button { height: 44px; }

/* écrans divers */
.login { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { max-width: 460px; padding: 32px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.login-card h1 { margin: 0 0 12px; font-family: var(--cond); font-size: 30px; }
.login-card p { margin: 0; line-height: 1.5; color: var(--text-2); }
.toast { position: fixed; z-index: 1500; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 12px 18px; border-radius: 10px; background: #13263a; border: 1px solid #2f5a85; color: #dcecfb; font-size: 14px; box-shadow: 0 10px 30px #0006; }
.toast.error { background: #2a1414; border-color: #7a2e2e; color: #ffd9d9; }

@media (max-width: 1200px) {
  .view.ops { grid-template-columns: 300px minmax(0, 1fr); }
  .view.ops .panel:last-child { display: none; }
  .fiche-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- tablette en jeu (web/nui.js) ---------- */
.nui-only { display: none !important; }
html.nui .nui-only { display: inline-flex !important; }
html.nui .web-only, html.nui #switch-char, html.nui #login-discord, html.nui #login-msg { display: none !important; }
html.nui { background: transparent linear-gradient(transparent, transparent); } /* sinon le fond du body couvre toute la fenêtre */
html.nui body {
  position: fixed; inset: 5vh 6vw; height: auto;
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 0 0 14px #07090b, 0 0 0 16px #2b333b, 0 12px 28px #0006;
  transform: translateY(120vh); visibility: hidden;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .32s;
}
html.nui.open body { transform: translateY(0); visibility: visible; transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
/* capteur de la caméra dans le cadre */
/* le jeu reste visible autour de la tablette : pas de voile plein écran derrière les fenêtres */
html.nui dialog::backdrop { background: transparent; }
html.nui::after { content: ''; position: fixed; left: 50%; top: calc(5vh - 10px); width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #1b2530; box-shadow: inset 0 0 0 1px #33414e; opacity: 0; transition: opacity .2s; }
html.nui.open::after { opacity: 1; transition-delay: .25s; }
.tablet-close { align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-on); background: var(--card); color: var(--text-2); font-size: 16px; cursor: pointer; }
.tablet-close:hover { background: #2a1414; border-color: #7a2e2e; color: #ffd9d9; }

/* ---------- mode de dispatch ---------- */
.dispatch-mode { display: flex; align-items: center; gap: 10px; margin-left: 12px; padding: 5px 8px 5px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); }
.dispatch-mode .dm-led { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dispatch-mode.central { border-color: #1f5f3f; background: #0f1d17; }
.dispatch-mode.central .dm-led { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dispatch-mode.self { border-color: #6b4a17; background: #1c150b; }
.dispatch-mode.self .dm-led { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.dispatch-mode .dm-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.dispatch-mode .dm-text b { font-size: 13px; }
.dispatch-mode .dm-text span { font-size: 12px; color: var(--muted); max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1400px) { .dispatch-mode .dm-text span { display: none; } }

/* ---------- alerte immédiate (agent qui fait feu) ---------- */
.alert-banner { position: fixed; z-index: 1900; top: 72px; left: 50%; transform: translateX(-50%); width: min(920px, calc(100% - 32px));
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px;
  background: #3a0f0f; border: 2px solid #ff6b6b; color: #ffe1e1; box-shadow: 0 12px 40px #000a; animation: alert-pulse 1s ease-in-out infinite alternate; }
.alert-banner[hidden] { display: none; }
.alert-banner > i { font-size: 26px; color: #ff6b6b; }
.alert-banner .grow { display: flex; flex-direction: column; min-width: 0; }
.alert-banner b { font-family: var(--cond); font-size: 20px; letter-spacing: .06em; }
.alert-banner span { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-banner .btn-line { border-color: #ff6b6b80; color: #ffe1e1; background: #2a0c0c; }
@keyframes alert-pulse { from { box-shadow: 0 0 0 0 #ff6b6b66, 0 12px 40px #000a; } to { box-shadow: 0 0 0 10px #ff6b6b00, 0 12px 40px #000a; } }
@media (prefers-reduced-motion: reduce) { .alert-banner { animation: none; } }

/* ---------- véhicules suivis (carte) ---------- */
.veh-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 8px; background: #0d1217f0; border: 2px solid #4aa3ff; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text); box-shadow: 0 2px 8px #0008; }
.veh-tag.ambulance { border-color: #ff6b6b; }
.veh-tag i { font-size: 13px; color: #4aa3ff; }
.veh-tag.ambulance i { color: #ff6b6b; }
.veh-tag .veh-dir { display: inline-block; font-size: 10px; line-height: 1; color: #f0a33a; }
.veh-tag.parked { opacity: .6; border-style: dashed; }
.veh-tag.on { outline: 2px solid #fff; }
.veh-tag span b { color: #fff; }

/* ---------- filtres de carte, recherche, onglets unités / véhicules ---------- */
.map-filters { position: absolute; z-index: 500; left: 16px; top: 62px; right: 330px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.map-filters > * { pointer-events: auto; }
.mf-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: #0f151cee; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.mf-chip.on { color: var(--text); border-color: var(--line-on); background: #16283aee; }
.mf-chip.on i { color: var(--blue-soft); }
.mf-chip.mf-reset { color: #f5c77e; border-color: #6b4a17; }
.mf-select { height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: #0f151cee; color: var(--text); font-size: 12px; }
.side-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 9px; background: var(--card); border: 1px solid var(--line); width: 100%; }
.side-tabs button { flex: 1; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-weight: 700; font-size: 13px; letter-spacing: .02em; cursor: pointer; }
.side-tabs button.on { background: var(--card-on); color: var(--text); }
.side-tabs button span { margin-left: 4px; font-family: var(--mono); font-size: 12px; color: var(--blue-soft); }
.fleet-search { position: relative; margin: 0 12px 10px; }
.fleet-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; }
.fleet-search input { width: 100%; height: 36px; padding: 0 10px 0 32px; border-radius: 8px; border: 1px solid #2a3947; background: var(--card); color: var(--text); font-size: 14px; }
@media (max-width: 1100px) { .map-filters { right: 16px; } }
.unit-detail .unit-cs { white-space: nowrap; }

/* ---------- fiches : archives et journal ---------- */
.fiche-tools { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 10px; }
.fiche-tools > .btn-ghost { align-self: flex-start; }
.archive-tools { display: flex; gap: 8px; }
.archive-tools .fleet-search { flex: 1; margin: 0; }
.archive-tools .mf-select { height: 36px; }
.journal { gap: 6px; }
.journal-line { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--text-2); }
.journal-line .mono { flex-shrink: 0; }
.btn-danger { border-color: #7a2e2e; color: #ffb3b3; }
.btn-danger:hover { background: #2a1414; border-color: #ff6b6b; color: #ffd9d9; }



/* alerte AVP : bandeau ambre (tirs : rouge) */
.alert-banner.kind-crash { background: #3a2408; border-color: #f0a33a; color: #ffe9c7; animation-name: alert-pulse-amber; }
.alert-banner.kind-crash > i { color: #f0a33a; }
.alert-banner.kind-crash .btn-line { border-color: #f0a33a80; color: #ffe9c7; background: #2a1a06; }
@keyframes alert-pulse-amber { from { box-shadow: 0 0 0 0 #f0a33a66, 0 12px 40px #000a; } to { box-shadow: 0 0 0 10px #f0a33a00, 0 12px 40px #000a; } }

/* avis de mise à jour de la ressource */
.update-banner { position: fixed; z-index: 1950; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-radius: 10px; background: #13263a; border: 1px solid #2f5a85; color: #dcecfb; font-size: 14px; box-shadow: 0 10px 30px #0008; }
.update-banner[hidden] { display: none; }

/* ---------- mode dispatch ---------- */
.view.console { grid-template-columns: 370px minmax(0, 1fr) 330px; }
.console-inbox { border-right: 1px solid var(--line); }
.console-inbox kbd { margin-left: 4px; padding: 0 5px; border-radius: 4px; border: 1px solid #ffffff30; font: 600 11px/1.5 var(--mono); }
.console-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.console-map { flex: 1 1 58%; min-height: 0; display: flex; }
.console-map > .map-wrap { flex: 1; }
.console-fiche { flex: 1 1 42%; min-height: 0; display: flex; border-top: 1px solid var(--line); background: var(--bg); }
.console-fiche > .fiche-detail { flex: 1; padding: 16px 20px; gap: 14px; }
.console-fiche .fiche-head h1 { font-size: 24px; }
.console-units { display: flex; min-height: 0; border-left: 1px solid var(--line); }
.console-units > .panel { flex: 1; border: 0; }
.inbox { gap: 14px; }
.inbox-section { display: flex; flex-direction: column; gap: 8px; }
.inbox-title { display: flex; align-items: center; gap: 8px; font-family: var(--cond); font-size: 14px; letter-spacing: .06em; color: var(--muted); }
.inbox-title b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--card-on); color: var(--text); font: 700 12px/20px var(--mono); text-align: center; }
.inbox-title.hot b { background: #ff6b6b; color: #1a0606; }
.inbox-title.warn b { background: var(--amber); color: #1a1206; }
.inbox-sms { border: 1px solid var(--line); border-radius: 10px; background: var(--card); display: flex; flex-direction: column; }
.inbox-sms.unread { border-color: #6b4a17; }
.inbox-sms-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px 4px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.inbox-sms-head i { color: var(--muted); }
.inbox-sms-last { padding: 0 12px 9px; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-conv { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 10px; }
.inbox-conv .msg { max-width: 88%; padding: 7px 10px; font-size: 13px; }
.inbox-reply-form { display: flex; gap: 6px; }
.inbox-reply { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid #2a3947; background: var(--bg); color: var(--text); font-size: 13px; }
.btn-amber.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
.inbox-call { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--line-on); border-radius: 10px; background: var(--card); cursor: pointer; }
.inbox-call.prio-P1 { border-left-color: #ff6b6b; }
.inbox-call.prio-P2 { border-left-color: #f0a33a; }
.inbox-call.prio-P3 { border-left-color: #4aa3ff; }
.inbox-call.on { background: var(--card-on); border-color: var(--line-on); }
.inbox-call.drop-over { outline: 2px dashed #3ecf8e; outline-offset: 2px; background: #0f1d17; }
.inbox-call .waiting { color: #f5c77e; font-weight: 600; }
.inbox-units { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.inbox-units .chip { height: 22px; font-family: var(--mono); font-size: 11px; }
.drop-hint { color: var(--muted); font-style: italic; }
.unit-row[draggable="true"] { cursor: grab; }
@media (max-width: 1400px) { .view.console { grid-template-columns: 330px minmax(0, 1fr) 290px; } }

/* alerte P.I.E : bandeau bleu, sans pulsation (informative) */
.alert-banner.kind-taser { background: #0f1c2a; border: 1px solid #4aa3ff; color: #dcecfb; animation: none; box-shadow: 0 10px 30px #0008; }
.alert-banner.kind-taser > i { color: #4aa3ff; }
.alert-banner.kind-taser b { font-size: 17px; }
.alert-banner.kind-taser .btn-line { border-color: #4aa3ff80; color: #dcecfb; background: #0b1622; }

/* ---------- bouton panique ---------- */
.alert-banner.kind-panic { background: #4a0a0a; border: 2px solid #ff3b3b; color: #fff; animation: alert-pulse-panic .5s ease-in-out infinite alternate; }
.alert-banner.kind-panic > i { color: #ff3b3b; }
.alert-banner.kind-panic b { font-size: 22px; }
@keyframes alert-pulse-panic { from { background: #4a0a0a; box-shadow: 0 0 0 0 #ff3b3b88, 0 12px 40px #000a; } to { background: #6a0d0d; box-shadow: 0 0 0 14px #ff3b3b00, 0 12px 40px #000a; } }
.unit-row.panic { border-color: #ff3b3b; background: #2a0c0c; animation: panic-row 1s ease-in-out infinite alternate; }
@keyframes panic-row { from { background: #2a0c0c; } to { background: #4a1010; } }
.panic-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #ff8a8a; }
.unit-tag.panic, .veh-tag.panic { border: 2px solid #ff3b3b !important; background: #4a0a0a; animation: panic-marker .6s ease-in-out infinite alternate; }
@keyframes panic-marker { from { box-shadow: 0 0 0 0 #ff3b3baa; } to { box-shadow: 0 0 0 12px #ff3b3b00; } }
@media (prefers-reduced-motion: reduce) { .alert-banner.kind-panic, .unit-row.panic, .unit-tag.panic, .veh-tag.panic { animation: none; } }

/* ---------- services concernés ---------- */
.svc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.svc-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid; font-size: 11.5px; font-weight: 700; background: #0f151c; }
.svc-chip.waiting { color: #f5c77e; border-color: #6b4a17; background: #1c150b; }
.svc-field { gap: 8px; }
.svc-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-toggle { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; border: 1.5px solid; background: transparent; font-weight: 700; font-size: 13px; cursor: pointer; }
.svc-toggle.on { color: #0b1015; }
.svc-toggle:disabled { cursor: default; opacity: .8; }
.unit-line.other-service { opacity: .55; }
.svc-all { height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-on); background: var(--card); color: var(--text-2); font-weight: 700; font-size: 13px; cursor: pointer; }
.svc-all:hover { color: var(--text); }
.line-tag { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; height: 20px; padding: 0 7px; border-radius: 6px; background: #16283a; color: var(--blue-soft); font: 700 11px/1 var(--mono); }

/* ---------- repères de géolocalisation : pin + étiquette accrochée ---------- */
.geo { position: relative; width: 0; height: 0; }
.geo-pin { position: absolute; left: -11px; top: -30px; width: 22px; height: 30px; overflow: visible; filter: drop-shadow(0 2px 3px #000a); }
.geo-pin path { fill: var(--c); stroke: #0b1015; stroke-width: 1.6; }
.geo-pin circle { fill: #0b1015; }
.geo-ground { position: absolute; left: -5px; top: -2.5px; width: 10px; height: 5px; border-radius: 50%; background: #000a; }
.geo-lead { position: absolute; left: 9px; top: -19px; width: 9px; height: 2px; background: var(--c); }
.geo > .unit-tag, .geo > .veh-tag { position: absolute; left: 17px; top: -19px; transform: translateY(-50%); }
.geo.on .geo-pin path { stroke: #fff; stroke-width: 2.4; }
.geo.on { z-index: 2; }
.geo.parked .geo-pin { opacity: .6; }
.geo.panic .geo-ground { background: #ff3b3b; animation: geo-ring .8s ease-out infinite; }
@keyframes geo-ring { from { box-shadow: 0 0 0 0 #ff3b3bcc; } to { box-shadow: 0 0 0 16px #ff3b3b00; } }
@media (prefers-reduced-motion: reduce) { .geo.panic .geo-ground { animation: none; } }

/* alerte LAPI : bandeau violet, sans pulsation (informative) */
.alert-banner.kind-anpr { background: #1c1430; border: 1px solid #b58cff; color: #ece2ff; animation: none; box-shadow: 0 10px 30px #0008; }
.alert-banner.kind-anpr > i { color: #b58cff; }
.alert-banner.kind-anpr b { font-size: 17px; }
.alert-banner.kind-anpr .btn-line { border-color: #b58cff80; color: #ece2ff; background: #150f24; }

/* alerte vérification de sécurité : bandeau orange */
.alert-banner.kind-safety { background: #3a1f08; border-color: #ff9f43; color: #ffe6cc; animation-name: alert-pulse-safety; }
.alert-banner.kind-safety > i { color: #ff9f43; }
.alert-banner.kind-safety .btn-line { border-color: #ff9f4380; color: #ffe6cc; background: #2a1606; }
@keyframes alert-pulse-safety { from { box-shadow: 0 0 0 0 #ff9f4366, 0 12px 40px #000a; } to { box-shadow: 0 0 0 10px #ff9f4300, 0 12px 40px #000a; } }

/* ---------- messages sur une fiche ---------- */
.note-form { display: flex; gap: 6px; }
.note-form .input { flex: 1; min-width: 0; height: 36px; font-size: 14px; }
.journal-note { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; border-bottom-left-radius: 3px; background: #16283a; border: 1px solid #27415c; color: var(--text); font-size: 14px; }