/* Référentiel véhicules : « Versions possibles » (formulaire véhicule) et « Diagnostic assisté » (fiche de diagnostic). Préfixe vr- */
.vr-panel { gap: 8px; }
.vr-warn { background: #fff4e0; color: #8a4b00; border: 1px solid #f2c47a; border-radius: 9px; padding: 8px 10px; font-size: 12.5px; line-height: 1.4; }
.vr-warn.light { margin: 4px 0 8px; }
.vr-card { background: #fff; color: #14223b; border-radius: 10px; padding: 9px 11px; border-left: 4px solid #1f3a6b; display: flex; flex-direction: column; gap: 2px; }
.vr-card small { color: #4d5667; font-size: 11.5px; line-height: 1.35; }
.vr-top { display: flex; align-items: center; gap: 8px; }
.vr-top b { font: 700 14.5px Barlow, Arial, sans-serif; flex: 1; }
.vr-dist { font: 700 10.5px Barlow, Arial, sans-serif; letter-spacing: .4px; padding: 2px 7px; border-radius: 5px; color: #fff; background: #c9141b; white-space: nowrap; }
.vr-dist.ch { background: #1f3a6b; } .vr-dist.h { background: #8a4b00; } .vr-dist.q { background: #6b7688; }
.vr-pick { background: #c9141b; color: #fff; border: 0; border-radius: 7px; padding: 5px 11px; font: 700 12.5px Barlow, Arial, sans-serif; cursor: pointer; }
.vr-pick:hover { background: #a80f15; }
.vr-cands { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.vr-cands button { border: 1px solid #c9d2df; background: #f4f6fa; border-radius: 6px; padding: 3px 8px; font-size: 11.5px; cursor: pointer; color: #14223b; }
.vr-cands button:hover { border-color: #c9141b; }
.vr-more { background: transparent; border: 1px dashed rgba(255, 255, 255, .35); color: #fff; border-radius: 8px; padding: 6px; font-size: 12px; cursor: pointer; }
.vr-hint { background: #fff4e0; color: #8a4b00; border-radius: 9px; padding: 8px 10px; font-size: 12px; line-height: 1.4; }
.vr-ft { color: #aab6cc; font-size: 11px; margin: 0; line-height: 1.4; }

/* Diagnostic assisté */
.vr-diag { padding: 16px 20px; }
.vr-dhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.vr-add { display: flex; gap: 6px; }
.vr-add input { width: 110px; height: 34px; border: 1px solid #c9d2df; border-radius: 7px; padding: 0 10px; font: 700 15px var(--cond, Barlow), monospace; text-transform: uppercase; }
.vr-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.vr-tabs button { border: 1px solid #d9dfe7; background: #fff; border-radius: 7px; padding: 5px 10px; font: 700 14px var(--cond, Barlow), monospace; color: #14223b; cursor: pointer; display: flex; gap: 6px; align-items: center; }
.vr-tabs button.on { background: #14223b; color: #fff; border-color: #14223b; }
.vr-tabs i { font-style: normal; opacity: .6; padding: 0 2px; } .vr-tabs i:hover { opacity: 1; color: #ef4b51; }
.vr-dg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line, #e3e8ef); }
.vr-dl { padding: 14px 18px 6px 0; border-right: 1px solid var(--line, #e3e8ef); }
.vr-dr { padding: 14px 0 6px 18px; display: flex; flex-direction: column; }
.vr-dh { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
.vr-code { font: 700 30px/1 ui-monospace, Consolas, monospace; color: #c9141b; }
.vr-dh b { font: 700 17px Barlow, Arial, sans-serif; color: #14223b; display: block; } .vr-dh small { color: #6b7688; font-size: 12px; }
.vr-diag h4 { font: 700 11.5px Barlow, Arial, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #4d5667; margin: 14px 0 6px; }
.vr-cause { display: flex; align-items: center; gap: 10px; border: 1px solid #e3e8ef; border-radius: 9px; padding: 8px 10px; margin-bottom: 6px; font-size: 13.5px; }
.vr-cause > span:nth-child(2) { flex: 1; }
.vr-cause.done { background: #f1faf3; border-color: #bfe5ca; }
.vr-lk { font: 700 11px Barlow, Arial, sans-serif; border-radius: 5px; padding: 2px 0; width: 70px; text-align: center; flex: none; }
.vr-lk.h { background: #fde3e4; color: #b3121a; } .vr-lk.m { background: #fff1d6; color: #9a5b00; } .vr-lk.l { background: #eef1f5; color: #4d5667; }
.vr-chk { border: 1px solid #c9d2df; background: #fff; border-radius: 7px; padding: 4px 10px; font: 700 12px Barlow, Arial, sans-serif; cursor: pointer; color: #14223b; white-space: nowrap; }
.vr-chk.on { background: #1b7f3b; border-color: #1b7f3b; color: #fff; }
.vr-sym { display: flex; gap: 8px; align-items: center; font-size: 13.5px; padding: 3px 0; }
.vr-rel { display: flex; gap: 6px; flex-wrap: wrap; }
.vr-rel button { border: 1px solid #c9d2df; background: #f4f6fa; border-radius: 6px; padding: 3px 9px; font: 700 13px ui-monospace, Consolas, monospace; cursor: pointer; }
.vr-same { font-size: 12.5px; padding: 2px 0; }
.vr-mute { color: #6b7688; font-size: 12.5px; margin: 2px 0; }
.vr-src { color: #8a93a3; font-size: 11px; margin-top: 14px; }
.vr-bars { border: 1px solid #e3e8ef; border-radius: 9px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.vr-bar { display: grid; grid-template-columns: minmax(0, 150px) 1fr 34px; align-items: center; gap: 10px; font-size: 13px; }
.vr-bar i { display: block; height: 8px; border-radius: 4px; background: #1f3a6b; width: var(--w); min-width: 6px; }
.vr-bar b { text-align: right; }
.vr-part { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eef1f5; }
.vr-part > div { flex: 1; min-width: 0; } .vr-part b { font-size: 13.5px; display: block; } .vr-part small { color: #6b7688; font-size: 11.5px; }
.vr-stk { font: 700 11.5px Barlow, Arial, sans-serif; border-radius: 5px; padding: 2px 8px; white-space: nowrap; }
.vr-stk.ok { background: #e5f6ea; color: #1b7f3b; } .vr-stk.no { background: #fde3e4; color: #b3121a; }
.vr-txt { font-size: 13.5px; margin: 0; }
.vr-client { background: #e8eef9; border-radius: 10px; padding: 10px 12px; margin-top: 14px; font-size: 13px; color: #14223b; }
.vr-client b { color: #1f3a6b; } .vr-client p { margin: 4px 0; } .vr-client small { color: #4d5667; }

/* Base technique : cartes d'import et sources officielles */
.vr-src-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.vr-src-card { border: 1px solid #e3e8ef; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.vr-src-card b { font-size: 14px; } .vr-src-card .err { color: #b3121a; }

@media (max-width: 900px) { .vr-dg { grid-template-columns: 1fr; } .vr-dl { border-right: 0; padding-right: 0; } .vr-dr { padding-left: 0; } .vr-bar { grid-template-columns: minmax(0, 110px) 1fr 30px; } }