* { box-sizing: border-box; }

/* ===== Page d'accueil plateforme (landing) ===== */
#landing {
  position: fixed; inset: 0; z-index: 500; overflow-y: auto;
  background:
    radial-gradient(1100px 520px at 75% -10%, rgba(0,180,216,0.16), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(255,210,74,0.10), transparent 55%),
    linear-gradient(180deg, #0c0e13 0%, #0a0c10 100%);
  color: #e8edf3; padding: 0 0 50px;
}
body.in-app #landing { display: none; }
.landing-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 30px; }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-mark { font-size: 22px; }
.brand-name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(90deg,#ffd24a,#ff9f40); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.brand-sub { font-size: 12px; color: #6a7686; text-transform: uppercase; letter-spacing: 0.08em; }
.landing-top-actions { display: flex; align-items: center; gap: 8px; }
.landing-top-actions button, #landing-user { background:#161a21; border:1px solid #262c36; color:#cfd6df; border-radius:8px; padding:7px 11px; cursor:pointer; font-size:14px; }
.landing-hero { max-width: 920px; margin: 40px auto 10px; padding: 0 24px; text-align: center; }
.landing-hero h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.08; font-weight: 850; letter-spacing: -0.03em; margin: 0 0 16px; }
.landing-hero h1 .hl { background: linear-gradient(90deg,#00d4ff,#4bc0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.landing-tag { font-size: 17px; color: #9aa6b4; max-width: 680px; margin: 0 auto 28px; line-height: 1.55; }
.landing-search { display: flex; gap: 8px; max-width: 680px; margin: 0 auto; }
.landing-search input { flex: 1; padding: 15px 18px; font-size: 16px; background: #12151b; border: 1px solid #2a313c; border-radius: 12px; color: #fff; }
.landing-search input:focus { outline: none; border-color: #00b4d8; box-shadow: 0 0 0 3px rgba(0,180,216,0.15); }
.landing-search button { padding: 0 26px; font-size: 16px; font-weight: 700; background: linear-gradient(180deg,#00b4d8,#0095b6); border: none; border-radius: 12px; color: #00171d; cursor: pointer; }
.landing-stats { display: flex; gap: 28px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.landing-stats .ls { text-align: center; }
.landing-stats .ls-n { font-size: 26px; font-weight: 800; }
.landing-stats .ls-l { font-size: 12px; color: #6a7686; }
.landing-section { max-width: 1040px; margin: 44px auto 0; padding: 0 24px; }
.landing-section h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: #6a7686; margin: 0 0 16px; }
.espaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 16px; }
.espace { text-align: left; background: #12151b; border: 1px solid #232a34; border-radius: 16px; padding: 20px; cursor: pointer; transition: transform .15s, border-color .15s; position: relative; }
.espace:hover { transform: translateY(-3px); border-color: #00b4d8; }
.espace.soon { opacity: .7; cursor: default; }
.espace.soon:hover { transform: none; border-color: #232a34; }
.espace-ic { font-size: 30px; }
.espace-name { font-size: 17px; font-weight: 700; margin: 10px 0 4px; }
.espace-desc { font-size: 13px; color: #8a96a4; line-height: 1.45; }
.espace-badge { position: absolute; top: 14px; right: 14px; font-size: 10px; padding: 2px 8px; border-radius: 10px; }
.espace-badge.live { background: #11331f; color: #57e08a; } .espace-badge.soon { background: #2a2410; color: #ffd24a; }
.landing-cta .cta-card { display: flex; align-items: center; gap: 18px; background: linear-gradient(120deg, rgba(0,180,216,0.10), rgba(255,210,74,0.06)); border: 1px solid #232a34; border-radius: 16px; padding: 22px 24px; flex-wrap: wrap; }
.cta-ic { font-size: 34px; } .cta-card h3 { margin: 0 0 4px; } .cta-card p { margin: 0; color: #9aa6b4; font-size: 14px; }
.cta-card button { margin-left: auto; padding: 12px 20px; background: #ffd24a; border: none; border-radius: 10px; color: #1a1400; font-weight: 700; cursor: pointer; }
.landing-foot { text-align: center; color: #4a5563; font-size: 12px; margin-top: 44px; }
@media (max-width: 600px) { .landing-search { flex-direction: column; } .landing-stats { gap: 18px; } }

/* Login page */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: #15161a;
}
.login-box {
  background: #1f2126; border: 1px solid #2a2d33; border-radius: 10px;
  padding: 36px 40px; width: 340px; text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.login-logo { font-size: 22px; color: #ffd24a; margin-bottom: 4px; }
.login-sub { font-size: 12px; color: #7e8694; margin-bottom: 24px; }
#login-form { display: flex; flex-direction: column; gap: 12px; }
#login-form input {
  padding: 11px 14px; font-size: 15px;
  background: #0f1013; color: #fff; border: 1px solid #3a3f48; border-radius: 6px;
}
#login-form input:focus { border-color: #ffd24a; outline: none; }
#login-form button {
  padding: 11px; font-size: 15px; font-weight: 600;
  background: #ffd24a; color: #1a1a1a; border: none; border-radius: 6px; cursor: pointer;
  margin-top: 4px;
}
#login-form button:hover { background: #ffdd6e; }
.login-error { color: #ff6384; font-size: 13px; margin-top: 14px; min-height: 18px; }
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: #1b1d20; color: #e8e8e8; }

header {
  background: #15161a;
  padding: 10px 16px;
  border-bottom: 1px solid #2a2d33;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 12px;
}
header h1 { font-size: 17px; margin: 0; color: #ffd24a; }

.vehicle-selector { display: flex; align-items: center; gap: 6px; }
.vehicle-selector label { font-size: 13px; color: #b8c2cd; }
#vehicle {
  padding: 7px 9px; font-size: 13px;
  background: #0f1013; color: #fff; border: 1px solid #3a3f48; border-radius: 4px; min-width: 240px;
}
#vehicle:focus { outline: 1px solid #ffd24a; }

.search-bar { display: flex; gap: 6px; flex: 1 1 420px; min-width: 320px; }
.search-wrap { position: relative; flex: 1 1 auto; min-width: 180px; }
.search-wrap #q { width: 100%; min-width: 0; box-sizing: border-box; }
.search-bar > button { flex-shrink: 0; }
.autocomplete {
  position: absolute; top: calc(100% + 3px); left: 0; z-index: 200;
  min-width: 420px; max-width: 560px;
  background: #1f2126; border: 1px solid #3a3f48; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5); max-height: 380px; overflow-y: auto;
}
.ac-item {
  display: flex; align-items: baseline; gap: 8px; padding: 8px 12px;
  cursor: pointer; border-bottom: 1px solid #2a2d33;
}
.ac-item:hover, .ac-item.active { background: #2c2f36; }
.ac-term { color: #ffd24a; font-family: ui-monospace, "Consolas", monospace; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ac-def { color: #b8c2cd; font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-tag { font-size: 9px; padding: 1px 5px; background: #354060; color: #9ab2ff; border-radius: 8px; }
.sugg-def { font-size: 11px; color: #9aa4b0; }
#fulltext-panel { border-left: 3px solid #6cd4f0; }
.ft-bus-head {
  font-size: 11px; color: #6cd4f0; font-weight: 600;
  padding: 6px 8px 2px !important; cursor: default !important;
  background: none !important; border: none !important;
}
.ft-bus-head:hover { background: none !important; }
#q {
  flex: 1; padding: 8px 12px; font-size: 14px;
  background: #0f1013; color: #fff; border: 1px solid #3a3f48; border-radius: 4px; outline: none;
}
#q:focus { border-color: #ffd24a; }
button {
  background: #2a2d33; color: #f0f0f0; border: 1px solid #3a3f48;
  padding: 7px 13px; font-size: 13px; border-radius: 4px; cursor: pointer;
}
button:hover { background: #353940; }
button:active { background: #1f2126; }
.stats { font-size: 12px; color: #7e8694; }
.health-bar {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: #8a94a2; margin-left: auto;
}
.hb-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 3px;
}
.hb-dot.ok { background: #4bc064; box-shadow: 0 0 4px #4bc064; }
.hb-dot.ko { background: #ff6384; box-shadow: 0 0 4px #ff6384; }
.hb-sep { color: #3a3f48; margin: 0 2px; }
.user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #c8d4e1;
  background: #2a2d33; border: 1px solid #3a3f48; border-radius: 14px;
  padding: 3px 6px 3px 10px;
}
.user-chip button {
  padding: 2px 7px; font-size: 12px; border-radius: 10px;
  background: #3a2d2d; border: 1px solid #5a3a3a; color: #ff9070; cursor: pointer;
}
.user-chip button:hover { background: #5a3030; }

main { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - 78px); }

#sidebar { background: #1f2126; border-right: 1px solid #2a2d33; overflow-y: auto; }
.panel { padding: 10px 14px; border-bottom: 1px solid #2a2d33; }
.panel h3 { margin: 0 0 8px 0; font-size: 12px; color: #ffd24a; text-transform: uppercase; letter-spacing: 0.05em; }
.panel .hint { font-size: 11px; color: #7e8694; margin-bottom: 8px; }
.panel ul { list-style: none; padding: 0; margin: 0; }
.panel li {
  padding: 5px 8px; font-size: 13px; border-radius: 3px; cursor: pointer; color: #d8d8d8;
  border: 1px solid transparent; display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
.panel li:hover { background: #2c2f36; border-color: #3a3f48; }
.panel li.active { background: #3a2d10; border-color: #ffd24a; color: #ffd24a; }
.panel li.traced { background: #1a2b1a; border-color: #4bc064; }
.panel li .meta { font-size: 11px; color: #7e8694; }
.rel-actions { display: flex; gap: 4px; }
.rel-actions button {
  padding: 2px 8px; font-size: 12px; line-height: 1;
  background: #2a2d33; border: 1px solid #3a3f48; border-radius: 3px; cursor: pointer;
  color: #d0d6df;
}
.rel-actions button:hover { background: #3a3f48; color: #ffd24a; }
.btn-jump:hover { color: #4bc064 !important; }
.btn-easy { border-color: #2e5286 !important; color: #7fd0ff !important; font-size: 10px !important; font-weight: 800; letter-spacing: .3px; }
.btn-easy:hover { background: #1d3556 !important; color: #bfe6ff !important; }
/* barre de filtres de recherche par type */
#search-filters { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 10px 8px; }
.sf-chip { padding: 3px 10px; font-size: 12px; font-weight: 600; border-radius: 13px; cursor: pointer;
  background: #1a1d23; border: 1px solid #333a45; color: #aeb6c2; }
.sf-chip:hover { border-color: #4a5566; color: #e6edf5; }
.sf-chip.on { background: #1d3556; border-color: #3aa0ff; color: #fff; }
.landing-quick { display: flex; justify-content: center; margin-top: 12px; }
.landing-pill { background: linear-gradient(135deg,#16263d,#1d3556); color: #cfe6ff; border: 1px solid #2e5286;
  border-radius: 22px; padding: 9px 18px; font-size: 14px; font-weight: 600; cursor: pointer; }
.landing-pill:hover { border-color: #3aa0ff; color: #fff; box-shadow: 0 0 14px #3aa0ff44; }
#search-scope { background: #161a22; color: #cfe0f5; border: 1px solid #333a45; border-radius: 7px;
  padding: 0 8px; height: 34px; font-size: 13px; cursor: pointer; max-width: 168px; }
#search-scope:hover { border-color: #3aa0ff; }

.term-chip {
  display: inline-block; background: #2a2d33; color: #ffd24a;
  padding: 1px 6px; border-radius: 3px;
  font-family: ui-monospace, "Consolas", monospace; font-size: 12px;
}

.swatch {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; margin-right: 5px; vertical-align: middle;
  border: 1px solid rgba(255,255,255,0.2);
}

#card-panel {
  background: linear-gradient(135deg, #1d2230 0%, #1a2025 100%);
  border-left: 3px solid #00b4d8;
  padding: 12px 14px !important;
}
.card-head {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 8px;
}
.card-head .term-chip {
  font-size: 14px; padding: 3px 10px; font-weight: 600;
}
.btn-fav {
  margin-left: auto; background: transparent; border: none;
  color: #ffd24a; font-size: 20px; cursor: pointer; padding: 0 4px;
}
.btn-fav.on { color: #ffd24a; }
.btn-fav:hover { transform: scale(1.15); }

.card-note, .card-measure {
  margin: 8px 0; padding: 8px 10px;
  background: rgba(255,255,255,0.03); border-radius: 4px;
}
.card-note-title { font-size: 11px; color: #8a94a2; margin-bottom: 5px; text-transform: uppercase; }
.note-input {
  width: 100%; min-height: 46px; resize: vertical;
  background: #0f1013; color: #e8e8e8; border: 1px solid #3a3f48;
  border-radius: 4px; padding: 6px 8px; font-family: inherit; font-size: 12px;
}
.note-meta { font-size: 10px; color: #5a6470; margin: 3px 0; }
.btn-save-note, .btn-add-measure {
  font-size: 11px; padding: 4px 10px; margin-top: 5px;
  background: #2a3a2a; border: 1px solid #4bc064; color: #6fe080;
  border-radius: 4px; cursor: pointer;
}
.btn-save-note:hover { background: #3a4a3a; }
.measure-form { display: flex; gap: 4px; align-items: center; }
.measure-form input { flex: 1; min-width: 0; padding: 5px 7px; background: #0f1013; color: #fff;
  border: 1px solid #3a3f48; border-radius: 4px; font-size: 12px; }
.measure-form select { padding: 5px; background: #0f1013; color: #fff; border: 1px solid #3a3f48; border-radius: 4px; }
.btn-add-measure { padding: 5px 12px; }
.measure-list { list-style: none; padding: 0; margin: 6px 0 0; }
.measure-list li { font-size: 12px; color: #d0d6df; padding: 3px 0; border-bottom: 1px solid #2a2d33; }
.measure-list .m-ts { font-size: 10px; color: #5a6470; margin-left: 6px; }
.home-tab-special { background: #2a2410; border-color: #5a4a20; }
.home-tab-special:hover { background: #3a3418; }
.card-kind {
  font-size: 11px; color: #b8c2cd; padding: 2px 6px;
  background: #2a2d33; border-radius: 3px;
}
.card-volt {
  font-size: 11px; color: #ffd24a; padding: 2px 6px;
  background: rgba(255, 210, 74, 0.15); border-radius: 3px; font-weight: 600;
}
.card-family {
  font-size: 12px; color: #c8d4e1;
  padding: 5px 8px; background: rgba(0, 180, 220, 0.08);
  border-radius: 3px; margin-bottom: 8px;
}
.card-endesc {
  font-size: 11px; color: #9ab2b8; font-style: italic;
  margin-bottom: 6px; padding-left: 4px;
}
.card-locrow {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px;
}
.cl-zone { font-size: 10px; padding: 2px 6px; border-radius: 8px;
  background: rgba(255,94,199,0.12); color: #ff9ad8; }
.cl-side { font-size: 10px; padding: 2px 6px; border-radius: 8px;
  background: rgba(255,159,64,0.15); color: #ffb070; }
.cl-veh { font-size: 10px; padding: 2px 6px; border-radius: 8px;
  background: rgba(120,160,255,0.12); color: #9ab2ff; }
.card-variants { font-size: 10px; color: #888; margin-bottom: 6px; }
.card-logic {
  margin: 8px 0; padding: 8px 10px;
  background: rgba(255,210,74,0.06); border-left: 3px solid #ffd24a;
  border-radius: 3px;
}
.card-logic-title {
  font-size: 11px; color: #ffd24a; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 5px;
}
.card-logic-list { margin: 0; padding-left: 16px; }
.card-logic-list li { font-size: 11px; color: #d0d6df; line-height: 1.5; }

/* Méthodologie modal */
.methodo-body { overflow-y: auto; flex: 1; }
.meth-sec { margin-bottom: 22px; }
.meth-sec h3 { color: #ffd24a; font-size: 14px; margin: 0 0 8px; }
.meth-p { font-size: 13px; color: #c8d4e1; line-height: 1.5; margin: 0 0 10px; }
.meth-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
.meth-table th { text-align: left; color: #7e8694; font-size: 11px; padding: 4px 8px; border-bottom: 1px solid #3a3f48; }
.meth-table td { padding: 5px 8px; border-bottom: 1px solid #2a2d33; color: #d8d8d8; }
.meth-code { font-family: ui-monospace, monospace; color: #ffd24a; font-weight: 600; white-space: nowrap; }
.meth-wire { font-family: ui-monospace, monospace; color: #6cd4f0; font-size: 11px; }
.meth-state { font-size: 12px; color: #c8d4e1; padding: 4px 0; }
.meth-key {
  font-size: 12px; color: #d0d6df; line-height: 1.5;
  background: rgba(0,180,220,0.08); padding: 8px 10px;
  border-radius: 4px; margin: 8px 0 0;
}
.meth-steps { margin: 0; padding-left: 18px; }
.meth-steps li { font-size: 13px; color: #d0d6df; line-height: 1.6; padding: 2px 0; }

/* Diagnostic guidé */
.diag-form { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
#diag-symptom { flex: 1; min-width: 240px; padding: 10px 12px; background: #0f1013;
  color: #fff; border: 1px solid #3a3f48; border-radius: 6px; font-size: 14px; }
#diag-vehicle { padding: 10px; background: #0f1013; color: #fff; border: 1px solid #3a3f48; border-radius: 6px; }
#diag-go { padding: 10px 18px; background: #ff6384; color: #fff; border: none;
  border-radius: 6px; font-weight: 600; cursor: pointer; }
#diag-go:hover { background: #ff7a96; }
.diag-suggest { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.diag-ex { font-size: 12px; padding: 4px 10px; background: #2a2d33; color: #b8c2cd;
  border: 1px solid #3a3f48; border-radius: 12px; cursor: pointer; }
.diag-ex:hover { background: #3a3f48; color: #ff9ab0; }
.diag-result { overflow-y: auto; flex: 1; }
.diag-loading, .diag-err { padding: 24px; text-align: center; color: #8a94a2; }
.diag-err { color: #ff6384; }
.diag-past { font-size: 12px; color: #ffaa70; margin-bottom: 8px; }
.diag-hypo { font-size: 13px; color: #c8d4e1; padding: 8px 10px; background: rgba(255,99,132,0.08);
  border-radius: 5px; margin-bottom: 12px; }
.diag-hypo b { color: #ff6384; }
.diag-steps { list-style: none; counter-reset: ds; padding: 0; margin: 0; }
.diag-step { counter-increment: ds; position: relative; padding: 10px 10px 10px 40px;
  border-left: 2px solid #3a3f48; margin-left: 14px; margin-bottom: 10px; }
.diag-step::before { content: counter(ds); position: absolute; left: -14px; top: 8px;
  width: 26px; height: 26px; border-radius: 50%; background: #ff6384; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.ds-check { font-size: 14px; color: #fff; font-weight: 600; margin-bottom: 5px; }
.ds-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #b8c2cd; margin-bottom: 5px; }
.ds-ou { color: #6cd4f0; }
.ds-att b { color: #ffd24a; }
.ds-open { font-size: 11px; padding: 1px 7px; background: #006a7f; color: #fff;
  border: 1px solid #00b4d8; border-radius: 3px; cursor: pointer; margin-left: 4px; }
.ds-branch { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; }
.ds-ok { color: #6fe080; }
.ds-ko { color: #ff8a9c; }
.diag-comps { margin-top: 12px; font-size: 12px; color: #8a94a2; }
.diag-comps .ds-open { background: #3a2d50; border-color: #9966ff; margin: 0 2px; }
.diag-conseil { margin-top: 14px; padding: 10px 12px; background: rgba(0,180,220,0.08);
  border-left: 3px solid #00b4d8; border-radius: 4px; font-size: 13px; color: #d0d6df; }
.diag-export {
  display: block; margin-top: 16px; padding: 9px 16px;
  background: #2a2d33; color: #d0d6df; border: 1px solid #3a3f48;
  border-radius: 6px; cursor: pointer; font-size: 13px;
}
.diag-export:hover { background: #3a3f48; color: #ffd24a; border-color: #ffd24a; }

/* Base de données */
.db-header { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.db-header h2 { margin: 0; color: #ffd24a; font-size: 18px; white-space: nowrap; }
#db-search { flex: 1; max-width: 360px; padding: 8px 12px; background: #0f1013;
  color: #fff; border: 1px solid #3a3f48; border-radius: 4px; }
.db-body { flex: 1; overflow-y: auto; }
.db-count { font-size: 12px; color: #7e8694; margin-bottom: 12px; }
.db-group { margin-bottom: 20px; }
.db-group-title {
  font-size: 14px; color: #9ab2ff; font-weight: 600;
  padding-bottom: 6px; border-bottom: 1px solid #2a2d33; margin-bottom: 10px;
}
.db-group-n { background: rgba(120,160,255,0.15); padding: 0 7px; border-radius: 10px; font-size: 11px; margin-left: 6px; }
.db-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.db-doc {
  display: flex; gap: 10px; background: #1a1c20;
  border: 1px solid #2a2d33; border-radius: 6px; padding: 10px;
}
.db-doc-thumb { flex: 0 0 60px; width: 60px; height: 78px; background: #0f1013;
  border-radius: 3px; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.db-doc-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; background: white; }
.db-doc-info { flex: 1; min-width: 0; }
.db-doc-name { font-size: 13px; color: #e8ecf0; font-weight: 600; cursor: pointer; }
.db-doc-name:hover { color: #00d4ff; }
.db-doc-tags { font-size: 11px; color: #c39aff; margin: 3px 0; }
.db-doc-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.db-badge { font-size: 10px; font-weight: 700; border-radius: 6px; padding: 1px 7px; border: 1px solid transparent; }
.db-badge.bk-schema { background: #10261a; color: #7be3a0; border-color: #1d4a30; }
.db-badge.bk-cours { background: #221a33; color: #c9a6ff; border-color: #3a2a55; }
.db-badge.bk-mixte { background: #2a2410; color: #ffd24a; border-color: #5a4a20; }
.db-badge.bgen { background: #0a2a3a; color: #7fd3ff; border-color: #0d4a5e; }
.db-badge.bgen-unk { background: #2a1a1a; color: #ff9a8d; border-color: #5a2a2a; }
/* Filtres par catégorie (Ma base) */
.db-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; }
.dbf { background: #16202e; border: 1px solid #2a3550; color: #aebacc; border-radius: 14px;
  padding: 3px 12px; font-size: 12px; cursor: pointer; }
.dbf:hover { border-color: #3aa0ff; color: #dce6f5; }
.dbf.active { background: #0a3a4a; color: #7fe3ff; border-color: #0d4a5e; }
.db-doc-resume { font-size: 11px; color: #a8b0bc; line-height: 1.4; }
.db-struct { margin-top: 5px; font-size: 11px; padding: 2px 8px; background: #3a2a50;
  border: 1px solid #9966ff; color: #c39aff; border-radius: 3px; cursor: pointer; }
.db-ok { font-size: 11px; color: #6fe080; }

/* Import documents */
.dropzone {
  border: 2px dashed #3a3f48; border-radius: 8px;
  padding: 36px 20px; text-align: center; color: #8a94a2;
  background: #0f1013; margin: 14px 0; transition: all 0.15s;
}
.dropzone.over { border-color: #00b4d8; background: #0f1a1d; color: #00d4ff; }
.dz-icon { font-size: 38px; margin-bottom: 10px; }
.dz-pick { color: #00b4d8; cursor: pointer; text-decoration: underline; }
.dz-hint { font-size: 11px; color: #5a6470; margin-top: 8px; }
.import-list { max-height: 300px; overflow-y: auto; }
.import-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-bottom: 1px solid #2a2d33; font-size: 13px;
}
.ir-name { color: #e8e8e8; }
.ir-status { color: #8a94a2; font-size: 12px; }
.ir-open, .ir-struct {
  margin-left: 6px; padding: 2px 8px; font-size: 11px;
  background: #006a7f; color: #fff; border: 1px solid #00b4d8;
  border-radius: 3px; cursor: pointer;
}
.ir-struct { background: #3a2a50; border-color: #9966ff; }
.ir-struct:disabled { opacity: 0.6; }
.import-row { flex-wrap: wrap; }
.ir-structured {
  flex: 0 0 100%; margin-top: 6px; padding: 8px 10px;
  background: rgba(153,102,255,0.08); border-left: 2px solid #9966ff;
  border-radius: 3px; font-size: 12px; color: #d0d6df; line-height: 1.5;
}
.irs-veh { color: #9ab2ff; font-weight: 600; margin-bottom: 3px; }
.irs-resume { color: #c8d4e1; margin: 4px 0; }
.import-veh-row { display: flex; gap: 10px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.import-veh-row label { font-size: 13px; color: #b8c2cd; display: flex; align-items: center; gap: 6px; }
.import-veh-row select, .import-veh-row input {
  padding: 7px 10px; background: #0f1013; color: #fff;
  border: 1px solid #3a3f48; border-radius: 4px; font-size: 13px;
}
.import-veh-row input { flex: 1; min-width: 180px; }

/* Import dossier complet + progression */
.import-folder-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 2px;
}
.dz-folder {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 7px; cursor: pointer;
  background: linear-gradient(135deg, #006a7f, #00485a);
  color: #fff; border: 1px solid #00b4d8; font-size: 13px; font-weight: 600;
  white-space: nowrap; transition: filter .15s;
}
.dz-folder:hover { filter: brightness(1.18); }
.dz-folder-hint { font-size: 11px; color: #7a8694; flex: 1; min-width: 160px; }
.import-progress {
  margin: 12px 0; padding: 12px 14px; border-radius: 8px;
  background: #0f1013; border: 1px solid #2a2d33;
}
.ip-head { display: flex; justify-content: space-between; align-items: center; }
.ip-head #ip-text { font-size: 13px; color: #e8e8e8; font-weight: 600; }
.ip-cancel {
  padding: 3px 12px; font-size: 11px; cursor: pointer;
  background: #3a1d1d; color: #ffb4b4; border: 1px solid #7f3030; border-radius: 4px;
}
.ip-track {
  height: 9px; border-radius: 5px; background: #1c1f25;
  overflow: hidden; margin: 9px 0 7px;
}
.ip-bar {
  height: 100%; width: 0%; border-radius: 5px;
  background: linear-gradient(90deg, #00b4d8, #00ffa8);
  transition: width .25s ease;
}
.ip-sub { font-size: 12px; color: #9aa6b4; }
.ip-actions { margin-top: 10px; }
.ip-open-db {
  padding: 7px 16px; font-size: 13px; cursor: pointer; font-weight: 600;
  background: #006a7f; color: #fff; border: 1px solid #00b4d8; border-radius: 5px;
}
.ip-open-db:hover { filter: brightness(1.18); }
.import-row-fail { background: rgba(180,60,60,0.07); }
.import-row-fail .ir-status { color: #ff9a9a; }

/* Toast transitoire */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: #1a1d23; color: #e8eef5; padding: 12px 20px; border-radius: 8px;
  border: 1px solid #00b4d8; font-size: 13px; z-index: 9999;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; max-width: 80vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Recherche par châssis */
.cs-note { font-size: 11px; color: #c79a5a; }
.cs-input {
  width: 100%; box-sizing: border-box; margin: 6px 0 12px;
  padding: 12px 14px; font-size: 16px; border-radius: 8px;
  background: #0f1013; color: #fff; border: 1px solid #3a3f48;
}
.cs-input:focus { outline: none; border-color: #00b4d8; }
.cs-results { max-height: 60vh; overflow-y: auto; }
.cs-group { margin-bottom: 12px; border-bottom: 1px solid #23262c; padding-bottom: 10px; }
.cs-group-title { font-size: 14px; color: #e8eef5; font-weight: 600; margin-bottom: 7px; }
.cs-cfg { color: #9ab2ff; font-weight: 500; }
.cs-docs { display: flex; flex-wrap: wrap; gap: 7px; }
.cs-doc {
  display: inline-block; max-width: 100%; padding: 7px 11px; font-size: 12.5px;
  background: #14181d; color: #cfe6ff; border: 1px solid #28323c; border-radius: 6px;
  text-decoration: none; cursor: pointer; transition: all .12s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-doc:hover { background: #0f2630; border-color: #00b4d8; color: #fff; }
.cs-bar { display: flex; gap: 8px; align-items: stretch; margin: 6px 0 12px; }
.cs-bar .cs-input { margin: 0; flex: 1; }
.cs-portal {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0 16px; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 600;
  background: linear-gradient(135deg, #006a7f, #00485a); color: #fff; border: 1px solid #00b4d8;
}
.cs-portal:hover { filter: brightness(1.18); }

/* Admin — déconnexion globale */
.admin-security { border-left: 3px solid #c0392b; }
.logout-all-btn {
  padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: #3a1d1d; color: #ffb4b4; border: 1px solid #7f3030; border-radius: 5px;
}
.logout-all-btn:hover { background: #5a2424; color: #fff; }
.logout-all-btn:disabled { opacity: 0.6; cursor: default; }
.irs-comps { color: #9ab2ff; font-family: ui-monospace, monospace; font-size: 11px; }
.irs-sys { color: #c39aff; font-size: 11px; }

/* Équipementiers */
.equip-card { background: rgba(0,180,220,0.05); border-radius: 5px; padding: 12px; border-left: 3px solid #00b4d8; }
.equip-cat { font-size: 11px; color: #6cd4f0; font-weight: normal; margin-left: 8px; }
.equip-row { font-size: 13px; color: #d0d6df; line-height: 1.5; margin-bottom: 5px; }
.equip-row strong { color: #ffd24a; }
.equip-diag { background: rgba(255,159,64,0.08); padding: 6px 8px; border-radius: 3px; }
.equip-diag strong { color: #ffb070; }
.equip-links { font-size: 11px; margin-top: 6px; }
.equip-links a { color: #6cd4f0; text-decoration: none; }
.equip-links a:hover { text-decoration: underline; }
#wirepath-panel { border-left: 3px solid #ff9f40; }
.wp-step { display: flex; align-items: center; gap: 8px; }
.wp-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #ff9f40; color: #1a1a1a; font-size: 11px; font-weight: 700;
}
.wp-pg { color: #fff; font-family: ui-monospace, monospace; font-size: 12px; }
.wp-comps { color: #9ab2ff; font-size: 11px; font-family: ui-monospace, monospace; }
.wp-near { color: #6f7e96; font-size: 10px; font-family: ui-monospace, monospace; font-style: italic; margin-left: 6px; opacity: .8; }
.wp-verif { color: #6ee0b0; font-size: 11px; font-weight: 700; background: #11271f; border: 1px solid #2e6a4e; border-radius: 9px; padding: 1px 8px; margin-left: 6px; cursor: help; }

.card-locations { margin: 10px 0 6px; }
.card-loc-title {
  font-size: 11px; color: #ff5ec7; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 6px;
}
.card-loc-list { display: flex; flex-wrap: wrap; gap: 5px; }
.loc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #2a1c28; border: 1px solid #5a2d50;
  border-radius: 4px; padding: 3px 7px; cursor: pointer;
  font-size: 11px;
}
.loc-chip:hover { background: #3a2638; border-color: #ff5ec7; }
.loc-chip .loc-bus { color: #c8b0c4; }
.loc-chip .loc-pg { color: #fff; font-family: ui-monospace, monospace; font-weight: 600; }
.loc-chip .loc-zone {
  color: #ff9ad8; font-family: ui-monospace, monospace;
  background: rgba(255,94,199,0.15); padding: 0 4px; border-radius: 2px;
}

.card-images {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px; margin: 8px 0;
}
.card-img-link {
  display: block; background: #0f1013; border: 1px solid #2a2d33;
  border-radius: 3px; overflow: hidden; text-decoration: none; padding: 2px;
}
.card-img-link img {
  width: 100%; height: 70px; object-fit: contain; background: white;
}
.card-img-link:hover { border-color: #00b4d8; }
.card-img-cap {
  display: block; font-size: 9px; color: #7e8694;
  padding: 2px; text-align: center; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.card-stats {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.stat-badge {
  font-size: 11px; padding: 3px 8px;
  background: #1a1c20; border: 1px solid #2a2d33; border-radius: 12px;
  color: #b8c2cd;
}
.stat-badge.int { color: #ffaa70; border-color: #5a3010; }
.stat-badge.img { color: #00d4ff; border-color: #003a44; }
.stat-badge.spec { color: #4bc064; border-color: #1a4a1a; }

.card-specs {
  margin: 8px 0 4px;
  padding: 6px 8px;
  background: rgba(75, 192, 100, 0.08);
  border-left: 2px solid #4bc064;
  border-radius: 3px;
  font-size: 11px;
}
.card-specs-title { font-size: 10px; color: #4bc064; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.spec-row {
  display: grid; grid-template-columns: 50px 80px auto 1fr;
  gap: 6px; padding: 2px 0; align-items: baseline;
}
.spec-key { color: #7e8694; font-size: 11px; }
.spec-top { color: #fff; font-family: ui-monospace, monospace; font-weight: 600; }
.spec-conf { font-size: 10px; color: #4bc064; font-family: ui-monospace, monospace; }
.spec-others { font-size: 10px; color: #888; }

.btn-analyse {
  display: block; width: 100%; margin-top: 8px;
  background: linear-gradient(90deg, #006a7f 0%, #00b4d8 100%);
  color: #fff; border: 1px solid #00d4ff;
  padding: 8px 12px; font-size: 12px; font-weight: 600;
  border-radius: 4px; cursor: pointer;
}
.btn-analyse:hover { background: linear-gradient(90deg, #00b4d8 0%, #00d4ff 100%); }
.btn-expand-card {
  display: block; width: 100%; margin-top: 6px;
  background: #2a2d33; color: #d0d6df;
  border: 1px solid #3a3f48;
  padding: 7px 10px; font-size: 11px;
  border-radius: 4px; cursor: pointer;
}
.btn-expand-card:hover { background: #3a3f48; color: #ffd24a; border-color: #ffd24a; }

/* Fiche plein écran */
#card-fs-modal .modal-content { padding: 28px; overflow-y: auto; }
.fs-head {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid #2a2d33; margin-bottom: 16px;
}
.fs-family {
  font-size: 14px; color: #c8d4e1;
  background: rgba(0,180,220,0.1); padding: 8px 12px;
  border-radius: 4px; margin-bottom: 12px;
}
.fs-def {
  font-size: 16px; color: #fff; line-height: 1.5;
  background: rgba(255,210,74,0.07); border-left: 3px solid #ffd24a;
  padding: 10px 14px; margin: 0 0 14px 0;
}
.fs-section { margin-bottom: 22px; }
.fs-section h3 {
  font-size: 13px; color: #ffd24a; text-transform: uppercase;
  letter-spacing: 0.05em; margin: 0 0 10px 0;
}
.fs-specs { width: 100%; border-collapse: collapse; font-size: 13px; }
.fs-specs td { padding: 5px 8px; border-bottom: 1px solid #2a2d33; }
.fs-spec-key { color: #7e8694; width: 130px; }
.fs-spec-main { color: #fff; font-family: ui-monospace, monospace; font-weight: 600; }
.fs-spec-conf { color: #4bc064; font-size: 11px; font-family: ui-monospace, monospace; }
.fs-spec-others { color: #888; font-size: 11px; }
.fs-images {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.fs-images img {
  width: 100%; height: 140px; object-fit: contain;
  background: white; border: 1px solid #2a2d33; border-radius: 3px;
}
.fs-list { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.fs-list li { padding: 6px 0; border-bottom: 1px solid #2a2d33; color: #d8d8d8; }
.fs-faults { color: #ff9070; font-family: ui-monospace, monospace; font-size: 11px; }
.fs-kb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.fs-kb-card {
  display: flex; flex-direction: column;
  background: #0f1013; border: 1px solid #2a2d33; border-radius: 4px;
  overflow: hidden; text-decoration: none; cursor: pointer;
}
.fs-kb-card img {
  width: 100%; height: 160px; object-fit: contain; background: white;
}
.fs-kb-card:hover { border-color: #00b4d8; }
.fs-kb-cap {
  padding: 6px 8px; font-size: 11px; color: #b8c2cd;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#definition-panel { background: #1d2230; border-left: 3px solid #ffd24a; }
.def-term { margin-bottom: 6px; }
.def-kind { font-size: 11px; color: #7e8694; margin-left: 8px; }
.def-desc { font-size: 13px; line-height: 1.4; color: #c8d4e1; margin-top: 6px; }
.def-wireinfo {
  font-size: 12px; line-height: 1.5;
  padding: 6px 8px; margin-top: 4px;
  background: rgba(255, 210, 74, 0.07); border-radius: 3px;
  color: #d8e0eb;
}
.def-chapter, .def-subchapter { color: #b8c2cd; }

.related-section { margin-top: 8px; }
.related-section-title { font-size: 11px; color: #7e8694; margin-bottom: 4px; text-transform: uppercase; }
.trace-controls {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
}
.trace-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 2px 6px; border: 1px solid; border-radius: 3px;
  background: #1a1c20; cursor: pointer; font-family: ui-monospace, monospace;
}
.trace-chip .remove { color: #ff6384; font-weight: bold; margin-left: 3px; }
.btn-clear { font-size: 11px; padding: 2px 8px; background: #3a2d2d; border-color: #5a3a3a; }

#viewer { display: flex; flex-direction: column; background: #0d0e10; overflow: hidden; }
#viewer-header {
  padding: 8px 14px; background: #15161a; border-bottom: 1px solid #2a2d33;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
#current-label { font-size: 13px; color: #d0d6df; }
.viewer-controls { display: flex; gap: 4px; align-items: center; }
.viewer-controls button { padding: 4px 10px; font-size: 13px; }
.viewer-controls .toggle {
  background: #2a2d33; border-color: #ffd24a; color: #ffd24a;
  margin-left: 6px; font-weight: 600;
}
.viewer-controls .toggle:hover { background: #3a3a30; }
.viewer-controls .toggle.active {
  background: #00b4d8; color: #001b22; border-color: #00d4ff;
}
#page-info { font-size: 13px; color: #b8c2cd; min-width: 80px; text-align: center; }

#page-container {
  flex: 1; overflow: auto; padding: 12px; position: relative;
  touch-action: pan-x pan-y;   /* 1 doigt = défilement natif ; le pincer à 2 doigts est géré en JS */
  display: flex; align-items: flex-start;
  /* center si ça tient, mais aligne à gauche si le schéma déborde (sinon la partie
     gauche devient inaccessible au scroll — bug classique de justify-content:center).
     'safe center' pour les navigateurs récents, 'center' en repli. */
  justify-content: center;
  justify-content: safe center;
  background:
    linear-gradient(45deg, #131418 25%, transparent 25%, transparent 75%, #131418 75%),
    linear-gradient(45deg, #131418 25%, #0d0e10 25%, #0d0e10 75%, #131418 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
/* When showing dashboard, remove checkerboard */
#page-container:has(#placeholder:not([style*="none"])) {
  background: linear-gradient(160deg, #0e1018 0%, #13161e 50%, #0e1218 100%);
}
/* Fil d'Ariane : chemin parcouru en suivant un fil */
#nav-trail {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 12px; background: #16181d;
  border-bottom: 1px solid #2a2d33; font-size: 13px;
}
#nav-trail .trail-back {
  padding: 4px 10px; background: #2a2d33; border: 1px solid #3a3f48;
  border-radius: 6px; color: #ffd24a; cursor: pointer; font-size: 12px; font-weight: 600;
}
#nav-trail .trail-back:hover { background: #3a3f48; }
#nav-trail .trail-bus { color: #8a909a; font-size: 12px; }
#nav-trail .trail-sep { color: #4a505c; }
#nav-trail .trail-step {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; background: transparent; border: 1px solid transparent;
  border-radius: 6px; cursor: pointer; color: #cfd4dc;
}
#nav-trail .trail-step:hover { background: #22252b; border-color: #3a3f48; }
#nav-trail .trail-step.current { background: #2a2d10; border-color: #ffd24a; }
#nav-trail .trail-step.current .term-chip { color: #ffd24a; }
#nav-trail .trail-pg { color: #8a909a; font-size: 11px; }
#nav-trail .trail-arrow { color: #5a6470; }
#nav-trail .trail-clear {
  margin-left: auto; width: 24px; height: 24px; border-radius: 50%;
  background: #2a2d33; border: 1px solid #3a3f48; color: #b8c2cd; cursor: pointer;
}
#nav-trail .trail-clear:hover { background: #4a2020; border-color: #c0392b; color: #fff; }
#nav-trail .trail-zone {
  font-size: 11px; color: #001b22; background: #00d4ff;
  border-radius: 4px; padding: 1px 5px; font-weight: 700;
}

/* Mini-carte de la page (cadre = zone visible quand on est zoomé) */
#minimap {
  position: absolute; right: 14px; bottom: 14px; z-index: 8;
  width: 300px; border: 1px solid #4a505c; border-radius: 6px;
  overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.6);
  background: #14161a; cursor: pointer; line-height: 0;
}
#minimap.mm-large { width: min(58vw, 560px); border-color: #00b4d8; }
#minimap-img { display: block; width: 100%; height: auto; background: #fff; }
#minimap-zoom {
  position: absolute; top: 4px; right: 4px; z-index: 9; line-height: 1;
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
  background: rgba(10,18,30,.82); color: #cfe6ff; border: 1px solid #2a3b5c;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
}
#minimap-zoom:hover { background: #0a84ff; color: #fff; }
#minimap-view {
  position: absolute; border: 2px solid #ffd24a;
  background: rgba(255,210,74,0.18); box-shadow: 0 0 0 9999px rgba(0,0,0,0.28);
  pointer-events: none; min-width: 6px; min-height: 6px;
}
body.compare-mode #minimap, body.annotate-mode #minimap { display: none; }

/* Surbrillance renforcée + clignotement du fil suivi à chaque saut */
.hot.is-primary.flash {
  border-radius: 3px;
  animation: wireFlash 0.55s ease-in-out 0s 4;
}
@keyframes wireFlash {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,48,48,0), 0 0 0 0 rgba(255,48,48,0); background: rgba(255,48,48,0); }
  50%      { box-shadow: 0 0 0 3px rgba(255,60,60,0.95), 0 0 16px 4px rgba(255,60,60,0.7); background: rgba(255,60,60,0.25); }
}

#page-image { max-width: none; background: white; box-shadow: 0 4px 20px rgba(0,0,0,0.6); display: block; }

/* Encart "pas de schéma pour ce composant" */
#viewer-notice { width: 100%; max-width: 560px; margin: auto; }
.vn-card {
  background: #181b21; border: 1px solid #2c2f36; border-radius: 14px;
  padding: 28px 26px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.vn-icon { font-size: 40px; margin-bottom: 8px; }
.vn-term { margin-bottom: 10px; }
.vn-term .term-chip { font-size: 18px; }
.vn-def { color: #e6e9ee; font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.vn-msg { color: #aab2bd; font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.vn-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.vn-actions button {
  padding: 10px 16px; background: #2563a8; border: 1px solid #2f74c0;
  border-radius: 8px; color: #fff; cursor: pointer; font-size: 14px;
}
.vn-actions button:hover { background: #2f74c0; }
.vn-actions button.ghost { background: transparent; border-color: #3a3f48; color: #cfd4dc; }
.vn-docs { text-align: left; margin: 4px 0 16px; }
.vn-docs-title { font-size: 12px; color: #8a909a; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.vn-doc {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 12px; margin-bottom: 6px; background: #11141a; border: 1px solid #2c2f36;
  border-radius: 8px; color: #cfd4dc; cursor: pointer; font-size: 13px;
}
.vn-doc:hover { border-color: #00b4d8; background: #14202a; }
.vn-doc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-doc-tag { font-size: 10px; color: #001b22; background: #00d4ff; border-radius: 4px; padding: 1px 5px; }
.vn-hint { margin-top: 18px; font-size: 12px; color: #6a7280; line-height: 1.5; }
/* Pan à la souris : main ouverte sur le schéma, main fermée pendant le glisser */
body:not(.annotate-mode) #page-wrap { cursor: grab; }
body.panning, body.panning #page-container, body.panning #page-wrap, body.panning #click-layer .hot { cursor: grabbing !important; }
body.panning #click-layer .hot { pointer-events: none; }  /* évite le survol des mots pendant le déplacement */

/* Comparaison côte à côte */
#viewer { position: relative; }
body.compare-mode #page-container { width: 50%; float: left; }
#compare-pane {
  position: absolute; top: 41px; right: 0; bottom: 0; width: 50%;
  border-left: 2px solid #ffd24a; background: #0d0e10;
  display: flex; flex-direction: column; z-index: 5;
}
.compare-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: #15161a; border-bottom: 1px solid #2a2d33;
  font-size: 12px; color: #ffd24a;
}
.compare-head span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compare-head button { padding: 4px 9px; font-size: 13px; }
.compare-body {
  flex: 1; overflow: auto; padding: 10px;
  display: flex; justify-content: center; align-items: flex-start;
  background:
    linear-gradient(45deg, #131418 25%, transparent 25%, transparent 75%, #131418 75%),
    linear-gradient(45deg, #131418 25%, #0d0e10 25%, #0d0e10 75%, #131418 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
#compare-image { max-width: none; background: white; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
@media (max-width: 700px) {
  body.compare-mode #page-container { width: 100%; height: 50%; float: none; }
  #compare-pane { top: auto; bottom: 0; left: 0; width: 100%; height: 50%; border-left: none; border-top: 2px solid #ffd24a; }
}
#btn-compare.active { background: #3a2d10; border-color: #ffd24a; color: #ffd24a; }

/* Panneau 2FA dans les réglages */
.twofa-box { background:#191b20; border:1px solid #2c2f36; border-radius:10px; padding:12px 14px; }
.twofa-box h3 { margin:0 0 8px; font-size:15px; }
.twofa-step { margin:10px 0 4px; font-size:13px; color:#cfd4dc; }
.twofa-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.twofa-box input { padding:8px 10px; background:#0f1013; border:1px solid #3a3f48; border-radius:6px; color:#e6e9ee; width:130px; letter-spacing:2px; }
.twofa-box code { background:#0f1013; padding:2px 6px; border-radius:4px; letter-spacing:1px; }
#twofa-qr { background:#fff; border-radius:6px; padding:6px; }
.twofa-box button.ghost { background:transparent; border:1px solid #3a3f48; }
.twofa-box button.danger { background:#3a1d1d; border:1px solid #c0392b; color:#ff9a8a; }
.settings-sep { border:none; border-top:1px solid #2c2f36; margin:16px 0; }
.role-badge { font-size:10px; background:#3a2d10; color:#ffd24a; border:1px solid #ffd24a55; border-radius:4px; padding:1px 5px; vertical-align:middle; }

/* Fiche atelier IA */
#fiche-panel .fi-resume { color:#e6e9ee; font-size:13px; line-height:1.5; margin-bottom:8px; }
#fiche-panel .fi-row { font-size:13px; color:#cfd4dc; margin:7px 0; line-height:1.5; }
#fiche-panel .fi-row b { color:#fff; }
#fiche-panel ul, #fiche-panel ol { margin:4px 0 4px 18px; padding:0; }
#fiche-panel li { margin:2px 0; }
#fiche-panel .fi-tip { margin-top:8px; padding:8px 10px; background:#10222a; border-left:3px solid #00b4d8; border-radius:6px; font-size:12px; color:#cfe7ee; }
#fiche-panel .fi-foot { margin-top:8px; font-size:10px; color:#6a7280; display:flex; align-items:center; gap:6px; }
#fiche-panel .fi-regen { background:#2a2d33; border:1px solid #3a3f48; color:#cfd4dc; border-radius:5px; cursor:pointer; padding:1px 6px; }
.fiche-gen-btn { width:100%; padding:10px; margin-top:6px; background:linear-gradient(180deg,#00b4d8,#0095b6); border:none; border-radius:8px; color:#00171d; font-weight:700; cursor:pointer; }
.admin-factory { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#161a21; border:1px solid #262c36; border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:13px; }
.admin-factory select { padding:5px 8px; background:#0f1013; border:1px solid #3a3f48; border-radius:6px; color:#e6e9ee; }
.admin-factory #factory-run { padding:7px 14px; background:#2563a8; border:1px solid #2f74c0; border-radius:7px; color:#fff; cursor:pointer; }

/* Topologie / emplacements */
/* Badge de zone qui suit la souris */
#zone-badge, #kb-zone-badge {
  position: fixed; z-index: 9997; pointer-events: none;
  background: rgba(0,180,216,.82); color: #001b22; font-weight: 700; font-size: 11px;
  padding: 2px 7px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
#hot-card .hc-hint { margin-top: 7px; padding-top: 6px; border-top: 1px solid #222c3a;
  font-size: 10.5px; color: #8aa0bd; text-align: center; }

/* Notifications */
.notif-btn { position:relative; background:#161a21; border:1px solid #262c36; color:#cfd6df; border-radius:8px; padding:6px 10px; cursor:pointer; font-size:15px; margin-right:6px; }
.notif-badge { position:absolute; top:-5px; right:-5px; background:#ff3b30; color:#fff; font-size:9px; min-width:15px; height:15px; line-height:15px; border-radius:8px; padding:0 3px; font-weight:700; }
#notif-panel { position:fixed; top:54px; right:14px; z-index:9996; width:340px; max-height:70vh; overflow-y:auto; background:#14161a; border:1px solid #4a505c; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.7); }
.np-head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #262c36; font-weight:700; }
.np-head button { background:#2a2d33; border:1px solid #3a3f48; color:#cfd4dc; border-radius:6px; padding:3px 8px; cursor:pointer; font-size:11px; }
.notif { padding:11px 14px; border-bottom:1px solid #1c2027; cursor:pointer; }
.notif:hover { background:#191c22; }
.notif.unread { background:#10202a; border-left:3px solid #00b4d8; }
.notif-text { font-size:13px; color:#e6e9ee; line-height:1.4; }
.notif-ts { font-size:10px; color:#6a7280; margin-top:3px; }

/* Analytique conso IA */
.admin-usage { background:#14161a; border:1px solid #262c36; border-radius:10px; padding:12px 14px; margin-bottom:14px; }
.au-head { font-size:14px; margin-bottom:8px; }
.au-cap { color:#ff6b5e; font-weight:700; margin-left:8px; }
.au-bar { height:8px; background:#0f1013; border-radius:5px; overflow:hidden; margin-bottom:12px; }
.au-fill { height:100%; transition:width .3s; }
.au-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.au-t { font-size:11px; color:#8a909a; text-transform:uppercase; margin-bottom:5px; }
.au-row { display:flex; justify-content:space-between; font-size:13px; padding:2px 0; border-bottom:1px solid #1c2027; }
.ai-budget-note { font-size:12px; color:#ffd24a; background:#2a2410; border-radius:6px; padding:5px 9px; margin-top:6px; }

.ai-src { color:#7fd3e6; cursor:pointer; text-decoration:underline dotted; }
.ai-src:hover { color:#00d4ff; }

/* Forum */
.forum-toolbar { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.forum-toolbar select { padding:7px 10px; background:#0f1013; border:1px solid #3a3f48; border-radius:7px; color:#e6e9ee; }
#forum-new-btn, #forum-create { padding:8px 14px; background:#2563a8; border:1px solid #2f74c0; border-radius:8px; color:#fff; cursor:pointer; }
#forum-new { background:#161a21; border:1px solid #262c36; border-radius:10px; padding:12px; margin-bottom:14px; display:flex; flex-direction:column; gap:8px; }
#forum-new input, #forum-new textarea, #forum-new select, #fo-reply-body { padding:9px 11px; background:#0f1013; border:1px solid #3a3f48; border-radius:7px; color:#e6e9ee; }
.forum-new-row { display:flex; gap:8px; } .forum-new-row select { flex:0 0 200px; } .forum-new-row textarea { flex:1; }
#forum-threads { max-height:62vh; overflow-y:auto; }
.fo-thread { display:flex; align-items:center; gap:12px; padding:12px 14px; background:#161a21; border:1px solid #262c36; border-radius:10px; margin-bottom:8px; cursor:pointer; }
.fo-thread:hover { border-color:#00b4d8; }
.fo-t-main { flex:1; min-width:0; } .fo-t-title { font-weight:700; }
.fo-t-meta { font-size:12px; color:#8a909a; margin-top:3px; }
.fo-cat { font-size:11px; background:#22303a; color:#7fd3e6; border-radius:10px; padding:1px 8px; }
.fo-t-replies { color:#8a909a; font-size:13px; white-space:nowrap; }
.forum-back { background:transparent; border:1px solid #3a3f48; color:#cfd4dc; border-radius:7px; padding:6px 12px; cursor:pointer; margin-bottom:12px; }
.fo-th-title { margin:0 0 10px; } .fo-admin { display:flex; gap:8px; margin-bottom:12px; }
.fo-mod { padding:5px 10px; background:#2a2d33; border:1px solid #3a3f48; border-radius:6px; color:#cfd4dc; cursor:pointer; font-size:12px; }
.fo-mod.danger { background:#3a1d1d; border-color:#c0392b; color:#ff9a8a; }
.fo-posts { display:flex; flex-direction:column; gap:10px; max-height:50vh; overflow-y:auto; }
.fo-post { background:#161a21; border:1px solid #262c36; border-radius:10px; padding:12px 14px; }
.fo-post.op { border-left:3px solid #00b4d8; }
.fo-post-head { font-size:12px; color:#8a909a; margin-bottom:6px; display:flex; gap:8px; } .fo-post-head b { color:#cfd4dc; }
.fo-post-body { color:#e6e9ee; line-height:1.5; }
.fo-reply { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.fo-reply button { align-self:flex-start; padding:8px 16px; background:#2563a8; border:1px solid #2f74c0; border-radius:8px; color:#fff; cursor:pointer; }

/* Popup description de zone (clic sur une zone du schéma) */
#zone-pop {
  position: fixed; z-index: 9998; width: 320px;
  background: #14161a; border: 1px solid #4a505c; border-radius: 10px;
  padding: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.7); font-size: 13px;
}
#zone-pop .zp-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #00d4ff; margin-bottom: 8px; }
#zone-pop .zp-pg { color: #6a7280; font-size: 11px; font-weight: 400; }
#zone-pop .zp-x { margin-left: auto; background: #2a2d33; border: 1px solid #3a3f48; color: #cfd4dc; border-radius: 5px; cursor: pointer; padding: 0 7px; }
#zone-pop .zp-desc { color: #e6e9ee; line-height: 1.5; }
#zone-pop .zp-meta { font-size: 10px; color: #6a7280; margin: 4px 0 8px; }
#zone-pop .zp-edit { width: 100%; min-height: 60px; margin: 8px 0 6px; background: #0f1013; border: 1px solid #3a3f48; border-radius: 7px; color: #e6e9ee; padding: 8px; font-size: 13px; resize: vertical; }
#zone-pop .zp-save { width: 100%; padding: 8px; background: #2563a8; border: 1px solid #2f74c0; border-radius: 7px; color: #fff; cursor: pointer; }
.admin-factory input { padding: 6px 9px; background: #0f1013; border: 1px solid #3a3f48; border-radius: 6px; color: #e6e9ee; }

/* Carte de survol composant sur le schéma */
#hot-card {
  position: fixed; z-index: 9998; width: 300px;
  background: #14161a; border: 1px solid #4a505c; border-radius: 10px;
  padding: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.7); font-size: 13px;
}
#hot-card .hc-load { color: #8a909a; }
#hot-card .hc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#hot-card .hc-fam { font-size: 11px; background: #2a2d33; padding: 1px 7px; border-radius: 10px; color: #cfd4dc; }
#hot-card .hc-img { width: 100%; max-height: 170px; object-fit: contain; background: #fff; border-radius: 6px; }
#hot-card .hc-noimg, #hot-card .hc-nodef { color: #6a7280; font-size: 12px; padding: 6px 0; }
#hot-card .hc-def { color: #e6e9ee; margin: 8px 0; line-height: 1.45; }
#hot-card .hc-loc { color: #00d4ff; font-size: 12px; margin: 6px 0; }
#hot-card .hc-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
#hot-card .hc-actions button { padding: 6px 10px; font-size: 12px; border-radius: 6px; cursor: pointer; background: #2a2d33; border: 1px solid #3a3f48; color: #e6e9ee; }
#hot-card .hc-contrib, #hot-card .hc-contrib2 { background: #14202a; border-color: #1d4a55; color: #7fd3e6; }
#hot-card .hc-open { background: #2563a8; border-color: #2f74c0; color: #fff; }

.topo-veh-label { display:block; margin:4px 0 10px; color:#cfd4dc; font-size:14px; }
.topo-veh-label select { padding:7px 10px; background:#0f1013; border:1px solid #3a3f48; border-radius:7px; color:#e6e9ee; min-width:260px; }
#topology-body { display:flex; gap:16px; flex-wrap:wrap; }
#topology-img-wrap { flex:1 1 420px; min-width:300px; }
#topology-img { width:100%; height:auto; border-radius:8px; background:#fff; cursor:zoom-in; border:1px solid #2c2f36; }
#topology-legend { flex:1 1 280px; min-width:240px; max-height:60vh; overflow-y:auto; }
.topo-node { display:flex; flex-direction:column; gap:2px; padding:8px 10px; border:1px solid #2c2f36; border-radius:8px; margin-bottom:7px; background:#181b21; }
.topo-code { font-weight:800; color:#ffd24a; font-size:14px; }
.topo-zone { color:#00d4ff; font-size:13px; }
.topo-role { color:#aab2bd; font-size:12px; }
.topo-comps { margin-top:3px; }
.def-loc { margin-top:8px; padding:7px 10px; background:#10222a; border:1px solid #1d4a55; border-radius:8px; color:#cfd4dc; font-size:13px; cursor:pointer; }
.def-loc:hover { border-color:#00d4ff; }
.def-loc-node { color:#7e8694; font-size:11px; }
.hot.has-loc { box-shadow: inset 0 0 0 1px rgba(0,212,255,0.4); }

/* Communauté : badges, contributions, admin, tickets */
.hdr-badge { position:absolute; margin:-10px 0 0 -4px; background:#ff3b30; color:#fff; font-size:9px; min-width:14px; height:14px; line-height:14px; border-radius:7px; padding:0 3px; }
#btn-admin { position:relative; }
.contrib-card, .ad-contrib { background:#181b21; border:1px solid #2c2f36; border-radius:10px; padding:12px 14px; margin-top:10px; }
.cc-title { font-size:12px; color:#8a909a; margin-bottom:6px; }
.cc-tag { font-size:10px; background:#00d4ff; color:#001b22; border-radius:4px; padding:1px 6px; font-weight:700; }
.cc-veh { color:#8a909a; font-size:13px; margin:4px 0; }
.cc-res, .ad-cb-res { color:#cfd4dc; font-size:13px; line-height:1.5; margin:6px 0; }
.cc-comps { margin-top:6px; }
.ad-cb-meta { font-size:12px; color:#8a909a; margin:4px 0; }
.ad-cb-note { font-size:12px; color:#aab2bd; background:#11141a; border-radius:6px; padding:6px 8px; margin-top:6px; }
.ad-cb-actions { display:flex; gap:8px; margin-top:10px; }
.ad-cb-actions button { padding:8px 14px; border-radius:7px; cursor:pointer; border:1px solid #2f74c0; background:#2563a8; color:#fff; }
.ad-cb-actions .danger, #ticket-list .t-close-btn, .adt-close { background:#3a1d1d; border-color:#c0392b; color:#ff9a8a; }
.admin-stats { display:flex; gap:14px; margin:6px 0 16px; flex-wrap:wrap; }
.ad-stat { background:#14161a; border:1px solid #2c2f36; border-radius:10px; padding:10px 18px; text-align:center; }
.ad-n { font-size:24px; font-weight:800; }
.ad-l { font-size:11px; color:#8a909a; }
.admin-tabs { display:flex; gap:6px; margin-bottom:12px; border-bottom:1px solid #2c2f36; }
.admin-tab { padding:8px 14px; background:transparent; border:none; color:#8a909a; cursor:pointer; border-bottom:2px solid transparent; }
.admin-tab.active { color:#fff; border-bottom-color:#ffd24a; }
.admin-pane { max-height:60vh; overflow-y:auto; }
.ticket, .ad-ticket { background:#181b21; border:1px solid #2c2f36; border-radius:10px; padding:12px; margin-bottom:10px; }
.ticket-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ticket-meta { font-size:11px; color:#6a7280; margin-left:auto; }
.ticket-status { font-size:10px; padding:1px 7px; border-radius:10px; text-transform:uppercase; }
.st-open { background:#3a2d10; color:#ffd24a; } .st-answered { background:#10303a; color:#00d4ff; } .st-closed { background:#222; color:#888; }
.ticket-msgs { margin:8px 0; display:flex; flex-direction:column; gap:6px; }
.tmsg { font-size:13px; background:#11141a; border-radius:8px; padding:6px 10px; }
.tmsg-admin { background:#10222a; border-left:2px solid #00d4ff; }
.tmsg-who { font-weight:700; color:#cfd4dc; } .tmsg-ts { font-size:10px; color:#6a7280; margin-left:6px; }
.ticket-reply { display:flex; gap:6px; margin-top:6px; }
.ticket-reply input { flex:1; padding:7px 10px; background:#0f1013; border:1px solid #3a3f48; border-radius:6px; color:#e6e9ee; }
.ticket-reply button { padding:7px 12px; border-radius:6px; cursor:pointer; background:#2563a8; border:1px solid #2f74c0; color:#fff; }
#ticket-new { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
#ticket-new input, #ticket-new textarea { padding:9px 11px; background:#0f1013; border:1px solid #3a3f48; border-radius:7px; color:#e6e9ee; }

/* Schema result thumbnails + annotated badge */
li.match-li { display: flex; align-items: center; gap: 9px; }
.match-thumb {
  width: 64px; height: 44px; object-fit: cover; object-position: top left;
  border: 1px solid #3a3f48; border-radius: 4px; background: #fff; flex: 0 0 auto;
}
.match-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.match-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.annot-badge { font-size: 11px; }
.match-thumb { cursor: zoom-in; transition: border-color .12s; }
.match-thumb:hover { border-color: #ffd24a; }

/* Gallery (contact-sheet) view */
#gallery-filter {
  width: 100%; padding: 9px 12px; margin: 6px 0 14px;
  background: #14161a; border: 1px solid #3a3f48; border-radius: 7px;
  color: #e6e9ee; font-size: 14px;
}
#gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px; overflow-y: auto; max-height: 70vh; padding: 2px;
}
.gal-item {
  display: flex; flex-direction: column; gap: 6px; padding: 8px;
  background: #1c1f24; border: 1px solid #3a3f48; border-radius: 8px;
  cursor: pointer; text-align: left; transition: border-color .12s, transform .12s;
}
.gal-item:hover { border-color: #ffd24a; transform: translateY(-2px); }
.gal-item img {
  width: 100%; height: auto; border-radius: 5px; background: #fff;
  display: block; aspect-ratio: 1.4 / 1; object-fit: cover; object-position: top left;
}
.gal-cap { font-size: 12px; color: #cfd4dc; line-height: 1.3; }
.gal-cap .meta { color: #8a909a; }
.gal-empty { color: #8a909a; padding: 30px; text-align: center; grid-column: 1/-1; }

/* Floating hover preview of a schema page */
#thumb-preview {
  position: fixed; z-index: 9999; pointer-events: none;
  background: #14161a; border: 1px solid #4a505c; border-radius: 8px;
  padding: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.7);
}
#thumb-preview img {
  display: block; width: 620px; max-width: 70vw; height: auto;
  border-radius: 4px; background: #fff;
}
#thumb-preview .tp-cap {
  margin-top: 6px; font-size: 12px; color: #cfd4dc; text-align: center;
}

#annot-canvas {
  position: absolute; top: 0; left: 0; z-index: 6;
  pointer-events: none; touch-action: none;
}
body.annotate-mode #annot-canvas { pointer-events: auto; cursor: crosshair; }
body.annotate-mode #click-layer { pointer-events: none; }
#annot-toolbar {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 20; display: flex; align-items: center; gap: 5px;
  background: #1f2126ee; border: 1px solid #3a3f48; border-radius: 10px;
  padding: 7px 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.6); backdrop-filter: blur(8px);
}
#annot-toolbar button {
  padding: 6px 10px; font-size: 15px; background: #2a2d33;
  border: 1px solid #3a3f48; border-radius: 6px; cursor: pointer;
}
#annot-toolbar .at-tool.active { background: #3a2d10; border-color: #ffd24a; }
#annot-toolbar .at-color {
  width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 2px solid #2a2d33;
}
#annot-toolbar .at-color.active { border-color: #fff; transform: scale(1.15); }
#annot-toolbar .at-sep { width: 1px; height: 22px; background: #3a3f48; margin: 0 3px; }
#at-done { background: #2a3a2a !important; border-color: #4bc064 !important; color: #6fe080; }
#btn-annotate.active { background: #3a2d10; border-color: #ffd24a; color: #ffd24a; }

/* Calque de tracé (non destructif, jamais enregistré) : dessine le suivi du fil */
#trace-canvas { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 3; }
#click-layer { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 4; }
#click-layer .hot {
  position: absolute; cursor: pointer; pointer-events: auto;
  border: 1px solid transparent; border-radius: 2px;
  transition: background-color 0.1s, border-color 0.1s;
}
#click-layer .hot:hover {
  background-color: rgba(0, 180, 220, 0.25);
  border-color: rgba(0, 180, 220, 0.9);
}
#click-layer .hot.kind-wire:hover { background-color: rgba(255, 159, 64, 0.3); border-color: rgba(255,159,64,1); }
#click-layer .hot.kind-component:hover { background-color: rgba(75, 192, 100, 0.3); border-color: rgba(75,192,100,1); }
#click-layer .hot.kind-schema:hover { background-color: rgba(153, 102, 255, 0.3); border-color: rgba(153,102,255,1); }
/* ===== Dashboard d'accueil ===== */
#placeholder {
  width: 100%; max-width: 900px;
  margin: auto;            /* safe centering: vertically + horizontally, no clipping if it overflows */
  padding: 44px 52px;
  display: flex; flex-direction: column; gap: 36px;
}
/* On large screens, give the dashboard a bit more room so it doesn't look lost */
@media (min-width: 1500px) {
  #placeholder { max-width: 1080px; gap: 44px; }
  .dash-hero-text h2 { font-size: 34px; }
  .dt-icon { font-size: 40px; }
  .dt-label { font-size: 17px; }
}

/* Ambient glow behind the whole dashboard */
#placeholder::before {
  content: "";
  position: fixed; top: 50%; left: 50%;
  transform: translate(-30%, -50%);
  width: 700px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(255,210,74,0.04) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* Hero */
.dash-hero {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dash-logo {
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(255,210,74,0.5));
  animation: logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255,210,74,0.35)); }
  50%       { filter: drop-shadow(0 0 22px rgba(255,210,74,0.75)); }
}
.dash-hero-text h2 {
  font-size: 28px; color: #fff; margin: 0 0 5px;
  font-weight: 800; letter-spacing: -0.03em;
  background: linear-gradient(90deg, #ffd24a, #ffa040);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.dash-hero-text p { font-size: 13px; color: #5a6880; margin: 0; letter-spacing: 0.04em; text-transform: uppercase; }
.dash-stats { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; }
.dash-stat { text-align: center; min-width: 56px; }
.dash-stat-n {
  font-size: 24px; font-weight: 800; color: #fff; line-height: 1;
  letter-spacing: -0.03em;
}
.dash-stat-l { font-size: 11px; color: #5a6880; margin-top: 4px; }
.dash-stat-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 4px; vertical-align: middle;
  box-shadow: 0 0 6px currentColor;
}

/* Action tiles */
.dash-actions {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 600px) { .dash-actions { grid-template-columns: repeat(2, 1fr); } }

.dash-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; padding: 22px 20px 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  backdrop-filter: blur(4px);
}
/* Colored gradient bg per tile, subtly visible */
#dt-search  { background: linear-gradient(145deg, rgba(255,210,74,0.06) 0%, rgba(17,19,26,0.9) 80%); }
#dt-diagnose{ background: linear-gradient(145deg, rgba(255,99,132,0.06) 0%, rgba(17,19,26,0.9) 80%); }
#dt-catalog { background: linear-gradient(145deg, rgba(153,102,255,0.06) 0%, rgba(17,19,26,0.9) 80%); }
#dt-database{ background: linear-gradient(145deg, rgba(75,192,100,0.06) 0%, rgba(17,19,26,0.9) 80%); }
#dt-ai      { background: linear-gradient(145deg, rgba(0,180,216,0.06) 0%, rgba(17,19,26,0.9) 80%); }
#dt-methodo { background: linear-gradient(145deg, rgba(255,170,112,0.06) 0%, rgba(17,19,26,0.9) 80%); }

/* Glow border on hover */
#dt-search:hover  { border-color: rgba(255,210,74,0.6); box-shadow: 0 8px 32px rgba(255,210,74,0.12), 0 0 0 1px rgba(255,210,74,0.2); transform: translateY(-3px); }
#dt-diagnose:hover{ border-color: rgba(255,99,132,0.6); box-shadow: 0 8px 32px rgba(255,99,132,0.12), 0 0 0 1px rgba(255,99,132,0.2); transform: translateY(-3px); }
#dt-catalog:hover { border-color: rgba(153,102,255,0.6); box-shadow: 0 8px 32px rgba(153,102,255,0.12), 0 0 0 1px rgba(153,102,255,0.2); transform: translateY(-3px); }
#dt-database:hover{ border-color: rgba(75,192,100,0.6); box-shadow: 0 8px 32px rgba(75,192,100,0.12), 0 0 0 1px rgba(75,192,100,0.2); transform: translateY(-3px); }
#dt-ai:hover      { border-color: rgba(0,180,216,0.6); box-shadow: 0 8px 32px rgba(0,180,216,0.12), 0 0 0 1px rgba(0,180,216,0.2); transform: translateY(-3px); }
#dt-methodo:hover { border-color: rgba(255,170,112,0.6); box-shadow: 0 8px 32px rgba(255,170,112,0.12), 0 0 0 1px rgba(255,170,112,0.2); transform: translateY(-3px); }
.dash-tile:active { transform: translateY(0) scale(0.98); }

.dt-icon { font-size: 34px; line-height: 1; }
.dt-label { font-size: 15px; font-weight: 700; color: #f0f0f0; letter-spacing: -0.01em; }
.dt-hint { font-size: 12px; color: #4a5568; line-height: 1.4; }

/* Bottom: recents + favoris */
.dash-bottom {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding-top: 8px;
}
.dash-section-title {
  font-size: 11px; color: #4a5568; margin-bottom: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.dash-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dash-chip {
  font-size: 12px; padding: 5px 13px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px; color: #b8c2cd; cursor: pointer;
  font-family: ui-monospace, monospace; font-weight: 500;
  transition: all 0.15s;
}
.dash-chip:hover {
  background: rgba(255,210,74,0.08);
  border-color: rgba(255,210,74,0.4);
  color: #ffd24a; transform: scale(1.03);
}
.dash-chip.fav { border-color: rgba(255,210,74,0.25); color: #e8d080; }
.dash-chip.fav:hover { border-color: rgba(255,210,74,0.6); color: #ffd24a; }
.dash-empty { font-size: 12px; color: #2a2d35; font-style: italic; }
#loading { color: #ffd24a; padding: 20px; position: absolute; }

.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; justify-content: center; align-items: center; z-index: 100;
}
.modal[hidden], [hidden] { display: none !important; }
.modal-content {
  background: #1f2126; border: 1px solid #3a3f48;
  border-radius: 6px; padding: 18px;
  width: min(800px, 90vw); height: min(80vh, 600px);
  display: flex; flex-direction: column; position: relative;
}
.modal-close {
  position: absolute; top: 8px; right: 8px;
  background: transparent; border: none; color: #f0f0f0; font-size: 20px; cursor: pointer;
}
.modal-content h2 { margin: 0 0 12px 0; color: #ffd24a; }
#dico-search {
  padding: 8px; margin-bottom: 12px;
  background: #0f1013; color: #fff; border: 1px solid #3a3f48; border-radius: 4px;
}
#dico-list { flex: 1; overflow-y: auto; }
.dico-entry {
  padding: 7px 8px; border-bottom: 1px solid #2a2d33;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 14px;
}
.dico-entry .de { color: #ffd24a; font-family: ui-monospace, "Consolas", monospace; }
.dico-entry .fr { color: #c8d4e1; }

/* ===== Menu overflow header =====
   Les outils secondaires vivent TOUJOURS dans le menu ⋯ (fiable à tout format :
   évite tout débordement/empilement du bandeau, quel que soit l'écran/zoom). */
.header-secondary { display: none; }
.header-overflow { position: relative; display: block; }
.overflow-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 300;
  background: #1f2126; border: 1px solid #3a3f48; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6); min-width: 180px; padding: 6px;
}
.overflow-menu button {
  display: block; width: 100%; text-align: left;
  padding: 9px 14px; font-size: 13px; background: none; border: none;
  color: #d0d6df; border-radius: 5px; cursor: pointer;
}
.overflow-menu button:hover { background: #2a2d33; color: #ffd24a; }

/* ===== Viewport méta: large screens ===== */
@media (min-width: 1600px) {
  main { grid-template-columns: 380px 1fr; }
  #sidebar .panel h3 { font-size: 13px; }
}

/* ===== Mode tablette / écran tactile ===== */
#btn-sidebar-toggle { display: none; }

/* ===== ≤ 1100px : compact desktop ===== */
@media (max-width: 1100px) {
  main { grid-template-columns: 290px 1fr; }
  .header-secondary button { padding: 6px 8px; font-size: 13px; }
}

/* ===== ≤ 1700px : header sur UNE ligne, outils secondaires dans le menu ⋯ =====
   (couvre les 15" en 1366 / 1440 / 1536 @125% / 1600 — évite le débordement et
    l'empilement des boutons). Le panneau latéral ne devient un tiroir qu'à ≤1200px. */
@media (max-width: 1700px) {
  header { flex-wrap: nowrap; }
  .header-secondary { display: none; }
  .header-overflow { display: block; }
  .search-bar { min-width: 200px; }
  .search-wrap { min-width: 120px; }
}

/* ===== petit portable (1201–1440px) : sidebar plus étroite + véhicule compact ===== */
@media (min-width: 1201px) and (max-width: 1440px) {
  main { grid-template-columns: 300px 1fr; }
  header h1 { font-size: 15px; }
  #btn-diagnose, #btn-assistant { padding: 6px 8px; }
  .vehicle-selector label { display: none; }
  #vehicle { max-width: 150px; }
}

/* ===== ≤ 1200px : tablette (couvre iPad paysage 1024–1194px) ===== */
@media (max-width: 1200px) {
  header { padding: 8px 10px; gap: 8px; flex-wrap: nowrap; }
  header h1 { font-size: 14px; }
  #btn-sidebar-toggle {
    display: inline-flex; padding: 8px 12px; font-size: 18px;
    background: #2a2d33; border: 1px solid #3a3f48; border-radius: 6px;
    flex-shrink: 0;
  }
  main { grid-template-columns: 1fr; }
  #sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(86vw, 380px);
    z-index: 50; transform: translateX(-105%); transition: transform 0.22s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.6);
    padding-top: 10px;
  }
  body.sidebar-open #sidebar { transform: translateX(0); }
  body.sidebar-open::after {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    z-index: 40;
  }
  .header-secondary { display: none; }
  .header-overflow { display: block; }
  .search-bar { flex: 1 1 auto; min-width: 140px; }
  .health-bar { display: none; }
  .stats { font-size: 11px; }
  .viewer-controls button { padding: 8px 14px; font-size: 15px; }
  #viewer-header { flex-wrap: wrap; gap: 8px; }
  /* Dashboard tiles: 2 cols */
  .dash-actions { grid-template-columns: repeat(2, 1fr); }
  #placeholder { padding: 24px 20px; }
}

/* ===== ≤ 768px : phablet/grande tablette ===== */
@media (max-width: 768px) {
  header h1 { font-size: 13px; }
  .vehicle-selector label { display: none; }
  #vehicle { max-width: 160px; font-size: 12px; padding: 6px 8px; }
  .dash-hero { flex-wrap: wrap; gap: 14px; }
  .dash-stats { margin-left: 0; gap: 16px; }
  .dash-bottom { grid-template-columns: 1fr; gap: 16px; }
}

/* ===== ≤ 640px : mobile (couvre iPhone/Android à tout DPI) ===== */
@media (max-width: 640px) {
  header {
    padding: 6px 8px; gap: 5px;
    /* Force single row on mobile */
    flex-wrap: nowrap; align-items: center;
    height: 50px; overflow: hidden;
  }
  header h1 { display: none; }
  /* Stats also hide on mobile */
  #stats { display: none; }
  .vehicle-selector { flex: 0 0 auto; }
  #vehicle { max-width: 110px; font-size: 11px; padding: 5px 6px; }
  .search-bar { flex: 1 1 auto; min-width: 0; }
  .search-wrap { min-width: 0; flex: 1 1 auto; }
  #q { font-size: 13px; padding: 7px 9px; }
  /* Keep only icon buttons (no text) */
  #btn-search { padding: 7px 10px; }
  #btn-sidebar-toggle { padding: 7px 10px; font-size: 16px; }
  #btn-diagnose, #btn-assistant { padding: 7px 9px; font-size: 14px; }
  button { padding: 7px 10px; font-size: 12px; }
  main { height: calc(100vh - 50px); }
  #sidebar { top: 0; }
  .modal-content { width: 100vw !important; height: 100vh !important;
    max-width: 100vw !important; max-height: 100vh !important;
    border-radius: 0 !important; padding: 12px 14px; }
  .modal-content.modal-xl, .modal-content.modal-large { width: 100vw !important; height: 100vh !important; }
  .home-grid, .db-docs { grid-template-columns: 1fr; }
  .dash-actions { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dash-tile { padding: 16px 14px; }
  .dt-icon { font-size: 26px; }
  .dt-label { font-size: 13px; }
  .dt-hint { display: none; }
  .dash-hero-text h2 { font-size: 20px; }
  #placeholder { padding: 16px 14px; gap: 20px; }
  .fs-kb-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .diag-form { flex-direction: column; }
  .dash-bottom { grid-template-columns: 1fr; }
  #viewer-header { padding: 6px 8px; }
  .viewer-controls button { padding: 6px 10px; font-size: 14px; }
  .panel { padding: 8px 10px; }
}

/* Bouton Académie (Cours) — ressort comme un onglet dans l'en-tête */
.btn-cours {
  font-weight: 700;
  color: #1b1b1b;
  background: linear-gradient(180deg, #ffd24a, #f5b301);
  border: 1px solid #e0a200;
  border-radius: 8px;
  padding: 7px 12px;
  white-space: nowrap;
}
.btn-cours:hover { filter: brightness(1.06); }

/* Champs secrets (cles API) : masques visuellement SANS etre type=password
   -> empeche Chrome de croire a un formulaire de login et de proposer
   "Enregistrer le mot de passe ?" a chaque interaction. */
.secret-input {
  -webkit-text-security: disc;
  -moz-text-security: disc;
  text-security: disc;
}

/* Plans par système */
.psys { border-bottom: 1px solid #2a313c; }
.psys > summary { cursor: pointer; padding: 11px 6px; font-size: 15px; list-style: none; display: flex; align-items: center; gap: 10px; }
.psys > summary::-webkit-details-marker { display: none; }
.psys > summary::before { content: "▸"; color: #9aa3b0; transition: transform .15s; }
.psys[open] > summary::before { transform: rotate(90deg); }
.psys-n { margin-left: auto; background: #2a313c; color: #cdd6e2; border-radius: 999px; padding: 1px 10px; font-size: 12px; font-weight: 700; }
.psys-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; padding: 4px 2px 14px; }
.psys-plan { display: flex; align-items: center; gap: 8px; text-align: left; background: #171b22; border: 1px solid #2a313c; border-radius: 8px; padding: 7px 9px; cursor: pointer; color: inherit; font: inherit; }
.psys-plan:hover { border-color: #f5b301; background: #1c222c; }
.psys-sheet { flex: 0 0 auto; min-width: 32px; text-align: center; background: #11151d; border-radius: 5px; padding: 2px 6px; font-weight: 700; color: #f5b301; font-size: 12px; }
.psys-title { font-size: 12px; color: #cdd6e2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Zoom tactile : empêche le navigateur de zoomer la page entière sur le schéma */
#page-container { touch-action: none; }
#page-image { touch-action: none; user-select: none; -webkit-user-drag: none; }

/* KB panels */
.panel li.kb-doc {
  flex-direction: column; align-items: flex-start;
  padding: 8px; gap: 4px;
}
.kb-doc-head { display: flex; gap: 6px; align-items: center; width: 100%; flex-wrap: wrap; }
.kb-doc-name { font-size: 12px; color: #e8ecf0; }
.kb-cat {
  font-size: 10px; padding: 2px 6px; border-radius: 3px;
  background: #354060; color: #aac; font-weight: 600;
  white-space: nowrap;
}
.kb-cat.int { background: #5a3010; color: #ffaa70; }
.kb-cat.cat-training { background: #1a3a2e; color: #6ce0a4; }
.kb-cat.cat-component { background: #2a3050; color: #9ab2ff; }
.kb-cat.cat-system { background: #3a2a50; color: #c39aff; }
.kb-cat.cat-schematic { background: #503a1a; color: #ffd24a; }
.kb-cat.cat-diag { background: #501a3a; color: #ff9ac3; }
.kb-cat.cat-ref { background: #1a3a50; color: #9ad4ff; }
.kb-snippet { font-size: 11px; color: #a8b0bc; line-height: 1.4; margin-top: 4px; }
.kb-vehicle { font-size: 12px; color: #ddd; }
.kb-faults { font-size: 11px; color: #ff9070; font-family: ui-monospace, monospace; }
.kb-date { font-size: 10px; color: #888; margin-left: auto; }

/* KB doc card with thumbnail */
.panel li.kb-doc {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 8px !important;
}
.kb-doc-thumb {
  flex: 0 0 60px; width: 60px; height: 80px;
  background: #0f1013; border: 1px solid #2a2d33; border-radius: 3px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.kb-doc-thumb img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  background: white;
}
.kb-doc-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.kb-doc-actions { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.btn-kb-open {
  font-size: 10px; padding: 2px 8px;
  background: #006a7f; color: #fff;
  border: 1px solid #00b4d8; border-radius: 3px; cursor: pointer;
}
.btn-kb-open:hover { background: #00b4d8; color: #001b22; }
.kb-doc-page { font-size: 10px; color: #7e8694; }

/* Home / Catalogue */
#btn-home { padding: 7px 11px; font-size: 15px; }
.home-content { display: flex; flex-direction: column; padding: 18px 22px; }
.home-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px;
}
.home-header h2 { margin: 0; color: #ffd24a; font-size: 18px; white-space: nowrap; }
#home-search {
  flex: 1; max-width: 280px; padding: 8px 12px;
  background: #0f1013; color: #fff; border: 1px solid #3a3f48; border-radius: 4px;
}
#home-veh-filter, #home-zone-filter {
  padding: 8px 10px; background: #0f1013; color: #fff;
  border: 1px solid #3a3f48; border-radius: 4px; font-size: 12px;
}
.home-tabs {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #2a2d33;
}
.home-tab {
  display: flex; align-items: center; gap: 6px;
  background: #1f2126; border: 1px solid #2a2d33; border-radius: 6px;
  padding: 6px 10px; cursor: pointer; font-size: 12px; color: #c8d4e1;
}
.home-tab:hover { background: #2a2d33; border-color: #3a3f48; }
.home-tab.active { background: #3a2d10; border-color: #ffd24a; color: #ffd24a; }
.home-tab-icon { font-size: 14px; }
.home-tab-count {
  background: rgba(255,255,255,0.1); padding: 0 6px;
  border-radius: 10px; font-size: 10px; color: #aab;
}
.home-body { flex: 1; overflow-y: auto; }
.home-cat-head { font-size: 13px; color: #7e8694; margin-bottom: 12px; }
.home-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.home-item {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  background: #1a1c20; border: 1px solid #2a2d33; border-radius: 5px;
  padding: 9px 11px; cursor: pointer; position: relative;
}
.home-item:hover { background: #22262c; border-color: #00b4d8; }
.home-item-term {
  font-family: ui-monospace, "Consolas", monospace;
  font-size: 14px; font-weight: 600; color: #ffd24a;
}
.home-item-head { display: flex; align-items: center; gap: 6px; }
.home-item-def { font-size: 11px; color: #b8c2cd; line-height: 1.35; flex: 1; }
.home-item-pages {
  font-size: 10px; color: #5a6470; margin-left: auto;
}
.home-item-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.hi-zone {
  font-size: 9px; padding: 1px 5px; border-radius: 8px;
  background: rgba(0,180,220,0.15); color: #6cd4f0;
}
.hi-side {
  font-size: 9px; padding: 1px 5px; border-radius: 8px;
  background: rgba(255,159,64,0.15); color: #ffb070;
}
.hi-veh {
  font-size: 9px; padding: 1px 5px; border-radius: 8px;
  background: rgba(120,160,255,0.12); color: #9ab2ff;
}
.hi-img { font-size: 11px; }
.home-loading { color: #7e8694; padding: 30px; text-align: center; }

/* KB Viewer Modal */
.modal-content.modal-xl {
  width: 95vw; height: 95vh;
  display: flex; flex-direction: column;
}
.kb-viewer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #2a2d33;
}
.kb-viewer-header h2 {
  margin: 0; font-size: 16px; color: #ffd24a;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kb-viewer-nav { display: flex; gap: 4px; align-items: center; }
.kb-viewer-nav button {
  padding: 4px 10px; font-size: 13px;
}
.kb-viewer-body {
  flex: 1; overflow: auto; position: relative;
  display: flex; justify-content: center; align-items: flex-start;
  background: #0d0e10; padding: 10px;
}
#kb-viewer-img {
  width: 100%; max-width: 100%; height: auto;
  background: white;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* Assistant modal */
.modal-content.modal-large { width: min(900px, 95vw); height: min(90vh, 720px); }
.ai-header {
  display: flex; gap: 12px; align-items: center;
  padding: 6px 0 10px 0; border-bottom: 1px solid #2a2d33; margin-bottom: 8px;
}
.ai-header label { font-size: 13px; color: #b8c2cd; }
.ai-header select {
  padding: 5px 8px; background: #0f1013; color: #fff;
  border: 1px solid #3a3f48; border-radius: 4px; margin-left: 4px;
}
.ai-status { font-size: 11px; color: #888; flex: 1; }
.ai-chat {
  flex: 1; overflow-y: auto;
  background: #0f1013; border-radius: 4px; padding: 10px; margin-bottom: 8px;
  min-height: 200px;
}
.ai-msg { margin-bottom: 12px; }
.ai-msg-role {
  font-size: 11px; color: #888; margin-bottom: 3px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ai-msg.user .ai-msg-role { color: #ffd24a; }
.ai-msg.assistant .ai-msg-role { color: #00b4d8; }
.ai-msg-content { font-size: 14px; line-height: 1.5; color: #e0e0e0; }
.ai-code { color: #7fe3ff; border-bottom: 1px dotted #7fe3ff; cursor: pointer; font-weight: 600; }
.ai-code:hover { background: #0a3a4a; border-radius: 3px; }
/* Étapes du diagnostic IA = checklist cochable */
.ai-steps { list-style: none; margin: 9px 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ai-step { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-start; line-height: 1.45; }
.ai-step-box { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; border: 2px solid #7fe3ff;
  border-radius: 5px; cursor: pointer; position: relative; transition: background .12s, transform .08s; }
.ai-step-box:hover { background: rgba(127, 227, 255, .18); }
.ai-step-box:active { transform: scale(.9); }
.ai-step.done > .ai-step-box { background: #7fe3ff; border-color: #7fe3ff; }
.ai-step.done > .ai-step-box::after { content: "✓"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: #06222b; font-size: 13px; font-weight: 800; }
.ai-step.done > .ai-step-txt { opacity: .5; text-decoration: line-through; }
.ai-step-txt { flex: 1 1 60%; }
/* Mesure rapide sur une étape de contrôle → enregistrée dans l'historique */
.ai-meas { flex: 1 0 100%; margin-left: 29px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ai-meas-val { width: 74px; background: #0c1418; color: #e0e0e0; border: 1px solid #2a6f80; border-radius: 5px; padding: 3px 7px; font-size: 13px; }
.ai-meas-val:focus { outline: none; border-color: #7fe3ff; }
.ai-meas-unit { background: #0c1418; color: #e0e0e0; border: 1px solid #2a6f80; border-radius: 5px; padding: 3px 4px; font-size: 13px; cursor: pointer; }
.ai-meas-save { background: #10242b; color: #7fe3ff; border: 1px solid #2a6f80; border-radius: 5px; padding: 3px 9px; cursor: pointer; font-size: 14px; }
.ai-meas-save:hover { background: #0a3a4a; border-color: #7fe3ff; }
.ai-meas-log { font-size: 12px; color: #57d28a; font-weight: 600; }
/* Bouton « Tracer » sur une étape de suivi de fil → itinéraire coloré */
.ai-trace-btn { background: #2a1840; color: #d7b3ff; border: 1px solid #7a4fd0; border-radius: 5px;
  padding: 2px 9px; margin-left: 6px; cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ai-trace-btn:hover { background: #3a2358; border-color: #b389ff; }
/* Tablette : cases + champs plus gros pour le doigt */
@media (max-width: 1024px) {
  .ai-step-box { width: 26px; height: 26px; }
  .ai-step { gap: 10px 13px; }
  .ai-meas { margin-left: 39px; }
  .ai-meas-val { width: 92px; padding: 7px 9px; font-size: 15px; }
  .ai-meas-unit, .ai-meas-save { padding: 7px 9px; font-size: 15px; }
  .ai-trace-btn { padding: 7px 11px; font-size: 15px; }
}
.ai-msg-sources {
  font-size: 11px; color: #7e8694;
  margin-top: 5px; padding-top: 4px; border-top: 1px solid #2a2d33;
}
.ai-msg-tools {
  font-size: 11px; color: #4bc064;
  margin-top: 5px; font-family: ui-monospace, monospace;
}
.ai-action-btn {
  display: block; margin-top: 8px;
  background: #00b4d8; color: #001b22;
  border: 1px solid #00d4ff; padding: 6px 14px;
  border-radius: 4px; cursor: pointer; font-weight: 600;
}
.ai-input {
  display: flex; gap: 6px; margin-bottom: 6px;
}
.ai-input textarea {
  flex: 1; padding: 8px;
  background: #0f1013; color: #fff;
  border: 1px solid #3a3f48; border-radius: 4px;
  font-family: inherit; font-size: 14px; resize: vertical;
}
.ai-input button {
  background: #00b4d8; color: #001b22; border: 1px solid #00d4ff;
  font-weight: 600; padding: 8px 16px;
}
.ai-suggestions {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.ai-suggestions .ai-suggest {
  font-size: 12px; padding: 4px 10px;
  background: #2a2d33; color: #b8c2cd; border: 1px solid #3a3f48;
}
.ai-suggestions .ai-suggest:hover { background: #3a3f48; color: #ffd24a; }

/* Settings modal */
.settings-body { display: flex; flex-direction: column; gap: 10px; }
.settings-body label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: #b8c2cd;
}
.settings-body input, .settings-body select {
  padding: 6px 8px; background: #0f1013; color: #fff;
  border: 1px solid #3a3f48; border-radius: 4px; font-size: 13px;
}
#settings-save {
  background: #4bc064; color: #001b00; border-color: #6fe080; font-weight: 600;
  align-self: flex-start; padding: 8px 18px; margin-top: 6px;
}
.dico-lang {
  display: inline-block; font-size: 10px; padding: 1px 5px;
  border-radius: 3px; margin-right: 5px; font-weight: bold;
  font-family: -apple-system, "Segoe UI", sans-serif;
}
.lang-de { background: #443a00; color: #ffd24a; }
.lang-en { background: #003a44; color: #00d4ff; }

/* ===== Gamification : badges, réactions, profil, activité ===== */
.ubadge { font-size: .9em; margin-left: 3px; cursor: default; }
.user-link { cursor: pointer; }
.user-link:hover { text-decoration: underline; color: #00d4ff; }

.forum-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#forum-search { flex: 1 1 200px; min-width: 160px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid #2a3550; background: #0e1626; color: #dce6f5; }

.fo-react-row { display: flex; gap: 6px; margin-top: 6px; }
.fo-react { background: #131d30; border: 1px solid #25324d; color: #9fb2cc; border-radius: 14px;
  padding: 2px 10px; cursor: pointer; font-size: .9em; transition: .12s; }
.fo-react:hover { border-color: #3a4d72; color: #dce6f5; }
.fo-react.on { background: #123a2a; border-color: #1f7a52; color: #4ade9b; }
.fo-react b { font-weight: 700; }

/* Profil */
.prof-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.prof-badge { font-size: 3em; line-height: 1; }
.prof-name { margin: 0; }
.prof-rank { color: #9fb2cc; font-size: .92em; margin-top: 2px; }
.prof-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.prof-stat { background: #0e1626; border: 1px solid #25324d; border-radius: 10px; padding: 10px; text-align: center; }
.prof-stat b { display: block; font-size: 1.5em; color: #00d4ff; }
.prof-stat span { font-size: .78em; color: #9fb2cc; }
.prof-lb-title { font-size: 1em; margin: 16px 0 8px; }
.prof-lb-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; }
.prof-lb-row:nth-child(odd) { background: #0e1626; }
.prof-lb-row.me { background: #123a2a; border: 1px solid #1f7a52; }
.lb-rank { width: 32px; color: #9fb2cc; font-weight: 700; }
.lb-badge { font-size: 1.1em; }
.lb-user { flex: 1; }
.lb-pts { color: #00d4ff; font-weight: 600; }

/* Fil d'activité (landing) */
.landing-activity { display: flex; flex-direction: column; gap: 6px; }
.act-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: rgba(14,22,38,.6); border: 1px solid #1d2740; border-radius: 10px; }
.act-ic { font-size: 1.2em; }
.act-txt { flex: 1; color: #c5d2e6; font-size: .92em; }
.act-txt i { color: #00d4ff; font-style: normal; }
.act-ts { color: #6b7d99; font-size: .78em; white-space: nowrap; }

/* ===== Partage d'annotation ===== */
.modal-small .modal-content, .modal-content.modal-small { max-width: 440px; }
.share-all { display: flex; align-items: center; gap: 8px; font-weight: 600;
  padding: 8px 10px; background: #0e1626; border: 1px solid #25324d; border-radius: 8px; margin: 8px 0; cursor: pointer; }
.share-members { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto;
  border: 1px solid #1d2740; border-radius: 8px; padding: 6px; }
.share-mb { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.share-mb:hover { background: #131d30; }
.share-mb input:disabled { opacity: .4; }
.mb-admin { font-size: .72em; background: #443a00; color: #ffd24a; padding: 1px 6px; border-radius: 6px; }
.share-actions { display: flex; gap: 8px; margin-top: 12px; }
.btn-primary { background: #1f7a52; border: none; color: #eafff4; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.btn-primary:hover { background: #259862; }
.btn-danger { background: #5a1f1f; border: 1px solid #7a2a2a; color: #ffd5d5; padding: 8px 16px; border-radius: 8px; cursor: pointer; }
.btn-danger:hover { background: #722727; }
#at-share { background: #0a3a4a; border: 1px solid #00b4d8; color: #7fe3ff; }
#at-share:hover { background: #0d4a5e; }
#btn-annotate.shared-on::after { content: "🔗"; font-size: .7em; position: absolute; top: -2px; right: -2px; }

/* ===== Capture contribution (fichier + photo iPad) ===== */
.contribute-sources { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cap-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 18px;
  background: #0e1626; border: 1px solid #25324d; border-radius: 12px; cursor: pointer;
  font-weight: 600; color: #dce6f5; flex: 1 1 160px; justify-content: center;
  min-height: 52px; transition: .14s; }
.cap-btn:hover { border-color: #3a4d72; background: #131d30; }
.cap-photo { background: #0a3a4a; border-color: #00b4d8; color: #7fe3ff; }
.cap-photo:hover { background: #0d4a5e; }
#contribute-filename:not(:empty) { padding: 6px 0; color: #4ade9b; }

/* ===== Ergonomie tablette tactile (iPad & Android) ===== */
@media (max-width: 1200px) {
  /* Onglets catalogue : une seule ligne qui défile au doigt, plus de débordement vertical */
  .home-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; padding-bottom: 8px;
  }
  .home-tab { flex: 0 0 auto; padding: 9px 13px; font-size: 13px; }
  /* Onglets admin : pareil, défilables */
  .admin-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-tab { flex: 0 0 auto; white-space: nowrap; }
  /* Menu « plus d'outils » : cibles tactiles plus grandes */
  .overflow-menu button { padding: 13px 16px; font-size: 15px; }
  /* Mini-carte plus grande et confortable au doigt */
  #minimap { width: 230px; right: 10px; bottom: 10px; }
  #minimap.mm-large { width: min(82vw, 560px); }
}

/* Sur écran réellement tactile : viser large quel que soit le format */
@media (pointer: coarse) {
  .home-tab, .admin-tab, .overflow-menu button,
  .viewer-controls button, .fo-react, .cap-btn { min-height: 44px; }
  #minimap { width: 250px; }
  #minimap-zoom { width: 34px; height: 34px; font-size: 17px; }
}

/* ===== Bloc outil de capture PC (.exe) ===== */
.capture-tool { margin-top: 16px; padding: 14px; background: #0e1626;
  border: 1px solid #25324d; border-radius: 12px; }
.ct-head { font-weight: 700; margin-bottom: 6px; }
.capture-tool .cap-btn { display: inline-flex; text-decoration: none; margin: 8px 0; }
.ct-howto { font-size: .82em; opacity: .85; }
.ct-howto code { background: #1a2438; padding: 1px 6px; border-radius: 5px; color: #7fe3ff; }

/* ===== Photos terrain du composant ===== */
.comp-photos { margin-top: 12px; padding-top: 10px; border-top: 1px solid #2a2d33; }
.cp-head { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.cp-count { color: #7fe3ff; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.cp-item { position: relative; }
.cp-item img { width: 100%; height: 86px; object-fit: cover; border-radius: 8px;
  border: 1px solid #2a3550; background: #0e1626; }
.cp-meta { font-size: 10px; color: #7e8694; display: flex; justify-content: space-between; gap: 4px; margin-top: 2px; }
.cp-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(20,10,10,.8); border: 1px solid #7a2a2a; color: #ffd5d5; cursor: pointer;
  line-height: 1; padding: 0; font-size: 12px; }
.cp-empty { grid-column: 1/-1; color: #7e8694; font-size: 12px; padding: 6px 0; }
.cp-add { margin-top: 10px; width: 100%; padding: 13px; background: #0a3a4a;
  border: 1px solid #00b4d8; color: #7fe3ff; border-radius: 10px; font-weight: 600;
  cursor: pointer; min-height: 46px; }
.cp-add:hover { background: #0d4a5e; }
.cp-status:not(:empty) { font-size: 12px; color: #4ade9b; padding-top: 6px; }

/* ===== Admin : rattacher une photo en attente à un composant ===== */
.ad-thumb { display: block; margin: 8px 0; }
.ad-thumb img { max-width: 160px; max-height: 120px; border-radius: 8px;
  border: 1px solid #2a3550; object-fit: cover; }
.ad-attach { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.ad-term { flex: 1 1 160px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid #2a3550; background: #0e1626; color: #dce6f5; }
.ad-attach-btn { background: #0a3a4a; border: 1px solid #00b4d8; color: #7fe3ff;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.ad-attach-btn:hover { background: #0d4a5e; }

/* ===== Ajouter un document : option admin « publier directement » ===== */
.contribute-direct { display: flex; align-items: center; gap: 8px; font-weight: 600;
  padding: 9px 11px; margin: 4px 0 10px; background: #0e1626; border: 1px solid #25324d;
  border-radius: 10px; cursor: pointer; }
.contribute-batch { margin-top: 6px; }
.contribute-batch a { color: #7fe3ff; cursor: pointer; }

/* ===== Bande de vignettes des pages ===== */
#page-strip {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px;
  background: #14161a; border-top: 1px solid #2a2d33; flex: 0 0 auto;
  scrollbar-width: thin;
}
.ps-item {
  flex: 0 0 auto; cursor: pointer; text-align: center; opacity: .8;
  border: 2px solid transparent; border-radius: 6px; padding: 2px; transition: .12s;
}
.ps-item:hover { opacity: 1; border-color: #3a4d72; }
.ps-item.current { opacity: 1; border-color: #ffd24a; }
.ps-item img { display: block; width: 64px; height: 46px; object-fit: cover;
  background: #fff; border-radius: 3px; }
.ps-item span { font-size: 10px; color: #9fb2cc; }
.ps-item.current span { color: #ffd24a; font-weight: 700; }
body.compare-mode #page-strip, body.annotate-mode #page-strip { display: none; }

/* ===== Proposer une traduction (modale dico) ===== */
#dico-add { margin: 8px 0; background: #0e1626; border: 1px solid #25324d; border-radius: 10px; padding: 8px 10px; }
#dico-add summary { cursor: pointer; font-weight: 600; color: #7fe3ff; }
.dico-add-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dico-add-row select { flex: 0 0 60px; }
.dico-add-row input { flex: 1 1 120px; padding: 7px 9px; border-radius: 7px; border: 1px solid #2a3550; background: #0b1322; color: #dce6f5; }
.dico-add-row button { background: #1f7a52; border: none; color: #eafff4; padding: 7px 14px; border-radius: 7px; cursor: pointer; font-weight: 600; }
#dico-add-status:not(:empty) { padding-top: 6px; }

/* ===== Mots à compléter (dico) ===== */
#dico-missing { margin: 8px 0; background: #0e1626; border: 1px solid #25324d; border-radius: 10px; padding: 8px 10px; }
#dico-missing summary { cursor: pointer; font-weight: 600; color: #7fe3ff; }
#dico-missing-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dm-word { background: #131d30; border: 1px solid #25324d; color: #dce6f5; border-radius: 14px;
  padding: 4px 10px; cursor: pointer; font-size: .9em; }
.dm-word:hover { border-color: #00b4d8; color: #7fe3ff; }
.dm-word span { color: #7e8694; font-size: .85em; }

/* ===== Traduction IA des mots à compléter ===== */
.dico-ai-btn { margin-top: 10px; width: 100%; padding: 10px; background: #0a3a4a;
  border: 1px solid #00b4d8; color: #7fe3ff; border-radius: 8px; cursor: pointer; font-weight: 600; }
.dico-ai-btn:hover { background: #0d4a5e; }
.dap-head { font-size: 12px; color: #9fb2cc; margin: 10px 0 6px; }
.dap-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.dap-row.done { opacity: .6; }
.dap-w { flex: 0 0 130px; font-weight: 600; }
.dap-w em { color: #7e8694; font-style: normal; font-size: .8em; }
.dap-arrow { color: #7e8694; }
.dap-fr { flex: 1 1 auto; padding: 5px 8px; border-radius: 6px; border: 1px solid #2a3550; background: #0b1322; color: #dce6f5; }
.dap-ok, .dap-no { background: #131d30; border: 1px solid #25324d; border-radius: 6px; cursor: pointer; padding: 4px 8px; }
.dap-ok { color: #4ade9b; } .dap-no { color: #ff9b9b; }

/* ===== Signets de pages ===== */
#btn-bookmark.active { color: #ffd24a; }
.bm-wrap { position: relative; display: inline-block; }
#bm-count { font-size: 10px; vertical-align: super; color: #ffd24a; }
.bm-panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  background: #1f2126; border: 1px solid #3a3f48; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6); width: 300px; max-height: 360px; overflow-y: auto; padding: 4px;
}
.bm-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.bm-item:hover { background: #2a2d33; }
.bm-lbl { flex: 1; font-size: 13px; color: #d0d6df; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-pg { font-size: 11px; color: #ffd24a; }
.bm-del { background: none; border: none; color: #ff9b9b; cursor: pointer; font-size: 16px; padding: 0 4px; }

/* ===== Classement unifié (meilleurs résultats) ===== */
#unified-panel h3 { color: #ffd24a; }
#unified-list { list-style: none; margin: 0; padding: 0; }
.uni-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px;
  cursor: pointer; border: 1px solid transparent; }
.uni-item:hover { background: #1a2438; border-color: #2a3550; }
.uni-ic { font-size: 1.1em; flex: 0 0 auto; }
.uni-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.uni-label { font-weight: 600; color: #dce6f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uni-sub { font-size: 11px; color: #8a96a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uni-type { flex: 0 0 auto; font-size: 10px; color: #7fe3ff; background: #0a3a4a;
  border: 1px solid #0d4a5e; border-radius: 10px; padding: 1px 8px; }

/* ===== Planches schémas (recherche sémantique par page) ===== */
#schemapages-panel h3 { color: #7fe3ff; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-top: 6px; }
.sp-card { display: flex; flex-direction: column; gap: 0; padding: 0; text-align: left;
  background: #0e1626; border: 1px solid #243049; border-radius: 10px; overflow: hidden;
  cursor: pointer; color: inherit; font: inherit; transition: border-color .12s, transform .12s; }
.sp-card:hover { border-color: #3aa0ff; transform: translateY(-2px); }
.sp-thumb { width: 100%; height: 104px; object-fit: cover; object-position: top center;
  background: #fff; border-bottom: 1px solid #243049; display: block; }
.sp-meta { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px 9px; min-width: 0; }
.sp-name { font-size: 12px; font-weight: 700; color: #dce6f5; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.sp-page { font-size: 11px; color: #7fe3ff; }
.sp-snip { font-size: 10.5px; color: #8a96a8; line-height: 1.35; max-height: 2.7em; overflow: hidden; }
/* « Compris » : codes MAN déduits de la description FR (glossaire 15k) */
.sp-understood { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 4px 0 8px;
  font-size: 11px; color: #7fe3ff; }
.su-code { background: #0a3a4a; border: 1px solid #0d4a5e; border-radius: 7px; padding: 1px 8px; color: #cfeaf2; }
.su-code b { color: #ffd24a; }
.sp-codes { display: flex; flex-wrap: wrap; gap: 3px; margin: 1px 0; }
.sp-code { background: #1c2b1c; border: 1px solid #2f4a2f; color: #9be29b; border-radius: 5px;
  padding: 0 5px; font-size: 10px; font-weight: 700; }

/* ===== Visionneuse KB INTERACTIVE (schémas importés cliquables) ===== */
.kb-stage { position: relative; display: block; width: 100%; line-height: 0; }
.kb-trace-canvas { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 3; }
.kb-click-layer { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 4; }
.kb-click-layer .hot { position: absolute; pointer-events: auto; cursor: pointer; border-radius: 3px;
  border: 1px solid transparent; transition: background-color .08s, box-shadow .08s; }
.kb-click-layer .hot:hover { background-color: rgba(127,227,255,0.28); border-color: rgba(127,227,255,0.9); }
.kb-click-layer .hot.kind-wire:hover { background-color: rgba(255,159,64,0.32); border-color: #ff9f40; }
.kb-click-layer .hot.kind-component:hover { background-color: rgba(75,192,100,0.32); border-color: #4bc064; }
.kb-click-layer .hot.kind-component.has-def { border-bottom: 1.5px dotted rgba(123,227,160,0.55); }
.kb-click-layer .hot.kind-schema:hover { background-color: rgba(153,102,255,0.30); border-color: #9966ff; }
.kb-click-layer .hot-nomen { cursor: help; border-bottom: 2px dotted rgba(255,200,80,.9); }
.kb-click-layer .hot-nomen:hover { background: rgba(255,200,80,.28); box-shadow: 0 0 0 2px rgba(255,200,80,.5); }
/* Renvois : toujours visibles (badge cyan + cible) */
.kb-click-layer .hot-xref { background: rgba(0,180,216,0.18); border: 1px solid rgba(0,180,216,0.6);
  box-shadow: 0 0 0 1px rgba(0,180,216,0.25); }
.kb-click-layer .hot-xref:hover { background: rgba(0,230,120,0.40); border-color: #00e678;
  box-shadow: 0 0 0 2px #00e678, 0 0 10px #00e678; }
.kb-click-layer .hot-xref::after { content: attr(data-tag); position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%); background: #022f3a; color: #7fe3ff; font-size: 9px; line-height: 1.4;
  padding: 0 4px; border-radius: 4px 4px 4px 0; white-space: nowrap; border: 1px solid #0d4a5e;
  pointer-events: none; opacity: 0; transition: opacity .1s; }
.kb-click-layer .hot-xref:hover::after { opacity: 1; }
/* Surbrillance d'un terme cherché + couleurs de tracé multi-fil */
.kb-click-layer .hot.is-primary { background: rgba(255,210,74,0.45); border-color: #ffd24a;
  box-shadow: 0 0 0 2px #ffd24a; animation: kbflash 1.6s ease-out; }
@keyframes kbflash { 0% { box-shadow: 0 0 0 6px rgba(255,210,74,.7); } 100% { box-shadow: 0 0 0 2px #ffd24a; } }
.kb-click-layer .hot.tr0 { background: rgba(255,99,132,.5); border-color: #ff6384; }
.kb-click-layer .hot.tr1 { background: rgba(54,162,235,.5); border-color: #36a2eb; }
.kb-click-layer .hot.tr2 { background: rgba(75,192,100,.5); border-color: #4bc064; }
.kb-click-layer .hot.tr3 { background: rgba(255,159,64,.5); border-color: #ff9f40; }
.kb-click-layer .hot.tr4 { background: rgba(153,102,255,.5); border-color: #9966ff; }
.kb-land-band { position: absolute; top: 0; height: 100%; width: 3px; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, transparent, #00e678, transparent); box-shadow: 0 0 14px 5px rgba(0,230,120,.55); }
/* Boutons toggle de la visionneuse */
.kb-toggle { background: #16202e; color: #9fb0c6; border: 1px solid #2a3550; border-radius: 7px;
  padding: 3px 9px; font-size: 12px; cursor: pointer; margin-left: 4px; }
.kb-toggle:hover { border-color: #3aa0ff; color: #dce6f5; }
.kb-toggle.on { background: #0a3a4a; color: #7fe3ff; border-color: #0d4a5e; }
.kb-trace-info { font-size: 11px; color: #8a96a8; margin-left: 6px; }
/* Annotations sur la planche importée */
.kb-annot-canvas { position: absolute; top: 0; left: 0; z-index: 6; pointer-events: none; }
.kb-annot-tools { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; }
.kb-annot-tools button { padding: 2px 6px; font-size: 12px; border-radius: 6px; border: 1px solid #2a3550;
  background: #16202e; color: #cfd6e0; cursor: pointer; line-height: 1; }
.kb-annot-tools .kat.active { background: #0a3a4a; border-color: #0d4a5e; }
.kb-annot-tools .kac { width: 17px; height: 17px; padding: 0; border-radius: 50%; border: 2px solid transparent; }
.kb-annot-tools .kac.active { border-color: #fff; }
/* Chips de traduction DE→FR posés sous les mots allemands */
.kb-tr-chip { position: absolute; transform: translateY(1px); background: rgba(10,58,74,.92);
  color: #aef4ff; font-size: 9.5px; line-height: 1.3; padding: 0 3px; border-radius: 3px;
  border: 1px solid #0d4a5e; white-space: nowrap; pointer-events: none; z-index: 6; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; }
/* Visionneuse INLINE (remplit la zone centrale, pas un popup) */
.kb-inline { position: absolute; inset: 0; z-index: 15; background: #0d0e10; border-radius: 8px;
  overflow: hidden; }
.kb-inline-content { position: absolute; inset: 0; display: flex; flex-direction: column; min-width: 0; }
.kb-inline .kb-viewer-header { padding: 6px 10px; margin: 0; background: #12151b;
  border-bottom: 1px solid #2a2d33; flex-wrap: wrap; gap: 6px; }
.kb-inline .kb-viewer-header h2 { font-size: 14px; }
.kb-inline .kb-viewer-nav { flex-wrap: wrap; }
.kb-close-inline { background: #2a1620; color: #ff8da3; border: 1px solid #5a2738; border-radius: 7px;
  padding: 3px 9px; font-size: 12px; cursor: pointer; margin-left: 6px; }
.kb-close-inline:hover { background: #3a1a28; color: #ffb3c4; }
/* Tablette : visionneuse importée tactile — pan 1 doigt + pinch 2 doigts gérés en JS (setupKbTouchZoom) */
.kb-viewer-body { touch-action: none; }
/* Pas de schéma ouvert (tableau de bord) → on masque les boutons de la barre schéma
   (le label de statut #current-label reste visible). Évite une barre d'outils inerte. */
body:not(.schema-open) .viewer-controls { display: none; }
/* Sommaire du document (📑 Plan) : navigation par système */
.kb-outline-panel { position: absolute; top: 46px; left: 10px; z-index: 30; width: 300px; max-height: 72%;
  overflow-y: auto; background: #12151b; border: 1px solid #2a6f80; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55); padding: 6px; }
.kb-ol-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px;
  color: #7fe3ff; font-weight: 700; padding: 4px 6px 8px; border-bottom: 1px solid #2a2d33; margin-bottom: 4px; }
.kb-ol-x { background: none; border: none; color: #ff8da3; cursor: pointer; font-size: 14px; padding: 0 4px; flex: 0 0 auto; }
.kb-ol-filter { flex: 1 1 auto; min-width: 0; margin: 0 6px; background: #0c1418; color: #e0e0e0;
  border: 1px solid #2a6f80; border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 400; }
.kb-ol-filter:focus { outline: none; border-color: #7fe3ff; }
.kb-ol-load { padding: 12px; color: #9aa3ad; font-size: 13px; }
.kb-ol-results { padding: 2px 2px 6px; }
.kb-ol-rhead { font-size: 12px; color: #7fe3ff; font-weight: 600; padding: 4px 6px 7px; }
.kb-ol-item { display: flex; align-items: center; gap: 10px; width: 100%;
  background: #171b22; border: 1px solid #232a33; border-radius: 7px; padding: 6px 8px; margin: 3px 0;
  cursor: pointer; text-align: left; color: #e6e6e6; font-size: 13px; }
.kb-ol-item:hover { background: #0a3a4a; border-color: #2a6f80; }
.kb-ol-thumb { flex: 0 0 auto; width: 58px; height: 42px; object-fit: cover; object-position: top left;
  background: #fff; border-radius: 4px; border: 1px solid #2a2d33; }
.kb-ol-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kb-ol-lbl { font-weight: 600; }
.kb-ol-pg { color: #8a93a0; font-size: 11px; white-space: nowrap; }
.kb-ol-sec { margin: 3px 0; }
.kb-ol-exp { flex: 0 0 auto; margin-left: auto; background: #10242b; color: #7fe3ff; border: 1px solid #2a6f80;
  border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 12px; line-height: 1; }
.kb-ol-exp:hover { background: #0a3a4a; border-color: #7fe3ff; }
.kb-ol-pages { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 2px 2px 6px; }
.kb-pg-thumb { position: relative; padding: 0; border: 1px solid #232a33; border-radius: 4px; background: #fff;
  cursor: pointer; width: 52px; height: 40px; overflow: hidden; }
.kb-pg-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.kb-pg-thumb span { position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,.72); color: #fff;
  font-size: 9px; padding: 0 3px; border-radius: 4px 0 0 0; }
.kb-pg-thumb:hover { border-color: #7fe3ff; box-shadow: 0 0 0 1px #7fe3ff; }
@media (max-width: 1024px) {
  .kb-outline-panel { width: 82vw; max-width: 380px; top: 52px; }
  .kb-ol-item { padding: 9px; font-size: 15px; }
  .kb-ol-thumb { width: 66px; height: 48px; }
  .kb-ol-exp { width: 34px; height: 34px; }
  .kb-pg-thumb { width: 62px; height: 47px; }
}
@media (max-width: 1024px) {
  .kb-inline .kb-viewer-nav button, .kb-inline .kb-viewer-nav .kb-toggle { padding: 7px 11px; min-height: 38px; }
  .kb-annot-tools button { min-height: 34px; }
  .kb-annot-tools .kac { width: 22px; height: 22px; }
  .kb-mini { max-width: 92vw; }
  .kb-click-layer .hot.kind-component.has-def { border-bottom-width: 2px; }
}
/* Mini-carte « où va le fil / composant » */
.kb-mini { position: absolute; z-index: 30; max-width: 380px; min-width: 210px; background: #0e1626;
  border: 1px solid #2a3550; border-radius: 10px; box-shadow: 0 10px 32px rgba(0,0,0,.6); padding: 10px 12px;
  font-size: 12.5px; color: #dce6f5; }
.kb-mini .km-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.kb-mini .km-code { font-weight: 800; font-size: 14px; color: #7fe3ff; }
.kb-mini .km-x { cursor: pointer; color: #8a96a8; border: none; background: none; font-size: 16px; line-height: 1; }
.kb-mini .km-def { color: #aebacc; font-size: 11.5px; margin-bottom: 6px; }
.kb-mini .km-src { color: #6b7686; font-size: 9.5px; font-style: italic; }
/* Image du composant + photos terrain dans la mini-carte (visionneuse importée) */
.kb-mini .km-img { width: 100%; max-height: 130px; object-fit: contain; background: #fff; border-radius: 6px; margin: 4px 0; display: block; }
.kb-mini .km-photos { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.kb-mini .km-photo { width: 54px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid #2a3550; display: block; }
.kb-mini .km-photo-add { width: 100%; margin: 4px 0 2px; background: #10242b; color: #7fe3ff; border: 1px solid #2a6f80;
  border-radius: 6px; padding: 6px; cursor: pointer; font-size: 12px; }
.kb-mini .km-photo-add:hover { background: #0a3a4a; border-color: #7fe3ff; }
.kb-mini .km-sub { color: #8a96a8; font-size: 11px; margin: 4px 0 3px; }
.kb-mini .km-pages { display: flex; flex-wrap: wrap; gap: 4px; max-height: 132px; overflow: auto; }
.kb-mini .km-pg { background: #16202e; border: 1px solid #2a3550; border-radius: 6px; padding: 1px 7px;
  font-size: 11px; color: #cfe; cursor: pointer; }
.kb-mini .km-pg:hover { border-color: #3aa0ff; background: #1a2438; }
.kb-mini .km-pg.cur { border-color: #ffd24a; color: #ffd24a; }
/* Pellicule de planches d'un fil (fil conducteur visuel) */
.kb-mini .km-film { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 4px; margin: 2px 0; }
.kb-mini .km-frame { flex: 0 0 auto; background: #0e1626; border: 1px solid #2a3550; border-radius: 6px;
  padding: 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.kb-mini .km-frame:hover { border-color: #3aa0ff; }
.kb-mini .km-frame.cur { border-color: #ffd24a; }
.kb-mini .km-frame img { width: 66px; height: 47px; object-fit: cover; object-position: top center;
  background: #fff; border-radius: 3px; display: block; }
.kb-mini .km-frame span { font-size: 9.5px; color: #bfe; }
.kb-mini .km-act { display: flex; gap: 6px; margin-top: 8px; }
.kb-mini .km-btn { flex: 1; text-align: center; background: #0a3a4a; color: #7fe3ff; border: 1px solid #0d4a5e;
  border-radius: 6px; padding: 4px 6px; font-size: 11.5px; cursor: pointer; }
.kb-mini .km-btn:hover { background: #0d4a5e; }
.kb-mini .km-note { color: #ffb454; font-size: 11px; }

/* ===== Vouliez-vous dire ? ===== */
#didyoumean { padding: 8px 12px; margin-bottom: 8px; background: #2a2410; border: 1px solid #5a4a20;
  border-radius: 8px; color: #ffd24a; font-size: 13px; }
.dym-btn { background: #ffd24a; color: #1a1400; border: none; border-radius: 6px; padding: 2px 10px;
  font-weight: 700; cursor: pointer; }

/* ===== Glossaire de page ===== */
.gloss-wrap { position: relative; display: inline-block; }
.gloss-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  background: #1f2126; border: 1px solid #3a3f48; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6); width: 320px; max-height: 420px; overflow-y: auto; padding: 8px 10px; }
.gloss-head { font-weight: 700; font-size: 12px; color: #7fe3ff; margin-bottom: 6px; }
.gloss-list { display: flex; flex-direction: column; gap: 2px; }
.gloss-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 4px; border-radius: 5px; }
.gloss-row:nth-child(odd) { background: #0e1626; }
.gl-de { color: #c8d4e1; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.gl-fr { color: #4ade9b; font-size: 12px; text-align: right; }
.gloss-un { display: flex; flex-wrap: wrap; gap: 5px; }
.gl-un { background: #131d30; border: 1px solid #25324d; border-radius: 12px; padding: 3px 9px;
  font-size: 12px; color: #dce6f5; cursor: pointer; }
.gl-un:hover { border-color: #00b4d8; }
.gl-un small { color: #7e8694; margin-left: 4px; }

/* ===== Renvois RUPLAN cliquables (schémas TEPS) ===== */
.hot-xref {
  cursor: pointer;
  background: rgba(0,180,216,0.16);
  border: 1px solid rgba(0,180,216,0.7);
  border-radius: 3px;
}
.hot-xref:hover { background: rgba(0,180,216,0.38); box-shadow: 0 0 0 2px rgba(0,180,216,0.5); }
/* Mode "renvois en évidence" : chaque renvoi de planche brille + affiche sa cible (↪p.X) */
body.xref-show .hot-xref {
  background: rgba(0,230,120,0.22);
  border: 1.5px solid #00e678;
  box-shadow: 0 0 7px rgba(0,230,120,0.6);
}
body.xref-show .hot-xref::after {
  content: attr(data-tag);
  position: absolute; left: 0; top: -15px;
  font: 700 9px/1.4 ui-monospace, monospace;
  background: #073b22; color: #6bffb0; border: 1px solid #00e678;
  padding: 0 4px; border-radius: 4px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
body.xref-show .hot-xref:hover { background: rgba(0,230,120,0.42); box-shadow: 0 0 0 2px #00e678, 0 0 10px #00e678; }
#btn-xref.on { background: #0a3a24; border-color: #00e678; color: #6bffb0; }
/* Renvoi RECOMMANDÉ (mène à une planche du fil tracé) : or, ressort par-dessus le vert */
body.xref-show .hot-xref-reco {
  background: rgba(255,210,74,0.30);
  border: 2px solid #ffd24a;
  box-shadow: 0 0 11px rgba(255,210,74,0.9);
}
body.xref-show .hot-xref-reco::after {
  background: #4a3500; color: #ffe08a; border-color: #ffd24a;
}
body.xref-show .hot-xref-reco:hover { box-shadow: 0 0 0 2px #ffd24a, 0 0 13px #ffd24a; }

/* ===== Badge techno (ELSA / TEPS / Camion / Scan) ===== */
.tech-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 10px;
  letter-spacing: .04em; vertical-align: middle; }
.tb-elsa { background: #123a2a; color: #4ade9b; border: 1px solid #1f7a52; }
.tb-teps { background: #3a2410; color: #ffb24a; border: 1px solid #7a5a20; }
.tb-truck { background: #2a1c3a; color: #c79bff; border: 1px solid #5a3f7a; }
.tb-scan { background: #1a2438; color: #8aa6c8; border: 1px solid #2a3550; }

/* ===== Réf de plan (Sachnummer) ===== */
.plan-ref { font-size: 11px; color: #9fb2cc; background: #0e1626; border: 1px solid #25324d;
  border-radius: 8px; padding: 1px 8px; margin-left: 6px; font-family: ui-monospace, Consolas, monospace; }

/* ===== Documents équipementiers ===== */
.equip-docs { display: flex; flex-direction: column; gap: 6px; }
.equip-doc { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%;
  background: #0e1626; border: 1px solid #25324d; color: #dce6f5; border-radius: 8px;
  padding: 9px 11px; cursor: pointer; }
.equip-doc:hover { border-color: #00b4d8; background: #131d30; }
.ed-cat { margin-left: auto; font-size: 10px; color: #7fe3ff; background: #0a3a4a;
  border: 1px solid #0d4a5e; border-radius: 9px; padding: 1px 7px; }

/* ===== Traceur de signal ===== */
.trace-panel { border: 1px solid #2a3b5c; box-shadow: 0 0 0 1px #00b4d822 inset; }
.trace-panel h3 { display: flex; align-items: center; gap: 6px; }
.trace-count { font-size: 11px; color: #7fe3ff; font-weight: 600; }
.trace-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.trace-form input { flex: 1 1 90px; min-width: 80px; background: #0e1626; border: 1px solid #2a3b5c;
  color: #e6eefc; border-radius: 7px; padding: 7px 9px; font-size: 13px; }
.trace-form input:focus { outline: none; border-color: #00b4d8; }
.trace-arrow { color: #7fa0c8; font-weight: 700; }
.trace-form select { background: #0e1626; border: 1px solid #2a3b5c; color: #cfe0f5;
  border-radius: 7px; padding: 7px 6px; font-size: 12px; flex: 1 1 100%; }
.trace-form button { background: linear-gradient(135deg, #00b4d8, #0077b6); color: #fff; border: none;
  border-radius: 7px; padding: 8px 14px; font-weight: 700; cursor: pointer; flex: 1 1 100%; }
.trace-form button:hover { filter: brightness(1.1); }
.trace-summary { font-size: 12.5px; color: #cdd9ec; margin: 6px 0; line-height: 1.45; }
.trace-legend { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.trace-net { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #dce6f5;
  background: #0e1626; border: 1px solid #25324d; border-radius: 20px; padding: 2px 9px; }
.trace-net i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.trace-net em { color: #8fa6c4; font-style: normal; }
.trace-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 4px; }
.trace-nav button { background: #14233c; border: 1px solid #2a3b5c; color: #e6eefc; border-radius: 8px;
  width: 42px; height: 34px; font-size: 16px; cursor: pointer; }
.trace-nav button:hover { border-color: #00b4d8; background: #1a2b48; }
.trace-pos { font-size: 13px; font-weight: 700; color: #9fc7ff; min-width: 56px; text-align: center; }
.trace-steps { list-style: none; margin: 6px 0 0; padding: 0; max-height: 42vh; overflow-y: auto; }
.trace-step { display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin-bottom: 4px;
  background: #0e1626; border: 1px solid #1e2c44; border-left: 4px solid var(--c);
  border-radius: 7px; cursor: pointer; font-size: 12.5px; }
.trace-step:hover { background: #131f33; }
.trace-step.active { background: #16253c; border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset; }
.trace-step .ts-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: 0 0 auto;
  box-shadow: 0 0 5px var(--c); }
.trace-step .ts-pg { font-weight: 700; color: #e6eefc; min-width: 44px; }
.trace-step .ts-wire { color: #7fe3ff; font-family: ui-monospace, monospace; font-size: 12px; }
.trace-step .ts-note { margin-left: auto; color: #b9c8de; font-size: 11.5px; }

/* Bouton bascule du calque de tracé */
.trace-layer-btn { width: 100%; margin: 4px 0 2px; background: #14233c; border: 1px solid #2a3b5c;
  color: #cfe0f5; border-radius: 7px; padding: 7px; font-weight: 700; cursor: pointer; font-size: 12.5px; }
.trace-layer-btn.on { background: #10233a; border-color: #00b4d8; color: #7fe3ff; }
.trace-layer-btn:hover { filter: brightness(1.15); }

/* Désignations explicables (borne relais, Klemme, signal) sur la planche */
#click-layer .hot-nomen { cursor: help; border-bottom: 2px dotted rgba(255,200,80,.9);
  background: rgba(255,200,80,.10); }
#click-layer .hot-nomen:hover { background: rgba(255,200,80,.28); box-shadow: 0 0 0 2px rgba(255,200,80,.5); }

/* Légende Repères & bornes */
.nomen-focus { background: #10233a; border: 1px solid #00b4d8; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 12px; color: #dff1ff; font-size: 14px; }
.nomen-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; align-items: baseline; }
.nomen-k { font-family: ui-monospace, monospace; font-weight: 800; color: #ffd24a; white-space: nowrap; }
.nomen-v { color: #dce6f5; font-size: 13px; }
.nomen-src { margin-top: 8px; font-size: 11px; color: #7e8694; font-style: italic; }

/* ===== Parcours bout-à-bout (filmstrip du fil) ===== */
.modal-full { width: 96vw; max-width: 1700px; height: 90vh; display: flex; flex-direction: column; }
.film-strip { flex: 1; overflow-y: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 18px; }
.film-net-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #e6eefc;
  font-family: ui-monospace, monospace; margin-bottom: 6px; }
.film-net-head i { width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: 0 0 7px var(--c); }
.film-net-head em { color: #8fa6c4; font-style: normal; font-family: system-ui; }
.film-row { display: flex; align-items: center; gap: 0; overflow-x: auto; padding-bottom: 10px; }
.film-link { flex: 0 0 auto; font-size: 26px; font-weight: 800; padding: 0 6px; }
.film-sheet { flex: 0 0 auto; width: 360px; margin: 0; cursor: pointer; background: #0e1626;
  border: 2px solid var(--c); border-radius: 8px; overflow: hidden; transition: transform .12s; }
.film-sheet:hover { transform: scale(1.03); box-shadow: 0 0 0 3px var(--c); }
.film-sheet img { display: block; width: 100%; height: auto; background: #fff; }
.film-sheet figcaption { text-align: center; font-weight: 700; color: #cfe0f5; padding: 5px; font-size: 13px;
  background: #101a2c; }

/* Bande d'arrivée d'un renvoi : marque la colonne/case où le signal continue */
#land-band { position: absolute; top: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(90deg, rgba(0,230,120,0) 0%, rgba(0,230,120,.30) 50%, rgba(0,230,120,0) 100%);
  border-left: 2px solid #00e678; border-right: 2px solid #00e678; box-shadow: 0 0 14px rgba(0,230,120,.6); }
#land-band.pulse { animation: landPulse 1s ease-in-out 3; }
@keyframes landPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Marqueur "tu es arrivé par ce renvoi" (au ← Retour) */
#return-marker { position: absolute; pointer-events: none; z-index: 6; border-radius: 5px;
  border: 2.5px solid #ffd24a; background: rgba(255,210,74,.18); box-shadow: 0 0 14px rgba(255,210,74,.7); }
#return-marker.pulse { animation: retPulse .8s ease-in-out 5; }
@keyframes retPulse { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

/* ===== HUD flottant de suivi de fil (tablette) ===== */
#trace-hud { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; z-index: 9;
  background: rgba(8,16,28,.92); border: 1px solid #2a3b5c; border-radius: 14px;
  padding: 7px 9px; box-shadow: 0 8px 28px rgba(0,0,0,.6); backdrop-filter: blur(4px); }
#trace-hud button { background: #14233c; border: 1px solid #2a3b5c; color: #e6eefc;
  border-radius: 10px; min-height: 46px; min-width: 46px; font-size: 16px; font-weight: 800; cursor: pointer; }
#trace-hud #hud-next { background: linear-gradient(135deg, #00b4d8, #0077b6); border: none; padding: 0 16px; }
#trace-hud button:hover { filter: brightness(1.12); }
#trace-hud #hud-close { min-width: 40px; font-size: 14px; color: #9fb2cc; }
#hud-info { display: flex; flex-direction: column; align-items: center; min-width: 92px; line-height: 1.2; }
#hud-wire { font-family: ui-monospace, monospace; font-weight: 800; color: #7fe3ff; font-size: 14px; }
#hud-pos { font-size: 11px; color: #9fb2cc; }
@media (pointer: coarse) { #trace-hud button { min-height: 54px; min-width: 54px; font-size: 18px; }
  #trace-hud #hud-next { padding: 0 20px; } }

/* Décodeur de marquage (légende) */
.nomen-decode { margin: 10px 0 14px; }
#nomen-decode-input { width: 100%; background: #0e1626; border: 1.5px solid #00b4d8; color: #e6eefc;
  border-radius: 9px; padding: 10px 12px; font-size: 14px; }
#nomen-decode-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,180,216,.4); }
#nomen-decode-out:not(:empty) { margin-top: 8px; background: #10233a; border: 1px solid #1f4a63;
  border-radius: 9px; padding: 10px 12px; }
.dec-tok { font-family: ui-monospace, monospace; font-weight: 800; color: #7fe3ff; font-size: 15px; margin-bottom: 4px; }
.dec-line { color: #e6eefc; font-size: 13.5px; line-height: 1.5; }
.dec-none { color: #9fb2cc; font-size: 13px; font-style: italic; }

/* Pannes fréquentes par système (diagnostic) */
.cf-section { margin: 12px 0; padding: 12px; background: #0e1626; border: 1px solid #1e2c44; border-radius: 10px; }
.cf-title { font-weight: 700; color: #cfe0f5; font-size: 13px; margin-bottom: 8px; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-chip { background: #14233c; border: 1px solid #2a3b5c; color: #dce6f5; border-radius: 18px;
  padding: 6px 12px; cursor: pointer; font-size: 12.5px; }
.cf-chip:hover { border-color: #00b4d8; }
.cf-chip.active { background: #10233a; border-color: #00b4d8; color: #7fe3ff; }
.cf-list:not(:empty) { margin-top: 10px; }
.cf-head { font-weight: 800; color: #7fe3ff; margin-bottom: 8px; }
.cf-fault { background: #101a2c; border-left: 3px solid #00b4d8; border-radius: 6px; padding: 8px 10px; margin-bottom: 7px; }
.cf-symp { font-weight: 700; color: #ffd24a; font-size: 13px; }
.cf-cause, .cf-check { font-size: 12.5px; color: #dce6f5; margin-top: 3px; }
.cf-cause b, .cf-check b { color: #9fb6d4; }

/* Top codes défaut SPN (diagnostic) */
.cf-spn summary { cursor: pointer; font-weight: 700; color: #cfe0f5; font-size: 13px; }
.cf-spn[open] summary { margin-bottom: 8px; }
.spn-top { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.spn-row { display: flex; align-items: center; gap: 8px; text-align: left; background: #101a2c;
  border: 1px solid #1e2c44; border-radius: 6px; padding: 6px 9px; cursor: pointer; color: #dce6f5; }
.spn-row:hover { border-color: #00b4d8; background: #131f33; }
.spn-n { font-family: ui-monospace, monospace; font-weight: 800; color: #ffd24a; flex: 0 0 92px; }
.spn-d { flex: 1; font-size: 12.5px; }
.spn-c { color: #7fe3ff; font-size: 11px; flex: 0 0 auto; }

/* Note technologie (ELSA vs TEPS) dans les pannes fréquentes */
.cf-tech { background: #2a2410; border: 1px solid #5a4a1a; border-radius: 6px; padding: 8px 10px;
  margin-bottom: 8px; font-size: 12px; color: #ffd98a; line-height: 1.45; }

/* Architecture (ELSA vs TEPS) + pièges dans la Méthodologie */
.arch-gen { background: #0e1626; border: 1px solid #25324d; border-left: 4px solid #00b4d8;
  border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.arch-gen-h { font-weight: 800; color: #7fe3ff; font-size: 14px; margin-bottom: 5px; }
.arch-sach { font-weight: 600; font-size: 10px; color: #8aa0bd; background: #0a1a2a; border: 1px solid #25324d;
  border-radius: 9px; padding: 1px 7px; margin-left: 6px; }
.arch-mod, .arch-log { font-size: 12.5px; color: #dce6f5; line-height: 1.45; margin-top: 3px; }
.arch-mod b, .arch-log b { color: #9fb6d4; }
.meth-pieges { background: #2a2410; border: 1px solid #5a4a1a; border-radius: 8px; padding: 8px 12px; margin-top: 10px; color: #ffd98a; }
.meth-pieges ul { margin: 4px 0 0; padding-left: 18px; }
.meth-pieges li { font-size: 12.5px; line-height: 1.5; }

/* 🔌 MAN EASY — câblage composant (éventail de fils) */
.easy-w { margin: 10px 0; background: #11161f; border: 1px solid #273043; border-radius: 12px; padding: 10px 12px; }
.easy-w-title { font-size: 13px; font-weight: 700; color: #3aa0ff; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.easy-w-veh { font-size: 11px; font-weight: 500; color: #8b97a8; background: #1a2230; padding: 1px 8px; border-radius: 999px; }
.easy-w-list { display: flex; flex-direction: column; gap: 5px; }
.easy-wire { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: #0c1422; border: 1px solid #273043; border-radius: 8px; padding: 6px 10px; cursor: pointer; transition: .12s; font-size: 12.5px; }
.easy-wire:hover { border-color: #3aa0ff; background: #10203a; }
.easy-wire .ew-num { font-weight: 800; color: #2bd4a8; font-variant-numeric: tabular-nums; }
.easy-wire .ew-fn { color: #e6edf3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.easy-wire .ew-to { color: #8b97a8; font-size: 11.5px; white-space: nowrap; }

/* ===== MAN EASY — schéma interactif (modale plein écran) ===== */
.easy-w-schema { margin-left: auto; background: #2f7dfb; color: #fff; border: 0; border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: 12.5px; font-weight: 600; }
.easy-w-schema:hover { background: #1f6cf0; }
#easy-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(8,12,20,.74); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 18px; }
#easy-modal.on { display: flex; }
.easy-modal-box { width: min(1320px,97vw); height: min(900px,94vh); background: #0f1620; border: 1px solid #243247; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.6); display: flex; flex-direction: column; overflow: hidden; }
.easy-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #1d2737; background: linear-gradient(180deg,#15202e,#111a26); }
.easy-bc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.easy-bc-item { cursor: pointer; padding: 3px 9px; border-radius: 7px; background: #1b2738; color: #bcd0ea; border: 1px solid #28384f; }
.easy-bc-item.cur { background: #2f7dfb; color: #fff; border-color: #2f7dfb; cursor: default; }
.easy-bc-item:hover:not(.cur) { background: #24344a; }
.easy-bc-sep { color: #46566e; }
.easy-head-actions { display: flex; gap: 8px; }
.easy-head-actions button { background: #1b2738; color: #cfe0f5; border: 1px solid #2a3a52; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.easy-head-actions button:hover { background: #243a55; }
.easy-modal-body { flex: 1; display: flex; min-height: 0; }
.easy-canvas-wrap { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%,#13202f,#0c131d 70%); }
#easy-svg { width: 100%; height: 100%; }
.easy-side { width: 292px; border-left: 1px solid #1d2737; background: #0d1521; padding: 14px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.easy-legend-t { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #7e8ea6; margin-bottom: 7px; }
.easy-leg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #c4d3e8; margin: 4px 0; }
.easy-leg span { width: 16px; height: 6px; border-radius: 3px; display: inline-block; }
.easy-wireinfo { border-top: 1px solid #1d2737; padding-top: 12px; }
.ewi-empty { font-size: 13px; color: #7e8ea6; line-height: 1.5; }
.ewi-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.ewi-num { font-weight: 700; color: #fff; padding: 3px 10px; border-radius: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.ewi-fam { font-size: 12px; color: #9fb0c6; }
.ewi-fn { font-size: 15px; color: #eaf2ff; font-weight: 600; margin-bottom: 5px; line-height: 1.3; }
.ewi-vers { font-size: 13px; color: #9fb0c6; margin-bottom: 12px; }
.ewi-trace { width: 100%; background: #2f7dfb; color: #fff; border: 0; border-radius: 9px; padding: 10px; cursor: pointer; font-size: 14px; font-weight: 600; }
.ewi-trace:hover { background: #1f6cf0; }
/* éléments SVG */
.easy-l1 { stroke-width: 3.4; opacity: .85; stroke-linecap: round; cursor: pointer; }
.easy-l2 { stroke-width: 1.8; opacity: .4; stroke-linecap: round; cursor: pointer; }
line[data-fil].hot, line[data-fil].sel { opacity: 1; stroke-width: 4.4; }
.easy-pill { cursor: pointer; }
.easy-pill rect { stroke: rgba(255,255,255,.25); }
.easy-pill text { fill: #fff; font-size: 11px; font-weight: 700; font-family: inherit; pointer-events: none; }
.easy-pill.hot rect, .easy-pill.sel rect { stroke: #fff; stroke-width: 2; }
.easy-node rect { fill: #1c2940; stroke: #314563; stroke-width: 1.2; }
.easy-node.is-comp rect { fill: #21304a; stroke: #3d597f; }
.easy-node.is-comp { cursor: pointer; }
.easy-node.is-comp:hover rect { fill: #2b426a; stroke: #5b8fd6; }
.easy-node.is-conn rect { fill: #171f2d; stroke: #2a3a52; stroke-dasharray: 3 2; }
.easy-node text { fill: #cdddf2; font-size: 12px; font-weight: 600; font-family: inherit; pointer-events: none; }
.easy-node.is-comp text { fill: #bcd6ff; }
.easy-center rect { fill: #0e1726; stroke: #2f7dfb; stroke-width: 2.2; }
.easy-center .ec-code { fill: #fff; font-size: 20px; font-weight: 800; font-family: inherit; }
.easy-center .ec-sub { fill: #7fa9ee; font-size: 11px; font-family: inherit; }
@media (max-width: 760px) {
  .easy-modal-body { flex-direction: column; }
  .easy-side { width: auto; border-left: 0; border-top: 1px solid #1d2737; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .easy-wireinfo { border-top: 0; padding-top: 0; flex: 1; min-width: 200px; }
}

/* ===== MAN EASY v2 — VRAIE planche allumée ===== */
.easy-sub { display: flex; align-items: center; gap: 12px; padding: 7px 16px; border-bottom: 1px solid #1d2737; background: #0d1623; font-size: 12.5px; }
.easy-sub-veh { color: #cfe0f5; font-weight: 700; white-space: nowrap; }
.easy-sub-hint { color: #6f8097; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.easy-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.easy-tab { background: #18222f; color: #9fb0c6; border: 1px solid #28384f; border-radius: 7px; padding: 3px 9px; cursor: pointer; font-size: 12px; }
.easy-tab.cur { background: #2f7dfb; color: #fff; border-color: #2f7dfb; }
.easy-zoom { display: flex; gap: 4px; }
.easy-zoom button { width: 28px; height: 26px; background: #18222f; color: #cfe0f5; border: 1px solid #28384f; border-radius: 7px; cursor: pointer; font-size: 15px; line-height: 1; }
.easy-zoom button:hover { background: #243a55; }
.easy-stage { flex: 1; min-width: 0; overflow: auto; background: radial-gradient(circle at 50% 28%, #121d2b, #0b1119 75%); padding: 8px 14px; }
#easy-svg { display: block; width: 100%; height: auto; }
/* bande « chaîne de commande » */
#easy-chain { background: #0e1726; border: 1px solid #243247; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.ch-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #7e8ea6; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.ch-tag { background: #1b2738; color: #8fb3e6; border-radius: 999px; padding: 1px 8px; font-size: 10px; text-transform: none; letter-spacing: 0; }
.ch-flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 2px; }
.ch-box { background: #16202e; border: 1px solid #2c3c54; border-radius: 10px; padding: 7px 12px; min-width: 96px; text-align: center; display: flex; flex-direction: column; gap: 1px; justify-content: center; }
.ch-ic { font-size: 17px; line-height: 1.1; display: flex; justify-content: center; }
.esym { width: 26px; height: 26px; color: #cfe0f5; }
.ch-cvm .esym { color: #6ea0e6; }
.ch-rio .esym { color: #3fcf8a; }
.ch-conso .esym { color: #ffcf8a; }
.ch-sw .esym { color: #bcd0ea; }
.ecn-sym { color: #9fc1f0; fill: none; stroke: #9fc1f0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.easy-comp-node.art .ecn-sym { color: #ffcf8a; stroke: #ffcf8a; }
/* symbole sur les borniers latéraux — couleur par type de composant */
.ed-sym { fill: none; stroke: currentColor; color: #8aa0c0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ed-sym.et-lamp { color: #ffcf8a; }
.ed-sym.et-connector { color: #9fb3cc; }
.ed-sym.et-cvm, .ed-sym.et-ecu, .ed-sym.et-relay { color: #6ea0e6; }
.ed-sym.et-sensor { color: #3fcf8a; }
.ed-sym.et-valve, .ed-sym.et-motor { color: #c9a0e6; }
.ed-sym.et-switch { color: #bcd0ea; }
.ed-sym.et-fuse, .ed-sym.et-heater { color: #e69a6a; }
.ed-sym.et-buzzer { color: #e6c46a; }
.easy-dest.nav:hover .ed-sym { color: #eaf2ff; }
.ch-t { font-weight: 800; color: #eaf2ff; font-size: 13px; }
.ch-s { font-size: 10.5px; color: #8b97a8; }
.ch-sw { border-color: #3d597f; }
.ch-cvm { border-color: #2f7dfb; background: #122039; }
.ch-rio { border-color: #16a35a; background: #102619; }
.ch-conso { border-color: #ffb347; background: #241b0e; }
.ch-nav { cursor: pointer; }
.ch-nav:hover { filter: brightness(1.25); }
.ch-arr { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6f8097; padding: 0 8px; }
.ch-arr span { font-size: 9px; line-height: 1.1; margin-bottom: 2px; text-align: center; }
.ch-arr::after { content: "\2192"; font-size: 18px; }
.ch-branch { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 9px; padding-top: 8px; border-top: 1px dashed #243247; font-size: 12px; }
.ch-b { color: #9fb0c6; }
.ch-b b { color: #eaf2ff; font-variant-numeric: tabular-nums; }
.ch-b.alim b { color: #ff9b94; }
.ch-b.masse b { color: #d2a05e; }
.easy-rail { stroke: #3a4a62; stroke-width: 2.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.easy-rail.pwr { stroke: #e2403a; }
.easy-rail.gnd { stroke: #c0863a; }
.easy-rail-t { fill: #e2706b; font-size: 12.5px; font-weight: 700; font-family: inherit; }
.easy-rail-t.gnd { fill: #d2a05e; }
.easy-dot { stroke: #0b1119; stroke-width: 1; }
.easy-cw { cursor: pointer; }
.ecw-hit { stroke: transparent; stroke-width: 17; fill: none; }
.ecw-line { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.ecw-num { font-size: 11.5px; font-weight: 800; font-family: inherit; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: #0b1119; stroke-width: 3px; }
.easy-cw.hot .ecw-line { stroke-width: 4.6; }
.easy-cw.sel .ecw-line { stroke-width: 5.2; filter: drop-shadow(0 0 5px currentColor); stroke-dasharray: 9 6; animation: easyflow .65s linear infinite; }
@keyframes easyflow { to { stroke-dashoffset: -30; } }
.easy-cw.sel .ecw-num { font-size: 12.5px; }
/* mode FOCUS : un fil choisi → on estompe le reste pour suivre le circuit */
#easy-svg.focus .easy-cw:not(.sel) { opacity: .12; }
#easy-svg.focus .easy-dest:not(.sel) { opacity: .42; }
#easy-svg.focus .easy-rail, #easy-svg.focus .easy-rail-t { opacity: .35; }
.easy-dest.sel rect { stroke: #ffcf6a !important; stroke-width: 2.4 !important; filter: drop-shadow(0 0 5px #ffcf6a77); }
/* zoom / déplacement */
#easy-svg { cursor: grab; }
#easy-svg.panning { cursor: grabbing; }
.easy-hint { fill: #5e7596; font-size: 10px; font-style: italic; opacity: .7; }
.ecw-pin { font-size: 10.5px; font-weight: 800; fill: #ffd27a; font-family: inherit; paint-order: stroke; stroke: #0b1119; stroke-width: 3px; }
.ecw-pin.comp { fill: #7fd0ff; }
.easy-cw.sel .ecw-pin { fill: #ffe6b0; }
.easy-cw.sel .ecw-pin.comp { fill: #b3e4ff; }
.esc-v b { color: #ffd27a; font-weight: 800; }
.esc-pin { font-size: 12.5px; color: #9fb0c6; margin-top: 3px; }
.esc-pin b { color: #7fd0ff; font-weight: 800; }
/* résumé fonctionnel « le circuit en bref » */
.easy-func { background: #11161f; border: 1px solid #273043; border-radius: 10px; padding: 10px 12px; }
.easy-func .easy-legend-t { margin-bottom: 6px; }
.ef-row { display: grid; grid-template-columns: 20px 64px 1fr; gap: 6px; align-items: baseline; font-size: 12.5px; padding: 2px 0; color: #c4d3e8; }
.ef-i { text-align: center; }
.ef-l { color: #7e8ea6; }
.ef-v b { color: #eaf2ff; font-weight: 800; font-variant-numeric: tabular-nums; }
.ef-v i { color: #6f8097; }
.ef-via { color: #8fb3e6; cursor: pointer; }
.ef-via:hover { color: #cfe0f5; text-decoration: underline; }
.ef-conns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ef-conn { background: #18222f; color: #bcd0ea; border: 1px solid #2a3a52; border-radius: 7px; padding: 3px 8px; cursor: pointer; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.ef-conn span { background: #2f7dfb; color: #fff; border-radius: 999px; padding: 0 6px; font-size: 10px; }
.ef-conn:hover { background: #243a55; border-color: #3d597f; }
.ef-conn.art { border-color: #ffb347; color: #ffd9a0; }
.ef-art .ef-v b { color: #ffb347; }
.ef-art .ef-via { color: #ffd9a0; }
.ef-approx { color: #6f8097; font-size: 10.5px; font-style: italic; }
/* sélecteur de variante */
.easy-variant { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; white-space: nowrap; }
.ev-lbl { color: #7e8ea6; font-size: 12px; }
.easy-variant button { background: #18222f; color: #9fb0c6; border: 1px solid #28384f; border-radius: 7px; padding: 3px 9px; cursor: pointer; font-size: 12px; }
.easy-variant button.cur { background: #ffb347; color: #1a1207; border-color: #ffb347; font-weight: 700; }
.easy-variant button:hover:not(.cur) { background: #243a55; }
/* badges ARTICULÉ (18C/19C) */
.easy-dest.art rect { stroke: #ffb347; stroke-dasharray: 5 2.5; }
.ed-art { fill: #ffb347; font-size: 9.5px; font-weight: 800; font-family: inherit; }
.easy-comp-node.art rect { stroke: #ffb347; }
.ecn-art { fill: #ffb347; font-size: 11px; font-weight: 800; font-family: inherit; }
.easy-note { fill: #ffb347; font-size: 12px; font-family: inherit; font-style: italic; }
.easy-dest rect { fill: #18222f; stroke: #2c3c54; stroke-width: 1.3; }
.easy-dest text { fill: #c4d3e8; font-size: 13px; font-weight: 700; font-family: inherit; }
.easy-dest .ed-name { fill: #cfe0f5; font-size: 13.5px; font-weight: 700; }
.easy-dest .ed-pins { fill: #6f8097; font-size: 10.5px; font-weight: 600; }
.easy-dest .ed-go { fill: #6f8097; font-size: 17px; }
.easy-dest.nav { cursor: pointer; }
.easy-dest.nav rect { fill: #20304a; stroke: #3d597f; }
.easy-dest.nav:hover rect { fill: #2b426a; stroke: #6ea0e6; }
.easy-dest.nav:hover .ed-go { fill: #cfe0f5; }
.easy-comp-node rect { fill: #0f1b2c; stroke: #2f7dfb; stroke-width: 2.4; filter: drop-shadow(0 4px 14px rgba(47,125,251,.4)); }
.ecn-code { fill: #fff; font-size: 23px; font-weight: 800; font-family: inherit; }
.ecn-desig { fill: #aac4e8; font-size: 12px; font-weight: 600; font-family: inherit; }
.ecn-sub { fill: #7fa9ee; font-size: 11.5px; font-family: inherit; }
.esc-desig { font-size: 13px; color: #aac4e8; font-weight: 600; margin-top: 2px; }
.easy-side-comp { background: #11161f; border: 1px solid #273043; border-radius: 10px; padding: 11px 12px; }
.esc-code { font-size: 19px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.esc-sub { font-size: 12px; color: #8b97a8; margin-top: 3px; }
.esc-fn { font-size: 14px; color: #eaf2ff; font-weight: 600; margin-top: 6px; line-height: 1.3; }
.esc-v { font-size: 12.5px; color: #9fb0c6; margin-top: 3px; }
.easy-wlist { display: flex; flex-direction: column; gap: 4px; overflow: auto; min-height: 0; }
.ewl-count { font-weight: 500; color: #6f8097; font-size: 11px; }

/* ===== VUE SYSTÈME (grand rendu général, ex. portes) ===== */
#sys-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(6,10,16,.72); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 22px; }
#sys-modal.on { display: flex; }
.sys-box { width: min(1500px, 97vw); height: min(92vh, 940px); background: #0c121c; border: 1px solid #25324a; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.sys-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid #1d2940; background: linear-gradient(180deg,#101a28,#0c121c); }
.sys-title { font-size: 16px; font-weight: 800; color: #eaf2ff; display: flex; align-items: center; gap: 10px; }
.sys-veh { font-size: 12px; font-weight: 600; color: #7e93b5; background: #16202f; padding: 3px 9px; border-radius: 20px; }
.sys-head-actions { display: flex; gap: 8px; }
.sys-head-actions button, .easy-sys-btn { background: #18222f; color: #cfe0f5; border: 1px solid #2c3c54; border-radius: 8px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sys-head-actions button:hover, .easy-sys-btn:hover { background: #21314a; border-color: #6ea0e6; }
.easy-sys-btn { background: #1a2a40; border-color: #3d597f; }
.sys-close { font-size: 15px !important; padding: 5px 10px !important; }
.sys-switch { display: inline-flex; gap: 5px; margin-right: 6px; }
.sys-sw { background: #131c29; color: #9fb0c6; border: 1px solid #243044; border-radius: 7px; padding: 5px 10px; font-size: 12px; font-weight: 700; cursor: pointer; text-transform: capitalize; }
.sys-sw:hover { background: #1a2738; color: #cfe0f5; }
.sys-sw.cur { background: #1d3457; color: #eaf2ff; border-color: #3d597f; }
/* narrative repliable */
.sys-narrative { max-height: 0; overflow: hidden; transition: max-height .3s ease; border-bottom: 1px solid transparent; }
.sys-narrative.open { max-height: 460px; overflow: auto; border-bottom: 1px solid #1d2940; padding: 6px 18px 14px; }
.sys-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 9px 18px; margin-top: 8px; }
.sys-step { display: flex; gap: 10px; align-items: flex-start; }
.sys-step-n { flex: 0 0 22px; height: 22px; border-radius: 50%; background: #1d3457; color: #8fb8ff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.sys-step b { color: #eaf2ff; font-size: 13px; }
.sys-step p { color: #9fb0c6; font-size: 12.5px; margin: 2px 0 0; line-height: 1.4; }
.sys-module-note { margin-top: 12px; background: #101d2c; border: 1px solid #25324a; border-left: 3px solid #6ea0e6; border-radius: 8px; padding: 9px 12px; color: #cfe0f5; font-size: 12.5px; line-height: 1.45; }
.sys-mod-meta { display: block; margin-top: 5px; color: #8b97a8; font-size: 11.5px; }
.sys-mod-meta code { background: #16202f; padding: 1px 6px; border-radius: 5px; color: #9fc1f0; }
.sys-sources { margin-top: 9px; color: #62718a; font-size: 11px; font-style: italic; }
/* onglets portes */
.sys-doortabs { display: flex; gap: 7px; padding: 11px 18px 4px; flex-wrap: wrap; }
.sys-door-tab { background: #131c29; color: #9fb0c6; border: 1px solid #243044; border-radius: 8px 8px 0 0; padding: 7px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.sys-door-tab:hover { background: #1a2738; color: #cfe0f5; }
.sys-door-tab.cur { background: #1d3457; color: #eaf2ff; border-color: #3d597f; }
/* flux en lanes */
.sys-flow { flex: 1; overflow: auto; padding: 14px 18px 20px; }
.sys-lanes { display: flex; align-items: stretch; gap: 4px; min-width: max-content; }
.sys-lane { flex: 0 0 auto; width: 192px; background: #0f1825; border: 1px solid #1f2d42; border-radius: 12px; padding: 10px 9px; display: flex; flex-direction: column; }
.sys-lane-head { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: #8fb8ff; padding-bottom: 8px; border-bottom: 1px solid #1c2940; margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
.sys-lane-ic { font-size: 14px; }
.sys-lane-body { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.sys-lane-cap { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #1c2940; color: #7e93b5; font-size: 11px; line-height: 1.38; }
.sys-arrow { display: flex; align-items: center; color: #3d597f; font-size: 22px; font-weight: 800; padding: 0 1px; }
/* puce composant cliquable */
.sys-chip { display: flex; align-items: center; gap: 8px; text-align: left; background: #16202f; border: 1px solid #283a55; border-radius: 9px; padding: 7px 8px; cursor: pointer; transition: .12s; width: 100%; }
.sys-chip:hover { background: #20304a; border-color: #6ea0e6; transform: translateY(-1px); }
.sys-chip-sym { flex: 0 0 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.sys-chip-sym .esym { width: 24px; height: 24px; }
.sys-chip-txt { display: flex; flex-direction: column; min-width: 0; }
.sys-chip-txt b { color: #eaf2ff; font-size: 13px; font-weight: 800; }
.sys-chip-txt b i { color: #ffcf8a; font-style: normal; font-size: 10.5px; font-weight: 700; }
.sys-chip-txt span { color: #8b97a8; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-chip-module { background: #14233a; border-color: #3d597f; }
/* couleur du symbole de la puce par type (réutilise la palette des borniers) */
.sys-chip.et-lamp .esym { color: #ffcf8a; } .sys-chip.et-connector .esym { color: #9fb3cc; }
.sys-chip.et-cvm .esym, .sys-chip.et-ecu .esym, .sys-chip.et-relay .esym { color: #6ea0e6; }
.sys-chip.et-sensor .esym { color: #3fcf8a; } .sys-chip.et-valve .esym, .sys-chip.et-motor .esym { color: #c9a0e6; }
.sys-chip.et-switch .esym { color: #bcd0ea; } .sys-chip.et-fuse .esym, .sys-chip.et-heater .esym { color: #e69a6a; }
.sys-chip.et-buzzer .esym { color: #e6c46a; }
.sys-empty { padding: 40px; text-align: center; color: #7e93b5; }
/* --- conteneur + vue générale (overview) --- */
.sys-content { flex: 1; overflow: auto; display: flex; flex-direction: column; min-height: 0; }
.sys-ov { padding: 18px; }
.sys-ov-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 6px; }
.sys-ov-node { display: flex; flex-direction: column; align-items: center; background: #101d2c; border: 1px solid #2c3c54; border-radius: 12px; padding: 9px 18px; min-width: 120px; }
.sys-ov-node .ovn-ic { font-size: 20px; } .sys-ov-node b { color: #eaf2ff; font-size: 14px; margin-top: 2px; } .sys-ov-node i { color: #7e93b5; font-size: 11px; font-style: normal; }
.ovn-cvm { border-color: #3d597f; } .ovn-mod { border-color: #6ea0e6; background: #13233a; }
.sys-ov-link { color: #6ea0e6; font-size: 12.5px; font-weight: 700; } .sys-ov-link span { color: #9fc1f0; }
.sys-ov-hint { text-align: center; color: #9fb0c6; font-size: 12.5px; margin: 8px 0 16px; } .sys-ov-hint b { color: #ffcf8a; }
.sys-ov-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 13px; }
.sys-door-card { text-align: left; background: linear-gradient(180deg,#13202f,#0f1825); border: 1px solid #243044; border-radius: 13px; padding: 14px; cursor: pointer; transition: .14s; }
.sys-door-card:hover { border-color: #6ea0e6; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(47,125,251,.22); }
.sdc-h { font-size: 14.5px; font-weight: 800; color: #eaf2ff; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.sdc-eio { font-size: 11px; font-weight: 800; color: #8fb8ff; background: #14233a; border: 1px solid #3d597f; border-radius: 6px; padding: 2px 7px; }
.sdc-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11.5px; color: #9fb0c6; margin-bottom: 11px; }
.sdc-meta .sdc-sec { color: #6ee6a0; } .sdc-meta .sdc-sos { color: #ff9a8a; }
.sdc-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.sdc-chip { display: inline-flex; align-items: center; gap: 5px; background: #16202f; border: 1px solid #283a55; border-radius: 7px; padding: 4px 8px; }
.sdc-chip .esym { width: 18px; height: 18px; } .sdc-chip b { color: #cfe0f5; font-size: 12px; }
.sdc-chip.et-lamp .esym { color: #ffcf8a; } .sdc-chip.et-valve .esym { color: #c9a0e6; } .sdc-chip.et-sensor .esym { color: #3fcf8a; }
.sdc-chip.et-switch .esym { color: #bcd0ea; } .sdc-chip.et-connector .esym { color: #9fb3cc; }
.sdc-go { color: #6ea0e6; font-size: 12.5px; font-weight: 700; }
.sys-door-card:hover .sdc-go { color: #9fc1f0; }
/* --- barre vue porte (retour + onglets) --- */
.sys-doorbar { display: flex; align-items: center; gap: 12px; padding: 11px 18px 4px; flex-wrap: wrap; }
.sys-ov-back { background: #18222f; color: #cfe0f5; border: 1px solid #2c3c54; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.sys-ov-back:hover { background: #21314a; border-color: #6ea0e6; }
/* --- câblage (fil + broche) sous chaque composant --- */
.sys-item { display: flex; flex-direction: column; gap: 4px; }
.sys-wires { display: flex; flex-direction: column; gap: 3px; padding-left: 2px; }
.sys-wl { display: flex; align-items: center; gap: 5px; background: #0d141f; border: 1px solid #1c2940; border-left: 2px solid #3a4d6b; border-radius: 6px; padding: 3px 6px; cursor: pointer; font-size: 10.5px; color: #9fb0c6; width: 100%; text-align: left; }
.sys-wl:hover { background: #15202f; border-color: #6ea0e6; }
.sys-wl.wl-hub { border-left-color: #6ea0e6; } .sys-wl.wl-mass { border-left-color: #c0863a; } .sys-wl.wl-pwr { border-left-color: #e2403a; }
.wl-fil { color: #eaf2ff; font-weight: 800; font-size: 11px; }
.wl-cp { color: #7fb0ff; font-style: normal; font-weight: 700; background: #15233a; padding: 0 4px; border-radius: 4px; }
.wl-fam { color: #8b97a8; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-arr { color: #4a6088; } .wl-to { color: #cbd8ea; font-weight: 600; }
.wl-tp { color: #ffcf8a; font-style: normal; font-weight: 700; background: #2a2416; padding: 0 4px; border-radius: 4px; }
/* --- schéma TRACÉ de la porte (SVG) --- */
.sysv-wrap { padding: 6px 14px 0; }
#sysv-svg { width: 100%; min-width: 1180px; height: auto; display: block; }
.sysv-mod { fill: #13233a; stroke: #6ea0e6; stroke-width: 2; filter: drop-shadow(0 4px 16px rgba(110,160,230,.28)); }
.sysv-mod-sym { color: #9fc1f0; fill: none; stroke: #9fc1f0; stroke-width: 1.4; }
.sysv-mod-t { fill: #eaf2ff; font-size: 15px; font-weight: 800; font-family: inherit; }
.sysv-mod-s { fill: #9fc1f0; font-size: 11.5px; font-family: inherit; }
.sysv-mod-bus { fill: #7e93b5; font-size: 11px; font-family: inherit; }
.sysv-mod-hubt { fill: #5e718c; font-size: 10px; font-family: inherit; }
.sysv-mod-hub { fill: #8fb8ff; font-size: 11px; font-weight: 700; font-family: inherit; }
.sysv-mod-link { fill: #ffcf8a; font-size: 11.5px; font-weight: 700; font-family: inherit; }
.sysv-modg.nav { cursor: pointer; }
.sysv-modg.nav:hover .sysv-mod { stroke: #ffcf8a; }
.sysv-modg.nav:hover .sysv-mod-link { fill: #fff; }
.sysv-box { fill: #16202f; stroke: #2c3c54; stroke-width: 1.4; }
.sysv-comp { cursor: pointer; }
.sysv-comp:hover .sysv-box { fill: #21314a; stroke: #6ea0e6; }
.sysv-sym { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: #8aa0c0; }
.sysv-sym.et-lamp { color: #ffcf8a; } .sysv-sym.et-connector { color: #9fb3cc; }
.sysv-sym.et-cvm, .sysv-sym.et-ecu, .sysv-sym.et-relay { color: #6ea0e6; }
.sysv-sym.et-sensor { color: #3fcf8a; } .sysv-sym.et-valve, .sysv-sym.et-motor { color: #c9a0e6; }
.sysv-sym.et-switch { color: #bcd0ea; } .sysv-sym.et-fuse, .sysv-sym.et-heater { color: #e69a6a; }
.sysv-code { fill: #eaf2ff; font-size: 14px; font-weight: 800; font-family: inherit; }
.sysv-leaf { fill: #ffcf8a; font-size: 10.5px; font-weight: 700; }
.sysv-desig { fill: #8b97a8; font-size: 10.5px; font-family: inherit; }
.sysv-grp { fill: #5e718c; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; font-family: inherit; text-transform: uppercase; }
.sysv-wire { stroke-width: 2; cursor: pointer; }
.sysv-wire:hover { stroke-width: 3.4; }
.sysv-fil { font-size: 10.5px; font-weight: 800; font-family: inherit; }
.sysv-nat { font-size: 8.5px; font-weight: 800; font-family: inherit; opacity: .92; letter-spacing: .02em; }
.sysv-cat { fill: #b89a52; font-size: 8.5px; font-weight: 800; font-family: inherit; }
.sysv-amp { fill: #ffcf6a; font-size: 11px; font-weight: 800; font-family: inherit; }
.sysv-zone { fill: #7fb0ff; font-size: 9px; font-weight: 700; font-family: inherit; opacity: .9; }
.sysv-comp.cat .sysv-box { stroke-dasharray: 5 3; opacity: .9; }
.sysv-sym.et-camera { color: #e6a86a; } .ed-sym.et-camera, .sys-chip.et-camera .esym, .sdc-chip.et-camera .esym { color: #e6a86a; }
.sysv-pin { font-size: 9.5px; font-weight: 700; font-family: inherit; }
.sysv-pin.comp { fill: #7fb0ff; } .sysv-pin.hub { fill: #ffcf8a; }
.sysv-legend { padding: 10px 16px 18px; font-size: 11.5px; color: #9fb0c6; display: flex; flex-wrap: wrap; gap: 5px 12px; align-items: center; }
.sysv-legend b { color: #cfe0f5; } .sysv-legend i { color: #7e93b5; font-size: 11px; }
/* en-têtes de groupe fonctionnel */
.sysv-ghead { fill: #8fb8ff; font-size: 11px; font-weight: 800; letter-spacing: .06em; font-family: inherit; text-transform: uppercase; }
/* surbrillance au survol : on éclaire l'unité visée, on atténue les autres */
#sysv-svg:not(.anim):has(.sysv-unit:hover) .sysv-unit:not(:hover) { opacity: .22; transition: opacity .12s; }
#sysv-svg .sysv-unit { transition: opacity .12s; }
#sysv-svg:not(.anim):has(.sysv-unit:hover) .sysv-unit:hover .sysv-wire { stroke-width: 3; }
/* barre d'animation du fonctionnement */
.sysv-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px 4px; }
.sysv-ctrl-l { color: #9fb0c6; font-size: 12.5px; font-weight: 700; }
.sysv-play { background: #16263d; color: #cfe0f5; border: 1px solid #345b8a; border-radius: 7px; padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sysv-play:hover { background: #1f3a5c; border-color: #6ea0e6; }
.sysv-play.cur { background: #2563a8; border-color: #8fb8ff; color: #fff; }
.sysv-stop { background: #2a1820; color: #e6a6a6; border: 1px solid #5a3340; border-radius: 7px; padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sysv-stop:hover { background: #3a2028; border-color: #c06; }
.sysv-cap { color: #ffe1ad; font-size: 12.5px; font-weight: 600; flex: 1; min-width: 200px; }
/* état animé : on atténue tout, on éclaire les étapes actives + on pulse leurs fils */
#sysv-svg.anim .sysv-unit, #sysv-svg.anim .sysv-modg { opacity: .14; transition: opacity .25s; }
#sysv-svg.anim .sysv-unit.on, #sysv-svg.anim .sysv-modg.on { opacity: 1; }
#sysv-svg.anim .sysv-unit.on .sysv-wire { stroke-width: 3.4; }
#sysv-svg.anim .sysv-unit.on .sysv-box { stroke: #8fb8ff; stroke-width: 2.4; }
#sysv-svg.anim .sysv-modg.on .sysv-mod { stroke: #8fb8ff; stroke-width: 3; }
/* FLUX de courant : pointillés qui défilent le long du fil actif */
@keyframes sysv-flow { to { stroke-dashoffset: -28; } }
#sysv-svg .sysv-wire.flow, #sysv-svg .sysv-w2.flow { stroke-dasharray: 9 6; animation: sysv-flow .55s linear infinite; stroke-width: 3.8 !important; }
/* 2e tronçon connecteur→EIO (jonction faisceau) */
.sysv-w2 { stroke-width: 1.7; stroke-dasharray: 3.5 2.5; opacity: .85; }
.sysv-pin.eio { fill: #6ee0b0; font-size: 9px; font-weight: 800; }
.sysv-pin.eio.unk { fill: #5e7a72; font-style: italic; font-weight: 600; }
/* PLAN DU BUS (vue implantation véhicule) */
.busv-body { fill: #0e1827; stroke: #38516f; stroke-width: 2.5; }
.busv-roof { fill: #0c1422; stroke: #2a3a52; stroke-width: 1.5; stroke-dasharray: 4 4; }
.busv-rooflbl { fill: #6f86a6; font-size: 10px; font-weight: 700; }
.busv-nose { fill: none; stroke: #38516f; stroke-width: 2.5; }
.busv-div { stroke: #2a3a52; stroke-width: 1.5; stroke-dasharray: 5 5; }
.busv-joint { fill: #16263d; stroke: #4a6a92; stroke-width: 2; }
.busv-zonelbl { fill: #7f97b8; font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.busv-link { stroke-width: 1; opacity: .28; transition: opacity .2s, stroke-width .2s; }
.busv-eio rect { fill: #16263d; stroke: #6ea0e6; stroke-width: 2; }
.busv-eio-t { fill: #cfe0f5; font-size: 12px; font-weight: 800; }
.busv-eio-s { fill: #8aa0c0; font-size: 9px; }
.busv-chip { cursor: pointer; }
.busv-chip-r { fill: #0c1626; stroke: #2c3c54; stroke-width: 1.3; }
.busv-chip:hover .busv-chip-r { stroke: #3aa0ff; fill: #13233c; }
.busv-chip-t { fill: #cfe0f5; font-size: 11px; font-weight: 700; }
.busv-chip-r.et-lamp { stroke: #6a5a30; } .busv-chip-r.et-sensor { stroke: #2e6a4e; }
.busv-chip-r.et-valve, .busv-chip-r.et-motor { stroke: #5a4a72; }
.busv-chip-r.et-cvm, .busv-chip-r.et-ecu, .busv-chip-r.et-relay { stroke: #2e5286; }
.busv-chip-r.et-fuse, .busv-chip-r.et-heater { stroke: #6a4a2e; }
.busv-chip.inferred .busv-chip-r { stroke-dasharray: 3 3; opacity: .9; }
.busv-chip.weak .busv-chip-r { stroke-dasharray: 1.5 2.5; opacity: .96; }
.busv-stem { stroke: #4a6a92; stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .5; }
.busv-nllbl { fill: #c98a6a; font-size: 10px; font-weight: 700; }
.busv-side { fill: #8fb8ff; font-size: 8px; font-weight: 800; text-anchor: end; }
.busv-axis { stroke: #2a3a52; stroke-width: 1; stroke-dasharray: 2 6; opacity: .6; }
.busv-sidelbl { fill: #5f7596; font-size: 9px; font-weight: 700; font-style: italic; }
.busv-eio.clk { cursor: pointer; }
.busv-eio.clk:hover rect { stroke: #3aa0ff; filter: drop-shadow(0 0 6px #3aa0ff88); }
.ef-approx.ok { color: #6ee0b0; border:1px solid #2e6a4e; border-radius:8px; padding:0 6px; font-size:10px; font-style:normal; }
.ef-approx.weak { color: #c98a6a; border:1px dashed #6a4a2e; border-radius:8px; padding:0 6px; font-size:10px; font-style:normal; }
/* VUE 3D ISOMÉTRIQUE */
.bus3-slab { stroke: #3a4f6e; stroke-width: 1; opacity: .55; }
.bus3-roof { fill: #0f1a2c; stroke: #2a3a52; stroke-width: 1; stroke-dasharray: 5 4; opacity: .35; }
.bus3-edge { stroke: #45618a; stroke-width: 1.5; opacity: .7; }
.bus3-zlbl { fill: #7f97b8; font-size: 12px; font-weight: 800; text-anchor: middle; opacity: .8; letter-spacing: .5px; }
.bus3-nose { fill: #8fb8ff; font-size: 11px; font-weight: 800; text-anchor: middle; }
.bus3-stem { stroke: #2c3c54; stroke-width: 1; opacity: .4; }
.bus3-chip { cursor: pointer; }
.bus3-chip-r { fill: #0c1626; stroke: #2c3c54; stroke-width: 1.2; }
.bus3-chip:hover .bus3-chip-r { stroke: #3aa0ff; fill: #13233c; }
.bus3-chip-t { fill: #cfe0f5; font-size: 10px; font-weight: 700; }
.bus3-chip-r.et-lamp { stroke: #6a5a30; } .bus3-chip-r.et-sensor { stroke: #2e6a4e; }
.bus3-chip-r.et-valve, .bus3-chip-r.et-motor { stroke: #5a4a72; }
.bus3-chip-r.et-cvm, .bus3-chip-r.et-ecu, .bus3-chip-r.et-relay { stroke: #2e5286; }
.bus3-chip-r.et-fuse, .bus3-chip-r.et-heater { stroke: #6a4a2e; }
.bus3-chip.inferred .bus3-chip-r { stroke-dasharray: 3 3; }
.bus3-chip.weak .bus3-chip-r { stroke-dasharray: 1.5 2.5; }
.bus3-rot, .bus3-mod { background: #16263d; color: #bcd0ea; border: 1px solid #2c3c54; border-radius: 14px; padding: 3px 11px; font-size: 12px; cursor: pointer; }
.bus3-rot:hover, .bus3-mod:hover { background: #1d3556; color: #fff; border-color: #3aa0ff; }
.bus3-decor { stroke: #5a6f90; stroke-width: .8; stroke-opacity: .5; }
.bus3-declbl { fill: #9fb6d6; font-size: 10px; font-weight: 700; text-anchor: middle; opacity: .92; }
.busv-play { background: #16263d; color: #bcd0ea; border: 1px solid #2c3c54; border-radius: 14px; padding: 3px 11px; font-size: 12px; cursor: pointer; }
.busv-play:hover, .busv-play.cur { background: #1d3556; color: #fff; border-color: #3aa0ff; }
.busv-stop { background: #16263d; color: #9fb0c6; border: 1px solid #2c3c54; border-radius: 6px; padding: 3px 9px; cursor: pointer; }
/* animation : les éléments « actifs » du scénario s'illuminent */
#busv-svg.anim .busv-link { opacity: .08; }
#busv-svg .busv-link.on { opacity: .95 !important; stroke-width: 2.4; }
#busv-svg .busv-chip.on .busv-chip-r { stroke: #ffcf6a; fill: #1f2a1a; filter: drop-shadow(0 0 5px #ffcf6a88); }
#busv-svg .busv-eio.on rect { stroke: #ffcf6a; filter: drop-shadow(0 0 6px #ffcf6aaa); }
/* panneau de simulation (état du fil + logique) */
.sysv-sim { margin: 0 16px 6px; background: #101d2c; border: 1px solid #25324a; border-left: 3px solid #6ea0e6; border-radius: 8px; padding: 9px 13px; }
.sysv-sim[hidden] { display: none; }
.sysv-sim-row { display: flex; gap: 9px; align-items: baseline; }
.sysv-sim-n { color: #8fb8ff; font-weight: 800; font-size: 12px; flex: 0 0 auto; background: #16263d; padding: 1px 7px; border-radius: 10px; }
.sysv-sim .sysv-cap { color: #ffe1ad; font-size: 13px; font-weight: 600; }
.sysv-sim-logic { color: #9fb0c6; font-size: 12px; margin-top: 5px; line-height: 1.4; }
.sysv-sim-logic b { color: #cfe0f5; }
.easy-wrow { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; background: #0c1422; border: 1px solid #222c3c; border-radius: 7px; padding: 5px 9px; cursor: pointer; font-size: 12px; }
.easy-wrow:hover { border-color: #3aa0ff; }
.easy-wrow.sel { border-color: #fff; background: #13233c; }
.easy-wrow.off { opacity: .4; cursor: default; }
.easy-wrow.off:hover { border-color: #222c3c; }
.ewr-c { width: 11px; height: 11px; border-radius: 3px; }
.ewr-n { font-weight: 800; color: #cfe0f5; font-variant-numeric: tabular-nums; }
.ewr-f { color: #9fb0c6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esc-traj { margin-top: 10px; }
.esc-traj .easy-legend-t { margin-bottom: 6px; }
.traj-list { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.traj-node { display: inline-flex; align-items: center; gap: 4px; background: #0c1422; border: 1px solid #273043; border-radius: 7px; padding: 3px 7px; font-size: 11.5px; color: #c4d3e8; cursor: default; }
.traj-node.conn { border-style: dashed; }
.traj-node.nav { cursor: pointer; }
.traj-node.nav:hover { border-color: #3aa0ff; background: #13233c; }
.tn-code { font-weight: 700; }
.tn-pin { background: #2a2034; color: #ffd27a; border-radius: 4px; padding: 0 5px; font-weight: 800; font-size: 10.5px; }
.traj-arr { color: #46566e; font-size: 11px; }
.ewi-back2 { width: 100%; background: #1b2738; color: #cfe0f5; border: 1px solid #2a3a52; border-radius: 9px; padding: 8px; cursor: pointer; font-size: 13px; margin-top: 7px; }
.ewi-back2:hover { background: #243a55; }
#easy-toast { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); background: #1b2738; color: #eaf2ff; border: 1px solid #3a4a62; border-radius: 9px; padding: 9px 16px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 20; }
#easy-toast.on { opacity: 1; }