/* v1.98.33 : VIN mis en avant dans la fiche véhicule (étape 1) + fenêtre du scanner — préfixe vh- */
.vh-band { border-radius: 14px; background: linear-gradient(180deg, #0f1b2f, #16263f); color: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.vh-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vh-step { font: 800 12px var(--cond, 'Barlow Condensed', sans-serif); letter-spacing: .16em; text-transform: uppercase; color: #ff6b70; }
.vh-head label { font-size: 18px; font-weight: 700; }
.vh-head small { font-size: 12.5px; color: #b9c6da; }
.vh-row { display: flex; align-items: flex-start; gap: 12px; }
.vh-e { width: 46px; height: 52px; border-radius: 9px; background: #e11d24; display: grid; place-items: center; font: 800 22px var(--cond, 'Barlow Condensed', sans-serif); flex: none; }
.vh-box { width: max-content; max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* 17 cases : police à chasse fixe, une case par caractère (fond en peigne) */
.vh-input { --c: calc(1ch + 10px); width: calc(var(--c) * 17 + 4px); max-width: 100%; height: 52px; box-sizing: border-box; border: 0; border-radius: 9px; outline: none;
  padding: 0 0 0 5px; font: 600 21px/52px ui-monospace, 'IBM Plex Mono', Menlo, Consolas, monospace; letter-spacing: 10px; text-transform: uppercase; color: #0f1b2f;
  background: repeating-linear-gradient(90deg, #fff 0 calc(var(--c) - 4px), #c9d1dd calc(var(--c) - 4px) var(--c)) 0 0 / 100% 100% no-repeat, #fff; }
.vh-input:focus { box-shadow: 0 0 0 3px rgba(255,107,112,.55); }
.vh-input::placeholder { color: #9aa6b8; letter-spacing: 2px; font-size: 15px; }
.vh-input.vn-hl-bad { box-shadow: 0 0 0 3px rgba(239,68,68,.75); }
.vh-groups { display: grid; grid-template-columns: 3fr 6fr 8fr; width: 100%; font: 500 11.5px var(--font, 'Barlow', sans-serif); color: #b9c6da; }
.vh-groups span { border-top: 2px solid rgba(185,198,218,.45); padding-top: 3px; margin-right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-chips { display: flex; gap: 8px; flex-wrap: wrap; min-height: 0; }
.vh-chip { font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 11px; }
.vh-chip.ok { color: #7ee2a0; background: rgba(27,127,59,.25); }
.vh-chip.wait, .vh-chip.info { color: #d4dceb; background: rgba(255,255,255,.1); }
.vh-chip.bad { color: #ffb4b4; background: rgba(225,29,36,.28); }
.vh-msg { margin: 0; font-size: 12.5px; color: #e6ecf5 !important; background: rgba(255,255,255,.08); border-radius: 8px; padding: 6px 10px; }
.vh-msg b, .vh-msg span { color: inherit !important; }
.vh-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.vh-btns button { height: 44px; padding: 0 16px; border-radius: 10px; font: 600 14.5px var(--font, 'Barlow', sans-serif); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.vh-scan { border: 0; background: #e11d24; color: #fff; font-weight: 700 !important; animation: vhPulse 2.2s ease-out infinite; }
.vh-ghost { border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; }
.vh-ghost:hover { background: rgba(255,255,255,.08); }
@keyframes vhPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,36,.45); } 50% { box-shadow: 0 0 0 8px rgba(225,29,36,0); } }
.vh-modal .modal { max-width: 600px; width: calc(100vw - 24px); }
.vh-modal .modal-body { padding: 0; }
.vh-frame { display: block; width: 1px; min-width: 100%; max-width: 100%; height: min(78vh, 760px); border: 0; } /* v1.98.34 : iPhone élargit sinon la fenêtre au-delà de l'écran */
.vh-modal .modal-body { overflow: hidden; }
@media (max-width: 640px) { /* v1.98.34 : scanner en plein écran sur téléphone */
  .vh-modal { padding: 0 !important; }
  .vh-modal .modal { width: 100%; max-width: 100%; min-height: 100dvh; border-radius: 0; margin: 0; display: flex; flex-direction: column; }
  .vh-modal .modal-body { flex: 1; display: flex; }
  .vh-frame { height: auto; min-height: calc(100dvh - 72px); flex: 1; }
}
@media (max-width: 640px) {
  .vh-input { --c: calc(1ch + 5px); font-size: 15px; letter-spacing: 5px; height: 44px; line-height: 44px; padding-left: 3px; }
  .vh-groups { font-size: 10.5px; }
  .vh-e { width: 34px; height: 44px; font-size: 18px; }
  .vh-row { gap: 8px; } .vh-band { padding: 14px 12px; }
  .vh-btns button { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .vh-scan { animation: none; } }

/* v1.98.35 : scanner du VIN intégré à la page (comme Kamssa) — préfixe vs- */
.vs-back { position: fixed; inset: 0; z-index: 5000; background: rgba(8, 14, 26, .7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.vs-sheet { width: 100%; max-width: 560px; max-height: 100%; overflow: auto; background: #fff; color: #14223b; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; }
.vs-head { display: flex; align-items: center; gap: 10px; } .vs-head b { font-size: 18px; flex: 1; }
.vs-state { font-size: 12.5px; font-weight: 600; color: #5b6578; background: #eef1f5; border-radius: 999px; padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.vs-state.ok { color: #1b7f3b; background: #e6f6ea; }
.vs-x { width: 40px; height: 40px; border-radius: 10px; border: 1px solid #d9dee7; background: #fff; font-size: 22px; line-height: 1; cursor: pointer; color: #14223b; flex: none; }
.vs-cam { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 52vh; border-radius: 12px; overflow: hidden; background: #000; }
.vs-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vs-frame { position: absolute; left: 4%; right: 4%; top: 41%; bottom: 41%; border: 3px solid #fff; border-radius: 10px; box-shadow: 0 0 0 999px rgba(0,0,0,.4); pointer-events: none; }
.vs-frame i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #e11d24; animation: vsLine 1.6s ease-in-out infinite alternate; }
@keyframes vsLine { from { transform: translateY(-14px); } to { transform: translateY(14px); } }
.vs-tag { position: absolute; left: 10px; top: 10px; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(15,27,47,.75); border-radius: 6px; padding: 3px 8px; }
.vs-hint { margin: 0; font-size: 13px; color: #4b566a; }
.vs-found { border: 2px solid #1b7f3b; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.vs-found[hidden] { display: none; }
.vs-found small { font-size: 12.5px; color: #4b566a; } .vs-found .warn { color: #a15c00; }
.vs-found > b { font: 600 21px ui-monospace, 'IBM Plex Mono', Menlo, Consolas, monospace; letter-spacing: .06em; word-break: break-all; }
.vs-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vs-btns button { height: 46px; border: 1px solid #d9dee7; border-radius: 10px; background: #f4f6f9; color: #14223b; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.vs-btns button.main { background: #e11d24; border-color: #e11d24; color: #fff; font-weight: 700; }
.vs-btns button:disabled { opacity: .5; cursor: default; }
@media (max-width: 640px) {
  .vs-back { padding: 0; align-items: stretch; }
  .vs-sheet { max-width: none; border-radius: 0; min-height: 100%; padding: 12px 12px calc(14px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .vs-frame i { animation: none; } }

/* v1.98.36 : moteur probable (marché) à côté du VIN ; remplissage automatique du scanner */
.vh-top { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.vh-top > .vh-band { flex: 1 1 400px; min-width: 0; box-sizing: border-box; }
.vh-top > .vh-side { flex: 1 1 260px; min-width: 0; margin: 0; align-self: stretch; box-sizing: border-box; }
/* moteur probable affiché à côté : cases du VIN un peu plus serrées pour tenir sur la même ligne */
@media (min-width: 641px) { .vh-top:has(> .vh-side:not([hidden])) .vh-input { --c: calc(1ch + 6px); font-size: 19px; letter-spacing: 6px; } }
.vh-top > .vh-side[hidden] { display: none; }
.vh-input.vh-doubt { box-shadow: 0 0 0 3px #f59e0b; }
.vh-chip.doubt { color: #ffd38a; background: rgba(161,92,0,.35); }
.vs-check { position: absolute; left: 50%; top: 16px; width: 54px; height: 54px; margin-left: -27px; border-radius: 50%; background: #1b7f3b; display: none; place-items: center; }
.vs-ok .vs-check, .vs-doubt .vs-check { display: grid; animation: vsPop .45s cubic-bezier(.2,.9,.3,1.3) both, vsRing 1s ease-out .2s 2; }
.vs-doubt .vs-check { background: #d97706; animation: vsPop .45s cubic-bezier(.2,.9,.3,1.3) both; }
.vs-ok .vs-frame { border-color: #2fbf62; } .vs-doubt .vs-frame { border-color: #f59e0b; }
.vs-ok .vs-frame i, .vs-doubt .vs-frame i { display: none; }
.vs-doubt .vs-found { border-color: #d97706; background: #fff8eb; }
.vs-ok .vs-found { background: #f2fbf5; }
.vs-prog { display: block; height: 4px; border-radius: 4px; background: #d6eedd; overflow: hidden; } .vs-prog i { display: block; height: 100%; background: #1b7f3b; animation: vsBar .9s linear both; }
.vs-doubt .vs-prog { background: #fde7c3; } .vs-doubt .vs-prog i { background: #d97706; }
@keyframes vsPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes vsRing { 0% { box-shadow: 0 0 0 0 rgba(27,127,59,.7); } 100% { box-shadow: 0 0 0 26px rgba(27,127,59,0); } }
@keyframes vsBar { from { width: 0; } to { width: 100%; } }

/* v1.98.39 : carte d'identité du véhicule (maquette 5/6) — préfixe vc- */
.vc-card { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 4px; }
.vc-card[hidden] { display: none; }
.vc-band { border-radius: 14px; background: linear-gradient(180deg, #0f1b2f, #16263f); color: #fff; padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; }
.vc-id { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vc-id b { font: 800 26px/1.1 var(--cond, 'Barlow Condensed', sans-serif); }
.vc-id span { font-size: 14px; color: #c3cede; }
.vc-tags { grid-column: 1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vc-vin { font: 600 15px ui-monospace, 'IBM Plex Mono', Menlo, monospace; letter-spacing: .08em; color: #fff; background: none; padding: 0; }
.vc-score { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.vc-score small { font-size: 12px; color: #c3cede; } .vc-score small.warn { color: #ffc680; }
.vc-score b { font: 800 32px/1 var(--cond, 'Barlow Condensed', sans-serif); white-space: nowrap; }
.vc-b { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.vc-b.s { color: #14612e; background: #e3f4e8; } .vc-b.p { color: #174a8c; background: #e5eefb; } .vc-b.c { color: #8a4a00; background: #fff0d9; } .vc-b.x { color: #fff; background: #c4161c; }
.vc-band .vc-b { white-space: normal; }
.vc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; align-items: start; }
.vc-col { background: var(--surface, #fff); border: 1px solid var(--border, #e3e8ef); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vc-h b { font-size: 15.5px; } .vc-h small, .vc-muted { font-size: 12px; color: var(--muted, #5b6578); }
.vc-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border, #edf0f4); }
.vc-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #5b6578); }
.vc-v { font-size: 14.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.vc-v small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted, #5b6578); }
.vc-eng { align-items: start; } .vc-q { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vc-ch { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.vc-pick { min-height: 46px; padding: 6px 10px; border-radius: 10px; border: 1.5px solid #c9d1dd; background: #fff; font: 600 14px var(--font, 'Barlow', sans-serif); color: #14223b; cursor: pointer; text-align: left; }
.vc-pick:hover, .vc-pick:focus-visible { border-color: #0f1b2f; }
.vc-pick small { display: block; font-size: 11.5px; font-weight: 500; color: #5b6578; }
.vc-link { align-self: flex-start; border: 0; background: none; padding: 4px 0; font: 600 12.5px var(--font, 'Barlow', sans-serif); color: #174a8c; text-decoration: underline; cursor: pointer; }
.vc-todo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 11px; border: 1px solid var(--border, #e3e8ef); border-radius: 10px; }
.vc-todo.late { border-color: #f3b3b5; background: #fff6f6; }
.vc-todo b { font-size: 14px; } .vc-todo small { display: block; font-size: 11.5px; color: var(--muted, #5b6578); margin-top: 2px; }
.vc-tag { font-size: 11.5px; font-weight: 600; color: #4b566a; background: #eef1f5; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.vc-vig { border-radius: 10px; background: #fff7e8; border: 1px solid #f5d9a6; padding: 9px 11px; }
.vc-vig b { display: block; font-size: 13px; color: #8a4a00; } .vc-vig small { font-size: 12px; color: #4b566a; }
.vc-none { margin: 0; font-size: 13px; color: var(--muted, #5b6578); }
.vc-info { border-radius: 10px; background: #eef1f5; padding: 9px 11px; font-size: 13.5px; color: #14223b; }
.vc-near { border-radius: 10px; background: #fff0d9; padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; }
.vc-near b { font-size: 13px; color: #8a4a00; } .vc-near small { font-size: 12px; color: #4b566a; overflow-wrap: anywhere; }
.vc-tl { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border, #edf0f4); font-size: 13px; }
.vc-tl span { color: var(--muted, #5b6578); min-width: 0; overflow-wrap: anywhere; }
.vc-km { border-radius: 10px; padding: 9px 11px; font-size: 13px; font-weight: 600; }
.vc-km.ok { color: #14612e; background: #e3f4e8; } .vc-km.bad { color: #fff; background: #c4161c; }
.vc-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface, #fff); border: 1px solid var(--border, #e3e8ef); border-radius: 14px; padding: 12px 16px; font-size: 13px; color: var(--muted, #4b566a); }
@media (max-width: 640px) {
  .vc-band { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .vc-score { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 8px; }
  .vc-score b { font-size: 20px; } .vc-id b { font-size: 22px; } .vc-vin { font-size: 13.5px; }
  .vc-foot .btn { width: 100%; min-height: 48px; }
}