/* ============================================================================
   Ingenext — Horaire  ·  palette de marque (navy + rouge)
   ============================================================================ */
:root {
  --bg: #eef0f4;
  --surface: #ffffff;
  --ink: #202030;           /* navy Ingenext */
  --muted: #6a7080;
  --line: #e3e5ec;
  --line-strong: #cccfd9;
  --accent: #202030;        /* navy — actions principales */
  --accent-ink: #14141f;    /* navy foncé (survol) */
  --accent-soft: #eceef4;   /* navy très pâle */
  --red: #e83936;           /* rouge Ingenext — accent vif */
  --red-ink: #c62c2a;
  --red-soft: #fde3e2;
  --danger: #e83936;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(20,26,33,.06), 0 4px 16px rgba(20,26,33,.06);
  --shadow-lg: 0 12px 40px rgba(20,26,33,.22);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.fatal { margin: auto; padding: 32px; text-align: center; color: var(--muted); line-height: 1.6; }

/* ---------- barre de navigation principale ---------- */
.appbar { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--line-strong); flex-wrap: wrap; }
.appbar-logo { height: 28px; width: auto; flex: 0 0 auto; }
.mainnav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; }
.mainnav button { border: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.mainnav button:hover { background: var(--bg); color: var(--ink); }
.mainnav button.on { background: var(--accent); color: #fff; }
.appbar-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.appbar-user { font-size: 13px; color: var(--muted); font-weight: 600; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* pages (Clients, Bons de travail, Facturation) */
/* ⚠️ .view est en overflow:hidden. Sans défilement ici, toute page dont le
   contenu dépasse l'écran est simplement coupée (c'est arrivé à la fiche
   client, au mode technicien, etc. — chaque page devait y penser elle-même).
   Les pages qui ont déjà leur propre conteneur défilant ne sont pas affectées :
   leur enfant absorbe le débordement. */
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 18px 20px;
  max-width: 920px; width: 100%; margin: 0 auto;
  overflow-y: auto; -webkit-overflow-scrolling: touch; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.page-scroll { flex: 1; min-height: 0; overflow: auto; }
.c-list.page-scroll { max-height: none; }

/* liste des bons de travail */
.wolist-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.wolist-controls .c-search { margin-bottom: 0; flex: 1; min-width: 180px; }
.wo-filter button { padding: 7px 12px; }
.wo-list { display: flex; flex-direction: column; gap: 6px; }
.wo-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface); }
.wo-row:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.wo-row-num { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--accent-ink); flex: 0 0 auto; min-width: 66px; }
.wo-row-main { flex: 1; min-width: 0; }
.wo-row-client { font-weight: 700; font-size: 14px; }
.wo-row-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* facturation (placeholder) */
.billing-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); padding: 40px 20px; }
.bp-icon { font-size: 44px; margin-bottom: 12px; }
.bp-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.billing-placeholder p { max-width: 440px; line-height: 1.6; font-size: 14px; }

/* ---------- barre d'outils ---------- */
.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.tb-left { display: flex; align-items: center; gap: 14px; }
.tb-logo { height: 34px; width: auto; display: block; }
.tb-left .tb-divider { width: 1px; height: 30px; background: var(--line-strong); }
.tb-titles { display: flex; flex-direction: column; }
.tb-eyebrow { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--red-ink); font-weight: 700; }
.tb-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-top: 1px; }
.tb-right { display: flex; align-items: center; gap: 8px; }
.tb-nav { display: flex; align-items: center; gap: 4px; }
.ic {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  width: 38px; height: 38px; border-radius: var(--radius-sm); font-size: 20px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ic:hover { background: var(--bg); }
.ic-gear { font-size: 18px; }
.btn-today {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  height: 38px; padding: 0 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn-today:hover { background: var(--bg); }
.tb-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.tb-seg button {
  border: 0; background: var(--surface); color: var(--ink); height: 38px; padding: 0 16px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.tb-seg button + button { border-left: 1px solid var(--line-strong); }
.tb-seg button.on { background: var(--accent); color: #fff; }

/* ---------- grille ---------- */
.cal-scroll { flex: 1; overflow: auto; background: var(--bg); position: relative; -webkit-overflow-scrolling: touch; }
.cal-grid { position: relative; }
.cal-colhead {
  position: sticky; top: 0; z-index: 5; display: flex; background: var(--surface);
  border-bottom: 1px solid var(--line-strong); box-shadow: 0 1px 0 rgba(20,26,33,.04);
}
.cal-colhead-cell {
  flex: 0 0 auto; padding: 8px 8px; text-align: center; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.ch-top { font-size: 13px; font-weight: 600; color: var(--ink); }
.ch-top b { font-size: 15px; }
.ch-sub { font-size: 11px; color: var(--muted); }
.cal-colhead-cell.is-today { background: var(--red-soft); }
.cal-colhead-cell.is-today .ch-top { color: var(--red-ink); }
.cal-colhead-cell.is-closed { background: repeating-linear-gradient(45deg, #f6f7f9, #f6f7f9 6px, #f1f3f5 6px, #f1f3f5 12px); color: var(--muted); }
.bay-dot { width: 26px; height: 5px; border-radius: 3px; display: inline-block; }

.cal-body { display: flex; position: relative; }
.cal-gutter { position: relative; flex: 0 0 auto; background: var(--surface); border-right: 1px solid var(--line-strong); }
.cal-hour { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; color: var(--muted); }
.cal-hour.first { transform: translateY(0); }
.cal-hour.last { transform: translateY(-100%); }
.cal-cols { display: flex; position: relative; }
.cal-col {
  flex: 0 0 auto; position: relative; border-left: 1px solid var(--line); background-color: var(--surface);
  background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-repeat: repeat-y; cursor: copy;
}
.cal-col.is-closed { background-color: #fafbfc; background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px), repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,.015) 10px, rgba(0,0,0,.015) 20px); }

/* ligne d'heure actuelle */
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 4; }
.cal-now::before { content: ''; position: absolute; left: -1px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }

/* blocs de rendez-vous */
.cal-ev {
  position: absolute; z-index: 3; background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 7px; padding: 4px 7px; overflow: hidden;
  cursor: pointer; box-shadow: var(--shadow); font-size: 12px; line-height: 1.25;
  transition: transform .05s ease;
}
.cal-ev:hover { box-shadow: var(--shadow-lg); z-index: 6; }
.cal-ev:active { transform: scale(.995); }
.ev-time { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 5px; }
.ev-bay { color: #fff; padding: 0 5px; border-radius: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.ev-name { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-veh { color: var(--accent-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-desc { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- fenêtres modales ---------- */
.modal-ov {
  position: fixed; inset: 0; background: rgba(20,26,33,.42); z-index: 50;
  display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow: auto;
  animation: fade .12s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  margin: auto; overflow: hidden;
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; flex-wrap: wrap; }
.modal-head h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.m-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.modal-body { padding: 4px 20px 8px; }
/* Les boutons du pied reviennent à la ligne au lieu de s'écraser
   (sinon leur texte s'empile sur 3 lignes et déborde). */
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 14px 20px 18px; flex-wrap: wrap; }
.modal-foot .spacer { flex: 1; min-width: 0; }

/* Un libellé de bouton ne se coupe jamais en plusieurs lignes : le bouton
   garde sa hauteur et c'est la barre qui se réorganise. */
.btn { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); height: 40px; padding: 0 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.btn:hover { background: var(--bg); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--bg); color: var(--ink); }
.btn-ghost[data-del] { color: var(--danger); }

/* formulaire */
.f { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.f > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.f input, .f select, .f textarea {
  font-family: inherit; font-size: 15px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; outline: none; width: 100%;
}
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.f textarea { resize: vertical; }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.f-sec { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); margin: 14px 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vin-btn { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid transparent; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.vin-status { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.vin-status.busy { color: var(--accent); }
.vin-status.ok { color: var(--accent-ink); font-weight: 700; }
.vin-status.error { color: var(--danger); }

/* liste des travaux (formulaire) */
.jobs-list { display: flex; flex-direction: column; gap: 8px; }
.job-row { display: flex; gap: 8px; align-items: stretch; }
.job-row .job-desc { flex: 1; font-family: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; outline: none; resize: vertical; }
.job-row .job-desc:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.job-del { flex: 0 0 auto; width: 40px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); border-radius: var(--radius-sm); font-size: 15px; cursor: pointer; }
.job-del:hover { background: var(--red-soft); color: var(--red-ink); border-color: var(--red-soft); }
.btn-add { margin-top: 10px; border: 1px dashed var(--line-strong); background: var(--surface); color: var(--accent); font-weight: 600; font-size: 14px; padding: 10px 14px; border-radius: var(--radius-sm); cursor: pointer; width: 100%; }
.btn-add:hover { border-color: var(--accent); background: var(--accent-soft); }
.d-jobs { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.d-jobs li { padding-left: 2px; }

/* détail */
.d-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.d-row:first-child { border-top: 0; }
.d-lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.d-val { font-size: 14.5px; color: var(--ink); }
.d-val a { color: var(--accent-ink); }
.d-pre { white-space: pre-wrap; }

/* réglages */
.s-baynames { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s-baynames input { font-family: inherit; font-size: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 11px; }
.s-hours { display: flex; flex-direction: column; gap: 6px; }
.s-day { display: grid; grid-template-columns: 1.4fr auto auto auto; align-items: center; gap: 8px; }
.s-day-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.s-day input[type="time"] { font-family: inherit; font-size: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 7px 9px; }
.s-day input[type="time"]:disabled { opacity: .4; }
.s-to-sep { color: var(--muted); font-size: 13px; }

.ev-wo { margin-left: auto; font-size: 11px; line-height: 1; }

/* ---------- bon de travail (plein écran) ---------- */
.wo-overlay { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow: auto; -webkit-overflow-scrolling: touch; }
.wo-topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line-strong); flex-wrap: wrap; }
.wo-back { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); height: 38px; padding: 0 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; }
.wo-back:hover { background: var(--bg); }
/* Le titre garde une largeur minimale : sans elle, la barre de boutons
   l'écrase jusqu'à empiler le texte lettre par lettre. */
.wo-heading { display: flex; align-items: center; gap: 12px; flex: 1 1 240px; min-width: 220px; }
.wo-logo { height: 30px; width: auto; }
.wo-num { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px;
  white-space: nowrap; }
.wo-sub { font-size: 12px; color: var(--muted); }
/* Les boutons passent à la ligne plutôt que de déborder */
.wo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wo-save-main { margin-left: 8px; flex: 0 0 auto; }
.wo-status-sel { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.wo-status-sel select { font-family: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }

.wo-pill { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.st-ouvert { background: var(--accent-soft); color: var(--accent-ink); }
.st-en_cours { background: #fef3c7; color: #b45309; }
.st-termine { background: #dcfce7; color: #15803d; }

.wo-body { max-width: 900px; margin: 0 auto; padding: 20px 16px 40px; }
.wo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wo-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.wo-card h3 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wo-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.wo-field > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wo-field input, .wo-field select, .wo-field textarea { font-family: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; outline: none; width: 100%; }
.wo-field input:focus, .wo-field select:focus, .wo-field textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.wo-field textarea { resize: vertical; }
.wo-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.wo-meta { display: flex; gap: 16px; margin: 16px 0 4px; flex-wrap: wrap; }
.wo-inline { flex: 0 0 auto; min-width: 160px; margin-bottom: 0; }

.wo-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 12px; flex-wrap: wrap; }
.wo-section-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.wo-section-head .btn-add { width: auto; margin: 0; }

.wo-jobs { display: flex; flex-direction: column; gap: 14px; }
.wo-job { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.wo-job-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.wo-job-title { font-weight: 700; font-size: 14px; }
.wo-job-head .job-del { margin-left: auto; width: 34px; height: 34px; }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg-btn { border: 0; background: var(--surface); color: var(--muted); padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--line-strong); }
.seg-btn.on.st-a_faire { background: var(--ink); color: #fff; }
.seg-btn.on.st-en_cours { background: #d97706; color: #fff; }
.seg-btn.on.st-termine { background: #15803d; color: #fff; }

.wo-media-soon { margin-top: 10px; font-size: 12px; color: var(--muted); background: var(--bg); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; }

/* pointage du temps */
.wo-labour { display: flex; flex-direction: column; gap: 5px; }
.wo-labour > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.wo-labour b { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.job-time { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.jt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jt-total { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jt-total.running { color: var(--red-ink); }
.jt-btn { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; }
.jt-btn:hover { background: var(--bg); }
.jt-btn.on { background: var(--red); border-color: var(--red); color: #fff; }
.jt-add { border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); font-size: 12px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.jt-add:hover { color: var(--ink); }
.jt-entries { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.jt-entry { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 8px; background: var(--bg); border-radius: 6px; }
.jt-entry.jt-running { background: var(--red-soft); }
.jt-who { font-weight: 700; }
.jt-when { color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-dur { font-weight: 700; font-variant-numeric: tabular-nums; }
.jt-del { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 2px; }
.jt-del:hover { color: var(--danger); }

/* médias : photos et vidéos */
.job-media { margin-top: 12px; }
.jm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.jm-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.jm-add { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.jm-add:hover { background: var(--bg); }
.jm-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.jm-item { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); cursor: pointer; flex: 0 0 auto; }
.jm-item img, .jm-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.jm-video .jm-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; }
.jm-del { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.jm-del:hover { background: var(--red); }
.jm-uploading { width: 84px; height: 84px; border-radius: 8px; border: 1px dashed var(--line-strong); background: var(--bg); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; color: var(--muted); padding: 4px; flex: 0 0 auto; }
.jm-lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; padding: 24px; }
.jm-lightbox img, .jm-lightbox video { max-width: 100%; max-height: 100%; border-radius: 6px; }
.jm-lb-close { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 18px; cursor: pointer; }
.jm-lb-close:hover { background: rgba(255,255,255,.3); }

/* scanner VIN : caméra intégrée + cadre de visée */
.vin-cam { position: fixed; inset: 0; z-index: 200; background: #000; overflow: hidden; }
.vin-cam-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vin-cam-box { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); width: min(90vw, 560px); aspect-ratio: 6 / 1; border: 2px solid #fff; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); pointer-events: none; }
.vin-cam-hint { position: absolute; left: 0; right: 0; top: 27%; text-align: center; color: #fff; font-size: 14px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.85); pointer-events: none; padding: 0 20px; }
.vin-cam-close { position: absolute; top: 14px; right: 16px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 18px; cursor: pointer; z-index: 2; }
.vin-cam-status { position: absolute; left: 16px; right: 16px; bottom: 104px; text-align: center; color: #fff; font-size: 14px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.9); min-height: 20px; }
.vin-cam-status.error { color: #ffb4b1; }
.vin-cam-status.ok { color: #9ff5b8; }
.vin-cam-status.busy { color: #cfe0ff; }
.vin-cam-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 18px; }
.vin-cam-shoot { border: 0; background: #fff; color: #111; font-size: 16px; font-weight: 700; padding: 14px 30px; border-radius: 999px; cursor: pointer; }
.vin-cam-shoot:disabled { opacity: .6; }
.vin-cam-torch, .vin-cam-file { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.4); color: #fff; font-size: 20px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vin-cam-torch.on { background: #fff; }

.wo-foot { display: flex; align-items: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.wo-foot .spacer { flex: 1; }
.wo-foot .btn-ghost[data-del], #wo_del { color: var(--danger); }

/* ---------- impression du bon ---------- */
@media print {
  #app { display: none !important; }
  .wo-overlay { position: static; overflow: visible; background: #fff; }
  .wo-topbar { position: static; border: 0; padding: 0 0 10px; }
  .wo-back, .wo-actions, .wo-section-head .btn-add, .job-del, .wo-media-soon, .wo-foot, .jt-btn, .jt-add, .jt-del, .jm-add, .jm-del { display: none !important; }
  .wo-body { max-width: none; padding: 0; }
  .wo-card, .wo-job { box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  .seg { border: 0; }
  .seg-btn { display: none !important; }
  .seg-btn.on { display: inline-block !important; border: 1px solid #999 !important; border-radius: 6px; padding: 2px 10px; color: #000 !important; background: #fff !important; }
  .wo-field input, .wo-field textarea, .wo-field select { border: 0; padding: 2px 0; font-size: 14px; }
  .wo-field > span { color: #555; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- connexion ---------- */
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); }
.auth-card { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 28px 24px; }
.auth-logo { height: 34px; width: auto; display: block; margin: 0 auto 18px; }
.auth-title { font-size: 20px; font-weight: 700; text-align: center; letter-spacing: -.01em; }
.auth-sub { font-size: 13px; color: var(--muted); text-align: center; margin: 4px 0 18px; }
.auth-err { color: var(--danger); font-size: 13px; font-weight: 600; min-height: 18px; margin-bottom: 8px; text-align: center; }
.auth-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.auth-field > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.auth-field input { font-family: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 11px 12px; outline: none; width: 100%; }
.auth-field input:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.auth-btn { width: 100%; height: 44px; margin-top: 6px; }

/* utilisateurs (réglages) */
.s-account { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.s-account button { margin-left: auto; }
.s-users { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.s-user { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.s-user-name { font-size: 14px; font-weight: 600; }
.s-user-name em { font-style: normal; color: var(--muted); font-weight: 500; font-size: 12px; }
.s-user-reset { margin-left: auto; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); border-radius: 6px; font-size: 12px; padding: 5px 9px; cursor: pointer; }
.s-user-reset:hover { color: var(--ink); }
.s-user-del { border: 1px solid var(--line-strong); background: var(--surface); color: var(--danger); border-radius: 6px; width: 30px; height: 30px; cursor: pointer; }
.s-user-del:hover { background: var(--red-soft); }
.s-adduser { display: flex; gap: 8px; }
.s-adduser input { flex: 1; font-family: inherit; font-size: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 11px; min-width: 0; }
.s-adduser button { flex: 0 0 auto; }

.btn-clients { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); height: 38px; padding: 0 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-clients:hover { background: var(--bg); }

/* autocomplétion client (formulaire de RDV) */
.f-ac { position: relative; }
.ac-list { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 220px; overflow: auto; margin-top: 2px; }
.ac-item { padding: 8px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.ac-item:hover { background: var(--accent-soft); }
.ac-name { font-size: 14px; font-weight: 600; }
.ac-sub { font-size: 12px; color: var(--muted); }

/* fenêtre clients */
.c-search { width: 100%; font-family: inherit; font-size: 15px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; outline: none; margin-bottom: 12px; }
.c-search:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.c-list { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow: auto; }
.c-empty { color: var(--muted); font-size: 14px; padding: 12px 4px; line-height: 1.5; }
.c-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.c-info { flex: 1; min-width: 0; }
.c-name { font-size: 14px; font-weight: 700; }
.c-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-edit { border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); border-radius: 6px; font-size: 12px; padding: 6px 10px; cursor: pointer; }
.c-edit:hover { color: var(--ink); }
.c-del { border: 1px solid var(--line-strong); background: var(--surface); color: var(--danger); border-radius: 6px; width: 30px; height: 30px; cursor: pointer; flex: 0 0 auto; }
.c-del:hover { background: var(--red-soft); }

/* sauvegarde + version (réglages) */
.s-backup-btn { display: inline-block; text-decoration: none; }
.s-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 10px 0 0; }
.s-version { font-size: 12px; color: var(--muted); margin-top: 18px; text-align: center; }
.s-update { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.s-update input[type="file"] { flex: 1; min-width: 0; font-size: 13px; }
.s-update-status { font-size: 13px; font-weight: 600; margin-top: 8px; min-height: 16px; }
.s-update-status.busy { color: var(--accent); }
.s-update-status.ok { color: #15803d; }
.s-update-status.err { color: var(--danger); }

/* version (écran de connexion) */
.auth-version { font-size: 11px; color: var(--muted); text-align: center; margin-top: 16px; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .cal-toolbar { padding: 10px 12px; }
  .tb-title { font-size: 17px; }
  .btn-today { padding: 0 10px; }
  .tb-seg button { padding: 0 12px; }
  .f-grid { grid-template-columns: 1fr; }
  .s-baynames { grid-template-columns: 1fr; }
  .s-day { grid-template-columns: 1fr auto auto auto; }
  .d-row { grid-template-columns: 96px 1fr; }
  .modal-ov { padding: 0; align-items: stretch; }
  .modal { border-radius: 0; min-height: 100%; }
  .wo-cards { grid-template-columns: 1fr; }
  .wo-grid2 { grid-template-columns: 1fr; }
  .wo-body { padding: 16px 12px 32px; }
  .appbar { gap: 10px; padding: 8px 12px; }
  .page { padding: 14px 12px; }
  .page-head h1 { font-size: 19px; }
  /* ---- En-tête du bon sur téléphone ----
     Neuf boutons qui passent à la ligne mangeaient les deux tiers de l'écran.
     Ligne 1 : Retour · titre compact · Enregistrer.
     Ligne 2 : les autres actions sur UNE ligne qui glisse au doigt. */
  .wo-topbar { gap: 8px; padding: 8px 10px; row-gap: 6px; }
  .wo-back { height: 32px; padding: 0 10px; font-size: 13px; }

  .wo-heading { order: 2; flex: 1 1 auto; min-width: 0; gap: 8px; align-items: flex-start; }
  .wo-logo { display: none; }             /* le logo reste sur l'impression */
  .wo-num { font-size: 15px; white-space: normal; gap: 6px; }
  .wo-sub { font-size: 11px; line-height: 1.35; }
  .wo-by { font-size: 10px; padding: 1px 7px; margin-top: 3px; }
  .wo-by-vide { display: none; }          /* « créateur non enregistré » = bruit sur petit écran */
  .wo-appt { font-size: 11px; }

  .wo-actions { order: 4; flex-basis: 100%; margin-left: 0;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    justify-content: flex-start; gap: 6px; padding-bottom: 2px;
    /* ombres de bord : on voit qu'il reste des boutons à droite */
    background:
      linear-gradient(to right, var(--surface) 30%, transparent) left / 18px 100% no-repeat,
      linear-gradient(to left, var(--surface) 30%, transparent) right / 18px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), transparent) left / 9px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), transparent) right / 9px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .wo-actions .btn { height: 32px; padding: 0 10px; font-size: 12.5px; }
  .wo-status-sel { order: 1; font-size: 11px; gap: 4px; }
  .wo-status-sel select { padding: 5px 7px; font-size: 13px; }
  /* Enregistrer reste sur la 1re ligne, toujours atteignable */
  .wo-save-main { order: 3; height: 34px; padding: 0 14px; font-size: 13px; margin-left: 0; }
}

/* ===== Éditeur de devis (interne) ===== */
.quote-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(20,20,30,.55); display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 24px 16px; }
/* 720 px était trop étroit pour les descriptions Tesla (qui font
   facilement 60-80 caractères) : la fenêtre suit maintenant l'écran. */
.quote-box { background: #fff; width: 100%; max-width: 1180px; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.3); overflow: hidden; }
.quote-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #202030; color: #fff; }
.quote-head .q-title { font-size: 17px; }
.q-status { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: #55566a; margin-left: 6px; }
.q-status.st-accepte { background: #1f8a4c; } .q-status.st-refuse { background: #b23; } .q-status.st-envoye { background: #2a6fb0; }
.q-close { background: transparent; border: 0; color: #fff; font-size: 18px; cursor: pointer; }
.quote-body { padding: 16px 18px; }
.q-loading { padding: 30px; text-align: center; color: #777; }
.q-client { display: grid; gap: 8px; margin-bottom: 12px; }
.q-client label { display: flex; flex-direction: column; font-size: 12px; color: #555; gap: 3px; }
.q-client input { padding: 8px; border: 1px solid #ccd; border-radius: 6px; font-size: 14px; }
.q-veh { font-weight: 600; color: #202030; font-size: 14px; }
.q-req { color: #E83936; font-weight: 400; }
/* table-layout fixed : sans lui, une longue description élargit la table
   au-delà de la fenêtre et le texte se retrouve coupé à droite. */
.q-lines { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.q-lines col.c-desc  { width: auto; }
.q-lines col.c-type  { width: 108px; }
.q-lines col.c-qty   { width: 78px; }
.q-lines col.c-price { width: 96px; }
.q-lines col.c-disc  { width: 70px; }
.q-lines col.c-total { width: 92px; }
.q-lines col.c-act   { width: 34px; }
.q-lines td { word-break: break-word; }
.q-lines th { text-align: left; color: #888; font-weight: 600; padding: 4px; border-bottom: 2px solid #eee; }
.q-lines td { padding: 4px; border-bottom: 1px solid #f0f0f3; }
.q-lines input { width: 100%; padding: 6px; border: 1px solid #dde; border-radius: 5px; font-size: 13px; box-sizing: border-box; }
.q-lines .q-qty, .q-lines .q-up { max-width: 88px; text-align: right; }
.q-lines .q-disc { max-width: 64px; text-align: right; }
.q-kindcell { color: #888; white-space: nowrap; font-size: 12px; }
.q-lt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-del { border: 0; background: #f3d5d3; color: #b23; border-radius: 5px; cursor: pointer; padding: 4px 8px; }
.q-addbtns { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.q-addbtns button { border: 1px dashed #aab; background: #f7f7fb; border-radius: 6px; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.q-totals { margin: 14px 0; margin-left: auto; max-width: 280px; }
.q-totals > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.q-totals .q-grand { border-top: 2px solid #202030; margin-top: 4px; padding-top: 8px; font-size: 17px; font-weight: 700; color: #202030; }
.q-notes { display: flex; flex-direction: column; font-size: 12px; color: #555; gap: 3px; }
.q-notes textarea { padding: 8px; border: 1px solid #ccd; border-radius: 6px; font-family: inherit; font-size: 14px; min-height: 54px; }
.q-response { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-weight: 600; }
.q-response.st-accepte { background: #e3f5e9; color: #1f8a4c; } .q-response.st-refuse { background: #fbe6e5; color: #b23; }
.quote-foot { padding: 12px 18px; background: #f6f6f9; border-top: 1px solid #eee; }
.q-msg { font-size: 13px; margin-bottom: 8px; min-height: 16px; }
.q-msg.ok { color: #1f8a4c; } .q-msg.error { color: #b23; } .q-msg.busy { color: #2a6fb0; }
.q-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.q-actions .btn { padding: 9px 16px; border-radius: 7px; border: 1px solid #ccd; background: #fff; cursor: pointer; font-size: 14px; }
.q-actions .btn.primary { background: #E83936; color: #fff; border-color: #E83936; font-weight: 600; }
.q-actions .btn.ghost { color: #b23; border-color: #e6bcbb; }

/* ===== Page publique du devis ===== */
.public-body { background: #eef0f4; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #202030; }
/* 640 px suffisait pour « Changement d'huile » ; pas pour
   « TESLA MODEL 3/Y LFP60, RWD, HV BATTERY 1666968-99-C SOH 96%… ». */
.devis-page { max-width: 860px; margin: 0 auto; padding: 20px 12px 60px; }
.devis-loading { text-align: center; padding: 60px 0; color: #888; }
.devis-card { background: #fff; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.08); padding: 24px; }
.dv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.dv-logo { height: 42px; width: auto; }
.dv-shop b { font-size: 16px; } .dv-shopinfo { font-size: 12px; color: #777; white-space: pre-line; }
.devis-card h1 { font-size: 22px; margin: 6px 0 14px; }
.dv-meta { display: grid; gap: 4px; font-size: 14px; margin-bottom: 14px; }
.dv-meta span { display: inline-block; min-width: 110px; color: #888; }
/* ⚠️ `table-layout: fixed` SANS largeurs de colonnes répartit l'espace
   ÉGALEMENT : la Description n'avait que 25 % alors que Qté n'a besoin
   que de quelques caractères. Les largeurs ci-dessous sont donc
   OBLIGATOIRES, pas décoratives. */
.dv-lines { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 12px; table-layout: fixed; }
.dv-lines col.dc-desc  { width: auto; }
.dv-lines col.dc-qty   { width: 74px; }
.dv-lines col.dc-price { width: 104px; }
.dv-lines col.dc-disc  { width: 72px; }
.dv-lines col.dc-total { width: 116px; }
.dv-lines .dv-rabais { color: #b00020; }
.dv-lines th { text-align: left; color: #888; padding: 8px 6px; border-bottom: 2px solid #eee; }
.dv-lines td { word-break: break-word; }
.dv-lines td { padding: 8px 6px; border-bottom: 1px solid #f0f0f3; }
.dv-r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-kind { color: #999; font-size: 12px; }
.dv-totals { margin-left: auto; max-width: 260px; margin-bottom: 14px; }
.dv-totals > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.dv-grand { border-top: 2px solid #202030; margin-top: 4px; padding-top: 8px !important; font-size: 18px; font-weight: 700; }
.dv-notes, .dv-terms { font-size: 13px; color: #555; margin-bottom: 12px; }
.dv-terms { border-top: 1px solid #eee; padding-top: 10px; color: #888; font-size: 12px; }
.dv-tax { font-size: 12px; color: #888; margin-bottom: 12px; }
.dv-actions { margin-top: 18px; border-top: 1px solid #eee; padding-top: 16px; }
.dv-sign { margin-bottom: 12px; }
.dv-sign label { display: block; font-size: 13px; color: #555; margin-bottom: 4px; }
.dv-sign input { width: 100%; padding: 11px; border: 1px solid #ccd; border-radius: 8px; font-size: 15px; box-sizing: border-box; }
.dv-btn { display: block; width: 100%; padding: 14px; border-radius: 9px; border: 0; font-size: 16px; font-weight: 700; cursor: pointer; margin-bottom: 10px; }
.dv-btn.accept { background: #1f8a4c; color: #fff; }
.dv-btn.refuse { background: #fff; color: #b23; border: 1px solid #e0b6b5; font-weight: 600; }
.dv-msg { text-align: center; font-size: 14px; min-height: 18px; }
.dv-msg.error { color: #b23; } .dv-msg.busy { color: #2a6fb0; }
.dv-banner { padding: 12px 14px; border-radius: 9px; font-weight: 600; margin-bottom: 14px; }
.dv-banner.ok { background: #e3f5e9; color: #1f8a4c; }
.dv-banner.no { background: #fbe6e5; color: #b23; }
.dv-banner.big { font-size: 16px; text-align: center; padding: 20px; }
/* Les numéros de pièce Tesla font jusqu'à ~18 caractères
   (« 1104428-00-P-394 ») : 120 px les coupaient. */
.q-partwrap { display: flex; gap: 4px; min-width: 0; }
.q-partwrap .q-partno { flex: 0 1 190px; min-width: 150px; }
/* La description ne descend jamais sous ~260 px : sinon on lit 3 mots par ligne. */
.q-partwrap .q-grow, .q-partwrap .q-desc { min-width: 220px; }
.q-partwrap .q-desc { flex: 1; min-width: 0; }

/* ===== Factures ===== */
.quote-head.fac { background: #1b3a5b; }
.fac-punch { background: #eef4ff; border: 1px solid #cfe0ff; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.fac-punch-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; color: #1b3a5b; }
.fac-apply { border: 0; background: #1b3a5b; color: #fff; border-radius: 6px; padding: 7px 12px; cursor: pointer; font-size: 13px; }
.fac-punch-list { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: #567; }
.wo-pill.st-brouillon { background: #e6e6ee; color: #555; }
.wo-pill.st-envoye, .wo-pill.st-envoyee { background: #dbe9fb; color: #2a6fb0; }
/* Vert QuickBooks : la facture est rendue en comptabilité */
.wo-pill.st-quickbooks, .q-status.st-quickbooks, .inv-badge.st-quickbooks {
  background: #e3f4e6; color: #1a7a33; font-weight: 700; }
.wo-pill.st-accepte { background: #e3f5e9; color: #1f8a4c; }
.wo-pill.st-refuse { background: #fbe6e5; color: #b23; }
@media print {
  .no-print { display: none !important; }
  .public-body { background: #fff; }
  .devis-card { box-shadow: none; }
}

/* ===== Inventaire ===== */
.inv-list { margin-top: 8px; }
.inv-row { display: grid; grid-template-columns: 1fr 90px 70px 64px 90px; gap: 8px; align-items: center; padding: 10px 8px; border-bottom: 1px solid #eef0f3; cursor: pointer; font-size: 14px; }
.inv-row:hover { background: #f7f8fb; }
.inv-head { font-size: 12px; color: #888; font-weight: 600; cursor: default; position: sticky; top: 0; background: #fff; }
.inv-head:hover { background: #fff; }
.inv-r { text-align: right; font-variant-numeric: tabular-nums; }
.inv-main b { color: #202030; }
.inv-cat { font-size: 11px; background: #eef; color: #55a; border-radius: 8px; padding: 1px 7px; margin-left: 4px; }
.inv-sup { font-size: 12px; color: #999; }
.inv-loc { font-size: 13px; color: #667; }
.inv-low { color: #E83936; font-weight: 700; }
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inv-margin { margin-top: 10px; font-weight: 600; color: #1f8a4c; }
.inv-modal { max-width: 560px; }
@media (max-width: 620px) {
  .inv-row { grid-template-columns: 1fr 72px 56px; }
  .inv-row > .inv-loc, .inv-head > div:nth-child(5) { display: none; }
  .inv-row > .inv-r:nth-child(3), .inv-head > div:nth-child(3) { display: none; }
  .inv-grid { grid-template-columns: 1fr; }
}

/* Autocomplétion produits (devis/factures) */
.prod-picker { background: #fff; border: 1px solid #ccd; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-height: 260px; overflow: auto; }
.pp-item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #f0f0f3; }
.pp-item:hover { background: #eef4ff; }
.pp-main { font-size: 13px; color: #202030; }
.pp-meta { font-size: 12px; color: #778; }

/* ===== Navigation : hamburger + tiroir ===== */
.nav-burger { display: none; background: transparent; border: 0; font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer; padding: 4px 10px; margin-right: 4px; }
.nav-drawer { position: fixed; inset: 0; z-index: 150; background: rgba(20,20,30,.5); opacity: 0; pointer-events: none; transition: opacity .18s; }
.nav-drawer.open { opacity: 1; pointer-events: auto; }
.nav-drawer-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 250px; max-width: 82%; background: #202030; transform: translateX(-100%); transition: transform .2s; padding: 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-drawer.open .nav-drawer-panel { transform: translateX(0); }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 12px; }
.nav-drawer-logo { height: 30px; background: #fff; padding: 5px 9px; border-radius: 7px; }
.nav-drawer-head .ic { color: #fff; background: transparent; border: 0; font-size: 18px; cursor: pointer; }
.nav-drawer-item { text-align: left; background: transparent; border: 0; color: #dfe0ea; font-size: 16px; padding: 13px 14px; border-radius: 8px; cursor: pointer; }
.nav-drawer-item:hover { background: #2c2c40; }
.nav-drawer-item.on { background: #E83936; color: #fff; font-weight: 600; }
.nav-drawer-set { margin-top: 8px; border-top: 1px solid #3a3a50; border-radius: 0; color: #aab; }

@media (max-width: 760px) {
  .nav-burger { display: block; }
  .mainnav { display: none; }
  .appbar-logo { margin-right: auto; }
}

/* ===== Bascule attend / laisse ===== */
.seg-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-toggle button { flex: 1; min-width: 90px; padding: 9px 10px; border: 1px solid #ccd; background: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; }
.seg-toggle button.on { background: #202030; color: #fff; border-color: #202030; }

/* VIN forcé en majuscules (affichage) */
.vin-up, #f_vv, #wo_vv { text-transform: uppercase; }

/* Boutons contact client (bon de travail) */
.wo-contact-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.wo-contact-btns .btn { flex: 1; }

/* Grille 2 colonnes dans l'éditeur (client facture) */
.q-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.q-client label { display: flex; flex-direction: column; font-size: 12px; color: #555; gap: 3px; margin-bottom: 8px; }
.q-client input { padding: 8px; border: 1px solid #ccd; border-radius: 6px; font-size: 14px; }
@media (max-width: 520px) { .q-grid2 { grid-template-columns: 1fr; } }

/* ===== Flotte ===== */
.fl-type { font-size: 11px; border-radius: 8px; padding: 1px 8px; margin-left: 6px; background: #eef; color: #55a; white-space: nowrap; }
.fl-type.fl-a_demonter { background: #fdeede; color: #b5741a; }
.fl-type.fl-a_reparer { background: #e3f0ff; color: #2a6fb0; }
.fl-plan { margin-left: 8px; padding: 6px 10px; font-size: 13px; border: 1px solid #cfe0ff; background: #f2f7ff; color: #2a6fb0; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.fl-sched-veh { font-weight: 600; color: #202030; margin-bottom: 12px; }

/* Édition d'une entrée de temps */
.jt-edit { background: transparent; border: 0; color: #2a6fb0; cursor: pointer; font-size: 13px; padding: 2px 4px; }
.jt-edit:hover { color: #E83936; }
/* Rendez-vous sur plusieurs jours */
.cal-ev-multi { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0 8px, transparent 8px 16px); }
.ev-multi { margin-left: 3px; }

/* ---- Véhicules de courtoisie ---- */
.lo-reserve { flex:0 0 auto; }
.lo-veh, .lo-meta { font-weight:600; color:var(--ink); margin-bottom:8px; }
.lo-meta { font-weight:500; color:#555; font-size:13px; }
.lo-notes { font-size:13px; color:#555; background:#f6f7f9; border-radius:8px; padding:8px 10px; margin-bottom:8px; white-space:pre-wrap; }
.lo-loans { display:flex; flex-direction:column; gap:8px; }
.lo-loan { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid #e6e8ec; border-radius:10px; background:#fff; flex-wrap:wrap; }
.lo-loan-main { flex:1 1 200px; min-width:0; }
.lo-loan-when { font-weight:600; color:var(--ink); font-size:14px; }
.lo-loan-who { font-size:12.5px; color:#666; }
.lo-loan-act { display:flex; gap:6px; flex-wrap:wrap; }
.lo-linked { font-size:11px; color:#2a6fb0; }
.btn.tiny { padding:4px 9px; font-size:12.5px; border-radius:8px; }
.btn.ghost { background:transparent; }
.chk { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink); cursor:pointer; }
.chk input { width:16px; height:16px; }

/* ---- Partage de photos (bouton dans le bon) ---- */
.sh-btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* ---- Galerie publique (galerie.html) ---- */
.gal-head { display:flex; align-items:center; gap:14px; padding:18px 20px; border-bottom:1px solid #e6e8ec; }
.gal-logo { height:44px; width:auto; }
.gal-shop { font-weight:700; font-size:18px; color:var(--ink, #202030); }
.gal-sub { color:#666; font-size:13.5px; margin-top:2px; }
.gal-group { font-size:15px; color:var(--ink, #202030); margin:20px 20px 8px; }
.gal-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; padding:0 20px; }
.gal-item { position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#f0f1f4; cursor:pointer; border:1px solid #e6e8ec; }
.gal-item img, .gal-item video { width:100%; height:100%; object-fit:cover; display:block; }
.gal-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:34px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5); pointer-events:none; }
.gal-dl { position:absolute; top:6px; right:6px; width:30px; height:30px; border-radius:8px; background:rgba(32,32,48,.82); color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:15px; }
.gal-dl:hover { background:#E83936; }
.gal-empty { padding:40px 20px; text-align:center; color:#888; }
.gal-foot { margin:28px 20px 24px; padding-top:14px; border-top:1px solid #e6e8ec; color:#888; font-size:12.5px; text-align:center; }
.gal-lb { position:fixed; inset:0; background:rgba(10,10,16,.92); z-index:200; display:flex; align-items:center; justify-content:center; }
.gal-lb-inner { max-width:94vw; max-height:88vh; }
.gal-lb-inner img, .gal-lb-inner video { max-width:94vw; max-height:88vh; border-radius:8px; display:block; }
.gal-lb-x { position:absolute; top:14px; right:16px; width:40px; height:40px; border-radius:10px; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:18px; cursor:pointer; }
.gal-lb-dl { position:absolute; top:16px; left:16px; color:#fff; text-decoration:none; background:rgba(255,255,255,.14); padding:8px 14px; border-radius:10px; font-size:14px; }
.gal-lb-dl:hover, .gal-lb-x:hover { background:#E83936; }

/* ---- Rapport d'inspection imprimable (rapport.html) ---- */
.rp-actions { max-width: 820px; margin: 16px auto 0; padding: 0 16px; text-align: right; }
.rp-sheet { max-width: 820px; margin: 12px auto 40px; background: #fff; padding: 26px 30px; }
.rp-head { display: flex; align-items: center; gap: 14px; border-bottom: 3px solid var(--ink, #202030); padding-bottom: 14px; }
.rp-logo { height: 46px; width: auto; }
.rp-shop { flex: 1; }
.rp-shop-name { font-weight: 800; font-size: 18px; color: var(--ink, #202030); }
.rp-shop-sub { font-size: 12px; color: #666; margin-top: 2px; }
.rp-title { text-align: right; }
.rp-title-main { font-weight: 700; color: #E83936; font-size: 16px; }
.rp-title-sub { font-size: 13px; color: #444; }
.rp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.rp-box { border: 1px solid #e3e5ea; border-radius: 10px; padding: 12px 14px; }
.rp-box h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #888; }
.rp-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 2px 0; }
.rp-kv span { color: #777; }
.rp-kv b { color: var(--ink, #202030); text-align: right; }
.rp-empty { color: #aaa; font-size: 13px; }
.rp-note { margin-top: 14px; font-size: 13.5px; background: #f6f7f9; border-radius: 8px; padding: 10px 12px; }
.rp-section { margin-top: 20px; border-top: 1px solid #e9ebef; padding-top: 14px; break-inside: avoid; }
.rp-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rp-sec-head h2 { margin: 0; font-size: 15.5px; color: var(--ink, #202030); }
.rp-status { font-size: 12px; background: #eef0f4; color: #555; border-radius: 20px; padding: 3px 10px; }
.rp-diag { margin-top: 8px; font-size: 13.5px; white-space: pre-wrap; }
.rp-diag-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #E83936; margin-bottom: 3px; }
.rp-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.rp-photo { border: 1px solid #e3e5ea; border-radius: 8px; overflow: hidden; break-inside: avoid; }
.rp-photo img { width: 100%; height: 150px; object-fit: cover; display: block; }
.rp-vids { margin-top: 8px; font-size: 12.5px; color: #555; }
.rp-vids a { color: #2a6fb0; }
.rp-foot { margin-top: 26px; border-top: 1px solid #e9ebef; padding-top: 10px; font-size: 11.5px; color: #999; text-align: center; }
.print-only { display: none; }
@media print {
  .no-print { display: none !important; }
  .print-only { display: block; }
  body.public-body { background: #fff; }
  .rp-sheet { margin: 0 auto; padding: 0; max-width: none; }
  .rp-photo img { height: 130px; }
  .rp-section { break-inside: avoid; }
}

/* ---- États des rendez-vous au calendrier ---- */
.ev-state { margin-left: 3px; font-size: 11px; }
.cal-ev-done { opacity: 0.58; }
.cal-ev-done .ev-name { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35); }
.cal-ev-active { box-shadow: 0 0 0 2px #d97706, 0 2px 8px rgba(217,119,6,.25); }
.cal-ev-active .ev-time { color: #b45309; font-weight: 700; }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #667; margin-top: 8px; }
.cal-legend span { white-space: nowrap; }

/* ---- QuickBooks (réglages) ---- */
.qbo-status { font-size: 13.5px; padding: 8px 12px; border-radius: 8px; background: #f4f5f7; color: #555; margin: 4px 0 10px; }
.qbo-status.ok { background: #e7f7ec; color: #15803d; }
.qbo-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
#s_qbo_redir { font-size: 12px; color: #444; background: #f6f7f9; }

/* ---- Badge QuickBooks sur facture ---- */
.qbo-badge { display: inline-flex; align-items: center; padding: 0 12px; height: 38px; border-radius: 10px; background: #e7f7ec; color: #15803d; font-size: 13.5px; font-weight: 600; }

/* ---- Pièces utilisées (bon de travail) ---- */
.wo-parts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.wo-parts-empty { color: #999; font-size: 13px; padding: 8px 2px; }
.wo-part { display: flex; gap: 6px; align-items: center; }
.wo-part input { padding: 8px 10px; border: 1px solid #d7dae0; border-radius: 8px; font-size: 14px; min-width: 0; }
.wo-part .wp-pn { flex: 0 0 110px; }
.wo-part .wp-desc { flex: 1 1 auto; }
.wo-part .wp-qty { flex: 0 0 64px; text-align: center; }
.wo-part .wp-price { flex: 0 0 90px; text-align: right; }
.wo-part .wp-del { flex: 0 0 auto; border: none; background: #f2f3f5; color: #999; width: 32px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.wo-part .wp-del:hover { background: #f7d9d9; color: #c0392b; }
@media (max-width: 640px) {
  .wo-part { flex-wrap: wrap; }
  .wo-part .wp-desc { flex: 1 1 100%; order: -1; }
}

/* ---- Discussion (chat) dans le bon de travail ---- */
.wo-chat { border: 1px solid #e3e5ea; border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.wo-chat-msgs { max-height: 300px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #fafbfc; }
.wo-chat-empty { color: #999; font-size: 13px; text-align: center; padding: 16px; }
.wo-msg { max-width: 78%; align-self: flex-start; background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; padding: 7px 11px; }
.wo-msg.mine { align-self: flex-end; background: #eaf2fb; border-color: #d3e3f6; }
.wo-msg-meta { font-size: 11px; color: #8a8f98; margin-bottom: 2px; }
.wo-msg-body { font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.wo-msg-sys { align-self: center; font-size: 12px; color: #777; background: #eef0f3; border-radius: 20px; padding: 3px 12px; }
.wo-chat-input { display: flex; gap: 8px; padding: 8px; border-top: 1px solid #e6e8ec; background: #fff; }
.wo-chat-input input { flex: 1; padding: 9px 12px; border: 1px solid #d7dae0; border-radius: 8px; font-size: 14px; }

/* ---- Pastille de notifications ---- */
.notif-wrap { position: relative; display: inline-block; }
.ic-bell { position: relative; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #E83936; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; border-radius: 10px; padding: 0 4px; text-align: center; }
.notif-drop { position: absolute; top: 40px; right: 0; width: 320px; max-height: 60vh; overflow-y: auto; background: #fff; border: 1px solid #e0e2e8; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.16); z-index: 200; padding: 6px; }
.notif-head { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #999; padding: 8px 10px 4px; }
.notif-empty { color: #999; font-size: 13.5px; padding: 18px; text-align: center; }
.notif-item { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 9px 10px; cursor: pointer; }
.notif-item:hover { background: #f4f6f9; }
.notif-item-top { font-size: 13.5px; color: #202030; display: flex; align-items: center; gap: 6px; }
.notif-count { margin-left: auto; background: #E83936; color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; line-height: 18px; border-radius: 10px; text-align: center; padding: 0 5px; }
.notif-item-msg { font-size: 12.5px; color: #777; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Rôles ---- */
.wo-role { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 10px; vertical-align: middle; }
.wo-role-technicien { background: #e4effb; color: #1f6fb2; }
.wo-role-aviseur { background: #e5f6ec; color: #1f8a4c; }
.wo-role-admin { background: #fde8e8; color: #c0392b; }
.s-user { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.s-user-name { flex: 1 1 auto; min-width: 100px; }
.s-user-role, .s-adduser .s-role { padding: 6px 8px; border: 1px solid #d7dae0; border-radius: 8px; font-size: 13px; background: #fff; }
.s-adduser { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.s-adduser input { flex: 1 1 140px; }

/* ---- Accusé de lecture (liens publics consultés) ---- */
.q-viewstat { margin-top: 10px; font-size: 13px; padding: 7px 11px; border-radius: 8px; }
.q-viewstat.q-viewed { background: #e5f6ec; color: #1f7a44; }
.q-viewstat.q-notview { background: #f2f3f5; color: #8a8f98; }
.wo-viewstat { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 4px 0; }
.wo-view-item { font-size: 12.5px; color: #1f7a44; }
.seen-dot { font-size: 17px; opacity: 1; vertical-align: -2px; margin-left: 2px; }

/* ---- Sauvegardes ---- */
.s-backup { margin-bottom: 8px; }
.f-sec2 { font-weight: 700; font-size: 13px; margin: 12px 0 4px; color: #555; }
.bk-item { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 2px; border-bottom: 1px solid #f0f1f3; }
.bk-item span { color: #8a8f98; white-space: nowrap; }
.bk-cmd { width: 100%; font-family: Consolas, "Courier New", monospace; font-size: 12px; padding: 8px; border: 1px solid #d7dae0; border-radius: 8px; box-sizing: border-box; resize: vertical; }

/* ---- Devis : infos client + véhicule éditables + avertissement ---- */
.q-cli-row, .q-veh-row { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; }
.q-cli-row label, .q-veh-row label { display: flex; flex-direction: column; font-size: 12px; color: #555; flex: 1 1 130px; gap: 3px; }
.q-veh-row label { flex-basis: 90px; }
.q-cli-row input, .q-veh-row input { padding: 7px 9px; border: 1px solid #d7dae0; border-radius: 7px; font-size: 14px; }
.q-warn { background: #fdf3e7; border: 1px solid #f0c987; color: #8a5a00; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 13.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.q-warn button.q-unlock { margin-left: auto; background: #d97706; color: #fff; border: none; border-radius: 7px; padding: 6px 12px; cursor: pointer; font-size: 13px; white-space: nowrap; }

/* ---- Devis : sélecteur (plusieurs devis par bon) ---- */
.q-chooser { display: flex; flex-direction: column; gap: 8px; }
.q-chooser-hint { color: #666; font-size: 13.5px; margin: 0 0 6px; }
.q-choose-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid #e3e5ea; border-radius: 10px; padding: 11px 13px; cursor: pointer; }
.q-choose-item:hover { background: #f6f8fb; border-color: #cdd3dc; }
.q-choose-num { font-weight: 700; }
.q-choose-meta { margin-left: auto; color: #8a8f98; font-size: 13px; }
.q-choose-new { background: #202030; color: #fff; border: none; border-radius: 10px; padding: 12px; cursor: pointer; font-weight: 600; font-size: 14px; margin-top: 4px; }

/* ---- Onglet Véhicules (sous-sections) ---- */
.veh-subtabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid #e3e5ea;
  flex-wrap: wrap; }
.veh-subtab { background: none; border: none; padding: 10px 14px; cursor: pointer; font-size: 14px; color: #666; border-bottom: 2px solid transparent; }
.veh-subtab.on { color: #202030; font-weight: 700; border-bottom-color: #E83936; }
.veh-sub { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.veh-owner { color: #1f7a44; font-weight: 500; font-size: 13px; }
.veh-noowner { color: #b0b4bb; font-weight: 400; font-size: 13px; }
.veh-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Fiche client (hub) ---- */
.c-open { cursor: pointer; }
.c-open:hover .c-name { color: #E83936; }
.cd-top { display: flex; justify-content: space-between; margin-bottom: 10px; }
.cd-name { margin: 0 0 4px; }
.cd-contact { color: #666; font-size: 14px; margin-bottom: 18px; }
.cd-section { margin-bottom: 20px; }
.cd-grid { padding-bottom: 24px; }
.cd-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; }
.cd-sec-head h2 { font-size: 15px; margin: 0; }
.cd-count { display: inline-block; min-width: 18px; text-align: center; background: #eceef2; color: #555; border-radius: 10px; font-size: 12px; padding: 1px 7px; margin-left: 4px; }
.cd-vehicles { display: flex; flex-wrap: wrap; gap: 8px; }
.cd-veh { background: #f6f8fb; border: 1px solid #e3e5ea; border-radius: 9px; padding: 9px 12px; cursor: pointer; min-width: 150px; }
.cd-veh:hover { border-color: #cdd3dc; }
.cd-veh-t { font-weight: 600; font-size: 14px; }
.cd-veh-s { color: #8a8f98; font-size: 12px; margin-top: 2px; }
.cd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.cd-list { display: flex; flex-direction: column; gap: 6px; }
.cd-item { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid #e8eaee; border-radius: 9px; padding: 9px 12px; cursor: pointer; }
.cd-item:hover { background: #f6f8fb; }
.cd-item-main { flex: 1; min-width: 0; }
.cd-item-sub { color: #8a8f98; font-size: 13px; }
.cd-item-view { font-size: 12px; margin-top: 3px; }
.cd-view { color: #1f7a44; }
.cd-noview { color: #b0b4bb; }
.cd-accept { font-size: 12px; color: #1f7a44; margin-top: 3px; font-weight: 600; }
.cd-empty { color: #b0b4bb; font-size: 13px; padding: 4px 2px; }
.cd-item .wo-pill { flex-shrink: 0; }

/* ---- Recherche de rendez-vous (calendrier) ---- */
.cal-search-btn { font-size: 15px; }
.cal-search { display: flex; flex-direction: column; max-height: 70vh; }
.cs-head { display: flex; gap: 8px; align-items: center; padding: 2px 2px 12px; border-bottom: 1px solid #eceef2; }
.cs-head input { flex: 1; padding: 11px 13px; border: 1px solid #d7dae0; border-radius: 9px; font-size: 15px; }
.cs-results { overflow-y: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.cs-hint { color: #b0b4bb; font-size: 14px; padding: 14px 4px; text-align: center; }
.cs-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid #e8eaee; border-radius: 10px; padding: 10px 13px; cursor: pointer; }
.cs-item:hover { background: #f6f8fb; border-color: #cdd3dc; }
.cs-when { font-size: 12.5px; color: #555; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 108px; }
.cs-main { flex: 1; min-width: 0; }
.cs-who { font-size: 14px; }
.cs-veh { color: #8a8f98; font-size: 12.5px; margin-top: 1px; }
.cs-badge { font-size: 12px; color: #666; white-space: nowrap; }

/* ---- Devis : sécurité + photos (éditeur) ---- */
.q-safety { margin-top: 10px; background: #fff8ef; border: 1px solid #f0d9b5; border-radius: 8px; padding: 10px 12px; }
.q-safety-toggle { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #8a5a00; cursor: pointer; }
.q-safety-note { width: 100%; margin-top: 8px; padding: 8px; border: 1px solid #e2c99a; border-radius: 7px; font-size: 13px; box-sizing: border-box; resize: vertical; }
.q-photos-sec { margin-top: 12px; }
.q-photos-title { font-size: 13px; font-weight: 600; color: #555; margin-bottom: 6px; }
.q-photos-load, .q-photos-none { color: #b0b4bb; font-size: 13px; padding: 4px 0; }
.q-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.q-photo { position: relative; display: block; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: #f0f1f3; }
.q-photo img { width: 100%; height: 80px; object-fit: cover; display: block; }
.q-photo input { position: absolute; top: 5px; left: 5px; width: 18px; height: 18px; }
.q-photo.on { border-color: #E83936; }
.q-photo-job { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Devis public : photos + sécurité + décharge ---- */
.dv-photos { margin-top: 16px; }
.dv-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 6px; }
.dv-photo img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; display: block; }
.dv-safety { margin-top: 16px; background: #fdeaea; border: 1px solid #e8a5a5; border-radius: 10px; padding: 12px 14px; color: #8a1c1c; }
.dv-safety b { display: block; margin-bottom: 4px; }
.dv-waiver-ov { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1000; }
.dv-waiver { background: #fff; border-radius: 14px; max-width: 520px; width: 100%; padding: 22px; max-height: 90vh; overflow-y: auto; }
.dv-waiver h2 { margin: 0 0 12px; color: #b3261e; font-size: 19px; }
.dv-waiver-note { background: #fdeaea; border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-bottom: 12px; }
.dv-waiver-text { font-size: 14px; line-height: 1.5; color: #333; margin-bottom: 14px; }
.dv-waiver-name { display: block; font-size: 13px; color: #555; margin-bottom: 12px; }
.dv-waiver-name input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 15px; margin-top: 4px; box-sizing: border-box; }
.dv-waiver-ack { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; margin-bottom: 14px; cursor: pointer; }
.dv-waiver-ack input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.dv-waiver-btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- Décharges de sécurité (bon de travail) ---- */
.job-waiver { background: #fff3e0; border: 1px solid #f0c58a; color: #9a5b00; border-radius: 6px; font-size: 11.5px; padding: 3px 8px; cursor: pointer; margin-right: 4px; white-space: nowrap; }
.job-waiver:hover { background: #ffe8c4; }
.wo-waivers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.wo-waivers-empty { color: #9aa0a8; font-size: 13px; padding: 4px 2px; }
.wv-item { display: flex; align-items: flex-start; gap: 10px; background: #fff8ef; border: 1px solid #f0d9b5; border-radius: 9px; padding: 10px 12px; }
.wv-item.done { background: #eef8f0; border-color: #bfe3c6; }
.wv-main { flex: 1; min-width: 0; }
.wv-note { font-size: 13.5px; white-space: pre-wrap; }
.wv-trace { font-size: 12.5px; color: #1f7a44; font-weight: 600; margin-top: 4px; }
.wv-pending { font-size: 12.5px; color: #9a5b00; margin-top: 4px; }
.wv-actions { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; }
.wv-jobs { background: #f6f8fb; border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.wv-jobs-lbl { display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.wv-job { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; padding: 3px 0; cursor: pointer; }

/* ---- Calendrier : séparateur de jour (semaine par baie) ---- */
.cal-colhead-cell.day-first, .cal-col.day-first { border-left: 2px solid #d7dae0; }
.ch-dayfiller { color: #c7ccd3; }

/* ---- Calendrier : vue MOIS ---- */
.cal-month { padding: 8px 10px 20px; }
.cm-grid { display: grid; gap: 1px; background: #e3e5ea; border: 1px solid #e3e5ea; border-radius: 10px; overflow: hidden; }
.cm-head { background: #f6f8fb; text-align: center; font-size: 12px; font-weight: 700; color: #555; padding: 8px 0; text-transform: capitalize; }
.cm-cell { background: #fff; min-height: 104px; padding: 5px 6px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.cm-cell:hover { background: #f9fafc; }
.cm-out { background: #fbfbfc; }
.cm-out .cm-date { color: #c2c6cd; }
.cm-today { background: #fff8f0; }
.cm-today .cm-date { background: #E83936; color: #fff; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.cm-date { font-size: 12.5px; font-weight: 600; color: #333; align-self: flex-start; }
.cm-chip { font-size: 11px; line-height: 1.35; padding: 1px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid #999; background: #f0f1f3; }
.cm-chip-t { font-variant-numeric: tabular-nums; color: #555; }
.cm-chip.cm-upcoming { border-left-color: #2563EB; background: #eef3fe; }
.cm-chip.cm-active { border-left-color: #d97706; background: #fdf1e3; }
.cm-chip.cm-done { border-left-color: #16a34a; background: #eaf7ee; }
.cm-more { font-size: 10.5px; color: #8a8f98; padding-left: 2px; }
@media (max-width: 640px) { .cm-cell { min-height: 78px; } .cm-chip { font-size: 10px; } }

/* ---- Module de test : Ventes VÉ ---- */
.veh-subtab-test { color: #7c3aed; }
.veh-subtab-test.on { border-bottom-color: #7c3aed; color: #7c3aed; }
.sales-banner { background: #f3eefc; border: 1px solid #d9c9f5; color: #4a2d7a; border-radius: 10px; padding: 10px 13px; font-size: 13px; margin-bottom: 14px; line-height: 1.5; }
.sf-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sl-stock { color: #8a8f98; font-weight: 400; font-size: 13px; }
.sf-card { background: #fff; border: 1px solid #e8eaee; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.sf-card h3 { margin: 0 0 10px; font-size: 14px; color: #202030; }
.sf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.sf { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.sf > span { font-size: 12px; color: #666; }
.sf input, .sf select { padding: 8px 10px; border: 1px solid #d7dae0; border-radius: 8px; font-size: 14px; }
.sf-line { width: 100%; padding: 8px 10px; border: 1px solid #d7dae0; border-radius: 8px; font-size: 14px; margin-bottom: 6px; box-sizing: border-box; }
.sf-equip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px; }
.sf-chk { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.sf-chk-inline { margin-top: 22px; }
@media (max-width: 640px) { .sf-grid2, .sf-grid3, .sf-equip { grid-template-columns: 1fr; } }

/* ---- Ventes VÉ : contrat ---- */
.sf-sep { font-size: 15px; font-weight: 700; color: #4a2d7a; margin: 6px 0 12px; padding-top: 8px; border-top: 2px dashed #d9c9f5; }
.sf-sub { font-size: 12px; font-weight: 600; color: #666; margin: 10px 0 6px; }
.sf-accrow { display: flex; gap: 6px; margin-bottom: 6px; }
.sf-acc-desc { flex: 1; padding: 8px 10px; border: 1px solid #d7dae0; border-radius: 8px; font-size: 14px; }
.sf-acc-amt { width: 90px; padding: 8px 10px; border: 1px solid #d7dae0; border-radius: 8px; font-size: 14px; }
.sf-acc-del { background: none; border: 1px solid #e3e5ea; border-radius: 8px; color: #999; cursor: pointer; padding: 0 10px; }
.sf-addrow { background: #f3eefc; border: 1px solid #d9c9f5; color: #4a2d7a; border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 13px; margin-bottom: 10px; }
.sf-totals { margin-top: 12px; border-top: 1px solid #e8eaee; padding-top: 8px; }
.sf-totals .tt { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 14px; }
.sf-totals .tt.sm { font-size: 12.5px; color: #777; }
.sf-totals .tt.grand { font-weight: 700; font-size: 15px; border-top: 1px solid #ddd; margin-top: 4px; padding-top: 6px; }
.sf-totals .tt.grand.red b { color: #E83936; }

/* ---- Temps de main-d'œuvre : sélecteur + import ---- */
.q-add-labortime { background: #eef3fe !important; border-color: #b9d0f7 !important; color: #1a56c4 !important; font-weight: 600; }
.lt-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(20,20,30,.5); display: flex; align-items: flex-start; justify-content: center; padding: 40px 14px; overflow-y: auto; }
.lt-box { background: #fff; width: 100%; max-width: 640px; border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.3); overflow: hidden; }
.lt-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #eef0f3; font-size: 16px; }
.lt-x { background: none; border: none; font-size: 18px; cursor: pointer; color: #888; }
.lt-controls { display: flex; gap: 8px; padding: 12px 16px; }
.lt-controls #lt_q { flex: 1; padding: 10px 12px; border: 1px solid #d7dae0; border-radius: 9px; font-size: 15px; }
.lt-controls #lt_model { padding: 10px; border: 1px solid #d7dae0; border-radius: 9px; font-size: 14px; }
.lt-results { max-height: 52vh; overflow-y: auto; padding: 0 8px 12px; }
.lt-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 9px 12px; border-radius: 9px; cursor: pointer; align-items: center; }
.lt-item:hover { background: #f3f7ff; }
.lt-desc { font-size: 14px; color: #202030; font-weight: 600; }
.lt-meta { font-size: 11px; color: #8a8f98; grid-column: 1; }
.lt-code { font-variant-numeric: tabular-nums; }
.lt-hrs { grid-row: 1 / span 2; grid-column: 2; font-size: 16px; font-weight: 700; color: #1a56c4; white-space: nowrap; }
.lt-hint { padding: 20px; text-align: center; color: #999; font-size: 14px; }
.lt-set .lt-stat { font-size: 14px; margin-bottom: 6px; }
.lt-set .lt-by { color: #8a8f98; font-weight: 400; }
.lt-note { font-size: 12px; color: #777; margin: 4px 0 10px; }
.lt-imp { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lt-mk { font-size: 13px; color: #555; }
.lt-paste { margin-top: 8px; }
.lt-paste textarea { width: 100%; box-sizing: border-box; margin: 6px 0; border: 1px solid #d7dae0; border-radius: 8px; padding: 8px; font-family: monospace; font-size: 12px; }
.lt-impmsg { font-size: 13px; margin-top: 8px; }
.lt-impmsg.ok { color: #16a34a; }
.lt-impmsg.err { color: #E83936; }
.btn-danger-ghost { background: #fff; border: 1px solid #f0c9c9; color: #c0392b; border-radius: 8px; padding: 7px 12px; cursor: pointer; }

/* ---- Proposition de véhicules au dossier (devis / bon) ---- */
.veh-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 2px; }
.veh-suggest:empty { display: none; }
.vs-label { font-size: 12px; color: #8a8f98; margin-right: 2px; }
.vs-chip { background: #eef3fe; border: 1px solid #b9d0f7; color: #1a56c4; border-radius: 999px; padding: 5px 11px; font-size: 13px; cursor: pointer; }
.vs-chip:hover { background: #dfeaff; }
.vs-chip.on { background: #1a56c4; border-color: #1a56c4; color: #fff; }
.vs-sub { opacity: .7; font-size: 11px; margin-left: 4px; }

/* ---- Catalogue de pièces : bouton ---- */
.q-add-partcat { background: #fef3ec !important; border-color: #f4c8a8 !important; color: #b45309 !important; font-weight: 600; }
.pc-item .lt-hrs { color: #b45309; }

/* ---- Vignette photo de pièce (catalogue) ---- */
.pc-item { grid-template-columns: 48px 1fr auto !important; align-items: center; }
.pc-item .lt-hrs { grid-row: auto; grid-column: auto; }
.pc-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-thumb { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: #f3f4f6; border: 1px solid #eceef1; }
.pc-thumb-empty { visibility: hidden; }

/* ---- Vignette photo de pièce sur les lignes (devis / facture / bon) ---- */
.part-thumb { width: 30px; height: 30px; object-fit: contain; border-radius: 4px; background: #f3f4f6; border: 1px solid #eceef1; vertical-align: middle; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.q-partline { display: flex; align-items: center; gap: 8px; }
.q-partline .q-partwrap { flex: 1; min-width: 0; }
.wo-part .wp-thumb { flex: 0 0 30px; }
.dv-lines td .part-thumb { margin-right: 8px; }
@media print { .part-thumb { width: 26px; height: 26px; } }

/* ---- Réglages : navigation par onglets ---- */
.set-body { padding-top: 0; }
.set-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid #eceef1; margin: 0 -20px 6px; padding: 0 16px; position: sticky; top: 0; background: #fff; z-index: 2; -webkit-overflow-scrolling: touch; flex-wrap: wrap; }
.set-tab-btn { flex: 0 0 auto; background: none; border: none; border-bottom: 2px solid transparent; padding: 12px 12px 10px; font-size: 14px; font-weight: 600; color: #7a7f88; cursor: pointer; white-space: nowrap; }
.set-tab-btn:hover { color: #202030; }
.set-tab-btn.on { color: var(--accent-ink, #202030); border-bottom-color: #E83936; }
.set-panel[hidden] { display: none; }
.set-panel > .f-sec:first-child { margin-top: 4px; }

/* ---- Inventaire : sections par type de ligne ---- */
.inv-section { margin-bottom: 18px; }
.inv-sec-head { font-size: 13px; font-weight: 800; color: #202030; text-transform: uppercase; letter-spacing: .04em; padding: 6px 2px; display: flex; align-items: center; gap: 8px; border-bottom: 2px solid #E83936; margin-bottom: 2px; }
.inv-sec-count { font-weight: 600; font-size: 12px; color: #fff; background: #202030; border-radius: 10px; padding: 1px 8px; letter-spacing: 0; }

/* ---- Shopify : badge de stock + bouton ---- */
.q-add-shopify { background: #f0fbf4 !important; border-color: #b7e4c7 !important; }
.sp-stock { font-weight: 700; font-size: 11px; padding: 1px 7px; border-radius: 10px; }
.sp-stock.ok { color: #0a7d33; background: #e5f6ea; }
.sp-stock.out { color: #b42318; background: #fdecea; }
.sp-src { font-size: 10px; font-weight: 500; color: #8a8a99; margin-top: 2px; }

/* ---- Devis existants à rattacher à un bon ---- */
.q-orphan-sec { margin-top: 14px; border-top: 1px dashed #d5d5e0; padding-top: 12px; }
.q-orphan-title { font-size: 12px; font-weight: 700; color: #202030; margin-bottom: 8px; }
.q-orphan-item { border-color: #cfe6d6 !important; background: #f6fbf8 !important; }
.q-orphan-cta { font-size: 11px; font-weight: 700; color: #0a7d33; margin-left: auto; white-space: nowrap; }

/* ---- Bons de travail encore ouverts (suggestion dans le rendez-vous) ---- */
.wo-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.wo-suggest:empty { display: none; }
.wos-label { font-size: 11px; font-weight: 700; color: #b42318; width: 100%; }
.wos-chip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; text-align: left;
  border: 1px solid #f3c9c4; background: #fff7f6; border-radius: 8px; padding: 7px 10px; cursor: pointer; font: inherit; }
.wos-chip:hover { border-color: #E83936; }
.wos-chip.on { border-color: #0a7d33; background: #f2fbf5; }
.wos-num { font-weight: 700; font-size: 12px; color: #202030; }
.wos-meta { font-size: 11px; color: #6b6b7b; }
.wos-cta { font-size: 11px; font-weight: 700; color: #E83936; margin-left: auto; white-space: nowrap; }
.wos-chip.on .wos-cta { color: #0a7d33; }

/* ---- Ligne « Rendez-vous » dans l'en-tête du bon ---- */
.wo-appt { font-size: 12px; color: #202030; background: #eef1f8; border-left: 3px solid #E83936;
  border-radius: 0 6px 6px 0; padding: 4px 10px; margin-top: 5px; display: inline-block; }
@media print { .wo-appt { background: none; border-left: 2px solid #202030; } }

/* ---- Auto-synchro Shopify ---- */
.sp-auto { border: 1px solid #e6e6ee; border-radius: 8px; padding: 10px 12px; margin: 10px 0; background: #fafaff; }
.sp-auto code { background: #eef; padding: 2px 5px; border-radius: 4px; font-size: 11px; display: inline-block; margin-top: 4px; }
.f-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.f-check input { width: auto; }

/* ---- Descriptions de lignes : texte complet, hauteur automatique ---- */
/* Le conteneur .q-grow contient le textarea ET une copie fantôme du texte (::after).
   C'est le fantôme qui impose la hauteur → jamais de texte coupé, sans mesure JS. */
.q-grow { display: grid; width: 100%; }
.q-grow::after,
.q-grow > textarea.q-desc {
  grid-area: 1 / 1 / 2 / 2;
  padding: 6px; border: 1px solid #dde; border-radius: 5px;
  font: inherit; font-size: 13px; line-height: 1.35;
  box-sizing: border-box; white-space: pre-wrap; overflow-wrap: anywhere;
  min-height: 32px;
}
.q-grow::after {
  content: attr(data-v) " ";
  visibility: hidden;          /* invisible, mais occupe la place → donne la hauteur */
  pointer-events: none;
}
.q-grow > textarea.q-desc { resize: none; overflow: hidden; height: 100%; }
.q-lines td { vertical-align: top; }
.q-partline { align-items: flex-start; }
.q-partwrap .q-grow { flex: 1; min-width: 0; }

/* Sur cellulaire : le n° de pièce passe au-dessus, la description prend toute la largeur */
@media (max-width: 900px) {
  .q-partwrap { flex-direction: column; gap: 4px; }
  .q-partwrap .q-partno { flex: 1 1 auto; max-width: none; width: 100%; }
}
@media (max-width: 700px) {
  .q-lines { font-size: 12px; }
  /* les champs ne sont plus rétrécis : le tableau glisse à la place */
  .q-grow::after, .q-grow > textarea.q-desc { font-size: 12px; }
}
@media print {
  .q-grow::after, .q-grow > textarea.q-desc { border: none; padding: 0; }
  .q-grow > textarea.q-desc { resize: none; }
}

/* ---- Indicateur d'inventaire Shopify (barre du haut) ---- */
.ic-shop { position: relative; }
.ic-shop.stale { color: #E83936; }
.shop-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px;
  background: #E83936; border-radius: 50%; border: 1.5px solid #fff; }
.ic-shop.syncing { opacity: .55; }
.ic-shop.syncing::after { content: '↻'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Logo Shopify (bouton de la barre + boutons de lignes) ---- */
.shop-ico { height: 16px; width: auto; vertical-align: -3px; display: inline-block; }
.ic-shop .shop-ico { height: 20px; vertical-align: middle; }
.ic-shop { display: inline-flex; align-items: center; justify-content: center; }
.ic-shop.stale .shop-ico { filter: none; }
.ic-shop:not(.stale) .shop-ico { filter: grayscale(35%); opacity: .85; }
.q-add-shopify .shop-ico { height: 14px; vertical-align: -2px; margin-right: 2px; }
.lt-head .shop-ico { height: 18px; vertical-align: -4px; margin-right: 3px; }
/* Les boutons Tesla : sobres, sans emoji */
.q-add-labortime, .q-add-partcat { font-weight: 600; }

/* ---- Numéro de facture modifiable ---- */
.q-num-lbl { display: block; }
.q-num-lbl input { font-weight: 700; }
.q-num-note { font-size: 11px; color: #6b6b7b; margin: 2px 0 8px; }

/* ---- Alertes : signal quand le serveur ne répond plus ---- */
.ic-bell.notif-down { opacity: .5; position: relative; }
.ic-bell.notif-down::after { content: '!'; position: absolute; bottom: 0; right: 0;
  font-size: 10px; font-weight: 700; color: #b42318; background: #fff;
  border-radius: 50%; width: 12px; height: 12px; line-height: 12px; text-align: center; }
.s-users-err { font-size: 12px; color: #b42318; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Rôle affiché dans le compte ---- */
.s-role-tag { font-size: 11px; font-weight: 700; color: #4a4a5e; background: #eef1f8;
  border-radius: 999px; padding: 2px 9px; margin-left: 8px; }
.s-warn { color: #b42318; background: #fff7f6; border: 1px solid #f3c9c4;
  border-radius: 8px; padding: 8px 10px; }

/* ---- Factures QuickBooks (consultation) ---- */
.page-head-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qi-head h2 { margin: 0 0 8px; font-size: 17px; }
.qi-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.qi-tools input[type="text"] { flex: 1; min-width: 180px; padding: 7px 10px; border: 1px solid #d7dae3; border-radius: 8px; font-size: 13px; }
.qi-list { max-height: 55vh; overflow-y: auto; border: 1px solid #e6e8ef; border-radius: 10px; }
.qi-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 9px 11px; border-bottom: 1px solid #f0f1f5; }
.qi-row:last-child { border-bottom: 0; }
.qi-main { display: flex; flex-direction: column; min-width: 0; }
.qi-num { font-weight: 700; font-size: 13px; color: #202030; }
.qi-cli { font-size: 12px; color: #6b6b7b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qi-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; white-space: nowrap; }
.qi-tot { font-weight: 700; }
.qi-st { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.qi-paid { background: #e8f6ec; color: #1b7f3b; }
.qi-due { background: #fff4e5; color: #9a5b00; }
.qi-act { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; font-size: 12px; }
.qi-open { background: none; border: 0; color: #E83936; font-weight: 600; cursor: pointer; padding: 0; font-size: 12px; }
.qi-qb { color: #2ca01c; font-weight: 600; text-decoration: none; }
.qi-ext { color: #9a9aa8; }
.qi-empty { padding: 18px; text-align: center; color: #6b6b7b; font-size: 13px; }
.qi-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; }
.qi-range { font-size: 12px; color: #6b6b7b; }
@media (max-width: 600px) { .qi-meta { flex-wrap: wrap; white-space: normal; } }

/* ---- Facture verrouillée (envoyée / comptabilisée) ---- */
.q-warn-lock { background: #fff7ed; border: 1px solid #f0d3a8; color: #7a4b00; }
.q-warn-open { background: #eef4ff; border: 1px solid #cbd9f5; color: #23407a; }
.q-warn-lock button.i-unlock { margin-left: 10px; background: #fff; border: 1px solid #d8b782;
  color: #7a4b00; border-radius: 7px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.q-warn-lock button.i-unlock:hover { background: #fdf3e4; }

/* ---- Bouton et fenêtre QuickBooks ---- */
.qb-ico { height: 16px; width: auto; vertical-align: -3px; }
.btn-qbo { display: inline-flex; align-items: center; gap: 7px; background: #fff;
  border: 1px solid #2ca01c; color: #1a7a12; font-weight: 600; }
.btn-qbo:hover { background: #f2fbf0; border-color: #248016; }
.btn-qbo .qb-ico { height: 18px; }
.qi-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qi-title h2 { display: flex; align-items: center; gap: 8px; }
.qi-title h2 .qb-ico { height: 22px; vertical-align: middle; }
.qi-x { background: none; border: 0; font-size: 20px; line-height: 1; color: #6b6b7b;
  cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.qi-x:hover { background: #f0f1f5; color: #202030; }
.qi-foot { display: flex; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }

/* ---- Dossiers de batterie ---- */
.bt-tools { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.bt-tools input { flex: 1; min-width: 200px; padding: 8px 11px; border: 1px solid #d7dae3; border-radius: 9px; font-size: 13px; }
.bt-list { display: flex; flex-direction: column; gap: 8px; }
.bt-card { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 13px; background: #fff; border: 1px solid #e6e8ef; border-radius: 11px; cursor: pointer; }
.bt-card:hover { border-color: #E83936; box-shadow: 0 2px 8px rgba(32,32,48,.07); }
.bt-card-main { display: flex; flex-direction: column; min-width: 0; }
.bt-card-serial { font-weight: 700; font-size: 13px; color: #202030; }
.bt-card-sub { font-size: 12px; color: #6b6b7b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-card-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; white-space: nowrap; }
.bt-card-soh, .bt-test-soh { font-weight: 800; font-size: 14px; padding: 2px 9px; border-radius: 999px; background: #eef1f8; color: #4a4a5e; }
.bt-ok { background: #e8f6ec; color: #1b7f3b; }
.bt-mid { background: #fff4e5; color: #9a5b00; }
.bt-low { background: #fdeceb; color: #b42318; }
.bt-card-n, .bt-card-date { color: #6b6b7b; }
.bt-empty { padding: 20px; text-align: center; color: #6b6b7b; font-size: 13px;
  border: 1px dashed #d7dae3; border-radius: 11px; }
.bt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.bt-head h2 { margin: 0; font-size: 17px; }
.bt-sub { font-size: 12px; color: #6b6b7b; margin-top: 2px; }
.bt-x { background: none; border: 0; font-size: 20px; color: #6b6b7b; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.bt-x:hover { background: #f0f1f5; color: #202030; }
.bt-ids { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.bt-ids label, .bt-notes { display: flex; flex-direction: column; font-size: 12px; color: #4a4a5e; gap: 3px; }
.bt-ids input, .bt-notes textarea { padding: 7px 10px; border: 1px solid #d7dae3; border-radius: 8px; font-size: 13px; font-family: inherit; }
.bt-notes { margin-bottom: 10px; }
.bt-notes textarea { min-height: 52px; resize: vertical; }
.bt-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.bt-summary div { background: #f7f8fc; border-radius: 10px; padding: 8px; text-align: center; }
.bt-summary span { display: block; font-size: 11px; color: #6b6b7b; }
.bt-summary b { font-size: 16px; color: #202030; display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; }
.bt-chart { margin: 6px 0 14px; }
.bt-chart svg { width: 100%; height: 90px; background: #f7f8fc; border-radius: 10px; }
.bt-chart circle { fill: #E83936; }
.bt-chart-lbl { display: flex; justify-content: space-between; font-size: 10px; color: #9a9aa8; margin-top: 2px; }
.bt-hist-title { font-size: 12px; font-weight: 700; color: #202030; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.bt-hist { max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.bt-test { border: 1px solid #eceef4; border-radius: 10px; padding: 8px 10px; }
.bt-test-top { display: flex; align-items: center; gap: 9px; }
.bt-test-date { font-size: 12px; color: #202030; font-weight: 600; }
.bt-test-tech { font-size: 11px; color: #6b6b7b; }
.bt-del { margin-left: auto; background: none; border: 0; color: #b42318; cursor: pointer; font-size: 13px; }
.bt-test-bits { font-size: 12px; color: #4a4a5e; margin-top: 4px; }
.bt-test-note { font-size: 12px; color: #6b6b7b; margin-top: 3px; font-style: italic; }
.bt-test-src { font-size: 10px; color: #9a9aa8; margin-top: 3px; }
.bt-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .bt-ids { grid-template-columns: 1fr; }
  .bt-summary { grid-template-columns: repeat(2, 1fr); }
  .bt-card { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.s-mono code { font-size: 11px; word-break: break-all; background: #f7f8fc; padding: 6px 8px;
  border-radius: 7px; display: inline-block; margin-top: 4px; }

/* ---- Mode technicien (pensé pour le cellulaire, gros boutons) ---- */
/* .view est en overflow:hidden → chaque page gère son propre défilement */
.tk-wrap { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  width: 100%; max-width: 620px; margin: 0 auto; padding: 4px 2px 28px; }
.tk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tk-eyebrow { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: #E83936; font-weight: 700; }
.tk-head h1 { margin: 2px 0 0; font-size: 20px; color: #202030; }
.tk-refresh { background: #fff; border: 1px solid #d7dae3; border-radius: 12px; width: 44px; height: 44px;
  font-size: 20px; color: #4a4a5e; cursor: pointer; }
.tk-refresh:active { background: #f0f1f5; }
.tk-list { display: flex; flex-direction: column; gap: 12px; }
.tk-card { background: #fff; border: 1px solid #e6e8ef; border-radius: 16px; padding: 14px;
  box-shadow: 0 1px 4px rgba(32,32,48,.05); }
.tk-card.tk-on { border-color: #E83936; box-shadow: 0 0 0 2px rgba(232,57,54,.12); }
.tk-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tk-wo { font-weight: 800; font-size: 13px; color: #202030; }
.tk-today { font-size: 11px; font-weight: 700; background: #E83936; color: #fff; padding: 2px 9px; border-radius: 999px; }
.tk-day { font-size: 11px; color: #9a9aa8; }
.tk-st { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: #eef1f8; color: #4a4a5e; margin-left: auto; }
.tk-st-en_cours { background: #fff4e5; color: #9a5b00; }
.tk-st-bloque { background: #fdeceb; color: #b42318; }
.tk-desc { font-size: 16px; font-weight: 700; color: #202030; line-height: 1.3; margin-bottom: 3px; }
.tk-meta { font-size: 13px; color: #6b6b7b; }
.tk-note { font-size: 12px; color: #4a4a5e; background: #f7f8fc; border-radius: 8px; padding: 6px 9px; margin-top: 7px; }
.tk-time { font-size: 13px; color: #6b6b7b; margin-top: 9px; font-weight: 600; }
.tk-time-on { color: #E83936; }
.tk-others { display: block; font-size: 11px; color: #9a5b00; font-weight: 500; margin-top: 2px; }
.tk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.tk-btn { min-height: 48px; border-radius: 12px; border: 1px solid #d7dae3; background: #fff;
  font-size: 15px; font-weight: 700; color: #202030; cursor: pointer; padding: 10px 8px; }
.tk-btn:active { transform: scale(.98); }
.tk-start { background: #202030; border-color: #202030; color: #fff; }
.tk-stop { background: #E83936; border-color: #E83936; color: #fff; }
.tk-done { background: #e8f6ec; border-color: #b9e3c6; color: #1b7f3b; }
.tk-ghost { font-weight: 600; color: #4a4a5e; }
.tk-empty { text-align: center; padding: 34px 18px; color: #4a4a5e; font-size: 16px;
  border: 1px dashed #d7dae3; border-radius: 16px; }
.tk-empty span { display: block; font-size: 13px; color: #9a9aa8; margin-top: 6px; }
@media (min-width: 640px) { .tk-actions { grid-template-columns: repeat(4, 1fr); } }
.tk-late { font-size: 11px; font-weight: 700; background: #fdeceb; color: #b42318; padding: 2px 9px; border-radius: 999px; }

/* ---- Techniciens par baie (Réglages → Atelier) ---- */
.s-bayrow { border: 1px solid #e6e8ef; border-radius: 10px; padding: 8px; margin-bottom: 8px; background: #fafbfe; }
.s-bayrow .s-bayname { width: 100%; margin-bottom: 6px; }
.s-baytechs { display: flex; flex-wrap: wrap; gap: 6px; }
.s-baytech { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #4a4a5e;
  background: #fff; border: 1px solid #d7dae3; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.s-baytech input { margin: 0; }
.s-baytechs-empty { font-size: 11px; color: #9a9aa8; }
.tk-scope { font-size: 12px; color: #6b6b7b; background: #f7f8fc; border-radius: 9px;
  padding: 7px 10px; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tk-scope button { background: none; border: 0; color: #E83936; font-weight: 700; cursor: pointer; font-size: 12px; padding: 0; }
.tk-bay { font-size: 11px; color: #6b6b7b; }

/* ---- Choix photo / vidéo / galerie (mode technicien) ---- */
.tk-sheet-ov { position: fixed; inset: 0; z-index: 120; background: rgba(20,20,30,.45);
  display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.tk-sheet { background: #fff; border-radius: 18px; width: 100%; max-width: 460px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 -6px 30px rgba(0,0,0,.2); }
.tk-sheet-title { font-size: 12px; font-weight: 700; color: #6b6b7b; text-align: center;
  text-transform: uppercase; letter-spacing: .5px; padding: 6px 0 2px; }
.tk-sheet-btn { min-height: 52px; border-radius: 13px; border: 1px solid #d7dae3; background: #fff;
  font-size: 16px; font-weight: 600; color: #202030; cursor: pointer; }
.tk-sheet-btn:active { background: #f0f1f5; }
.tk-sheet-cancel { border: 0; color: #6b6b7b; font-weight: 500; min-height: 46px; }
@media (min-width: 640px) { .tk-sheet-ov { align-items: center; } }

/* ---- Relances de clients ---- */
.fu-wrap { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 24px; }
.fu-list { display: flex; flex-direction: column; gap: 10px; }
.fu-card { background: #fff; border: 1px solid #e6e8ef; border-radius: 13px; padding: 13px; }
.fu-card-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.fu-late { font-size: 11px; font-weight: 700; background: #fdeceb; color: #b42318; padding: 2px 9px; border-radius: 999px; }
.fu-today { font-size: 11px; font-weight: 700; background: #E83936; color: #fff; padding: 2px 9px; border-radius: 999px; }
.fu-when { font-size: 12px; color: #6b6b7b; }
.fu-sent { font-size: 11px; color: #9a5b00; background: #fff4e5; padding: 2px 8px; border-radius: 999px; }
.fu-accepted { font-size: 11px; color: #1b7f3b; background: #e8f6ec; padding: 2px 8px; border-radius: 999px; }
.fu-client { font-size: 16px; font-weight: 700; color: #202030; }
.fu-veh { font-size: 13px; color: #6b6b7b; }
.fu-note { font-size: 13px; color: #4a4a5e; background: #f7f8fc; border-radius: 8px; padding: 7px 10px; margin-top: 7px; }
.fu-quote { font-size: 12px; color: #6b6b7b; margin-top: 6px; }
.fu-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.fu-actions .btn { font-size: 13px; padding: 8px 12px; }
.fu-closed { font-size: 12px; color: #9a9aa8; margin-top: 8px; }
.fu-empty { padding: 26px 18px; text-align: center; color: #4a4a5e; font-size: 15px;
  border: 1px dashed #d7dae3; border-radius: 13px; }
.fu-empty span { display: block; font-size: 13px; color: #9a9aa8; margin-top: 6px; }
.fu-tab.on { border-color: #E83936; color: #E83936; font-weight: 700; }
.fu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.fu-head h2 { margin: 0; font-size: 17px; }
.fu-x { background: none; border: 0; font-size: 20px; color: #6b6b7b; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.fu-x:hover { background: #f0f1f5; color: #202030; }
.fu-intro { font-size: 13px; color: #4a4a5e; margin: 0 0 10px; }
.fu-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.fu-choice { min-height: 46px; border-radius: 11px; border: 1px solid #d7dae3; background: #fff;
  font-size: 14px; font-weight: 600; color: #202030; cursor: pointer; }
.fu-choice.on, .fu-choice:hover { border-color: #E83936; color: #E83936; }
.fu-lbl { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #4a4a5e; margin-bottom: 10px; }
.fu-lbl input, .fu-lbl textarea { padding: 8px 10px; border: 1px solid #d7dae3; border-radius: 8px;
  font-size: 14px; font-family: inherit; }
.fu-hint { font-size: 11px; color: #9a9aa8; margin: 0 0 12px; }
.fu-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.fu-msgbox { width: 100%; padding: 11px; border: 1px solid #d7dae3; border-radius: 10px;
  font-size: 14px; font-family: inherit; line-height: 1.45; resize: vertical; }
.fu-sendrow { display: flex; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
.btn-relance.on { border-color: #E83936; color: #E83936; font-weight: 700; }
.nav-due { color: #ffd9d8 !important; font-weight: 700; }
@media (max-width: 600px) { .fu-choices { grid-template-columns: repeat(2, 1fr); } }

/* ---- Choix du client sur le devis public (reporter / décliner) ---- */
.dv-choix { background: #fff; border-radius: 16px; max-width: 520px; width: 100%; padding: 22px;
  max-height: 90vh; overflow-y: auto; }
.dv-choix h2 { margin: 0 0 6px; font-size: 20px; color: #202030; }
.dv-choix-intro { font-size: 14px; color: #4a4a5e; margin: 0 0 16px; line-height: 1.5; }
.dv-choix-block { border: 1px solid #e6e8ef; border-radius: 13px; padding: 14px; margin-bottom: 12px; }
.dv-choix-title { font-size: 16px; font-weight: 700; color: #202030; }
.dv-choix-sub { font-size: 13px; color: #6b6b7b; margin: 4px 0 11px; }
.dv-choix-delays { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.dv-delay { min-height: 46px; border-radius: 11px; border: 1px solid #202030; background: #202030;
  color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.dv-delay:hover { background: #33334a; }
.dv-decline { min-height: 44px; width: 100%; border-radius: 11px; border: 1px solid #d7dae3;
  background: #fff; color: #4a4a5e; font-size: 14px; font-weight: 600; cursor: pointer; }
.dv-decline:hover { border-color: #b42318; color: #b42318; }
.dv-choix-foot { display: flex; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.dv-cancel { background: none; border: 0; color: #6b6b7b; font-size: 14px; cursor: pointer; padding: 8px; }
.dv-banner.later { background: #eef4ff; color: #23407a; }
.fu-back { background: none; border: 0; font-size: 20px; color: #6b6b7b; cursor: pointer;
  padding: 0 8px 0 0; vertical-align: middle; }
.fu-back:hover { color: #E83936; }
.btn-due { border-color: #E83936 !important; color: #E83936 !important; font-weight: 700; }
@media (max-width: 520px) { .dv-choix-delays { grid-template-columns: 1fr; } }
.tesla-bm { display: inline-block; background: #E83936; color: #fff; font-weight: 700; font-size: 13px;
  padding: 9px 15px; border-radius: 9px; text-decoration: none; cursor: grab; }
.tesla-bm:hover { background: #cf2f2c; }

/* ---- Fiche de réception + traçabilité des batteries ---- */
.fr-sec { font-size: 12px; font-weight: 700; color: #E83936; text-transform: uppercase; letter-spacing: .4px;
  margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #f0f1f5; }
.fr-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
.fr-check { display: flex; align-items: center; justify-content: space-between; gap: 7px;
  background: #f7f8fc; border-radius: 8px; padding: 6px 9px; font-size: 12px; }
.fr-check select { border: 1px solid #d7dae3; border-radius: 6px; padding: 3px 5px; font-size: 12px; background: #fff; }
.fr-photos { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.fr-verdicts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
.fr-v { min-height: 46px; border-radius: 11px; border: 1px solid #d7dae3; background: #fff;
  font-size: 13px; font-weight: 600; color: #202030; cursor: pointer; }
.fr-v.on { border-color: #E83936; background: #fdeceb; color: #b42318; font-weight: 700; }
.fr-sugg { background: #eef4ff; border: 1px solid #cbd9f5; border-radius: 9px; padding: 9px 11px;
  font-size: 12px; color: #23407a; margin-bottom: 10px; }
.fr-accept { display: block; margin-top: 6px; background: none; border: 0; color: #E83936;
  font-weight: 700; font-size: 12px; cursor: pointer; padding: 0; }
.bt-verdict { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px;
  font-weight: 700; background: #eef1f8; color: #4a4a5e; margin-bottom: 8px; }
.bt-v-reemploi { background: #e8f6ec; color: #1b7f3b; }
.bt-v-remanufacture { background: #fff4e5; color: #9a5b00; }
.bt-v-recyclage { background: #eef1f8; color: #4a4a5e; }
.bt-v-quarantaine { background: #fdeceb; color: #b42318; }
.bt-prov { font-size: 12px; color: #6b6b7b; margin-bottom: 8px; }
.bt-foot-wide { flex-wrap: wrap; }
.bt-spacer { flex: 1; }
@media (max-width: 600px) { .fr-checks, .fr-verdicts { grid-template-columns: 1fr; } }
.s-crit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.s-equip { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.s-equip input { padding: 6px 8px; border: 1px solid #d7dae3; border-radius: 7px; font-size: 12px; }
.eq-del { background: none; border: 0; color: #b42318; cursor: pointer; font-size: 14px; padding: 0 4px; }
@media (max-width: 600px) { .s-crit, .s-equip { grid-template-columns: 1fr; } }

/* ---- Pièce commune à plusieurs générations ---- */
.pc-mods { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pc-nmod { font-size: 10px; font-weight: 700; color: #E83936; text-transform: uppercase; letter-spacing: .3px; }
.pc-mod { font-size: 10px; color: #4a4a5e; background: #eef1f8; border-radius: 999px; padding: 1px 7px; }
.pc-prix-var { font-size: 12px; line-height: 1.3; color: #9a5b00; display: inline-block; }

/* ---- Visionneuse de photo de pièce ---- */
.pi-ov { position: fixed; inset: 0; z-index: 200; background: rgba(20,20,30,.72);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.pi-box { background: #fff; border-radius: 15px; width: 100%; max-width: 640px;
  max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.pi-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; padding: 13px 15px; border-bottom: 1px solid #eceef4; }
.pi-desc { font-size: 15px; font-weight: 700; color: #202030; }
.pi-pn { font-size: 12px; color: #6b6b7b; font-family: ui-monospace, Menlo, monospace; margin-top: 2px; }
.pi-x { background: none; border: 0; font-size: 20px; color: #9a9aa8; cursor: pointer; padding: 0 4px; }
.pi-x:hover { color: #202030; }
.pi-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  background: #f7f8fc; padding: 14px; }
.pi-stage img { max-width: 100%; max-height: 62vh; object-fit: contain; }
.pi-load { font-size: 13px; color: #6b6b7b; padding: 40px 12px; text-align: center; }
.pi-thumbs { display: flex; gap: 7px; padding: 9px 14px 0; flex-wrap: wrap; }
.pi-thumbs img { width: 48px; height: 48px; object-fit: contain; background: #f7f8fc;
  border: 2px solid transparent; border-radius: 8px; cursor: pointer; }
.pi-thumbs img.on { border-color: #E83936; }
.pi-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 15px; font-size: 12px; color: #6b6b7b; flex-wrap: wrap; }
.pi-open { color: #E83936; font-weight: 600; text-decoration: none; }
.part-thumb[data-pn] { cursor: zoom-in; }

/* ---- Vérification de sauvegarde ---- */
.s-ok { background: #e8f6ec; color: #1b7f3b; border-radius: 9px; padding: 10px 12px;
  font-size: 13px; font-weight: 600; margin: 10px 0; }
.bk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.bk-grid > div { background: #f7f8fc; border-radius: 9px; padding: 8px 10px; }
.bk-grid span { display: block; font-size: 11px; color: #6b6b7b; }
.bk-grid b { font-size: 13px; color: #202030; word-break: break-all; }
.bk-det { margin: 8px 0; font-size: 12px; }
.bk-det summary { cursor: pointer; color: #E83936; font-weight: 600; }
.bk-list { margin: 8px 0 0; padding-left: 18px; columns: 2; font-size: 12px; color: #4a4a5e; }
.s-warn ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 600px) { .bk-grid { grid-template-columns: 1fr; } .bk-list { columns: 1; } }
.bk-steps { margin: 8px 0 0; padding-left: 20px; font-size: 12px; color: #4a4a5e; line-height: 1.6; }
.bk-steps li { margin-bottom: 4px; }

/* ---- Emplacement des batteries ---- */
.bt-loc { display: inline-block; font-size: 11px; color: #23407a; background: #eef4ff;
  border-radius: 999px; padding: 1px 9px; margin-top: 4px; }
.bt-loc-non { color: #9a9aa8; background: #f4f5f9; }
.rg-log { max-height: 200px; overflow-y: auto; margin: 10px 0; font-size: 13px; }
.rg-ok { background: #e8f6ec; color: #1b7f3b; border-radius: 7px; padding: 6px 10px; margin-bottom: 5px; }
.rg-ko { background: #fdeceb; color: #b42318; border-radius: 7px; padding: 6px 10px; margin-bottom: 5px; }

/* ---- Dictionnaire des alertes ---- */
.al-wrap { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 20px; }
.al-search { display: flex; gap: 8px; margin-bottom: 10px; }
.al-search input { flex: 1; padding: 10px 12px; border: 1px solid #d7dae3; border-radius: 10px; font-size: 15px; }
.al-syslist { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.al-chip { font-size: 11px; border: 1px solid #d7dae3; background: #fff; border-radius: 999px;
  padding: 3px 10px; cursor: pointer; color: #4a4a5e; }
.al-chip.on { border-color: #E83936; color: #E83936; font-weight: 700; }
.al-list { display: flex; flex-direction: column; gap: 9px; }
.al-card { background: #fff; border: 1px solid #e6e8ef; border-radius: 12px; padding: 12px; }
.al-top { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.al-code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 700; color: #202030; }
.al-sys { font-size: 10px; background: #eef1f8; color: #4a4a5e; border-radius: 999px; padding: 1px 8px; }
.al-sev { font-size: 10px; border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.al-f { background: #fdeceb; color: #b42318; }
.al-a { background: #fff4e5; color: #9a5b00; }
.al-w { background: #fffbe6; color: #7a5c00; }
.al-i { background: #eef4ff; color: #23407a; }
.al-title { font-size: 15px; font-weight: 700; color: #202030; margin-top: 5px; }
.al-desc { font-size: 13px; color: #4a4a5e; margin-top: 4px; line-height: 1.5; }
.al-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
.al-links a { font-size: 12px; color: #E83936; font-weight: 600; text-decoration: none; }
.al-hint { padding: 22px 14px; text-align: center; color: #6b6b7b; font-size: 14px;
  border: 1px dashed #d7dae3; border-radius: 12px; }
.al-manuels { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.al-man { display: flex; align-items: center; gap: 7px; font-size: 13px; background: #f7f8fc;
  border-radius: 8px; padding: 7px 9px; cursor: pointer; }
.al-run { background: #eef4ff; color: #23407a; border-radius: 7px; padding: 6px 10px; margin-bottom: 5px; }
.al-solo .al-card { border: 0; padding: 0; }
@media (max-width: 600px) { .al-manuels { grid-template-columns: 1fr; } }
.vm-note { font-size: 12px; color: #23407a; background: #eef4ff; border-radius: 8px;
  padding: 7px 10px; margin: 0 0 8px; }
.vm-all { background: none; border: 0; color: #E83936; font-weight: 700; font-size: 12px;
  cursor: pointer; padding: 0; text-decoration: underline; }
.al-d { background: #f0eefb; color: #4b3f8f; }
.al-cat, .al-mods { font-size: 11px; color: #6b6b7b; margin-top: 4px; }
.al-cust { font-size: 12px; color: #23407a; background: #eef4ff; border-radius: 8px;
  padding: 6px 9px; margin-top: 7px; }
.al-bloc { font-size: 12px; color: #4a4a5e; margin-top: 5px; line-height: 1.45; }
.al-bloc b { color: #202030; display: inline-block; min-width: 118px; }
.al-flags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.al-urg { font-size: 11px; font-weight: 700; background: #fdeceb; color: #b42318; border-radius: 999px; padding: 2px 9px; }
.al-latch { font-size: 11px; font-weight: 700; background: #fff4e5; color: #9a5b00; border-radius: 999px; padding: 2px 9px; }
.al-flab { font-size: 11px; color: #6b6b7b; align-self: center; margin-right: 2px; }
.al-chip-mod.on { background: #E83936; color: #fff; border-color: #E83936; }
.alv-page { max-height: 70vh; display: flex; flex-direction: column; }

/* ---- Textos ---- */
.sm-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sm-etat { margin-bottom: 8px; }
.sm-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr; gap: 12px; }
.sm-list { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.sm-item { background: #fff; border: 1px solid #e6e8ef; border-radius: 11px; padding: 9px 11px; cursor: pointer; }
.sm-item:hover { border-color: #d0d4e0; }
.sm-item.on { border-color: #E83936; }
.sm-item.neuf { background: #fff8f8; }
.sm-item-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.sm-item-h b { font-size: 14px; }
.sm-pastille { background: #E83936; color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; }
.sm-num { font-size: 11px; color: #9a9aa8; }
.sm-apercu { font-size: 12px; color: #6b6b7b; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-quand { font-size: 10px; color: #9a9aa8; margin-top: 2px; }
.sm-thread { background: #fff; border: 1px solid #e6e8ef; border-radius: 13px; display: flex; flex-direction: column; min-height: 0; }
.sm-fil-head { display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid #eceef4; font-size: 14px; }
.sm-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.sm-msg { max-width: 74%; }
.sm-msg.entrant { align-self: flex-start; }
.sm-msg.sortant { align-self: flex-end; text-align: right; }
.sm-bulle { padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; display: inline-block; text-align: left; }
.sm-msg.entrant .sm-bulle { background: #eef1f8; color: #202030; border-bottom-left-radius: 4px; }
.sm-msg.sortant .sm-bulle { background: #E83936; color: #fff; border-bottom-right-radius: 4px; }
.sm-h { font-size: 10px; color: #9a9aa8; margin-top: 2px; }
.sm-ecrire { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #eceef4; }
.sm-ecrire textarea { flex: 1; border: 1px solid #d7dae3; border-radius: 10px; padding: 8px 10px;
  font: inherit; font-size: 14px; resize: none; }
.sm-vide { padding: 30px 16px; text-align: center; color: #9a9aa8; font-size: 14px; }
.sm-vide span { font-size: 12px; }
@media (max-width: 800px) { .sm-cols { grid-template-columns: 1fr; } .sm-thread { min-height: 380px; } }
.sm-diag { font: 12px/1.6 ui-monospace, Menlo, monospace; background: #fff; border-radius: 8px;
  padding: 8px 10px; margin: 6px 0; word-break: break-word; }
.cd-smsfil { display: flex; flex-direction: column; gap: 7px; padding: 10px; background: #f7f8fc;
  border-radius: 11px; max-height: 300px; overflow-y: auto; }
.cd-smsfil .sm-msg { max-width: 80%; }
.lk-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.lk-item { text-align: left; border: 1px solid #e6e8ef; background: #fff; border-radius: 9px;
  padding: 8px 11px; font-size: 14px; cursor: pointer; }
.lk-item:hover { border-color: #E83936; }
.lk-item span { color: #9a9aa8; font-size: 12px; }
.sm-pouls { font-size: 11px; color: #9a9aa8; margin-bottom: 8px; }

/* ---- Consultations des liens (fiche client) ---- */
.cd-view { background: #fff; border: 1px solid #e6e8ef; border-radius: 11px; padding: 10px 12px; }
.cd-view-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cd-view-h b { font-size: 14px; }
.cd-view-n { font-size: 11px; background: #eef1f8; color: #4a4a5e; border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.cd-view-s { font-size: 12px; color: #6b6b7b; margin-top: 3px; }
.cd-view-more { background: none; border: 0; color: #E83936; font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 5px 0 0; }
.cd-view-list { margin-top: 5px; border-top: 1px solid #eef0f5; padding-top: 5px; }
.cd-view-row { font-size: 12px; color: #4a4a5e; padding: 2px 0; }
.cd-view-row span { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.nt-res { display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow-y: auto; margin-bottom: 8px; }
.nt-vide { font-size: 12px; color: #9a9aa8; padding: 6px 2px; }
.nt-choisi { font-size: 13px; background: #e8f6ec; color: #1b7f3b; border-radius: 9px;
  padding: 7px 10px; margin-bottom: 8px; }
.nt-choisi i { color: #9a5b00; font-style: normal; }
.nt-x { background: none; border: 0; color: #E83936; font-size: 12px; font-weight: 600;
  cursor: pointer; text-decoration: underline; margin-left: 6px; }
.sm-fil-btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sm-danger { color: #b42318; }
.sm-del { background: none; border: 0; cursor: pointer; opacity: 0; font-size: 11px;
  padding: 0 2px; transition: opacity .12s; }
.sm-msg:hover .sm-del { opacity: .65; }
.sm-del:hover { opacity: 1; }
@media (hover: none) { .sm-del { opacity: .45; } }

/* ---- Notifications sur cellulaire ----
   Le panneau est ancré à DROITE de la cloche ; or la cloche est à gauche de
   l'écran sur téléphone → un panneau de 320 px sortait par la gauche et
   recouvrait le titre. Sur petit écran il devient pleine largeur, sous la
   barre du haut. */
@media (max-width: 700px) {
  .notif-drop {
    position: fixed;
    top: var(--notif-top, 64px);
    left: 8px; right: 8px;
    width: auto; max-width: none;
    max-height: calc(100vh - var(--notif-top, 64px) - 16px);
    z-index: 300;
  }
  .notif-item-msg { white-space: normal; }   /* le message peut tenir sur 2 lignes */
}

/* ---- Qui a créé le dossier ---- */
.wo-by, .cs-by { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #eef4ff; color: #23407a; border-radius: 999px;
  padding: 5px 12px; font-size: 13px; margin-top: 6px; }
.cs-by { margin: 0 0 12px; }
.wo-by b, .cs-by b { font-weight: 800; }
.wo-by-role, .cs-role { background: rgba(35,64,122,.12); border-radius: 999px;
  padding: 1px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.cs-when { font-size: 11px; opacity: .75; }
.wo-by-vide, .cs-by-vide { background: #f4f5f9; color: #9a9aa8; }
.wo-by-vide .wo-by-role, .cs-by-vide .cs-when { background: none; text-transform: none;
  letter-spacing: 0; font-weight: 400; }

/* ---- Idées et problèmes ---- */
.fb-kinds { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.fb-kind { flex: 1; min-width: 140px; display: flex; align-items: center; gap: 8px;
  border: 1px solid #d7dae3; border-radius: 11px; padding: 11px 13px; cursor: pointer; font-size: 14px; }
.fb-kind:has(input:checked) { border-color: #E83936; background: #fff8f8; font-weight: 600; }
.fb-hint { font-weight: 400; color: #9a9aa8; font-size: 12px; }
.fb-tools { display: flex; gap: 8px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 10px; }
.fb-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.fb-chip { font-size: 12px; border: 1px solid #d7dae3; background: #fff; border-radius: 999px;
  padding: 4px 11px; cursor: pointer; color: #4a4a5e; }
.fb-chip.on { border-color: #E83936; color: #E83936; font-weight: 700; }
.fb-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.fb-item { display: flex; gap: 10px; background: #fff; border: 1px solid #e6e8ef;
  border-radius: 12px; padding: 11px 13px; }
.fb-vote { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid #e0e2e8; background: #fff; border-radius: 10px; padding: 5px 9px;
  cursor: pointer; font-size: 12px; height: fit-content; }
.fb-vote.on { border-color: #E83936; background: #fff4f4; }
.fb-vote b { font-size: 13px; }
.fb-main { flex: 1; min-width: 0; }
.fb-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fb-top b { font-size: 14.5px; }
.fb-status { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 9px;
  text-transform: uppercase; letter-spacing: .02em; }
.fb-s-new { background: #fff4e5; color: #9a5b00; }
.fb-s-work { background: #eef4ff; color: #23407a; }
.fb-s-plan { background: #f0eefb; color: #4b3f8f; }
.fb-s-done { background: #e8f6ec; color: #1b7f3b; }
.fb-s-no { background: #f4f5f9; color: #9a9aa8; }
.fb-detail { font-size: 13px; color: #4a4a5e; margin-top: 4px; white-space: pre-wrap; line-height: 1.5; }
.fb-meta { font-size: 11px; color: #9a9aa8; margin-top: 4px; }
.fb-answer { font-size: 13px; background: #f7f8fc; border-radius: 9px; padding: 7px 10px; margin-top: 7px; }
.fb-admin { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.fb-admin select { font-size: 12px; padding: 4px 7px; border-radius: 8px; border: 1px solid #d7dae3; }
.fb-admin button { font-size: 12px; background: none; border: 0; color: #6b6b7b; cursor: pointer; }
.fb-admin .fb-del { color: #b42318; }
.fb-vide { padding: 30px 16px; text-align: center; color: #9a9aa8; font-size: 14px; }
.fb-vide span { font-size: 12px; }

/* ---- Vérification du VIN ---- */
.vin-check { font-size: 12px; margin-top: 4px; line-height: 1.45; }
.vin-c-ok { color: #1b7f3b; }
.vin-c-info { color: #9a9aa8; }
.vin-c-bad { color: #b42318; font-weight: 600; }
input.vin-bad { border-color: #e0736a !important; background: #fff8f8; }
input.vin-good { border-color: #7fc79a !important; }

/* ---- Photos dans les idées et problèmes ---- */
.fb-photos-zone { margin-bottom: 12px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fb-thumbs { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.fb-thumb { position: relative; width: 74px; height: 74px; border-radius: 9px; overflow: hidden;
  border: 1px solid #e0e2e8; display: block; flex: 0 0 auto; }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-thumb-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0;
  border-radius: 50%; background: rgba(20,26,33,.72); color: #fff; font-size: 11px; cursor: pointer;
  line-height: 20px; padding: 0; }
.cd-lang { display: inline-block; background: #eef4ff; color: #23407a; border-radius: 999px;
  padding: 4px 12px; font-size: 12px; font-weight: 600; margin-bottom: 12px; }

/* ---- Bons ouverts proposés dans le rendez-vous ---- */
.wos-chip { display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  border: 1px solid #e0c48a; background: #fffaf0; border-radius: 11px; padding: 9px 11px; margin-bottom: 6px; }
.wos-chip.on { border-color: #1b7f3b; background: #f0fbf3; }
.wos-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.wos-link { background: #202030; color: #fff; border: 0; border-radius: 8px; padding: 6px 11px;
  font-size: 12px; font-weight: 700; cursor: pointer; }
.wos-copy { background: none; border: 1px solid #d7dae3; border-radius: 8px; padding: 6px 11px;
  font-size: 12px; cursor: pointer; color: #4a4a5e; }
.wos-note { font-size: 12px; color: #1b7f3b; font-weight: 600; margin-top: 4px; }

/* ---- Lignes de devis/facture sur cellulaire ----
   Sur un téléphone, comprimer 6 colonnes rend les prix illisibles
   (« 6C », « 7,5 »). On garde donc le tableau à sa vraie largeur et
   on le fait GLISSER de gauche à droite. */
.q-lines-wrap { width: 100%; }

@media (max-width: 900px) {
  .q-lines-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* on déborde des marges de la fenêtre pour gagner de la largeur */
    margin: 0 -18px;
    padding: 0 18px 6px;
    /* indice visuel : un dégradé au bord droit tant qu'il reste à voir */
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
      linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  /* +1 colonne (Compte) → on élargit d'autant, le tableau glisse déjà */
  .q-lines { min-width: 930px; }   /* + colonne Rabais % (v3.15.0) */
  .q-lines .q-qty, .q-lines .q-up { max-width: none; }
  /* le n° de pièce reste au-dessus de la description (règle 900px existante) */
}

@media print {
  .q-lines-wrap { overflow: visible; margin: 0; padding: 0; background: none; }
  .q-lines { min-width: 0; }
}

@media (max-width: 700px) {
  /* Sur téléphone, la fenêtre occupe l'écran : chaque pixel compte. */
  .quote-overlay { padding: 8px 6px; }
  .quote-box { border-radius: 10px; }
  .quote-body { padding: 12px 10px; }
  .q-lines-wrap { margin: 0 -10px; padding: 0 10px 6px; }
}

/* ---- Notifications poussées (Réglages) ---- */
.s-steps { margin: 6px 0 10px 18px; padding: 0; font-size: 13px; color: #4a4a5e; line-height: 1.7; }
.s-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.s-ok { font-size: 13px; color: #1b7f3b; font-weight: 600; }

@media (max-width: 620px) {
  /* Sur téléphone : la carte est moins rembourrée et les colonnes de
     chiffres passent en pourcentage — sinon des largeurs fixes de
     ~230 px ne laissaient qu'une soixantaine de pixels à la description. */
  .devis-page { padding: 12px 6px 40px; }
  .devis-card { padding: 14px 10px; }
  .dv-lines { font-size: 12.5px; }
  .dv-lines col.dc-qty   { width: 13%; }
  .dv-lines col.dc-price { width: 21%; }
  .dv-lines col.dc-total { width: 23%; }
  .dv-lines col.dc-disc  { width: 14%; }
  .dv-lines th, .dv-lines td { padding: 7px 3px; }
  .dv-r { font-size: 12px; }
}


/* ---- Repère de véhicules de courtoisie dans le calendrier ---- */
.cal-loaners { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 2px 8px; margin-left: 6px; white-space: nowrap; }
.cal-lo-ok { background: #e8f6ec; color: #1b7f3b; }
.cal-lo-bas { background: #fff4e5; color: #9a5b00; }
.cal-lo-zero { background: #fdeceb; color: #b42318; }
.c-loaner { font-size: 11px; }

/* ---- Inspection de véhicule ---- */
.ip-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(20,20,30,.55);
  display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 16px 10px; }
.ip-box { background: var(--surface, #fff); width: 100%; max-width: 900px; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.3); display: flex; flex-direction: column; }
.ip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 14px 16px; background: #202030; color: #fff; border-radius: 14px 14px 0 0;
  position: sticky; top: 0; z-index: 3; flex-wrap: wrap; }
.ip-head h2 { font-size: 17px; margin: 0; }
.ip-veh { font-size: 12.5px; opacity: .82; margin-top: 2px; }
.ip-head-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ip-body { padding: 14px 16px; }
.ip-foot { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid #eef0f5;
  position: sticky; bottom: 0; background: var(--surface, #fff); border-radius: 0 0 14px 14px; flex-wrap: wrap; }

.ip-resume { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ip-r { font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 12px; }
.ip-r-ok { background: #e8f6ec; color: #1b7f3b; }
.ip-r-warn { background: #fff4e5; color: #9a5b00; }
.ip-r-bad { background: #fdeceb; color: #b42318; }
.ip-r-vide { background: #f2f3f7; color: #6b6b7b; }

.ip-sec { margin-top: 16px; }
.ip-sec h3 { font-size: 14px; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 2px solid #eef0f5; }
.ip-pt { border: 1px solid #eceef4; border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.ip-pt.ip-fait { background: #fcfdff; }
.ip-pt-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.ip-lab { font-size: 13.5px; line-height: 1.4; flex: 1; min-width: 180px; }
.ip-ets { display: flex; gap: 4px; flex: 0 0 auto; }
.ip-et { width: 38px; height: 34px; border-radius: 8px; border: 1px solid #d7dae3; background: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer; color: #9a9aa8; }
.ip-et.on.ip-ok { background: #1b7f3b; border-color: #1b7f3b; color: #fff; }
.ip-et.on.ip-warn { background: #d98b00; border-color: #d98b00; color: #fff; }
.ip-et.on.ip-bad { background: #b42318; border-color: #b42318; color: #fff; }
.ip-xdel { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #f0d6d3; background: #fff;
  cursor: pointer; font-size: 14px; }

.ip-champs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ip-champ { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #6b6b7b;
  background: #f7f8fc; border-radius: 8px; padding: 4px 8px; }
.ip-champ input { width: 64px; border: 1px solid #d7dae3; border-radius: 6px; padding: 4px 6px;
  font: inherit; font-size: 13px; text-align: right; }
.ip-champ em { font-style: normal; font-weight: 600; color: #4a4a5e; }

.ip-detail { margin-top: 8px; }
.ip-note { width: 100%; box-sizing: border-box; border: 1px solid #d7dae3; border-radius: 8px;
  padding: 7px 9px; font: inherit; font-size: 13px; resize: vertical; }
.ip-photos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ip-thumb { position: relative; width: 74px; height: 74px; border-radius: 8px; overflow: hidden;
  border: 1px solid #e0e2e8; flex: 0 0 auto; }
.ip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-thumb-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0;
  border-radius: 50%; background: rgba(20,26,33,.72); color: #fff; font-size: 11px; cursor: pointer; padding: 0; }
.ip-xlab { flex: 1; min-width: 160px; border: 1px solid #d7dae3; border-radius: 8px; padding: 6px 8px;
  font: inherit; font-size: 13.5px; }

@media (max-width: 700px) {
  .ip-overlay { padding: 6px; }
  .ip-box { border-radius: 10px; }
  .ip-head { padding: 10px 12px; }
  .ip-body { padding: 12px 10px; }
  .ip-lab { min-width: 100%; }
  .ip-ets { width: 100%; }
  .ip-et { flex: 1; height: 40px; }        /* gros boutons : on les touche avec des gants */
  .ip-champ input { width: 56px; }
}

/* ---- Correspondance avec QuickBooks ---- */
.rc-sec { border-radius: 11px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid #e6e8ef; }
.rc-sec h3 { font-size: 14px; margin: 0 0 4px; }
.rc-sec.rc-ok { background: #f5fbf7; border-color: #cfe8d8; }
.rc-sec.rc-warn { background: #fffaf0; border-color: #f0dcb4; }
.rc-sec.rc-bad { background: #fdf6f5; border-color: #f0cfcb; }
.rc-row { display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,.05); flex-wrap: wrap; }
.rc-row:last-child { border-bottom: 0; }
.rc-row.rc-done { opacity: .55; }
.rc-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; font-size: 13px; }
.rc-cli { color: #4a4a5e; }
.rc-mt { color: #202030; font-weight: 600; font-variant-numeric: tabular-nums; }
.rc-ecart { color: #b42318; font-weight: 600; font-size: 12px; }
.rc-sec details { margin-top: 6px; }
.rc-sec summary { cursor: pointer; font-size: 12.5px; color: #4a4a5e; }

/* ---- Outils du technicien dans le bon (inspection, alertes) ---- */
.wo-tools { display: flex; gap: 10px; margin: 6px 0 16px; flex-wrap: wrap; }
.wo-tool { flex: 1; min-width: 220px; display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; height: auto; padding: 11px 14px; text-align: left; font-size: 14.5px; font-weight: 700;
  border: 1px solid #d7dae3; background: #fff; white-space: normal; }
.wo-tool:hover { border-color: #202030; }
.wo-tool-sub { font-size: 11.5px; font-weight: 400; color: #6b6b7b; }
@media (max-width: 700px) {
  .wo-tools { flex-direction: column; gap: 8px; }
  .wo-tool { min-width: 100%; }
}

/* ---- Autres numéros de téléphone ---- */
.ec-phrow { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.ec-phrow .ec-ph { flex: 0 0 140px; }
.ec-phrow .ec-lb { flex: 1; min-width: 0; }
.ec-phrow input { border: 1px solid #d7dae3; border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13.5px; }
.ec-phx { width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid #f0d6d3; background: #fff;
  border-radius: 8px; cursor: pointer; font-size: 12px; }
.cd-phones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.cd-ph { font-size: 12.5px; background: #f2f4f9; color: #202030; border-radius: 999px;
  padding: 3px 11px; text-decoration: none; }
.cd-ph em { font-style: normal; color: #6b6b7b; }

/* ---- Historique du kilométrage ---- */
.cd-km { font-size: 12.5px; margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cd-kmlog { border: 1px solid #d7dae3; background: #fff; border-radius: 999px; padding: 2px 10px;
  font-size: 11.5px; cursor: pointer; }
.cd-kmlog:hover { border-color: #202030; }
.ok-list { display: flex; flex-direction: column; }
.ok-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f0f0f3; }
.ok-row:last-child { border-bottom: 0; }
.ok-km { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 110px; }
.ok-meta { flex: 1; font-size: 12px; color: #4a4a5e; line-height: 1.5; }
.ok-delta { color: #1b7f3b; font-weight: 600; }
.ok-delta.ok-neg { color: #b42318; }
.ok-first { color: #8a8a99; }
.ok-del { border: 0; background: transparent; cursor: pointer; font-size: 14px; opacity: .5; }
.ok-del:hover { opacity: 1; }
.rc-etapes { margin: 4px 0 0 18px; padding: 0; font-size: 12px; color: #4a4a5e; line-height: 1.7; }
.rc-diag { margin: 6px 0 10px; }
.rc-diag summary { cursor: pointer; font-size: 12px; color: #6b6b7b; }
.rc-warnbtn { border-color: #e0a800 !important; color: #9a5b00 !important; }
.rc-skip { border-color: #b42318 !important; color: #b42318 !important; }
.rc-serie { max-width: 280px; margin-bottom: 10px; }
.ip-etat { font-size: 12px; margin-top: 4px; min-height: 15px; opacity: .9; }
.ip-etat-ok { color: #7ee2a8; }
.ip-etat-attente { color: #ffd9a0; }
.ip-etat-erreur { color: #ffb4ad; font-weight: 600; }

/* ---- Inspections listées (fiche client, fiche véhicule) ---- */
.insp-item { cursor: pointer; }
.insp-item:hover { background: #f7f8fc; }
.insp-bilan { display: flex; gap: 4px; flex-wrap: wrap; margin-right: 8px; }
.insp-bilan .ip-r { font-size: 11.5px; padding: 2px 8px; }

/* ---- Fiche complète d'un véhicule ---- */
.fv-id { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fv-id span { font-size: 12.5px; background: #f2f4f9; border-radius: 999px; padding: 3px 11px; color: #4a4a5e; }
.fv-id .fv-km { background: #e8f6ec; color: #1b7f3b; font-weight: 700; }
.fv-sec { margin-top: 14px; }
.fv-sec h3 { font-size: 14px; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 2px solid #eef0f5; }
.fv-list { display: flex; flex-direction: column; }
.fv-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid #f4f5f9;
  flex-wrap: wrap; font-size: 13px; }
.fv-row:last-child { border-bottom: 0; }
.fv-clic { cursor: pointer; border-radius: 8px; }
.fv-clic:hover { background: #f7f8fc; }
.fv-meta { color: #6b6b7b; font-size: 12px; flex: 1; min-width: 140px; }
.fv-meta i { font-style: normal; color: #1b7f3b; }
.fv-mt { font-weight: 600; font-variant-numeric: tabular-nums; }
/* La zone d'info d'une ligne véhicule ouvre sa fiche */
.c-row .c-clic { cursor: pointer; border-radius: 8px; }
.c-row .c-clic:hover .c-name { text-decoration: underline; }
.cd-veh-open { cursor: pointer; }

/* ---- Alerte de connexion QuickBooks ---- */
.qbo-alerte { display: flex; align-items: center; gap: 12px; justify-content: space-between;
  background: #fff4e5; border: 1px solid #f0dcb4; border-radius: 11px;
  padding: 11px 14px; margin: 10px 0; flex-wrap: wrap; }
.qbo-alerte b { font-size: 14px; color: #9a5b00; }
.qbo-alerte-s { font-size: 12.5px; color: #6b5a3e; margin-top: 2px; }

/* ---- Rendez-vous sur les lignes de bon de travail ---- */
.wo-rdv { font-size: 11.5px; font-weight: 600; margin-top: 3px; display: inline-block;
  border-radius: 999px; padding: 2px 9px; }
.wo-rdv-avenir { background: #e8f6ec; color: #1b7f3b; }
.wo-rdv-auj { background: #fff4e5; color: #9a5b00; }
.wo-rdv-passe { background: #fdeceb; color: #b42318; }
.wo-rdv-fini { background: #f2f3f7; color: #6b6b7b; font-weight: 400; }
.wo-rdv-aucun { background: #f2f3f7; color: #8a8a99; font-weight: 400; }
/* Auteur d'un texto sortant */
.sm-par { font-weight: 700; color: #4a4a5e; }
.sm-msg.sortant .sm-par { color: #2b6cb0; }
/* Colonne « Compte de revenus » dans les factures */
.q-lines col.c-acct { width: 168px; }
.q-acctcell select.q-acct { width: 100%; max-width: 160px; border: 1px solid #d7dae3; border-radius: 6px;
  padding: 4px 5px; font: inherit; font-size: 11.5px; background: #fff; }
.q-acct-vide { color: #b8b8c4; font-size: 12px; }
@media (max-width: 900px) { .q-lines col.c-acct { width: 130px; } }

/* ---- Regroupement de devis dans une facture ---- */
.q-add-devis { border-color: #b4c8e8 !important; color: #2b6cb0 !important; font-weight: 600; }
.q-devis-regroupes { background: #eef4fc; border: 1px solid #cfe0f5; color: #2b6cb0;
  border-radius: 9px; padding: 7px 12px; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; }
.cd-devis { display: flex; align-items: center; gap: 10px; padding: 9px 6px;
  border-bottom: 1px solid #f0f0f3; cursor: pointer; font-size: 13px; }
.cd-devis:hover { background: #f7f8fc; }
.cd-d-num { font-weight: 700; min-width: 84px; }
.cd-d-inf { flex: 1; color: #6b6b7b; font-size: 12px; }
.cd-d-mt { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Compte choisi à la main : mis en évidence */
.q-acctcell select.q-acct-choisi { border-color: #2b6cb0; color: #2b6cb0; font-weight: 600; }

/* ---- Sélecteurs QuickBooks (clients, inventaire) ---- */
.q-pick-cli { margin: -4px 0 8px; }
.q-add-qbo { border-color: #9dd3ae !important; color: #1b7f3b !important; font-weight: 600; }
.qp-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px;
  border-bottom: 1px solid #f0f0f3; cursor: pointer; font-size: 13px; border-radius: 8px; }
.qp-row:hover { background: #f7f8fc; }
.qp-main { flex: 1; min-width: 0; }
.qp-sub { color: #6b6b7b; font-size: 12px; margin-top: 2px; }
.qp-sku { background: #f2f4f9; border-radius: 5px; padding: 1px 6px; font-size: 11.5px; color: #4a4a5e; }
.qp-stock { font-size: 11.5px; background: #e8f6ec; color: #1b7f3b; border-radius: 999px; padding: 2px 9px; }
.qp-stock.qp-rupture { background: #fdeceb; color: #b42318; }
.qp-mt { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 76px; text-align: right; }
.qp-filtres { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 8px 0 4px; flex-wrap: wrap; }
.qp-chk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #4a4a5e; cursor: pointer; }

/* ---- Recherche de client QuickBooks (module partagé) ---- */
.qc-wrap { position: relative; }
.qc-btn { display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #d7dae3; background: #fff; border-radius: 8px; cursor: pointer;
  padding: 5px 10px; font-size: 12px; color: #4a4a5e; margin-top: 5px; align-self: flex-start; }
.qc-btn:hover { border-color: #2CA01C; color: #2CA01C; }
.qc-btn:disabled { opacity: .4; cursor: default; }
.qc-ico { width: 16px; height: 16px; display: block; }
.qc-head .qc-ico { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; }

/* ⚠️ Les champs Client sont dans des étiquettes en COLONNE : le bouton se
   place donc SOUS le champ, sans jamais réduire sa largeur. */
label.qc-wrap { display: flex; flex-direction: column; }
label.qc-wrap > input { width: 100%; box-sizing: border-box; }

.qc-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(20,20,30,.55);
  display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 24px 14px; }
.qc-box { background: #fff; width: 100%; max-width: 620px; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.3); display: flex; flex-direction: column; }
.qc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; background: #202030; color: #fff; border-radius: 14px 14px 0 0; }
.qc-head h2 { font-size: 16px; margin: 0; }
.qc-body { padding: 14px 16px; }
.qc-foot { display: flex; padding: 12px 16px; border-top: 1px solid #eef0f5; }
.qc-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px;
  border-bottom: 1px solid #f0f0f3; cursor: pointer; border-radius: 8px; font-size: 13px; }
.qc-row:hover { background: #f7f8fc; }
.qc-main { flex: 1; min-width: 0; }
.qc-sub { color: #6b6b7b; font-size: 12px; margin-top: 2px; }
.qc-solde { font-size: 11.5px; background: #fff4e5; color: #9a5b00; border-radius: 999px; padding: 2px 9px; }
.qp-etat { font-size: 11.5px; color: #6b6b7b; margin: 0 0 6px; }

/* ===== Dictée vocale (mode vocal) ===================================== */
.vx-btn{
  position:fixed; z-index:100000; display:none;
  width:38px; height:38px; padding:0; border:1px solid var(--line-strong);
  border-radius:50%; background:#fff; color:var(--ink);
  box-shadow:0 2px 8px rgba(20,26,33,.18);
  font-size:17px; line-height:1; cursor:pointer;
  align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.vx-btn.on{ display:flex; }
.vx-btn:hover{ background:var(--accent-soft); }
.vx-btn:active{ transform:scale(.94); }
.vx-btn .vx-ico{ pointer-events:none; }
.vx-btn.vx-live-btn{
  background:var(--red); border-color:var(--red-ink); color:#fff;
  animation:vxPulse 1.1s ease-in-out infinite;
}
@keyframes vxPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(232,57,54,.55); }
  50%    { box-shadow:0 0 0 9px rgba(232,57,54,0); }
}

.vx-bar{
  position:fixed; z-index:100001; left:0; right:0; bottom:0;
  padding:0 10px calc(10px + env(safe-area-inset-bottom,0px));
  display:flex; justify-content:center; pointer-events:none;
}
.vx-bar-in{
  pointer-events:auto; display:flex; align-items:center; gap:10px;
  width:100%; max-width:560px; padding:10px 12px;
  background:var(--ink); color:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow-lg); font-size:13.5px;
}
.vx-bar.vx-err .vx-bar-in{ background:var(--red-ink); }
.vx-pulse{
  flex:0 0 auto; width:10px; height:10px; border-radius:50%;
  background:#ff6b68; animation:vxDot 1s ease-in-out infinite;
}
@keyframes vxDot{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.7);} }
.vx-txt{ flex:1 1 auto; min-width:0; }
.vx-champ{ display:block; font-size:11px; letter-spacing:.04em; text-transform:uppercase; opacity:.65; }
.vx-live{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vx-bar.vx-err .vx-live{ white-space:normal; }
.vx-stop{
  flex:0 0 auto; border:0; border-radius:999px; padding:7px 14px;
  background:#fff; color:var(--ink); font:inherit; font-weight:600; cursor:pointer;
}
.vx-stop:active{ transform:scale(.96); }

/* ===== Transfert des commentaires du bon vers la facture ============== */
.tr-dest{
  margin:0 0 6px; padding:9px 11px; border-radius:var(--radius-sm);
  background:var(--accent-soft); color:var(--ink); font-size:13px;
}
.tr-vu{
  margin:0 0 12px; font-size:12.5px; color:var(--muted);
}
.tr-tout{ display:flex; gap:8px; margin-bottom:12px; }
.tr-tout button{
  border:1px solid var(--line-strong); background:#fff; color:var(--ink);
  border-radius:999px; padding:5px 12px; font:inherit; font-size:12.5px; cursor:pointer;
}
.tr-tout button:hover{ background:var(--accent-soft); }

.tr-job{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:10px 12px; margin-bottom:10px; background:var(--surface);
}
.tr-job-t{
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.tr-gen{ border-color:var(--line-strong); background:#fafbfd; }

.tr-chk{ display:flex; align-items:flex-start; gap:9px; padding:5px 0; cursor:pointer; }
.tr-chk + .tr-chk{ border-top:1px dashed var(--line); margin-top:4px; padding-top:9px; }
.tr-chk input{ flex:0 0 auto; width:17px; height:17px; margin-top:2px; }
.tr-chk span{ flex:1 1 auto; min-width:0; }
.tr-chk b{ display:block; font-size:12.5px; }
.tr-chk em{
  display:block; font-style:normal; font-size:13px; color:var(--muted);
  white-space:pre-wrap; overflow-wrap:anywhere; margin-top:2px;
}
.q-add-wo{ white-space:nowrap; }

/* ===== Direct Auto Import (v2.54) ===== */
.dai-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dai-page { display: flex; flex-direction: column; min-height: 0; }
.dai-shopnote { background: #fff8e6; border: 1px solid #f3dca0; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
.dai-red { color: #E83936; }
.dai-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.dai-tab { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 18px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dai-tab span { background: #eef0f3; border-radius: 9px; padding: 0 7px; margin-left: 3px; font-size: 12px; }
.dai-tab.on { background: #202030; color: #fff; border-color: #202030; }
.dai-tab.on span { background: rgba(255,255,255,.2); }
.dai-tab.warn span { background: #E83936; color: #fff; }
.dai-bulk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid #eef0f3; position: sticky; top: 0; background: var(--surface, #fff); z-index: 2; }
.dai-all { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.dai-n { font-size: 13px; color: #778; margin-right: 4px; }
.dai-list { margin-top: 4px; }
.dai-empty { padding: 30px 12px; text-align: center; color: #778; font-size: 14px; line-height: 1.6; }
.dai-row { display: grid; grid-template-columns: 26px 96px 1fr 210px; gap: 12px; align-items: start; padding: 12px 6px; border-bottom: 1px solid #eef0f3; }
.dai-row.sel { background: #fdf1f0; }
.dai-chk { padding-top: 4px; cursor: pointer; }
.dai-chk input { width: 18px; height: 18px; cursor: pointer; }
.dai-img { width: 96px; text-align: center; }
.dai-img img { width: 96px; height: 96px; object-fit: contain; background: #fff; border: 1px solid #eef0f3; border-radius: 8px; cursor: zoom-in; }
.dai-img i { display: block; font-size: 11px; color: #99a; font-style: normal; }
.dai-main { min-width: 0; }
.dai-top { font-size: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dai-pill { font-size: 11px; font-weight: 700; border-radius: 9px; padding: 1px 8px; }
.dai-st-new { background: #e8f0fe; color: #2458c6; }
.dai-st-ready { background: #fff4d6; color: #9a6b00; }
.dai-st-pub { background: #e3f5ea; color: #1f8a4c; }
.dai-st-ign { background: #eee; color: #888; }
.dai-st-sync { background: #fde4e2; color: #c42d24; }
.dai-cat { font-size: 11px; background: #eef; color: #55a; border-radius: 8px; padding: 1px 7px; }
.dai-title { width: 100%; margin: 6px 0 4px; font-size: 14px; font-weight: 600; border: 1px solid transparent; border-radius: 6px; padding: 5px 7px; background: #f7f8fb; }
.dai-title:hover, .dai-title:focus { border-color: var(--line-strong); background: #fff; }
.dai-sub, .dai-veh { font-size: 12.5px; color: #667; }
.dai-brand { font-weight: 700; color: #202030; }
.dai-nobrand { color: #E83936; }
.dai-err { font-size: 12px; color: #c42d24; margin-top: 4px; }
.dai-shoplink { font-size: 12px; }
.dai-prix { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; font-size: 12.5px; }
.dai-p { display: flex; flex-direction: column; }
.dai-p span, .dai-sell span { color: #99a; font-size: 11px; }
.dai-p b { font-variant-numeric: tabular-nums; }
.dai-sell { grid-column: 1 / -1; display: flex; flex-direction: column; margin-top: 4px; }
.dai-sell input { font-size: 15px; font-weight: 700; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 6px; width: 100%; font-variant-numeric: tabular-nums; }
.dai-marge { grid-column: 1 / -1; font-size: 12px; color: #1f8a4c; font-weight: 600; }
.dai-marge.bad { color: #c42d24; }
.dai-stock { grid-column: 1 / -1; font-size: 12px; color: #667; }
input.saving { opacity: .6; }
input.saved { border-color: #1f8a4c !important; box-shadow: 0 0 0 2px rgba(31,138,76,.2); }
.dai-pubbox h3 { margin: 0 0 12px; }
.dai-pubbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.dai-prog { height: 8px; background: #eef0f3; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.dai-prog div { height: 100%; width: 0; background: #E83936; transition: width .3s; }
.dai-log { max-height: 320px; overflow: auto; font: 12px/1.5 Consolas, monospace; background: #f7f8fb; border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; }
.dai-log .ok { color: #1f8a4c; } .dai-log .err { color: #c42d24; } .dai-log .warn { color: #9a6b00; }
.dai-cb { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 8px 0; }
@media (max-width: 760px) {
  .dai-row { grid-template-columns: 24px 72px 1fr; }
  .dai-img, .dai-img img { width: 72px; } .dai-img img { height: 72px; }
  .dai-prix { grid-column: 2 / -1; }
}

.dai-dim { color: #889; font-weight: normal; }
.dai-fxbtn { height: 30px; padding: 0 10px; font-size: 13px; margin: 4px 4px 0 0; }
.dai-fxrow { display: flex; gap: 8px; }
.dai-fxrow input { flex: 1; }
.dai-usd { grid-column: 1 / -1; font-size: 12px; color: #2458c6; }

.dai-cfgbox { max-height: 82vh; overflow-y: auto; }
.dai-cfgtabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.dai-cfgtabs button { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 18px; padding: 6px 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dai-cfgtabs button.on { background: #202030; color: #fff; border-color: #202030; }
.dai-sec { font-weight: 700; font-size: 13px; margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid #eef0f3; color: #202030; }
.dai-meta { font-size: 12.5px; color: #1f8a4c; }
.dai-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dai-picker { border: 1px solid #e3e6ec; border-radius: 8px; padding: 6px 8px; margin: 4px 0 8px; background: #fbfbfd; }
.dai-pk-q { width: 100%; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 6px; margin-bottom: 4px; font-size: 13px; }
.dai-pk-list { max-height: 150px; overflow-y: auto; }
.dai-pk { display: flex; gap: 6px; align-items: center; font-size: 13px; padding: 3px 2px; cursor: pointer; }
.dai-pk.smart { color: #aab; cursor: default; }
.dai-pk i { font-size: 10px; background: #eee; border-radius: 6px; padding: 0 5px; font-style: normal; }
.dai-pk-n { margin: 4px 0 0; }
.dai-rule { border: 1px dashed #d8dce4; border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.dai-rule-h { display: flex; gap: 8px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.dai-rule-h input { flex: 1; min-width: 120px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 6px; }
@media (max-width: 600px) { .dai-grid2 { grid-template-columns: 1fr; } }

/* ===== Panier DAI → devis / facture (v2.57) ===== */
.q-add-dai { background: #fdf1f0 !important; border-color: #f3c3bf !important; }
.dai-cartbox { max-height: 86vh; display: flex; flex-direction: column; }
.dai-cartbox [data-r="body"] { overflow-y: auto; min-height: 0; }
.dai-cart-h { display: flex; justify-content: space-between; align-items: center; }
.dai-cart-h h3 { margin: 0; }
.dai-carts { display: flex; flex-direction: column; gap: 6px; }
.dai-cartrow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid #e3e6ec; border-radius: 8px; cursor: pointer; }
.dai-cartrow:hover { background: #f7f8fb; border-color: #cfd4dd; }
.dai-cart-r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.dai-cart-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.dai-cart-all { display: flex; gap: 6px; align-items: center; font-size: 13px; margin-left: auto; }
.dai-cart-all input { width: 64px; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 6px; }
.dai-cart-wrap { overflow-x: auto; }
.dai-cart-t { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; }
.dai-cart-t th { text-align: left; font-size: 11.5px; color: #889; font-weight: 600; padding: 6px; border-bottom: 1px solid #e3e6ec; }
.dai-cart-t td { padding: 6px; border-bottom: 1px solid #eef0f3; vertical-align: top; }
.dai-cart-t tr.off td { opacity: .45; }
.dai-cart-t img { width: 48px; height: 48px; object-fit: contain; border: 1px solid #eef0f3; border-radius: 6px; background: #fff; }
.dai-noimg { display: inline-block; width: 48px; text-align: center; color: #bbb; }
.dai-cart-t textarea { width: 100%; min-width: 220px; margin-top: 4px; font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid #e3e6ec; border-radius: 6px; resize: vertical; }
.dai-cart-t input[data-f="qty"] { width: 56px; } .dai-cart-t input[data-f="marge"] { width: 64px; } .dai-cart-t input[data-f="prix"] { width: 84px; font-weight: 700; }
.dai-cart-t input[data-f] { padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 6px; font-variant-numeric: tabular-nums; }
.dai-cart-t input[type="checkbox"] { width: 17px; height: 17px; }
.dai-cart-t input.bad { border-color: #c42d24; color: #c42d24; }
.dai-r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dai-cart-sum { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; padding: 10px 6px 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.dai-ok { color: #1f8a4c; }

/* ===== Droit sur les pneus neufs ====================================== */
.q-dp{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  margin-top:5px; padding:4px 7px;
  background:#fff7e6; border:1px solid #f0d9a8; border-radius:999px;
  font-size:12px; color:#6b4f1d; width:fit-content; max-width:100%;
}
.q-dp-ic{ font-size:13px; line-height:1; }
.q-dp select{
  border:1px solid #e0c58a; border-radius:5px; background:#fff;
  font:inherit; font-size:12px; padding:1px 4px; color:inherit;
}
.q-dp input.q-dp-qty{
  width:46px; border:1px solid #e0c58a; border-radius:5px; background:#fff;
  font:inherit; font-size:12px; padding:1px 4px; text-align:center; color:inherit;
}
.q-dp-x2{ opacity:.6; }
.q-dp-u{ opacity:.8; }
.q-dp-no{
  border:0; background:transparent; color:#a07a2c; cursor:pointer;
  font:inherit; font-size:12px; padding:0 2px; line-height:1;
}
.q-dp-no:hover{ color:var(--red); }
.q-dp-add{
  margin-top:5px; border:1px dashed var(--line-strong); background:transparent;
  color:var(--muted); border-radius:999px; padding:2px 9px;
  font:inherit; font-size:11.5px; cursor:pointer;
}
.q-dp-add:hover{ border-color:#e0c58a; background:#fff7e6; color:#6b4f1d; }
.q-totals .q-droit span{ color:#6b4f1d; }
.q-totals .q-droit i{ font-style:normal; opacity:.7; font-size:11.5px; }
/* Droit sur les pneus : ajout / modification depuis les totaux */
.q-droit-add{ display:flex; justify-content:flex-end; }
.q-droit-add button{
  border:1px dashed var(--line-strong); background:transparent; color:var(--muted);
  border-radius:999px; padding:2px 10px; font:inherit; font-size:12px; cursor:pointer;
}
.q-droit-add button:hover{ border-color:#e0c58a; background:#fff7e6; color:#6b4f1d; }
.q-droit-edit{ cursor:pointer; }
.q-droit-edit u{ font-size:11px; opacity:.6; margin-left:4px; }
.q-droit-edit:hover u{ opacity:1; }
.dp-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
.dp-row span{ font-size:14px; } .dp-row i{ font-style:normal; color:var(--muted); font-size:12px; margin-left:4px; }
.dp-row input{ width:80px; text-align:center; font:inherit; font-size:15px; padding:6px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); }

/* ===== DAI → 🚗 Véhicules couverts ===================================== */
.dai-ev .s-note{ margin:4px 0 10px; }
.dai-ev-etat{ padding:8px 11px; border-radius:var(--radius-sm); background:var(--accent-soft); font-size:13px; margin-bottom:10px; }
.dai-ev-tablewrap{ max-height:42vh; overflow:auto; border:1px solid var(--line); border-radius:var(--radius-sm); }
.dai-ev-t{ width:100%; border-collapse:collapse; font-size:13px; }
.dai-ev-t th{ position:sticky; top:0; background:#f6f7fa; text-align:left; font-weight:600; font-size:12px; padding:6px 8px; border-bottom:1px solid var(--line); z-index:1; }
.dai-ev-t td{ padding:4px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.dai-ev-t tr.off td{ opacity:.5; }
.dai-ev-t input[type=text]{ width:100%; box-sizing:border-box; border:1px solid transparent; background:transparent; padding:4px 6px; border-radius:5px; font:inherit; }
.dai-ev-t input[type=text]:hover, .dai-ev-t input[type=text]:focus{ border-color:var(--line-strong); background:#fff; outline:none; }
.dai-ev-t input.dai-ev-match{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--muted); }
.dai-ev-t input.dai-ev-annees{ width:84px; font-variant-numeric:tabular-nums; }
.dai-ev-n{ white-space:nowrap; text-align:center; }
.dai-ev-aide{ display:inline-block; width:15px; height:15px; line-height:15px; text-align:center; border-radius:50%; background:var(--line); font-size:10px; cursor:help; }
.dai-ev-btns{ display:flex; gap:8px; align-items:center; margin:10px 0; flex-wrap:wrap; }
.dai-ev-btns .spacer{ flex:1; }
.dai-ev-inc{ margin-top:14px; padding:10px 12px; border:1px dashed #e0c58a; background:#fffbf2; border-radius:var(--radius-sm); }
.dai-ev-inc h4, .dai-ev-setup h4{ margin:0 0 4px; font-size:14px; }
.dai-ev-incrow{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:4px 0; font-size:13px; border-top:1px solid #f3e6c8; }
.dai-ev-incrow:first-of-type{ border-top:0; }
.dai-ev-setup{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
@media (max-width:700px){ .dai-ev-t th:nth-child(3), .dai-ev-t td:nth-child(3){ display:none; } }
/* 🔧 Fit des pièces du site */
.fit-sec{border-top:1px solid var(--line);padding:12px 0}
.fit-stats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.fit-chip{background:var(--line);border-radius:999px;padding:3px 10px;font-size:13px}
.fit-chip.ok{background:#dcf5e3}.fit-chip.warn{background:#fff1c7}.fit-chip.dim{opacity:.7}
.fit-line{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.fit-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.fit-tab{border:1px solid var(--line-strong);background:#fff;border-radius:999px;padding:5px 12px;cursor:pointer;font:inherit;font-size:13px}
.fit-tab.on{background:#1f2430;color:#fff;border-color:#1f2430}
.fit-q{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line-strong);border-radius:6px;font:inherit;margin-bottom:8px}
.fit-rows{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:6px}
.fit-row{display:flex;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line);align-items:flex-start}
.fit-row img,.fit-noimg{width:52px;height:52px;object-fit:contain;background:#f4f4f4;border-radius:4px;flex:0 0 auto}
.fit-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fit-title{font-weight:600;font-size:14px}.fit-title a{color:inherit}
.fit-src{font-size:12px;color:var(--muted)}.fit-src code{font-size:12px;background:#f4f4f4;padding:1px 4px;border-radius:3px}
.fit-ok{color:#17803d;font-size:13px}.fit-warn{color:#9a6b00;font-size:13px}
.fit-corr{display:flex;gap:6px}.fit-corr input{flex:1;padding:6px 8px;border:1px solid var(--line-strong);border-radius:5px;font:inherit;font-size:13px}
.fit-ves{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 10px;font-size:13px}
.fit-epc{font-size:12px;background:#f3f6fb;border:1px solid #dde5f0;border-radius:5px;padding:6px 8px;margin-top:2px}
.fit-epc code{font-size:12px;background:#fff;padding:1px 4px;border-radius:3px}
.fit-sel{display:inline-flex;gap:4px;align-items:center;margin-left:8px;font-weight:600;color:#1f4f99}
.fit-tab.danger{border-color:#e3a3a3}.fit-tab.danger.on{background:#b3261e;border-color:#b3261e}
.fit-tesla{margin:8px 0;padding:9px 11px;border-radius:9px;background:#f2f8f3;border:1px solid #cfe6d4;font-size:13px;line-height:1.5}
.fit-tfiche{margin:6px 0;padding:6px 10px;border-radius:8px;background:#f6f7fb;border:1px solid #e3e6ef;font-size:12.5px}
.fit-tfiche summary{cursor:pointer;line-height:1.5}
.fit-tfiche ul{margin:3px 0 3px 18px;padding:0}
.fit-t-l{margin-top:4px}
.fit-t-on,.fit-t-off{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:99px;vertical-align:1px}
.fit-t-on{background:#e3f4e8;color:#1d7a3a}.fit-t-off{background:#f1f1f4;color:#7a7a88}
.fit-t-alt{display:inline-block;margin:2px 6px 2px 0;padding:1px 7px;border-radius:6px;background:#fff;border:1px solid #e3e6ef;white-space:nowrap}
.dai-apps{margin:6px 0 10px;padding:8px 12px;border-radius:9px;background:#f6f7fb;border:1px solid #e3e6ef;font-size:13px}
.dai-pcount{font-size:12px;color:#555;margin:4px 0}
.dai-appslist{max-height:60vh;overflow:auto}
.dai-apptab{width:100%;border-collapse:collapse;font-size:13px}
.dai-apptab td{padding:4px 6px;border-bottom:1px solid #eee;vertical-align:top}
.dai-test-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0 12px}
.dai-test-bar select{min-height:38px;border-radius:8px;border:1px solid #d7dae3;padding:0 8px}
.dai-seg{display:inline-flex;border:1px solid #d7dae3;border-radius:9px;overflow:hidden}
.dai-seg button{border:0;background:#fff;padding:8px 16px;font-weight:600;cursor:pointer}
.dai-seg button.on{background:#E83936;color:#fff}
.dai-test-out{max-height:64vh;overflow:auto}
.dai-test-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.dai-test-card{border:1px solid #e3e6ef;border-radius:10px;padding:10px 12px;background:#fafbfd;font-size:13px}
.dai-test-card h4{margin:0 0 6px;font-size:13px}
.dai-test-card p{margin:4px 0}
.dai-test-h{margin:14px 0 6px;font-size:14px}
.dai-test-t{width:100%;border-collapse:collapse;font-size:12.5px}
.dai-test-t th{text-align:left;font-size:11px;color:#666;border-bottom:1px solid #ddd;padding:5px}
.dai-test-t td{border-bottom:1px solid #eee;padding:6px 5px;vertical-align:top}
.dai-test-t td img{width:42px;height:42px;object-fit:contain;float:left;margin-right:6px}
.dai-test-t tr.warn td{background:#fff8f6}

/* ---- 🛒 Boutique en ligne (accueil : roues et pneus · pièces Tesla · chercheur) ---- */
.btq-page .s-note { margin: 0 0 14px; }
.btq-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.btq-tuile { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.btq-tuile:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.btq-ic { font-size: 30px; line-height: 1; }
.btq-titre { font-size: 18px; font-weight: 700; }
.btq-sous { font-size: 13px; color: var(--muted); }
.btq-chiffres { font-size: 13px; background: var(--accent-soft); border-radius: 8px; padding: 6px 8px; min-height: 1.5em; }
.btq-warn { color: #b45309; }
.btq-etapes { margin: 4px 0 0 18px; padding: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.btq-go { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 14px; }
.btq-reglages { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; }
.fit-sec h4 { margin: 0 0 8px; }

/* Classement des autres marques (chercheur) */
.fit-uni { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; margin-top: 6px; }
.fit-uni-row { display: grid; grid-template-columns: 1fr 190px 190px; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.fit-uni-row.fit-uni-ok { border-color: #1a8f3c; background: #eefaf1; }
.fit-uni-t { font-size: 13px; }
.fit-uni-row select { font-size: 13px; padding: 4px 6px; }
@media (max-width: 700px) { .fit-uni-row { grid-template-columns: 1fr 1fr; } .fit-uni-t { grid-column: 1 / -1; } }

/* ---- 🔧 Service & installation (demandes du site) ---- */
.svc-tabs { margin-bottom: 12px; }
.svc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.svc-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.svc-card.svc-new { border-left-color: var(--red); }
.svc-card.svc-cur { border-left-color: #d29a1b; }
.svc-card.svc-done { border-left-color: #1a8f3c; opacity: .9; }
.svc-card.svc-arch { opacity: .65; }
.svc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.svc-type { font-weight: 700; }
.svc-st { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); }
.svc-g { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 14px; line-height: 1.5; }
.svc-svc { font-weight: 700; }
.svc-desc { white-space: pre-wrap; background: var(--bg); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.svc-pieces { margin: 0; padding-left: 18px; font-size: 14px; }
.svc-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.svc-photos img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.svc-note { width: 100%; min-height: 38px; box-sizing: border-box; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.svc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-rdv { border-top: 1px dashed var(--line); padding-top: 10px; }
.svc-rdv-g { display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); gap: 10px; }
.svc-form { max-width: 860px; }
.svc-form h4 { margin: 18px 0 8px; }
.svc-form textarea { width: 100%; box-sizing: border-box; font: inherit; }
.svc-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.svc-g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.svc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; margin-bottom: 10px; }
@media (max-width: 700px) { .svc-g, .svc-g2, .svc-g3, .svc-rdv-g { grid-template-columns: 1fr; } }

/* Français du chercheur */
.fit-trad { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 14px; margin: 6px 0; }
.fit-trad-l { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; font-size: 13px; }
.fit-trad-l input { font-size: 13px; padding: 4px 6px; }
/* 🔎 Vérification des pièces Tesla dans le chercheur (v2.89.0) */
.fit-stats .fit-chip { cursor: pointer; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12px; }
.fit-stats .fit-chip.on { background: var(--ink, #111); color: #fff; border-color: var(--ink, #111); }
.fit-ta { display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow-y: auto; margin-top: 6px; }
.fit-ta-row { display: grid; grid-template-columns: 1.4fr 1.2fr 1.3fr; gap: 8px; align-items: start; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; }
.fit-ta-row.ta-absent { border-left: 4px solid #c62c2a; }
.fit-ta-row.ta-autres { border-left: 4px solid #e0a100; }
.fit-ta-row.ta-ok { border-left: 4px solid #1a8f3c; }
.fit-ta-row.ta-hors_ligne { opacity: .7; }
.fit-ta-row.fit-uni-ok { background: #eefaf1; }
.fit-ta-t a { color: inherit; }
.fit-ta-a { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fit-ta-a select, .fit-ta-a input { font-size: 12px; padding: 4px 6px; max-width: 100%; }
.fit-ta-a input { flex: 1 1 200px; }
@media (max-width: 800px) { .fit-ta-row { grid-template-columns: 1fr; } }
/* 💲 Prix des pièces Tesla usagées vs neuf (v2.91.0) */
.px-reg { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.px-reg input { width: 70px; font-size: 15px; padding: 4px 6px; }
.px-carte { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px 16px; margin: 12px 0; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.px-pos { font-size: 13px; color: var(--muted, #666); margin-bottom: 10px; }
.px-c-in { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: start; }
.px-img { width: 160px; height: 160px; object-fit: contain; border-radius: 8px; background: #f4f4f4; }
.px-titre { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.px-titre a { color: inherit; }
.px-t { border-collapse: collapse; width: 100%; font-size: 14px; }
.px-t td { padding: 6px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.px-t td:first-child { color: var(--muted, #666); width: 210px; }
.px-sug { font-size: 18px; color: #1a8f3c; }
.px-haut { color: #c62c2a; font-weight: 600; }
.px-bas { color: #b07800; font-weight: 600; }
.px-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.px-act input { width: 100px; font-size: 16px; padding: 6px 8px; font-weight: 700; }
.px-fini { font-size: 16px; padding: 18px; background: #eefaf1; border-radius: 10px; }
.px-file { margin-top: 12px; }
.px-file summary { cursor: pointer; font-weight: 600; }
.px-rows { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; margin-top: 8px; }
.px-row { display: grid; grid-template-columns: 1fr auto 110px; gap: 10px; align-items: center; text-align: left; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: inherit; font-size: 13px; cursor: pointer; }
.px-row.on { border-color: var(--ink, #111); }
.px-r-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .px-c-in { grid-template-columns: 1fr; } .px-img { width: 100%; height: 180px; } .px-t td:first-child { width: auto; } .px-row { grid-template-columns: 1fr; } }
/* Pastilles rouges en direct dans le menu + avis « nouveau » (v2.92.0) */
.nav-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 6px; margin-left: 6px; border-radius: 999px;
  background: #E83936; color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1; vertical-align: 1px; box-shadow: 0 0 0 2px #fff; }
.nav-pill[hidden] { display: none; }
.mainnav button.nav-has { color: inherit; font-weight: 700; }
/* Menu mobile (fond foncé) : texte blanc quand il y a du nouveau — « inherit » le rendait foncé, donc invisible (v3.12.3) */
.nav-drawer-item.nav-has { color: #fff; font-weight: 700; }
.nav-drawer-item .nav-pill { box-shadow: 0 0 0 2px #1e1e2c; }
.nav-pulse { animation: navPulse 1.2s ease-out 3; }
@keyframes navPulse { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(232,57,54,.6); } 70% { box-shadow: 0 0 0 2px #fff, 0 0 0 10px rgba(232,57,54,0); } 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(232,57,54,0); } }
.live-avis { position: fixed; top: 70px; right: 16px; z-index: 9000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.live-avis-it { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #f1c3c2; border-left: 4px solid #E83936;
  border-radius: 10px; padding: 9px 10px 9px 14px; box-shadow: 0 6px 22px rgba(0,0,0,.14); font-size: 14px; animation: liveIn .25s ease-out; }
.live-x { border: 0; background: none; font-size: 14px; cursor: pointer; color: #888; padding: 2px 4px; }
@keyframes liveIn { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 600px) { .live-avis { left: 12px; right: 12px; top: 60px; } }
/* 📦 Création de pièces par lots + photos détourées (v2.94.0) — pensé pour le téléphone */
.lp-det { font-size: 13px; padding: 8px 12px; border-radius: 8px; background: #eef4ff; margin: 4px 0 10px; }
.lp-det.warn { background: #fff4e0; }
.lp-lots { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 10px; }
.lp-lot { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font: inherit; cursor: pointer; }
.lp-lot b { font-size: 16px; } .lp-lot span { font-size: 13px; color: var(--muted, #666); }
.lp-veh { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 12px 14px; margin: 10px 0; }
.lp-veh h3 { margin: 0 0 8px; font-size: 15px; }
.lp-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; }
.lp-g .f { margin: 0; } .lp-g .lp-large { grid-column: 1 / -1; }
.lp-g input, .lp-g select, .lp-g textarea { font-size: 16px; }   /* 16 px : l'iPhone ne zoome pas */
.lp-fit { font-size: 14px; margin-top: 8px; }
.lp-pieces { display: flex; flex-direction: column; gap: 8px; }
.lp-piece { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.lp-piece.on { border-color: var(--ink, #111); }
.lp-p-tete { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.lp-p-tete img, .lp-p-vide { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; flex: 0 0 auto;
  background: repeating-conic-gradient(#e9e9ee 0 25%, #fff 0 50%) 0 / 14px 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.lp-p-t { font-size: 14px; line-height: 1.4; }
.lp-ok { color: #1a8f3c; font-weight: 600; }
.lp-p-corps { padding: 0 12px 12px; }
.lp-phs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.lp-ph { position: relative; width: 110px; height: 110px; border-radius: 10px; border: 1px solid var(--line); overflow: hidden;
  background: repeating-conic-gradient(#e9e9ee 0 25%, #fff 0 50%) 0 / 16px 16px; }
.lp-ph.prem { border: 2px solid #E83936; }
.lp-ph img { width: 100%; height: 100%; object-fit: contain; }
.lp-ph-b { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; background: rgba(0,0,0,.45); }
.lp-ph-b button, .lp-ph-b span { border: 0; background: transparent; color: #fff; font-size: 16px; padding: 4px 8px; cursor: pointer; }
.lp-ph-b span { color: #ffd34d; }
.lp-ph-add { width: 110px; height: 110px; border: 2px dashed #c8c8d0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-size: 26px; color: #555; }
.lp-ph-add span { font-size: 12px; text-align: center; }
.lp-ph-add input { display: none; }
.lp-encours { font-size: 14px; padding: 8px 10px; background: #fff8e6; border-radius: 8px; margin-bottom: 8px; }
.lp-bas { margin-top: 12px; }
@media (max-width: 600px) { .lp-g { grid-template-columns: 1fr 1fr; } .lp-ph, .lp-ph-add { width: 96px; height: 96px; } }

/* 🔩 Catalogue GM (v2.96.0) */
.gm-q{display:flex;gap:8px;margin:6px 0 10px}.gm-q input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit}
.gm-tab{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gm-t{width:100%;border-collapse:collapse;font-size:13px}.gm-t th{text-align:left;font-weight:600;border-bottom:2px solid var(--line);padding:6px}
.gm-t td{vertical-align:top;border-bottom:1px solid var(--line);padding:6px}.gm-t .gm-num{white-space:nowrap;text-align:right}
@media (max-width:700px){.gm-t{font-size:12px}.gm-t td,.gm-t th{padding:4px}}

/* 🧩 Transbec (v2.97.0) */
.tb-regl{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:8px 0}.tb-regl input[type=number]{width:70px;padding:4px 6px}
.tb-act{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.tb-img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:6px}

/* 🔄 Mettre le site à jour (v2.98.0) */
.btq-maj{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:10px 0 14px;background:var(--surface,#fff)}
.btq-maj-act{display:flex;gap:8px;flex-wrap:wrap}.btq-maj .s-note{flex-basis:100%;margin:0}

/* 🚗 Liste des VÉ Transbec (v2.99.1) */
.tb-ve input:not([type=checkbox]){width:100%;min-width:60px;padding:3px 5px;border:1px solid var(--line);border-radius:6px;font:inherit}.tb-ve input[type=number]{width:72px}
/* 📦 Création de pièces : recherche par n° (site / catalogue Tesla), prix Tesla, poids et dimensions (v2.99.3) */
.lp-sugg { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px; background: var(--accent-soft); display: flex; flex-direction: column; gap: 6px; }
.lp-s-h { font-weight: 600; font-size: 13px; }
.lp-s-h.ok { color: #1d7a3a; }
.lp-s-it { display: flex; gap: 8px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; }
.lp-s-it > img, .lp-s-it > .lp-p-vide { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; flex: 0 0 auto; }
.lp-s-t { flex: 1; min-width: 0; font-size: 14px; }
.lp-s-t b { overflow-wrap: anywhere; }
.lp-s-b, .lp-s-mod { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.lp-s-b input { width: 64px; font-size: 16px; }
.lp-s-mod label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.lp-s-mod input { width: 110px; font-size: 16px; }
.lp-s-msg { font-size: 13px; margin-top: 4px; }
.lp-s-tesla { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 2px; }
.lp-s-tesla:hover { border-color: var(--accent); }
.lp-ptesla:empty { display: none; }
.lp-ptesla { font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lp-chip { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 13px; cursor: pointer; color: inherit; }
.lp-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.lp-dims { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 600px) { .lp-dims { grid-template-columns: 1fr 1fr; } }
.lp-nouv { background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.lp-nouv h3 { margin: 0; font-size: 16px; }
.lp-nouv input { font-size: 18px; letter-spacing: .5px; width: 100%; }
.lp-src { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--accent-soft); border: 1px solid var(--line-strong); }
.lp-s-go { font-size: 13px; font-weight: 600; color: var(--accent); }
/* 📥 Demandes : recherche + choix texto (v2.99.5) */
.svc-q { flex: 1 1 260px; min-width: 200px; font-size: 15px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.svc-tel { display: flex; flex-direction: column; gap: 8px; padding: 6px; }
.svc-tel h3 { margin: 0; }
.svc-tel .btn { justify-content: center; text-align: center; }
/* 🗄 PROGi dans Création de pièces (v2.99.7) */
.lp-progi { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.lp-progi input { font-size: 16px; text-transform: uppercase; }
.lp-types { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-etiq { font-size: 18px; }
.lp-progi { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; }
.lp-progi.ok { border-style: solid; border-color: #1d7a3a; }
.lp-progi-off { font-size: 14px; background: var(--accent-soft); border-radius: var(--radius-sm); padding: 8px 10px; }
.lp-existe { font-size: 14px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 8px 10px; margin: 8px 0; }
.lp-existe.ok { border-left-color: #2e9d57; }
/* Logo PROGi sur les boutons (v3.1.0) */
.lp-plogo { height: 1.15em; width: auto; vertical-align: -0.2em; border-radius: 3px; }
.btn-sm .lp-plogo { height: 1em; }
/* ⚙ Formats d'expédition ClickShip (v3.2.0) */
.cs-fmt ol { margin: 4px 0 10px 18px; padding: 0; }
.cs-scroll { overflow-x: auto; margin-bottom: 10px; }
.cs-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.cs-tab th { text-align: left; font-weight: 600; padding: 4px; white-space: nowrap; }
.cs-tab td { padding: 3px 4px; }
.cs-tab input:not([type=checkbox]) { width: 100%; min-width: 60px; box-sizing: border-box; }
.cs-tab td:first-child input { min-width: 180px; }
.cs-tab .cs-c { text-align: center; }
.cs-tab .cs-act { white-space: nowrap; }
.cs-tab .cs-sep th { padding-top: 12px; border-top: 1px solid var(--border, #ddd); }
/* ---------- Batteries VÉ (v3.4.0) : navigation par familles, icônes linéaires, sans émoticônes ---------- */
.ico { flex: 0 0 auto; display: inline-block; vertical-align: -3px; }
.bve-ib { display: inline-flex; align-items: center; gap: 7px; }
.bt-titre { display: flex; align-items: center; gap: 8px; }
.bt-titre .ico { color: var(--muted); }
.bt-loc .ico, .bt-prov .ico { vertical-align: -2px; margin-right: 3px; }
.bt-verdict { display: inline-flex; align-items: center; gap: 7px; }
.bt-v-pt { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

.bve-page { gap: 0; }
.bve-top { margin-bottom: 16px; }
.bve-fil { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.bve-fil button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0; font: inherit; color: var(--muted); cursor: pointer; }
.bve-fil button:hover { color: var(--ink); text-decoration: underline; }
.bve-fil b { color: var(--ink); font-weight: 600; }
.bve-titre { display: flex; align-items: center; gap: 14px; }
.bve-logo { width: 46px; height: 46px; border-radius: 12px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: 0 0 auto; box-shadow: inset 0 -3px 0 var(--red); }
.bve-titre h1 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.bve-titre p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }

.bve-shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 228px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 20px; }
.bve-nav { align-self: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 8px; display: grid; gap: 12px; }
.bve-nav-g { display: grid; gap: 2px; }
.bve-nav-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 4px 10px 6px; }
.bve-tab { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 9px 10px; border-radius: var(--radius-sm); font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); text-align: left; cursor: pointer; position: relative; }
.bve-tab .ico { color: var(--muted); }
.bve-tab:hover { background: var(--bg); }
.bve-tab.on { background: var(--accent-soft); font-weight: 650; }
.bve-tab.on .ico { color: var(--accent); }
.bve-tab.on::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); }
.bve-corps { padding-bottom: 30px; }
.bve-sect { padding: 2px 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.bve-sect h2 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.bve-sect p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 860px) {
  .bve-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
  .bve-nav { display: flex; gap: 4px; overflow-x: auto; padding: 6px; -webkit-overflow-scrolling: touch; }
  .bve-nav-g { display: flex; gap: 2px; }
  .bve-nav-g + .bve-nav-g { border-left: 1px solid var(--line); padding-left: 4px; }
  .bve-nav-t { display: none; }
  .bve-tab { white-space: nowrap; width: auto; }
  .bve-tab.on::before { left: 10px; right: 10px; top: auto; bottom: 0; width: auto; height: 2px; border-radius: 2px; }
}

/* tableau de bord */
.bve-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 900px) { .bve-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bve-tuile { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; display: grid; gap: 2px; color: var(--ink); font: inherit; transition: border-color .15s, box-shadow .15s; }
.bve-tuile:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.bve-tuile-i { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 8px; }
.bve-tuile b { font-size: 28px; line-height: 1.05; font-weight: 700; font-variant-numeric: tabular-nums; }
.bve-tuile > span:last-child { font-size: 13px; color: var(--muted); }
.bve-tuile.rouge .bve-tuile-i { background: var(--red-soft); color: var(--red-ink); } .bve-tuile.rouge b { color: var(--red-ink); }
.bve-tuile.vert .bve-tuile-i { background: #e3f4e8; color: #1d7a3a; }
.bve-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bve-mini button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.bve-mini button:hover { color: var(--ink); border-color: var(--line-strong); }
.bve-mini b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bve-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .bve-2col { grid-template-columns: 1fr; } }
.bve-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.bve-box h3 { margin: 0 0 12px; font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.bve-box-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bve-box-h h3 { margin: 0; }
.bve-compte { font-size: 12px; font-weight: 700; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 8px; }
.bve-alertes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.bve-alertes button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); background: var(--surface); padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 14px; color: var(--ink); }
.bve-alertes button:hover { border-color: var(--line-strong); background: var(--bg); }
.bve-alertes button span { flex: 1; }
.bve-alertes button .ico { color: var(--muted); }
.bve-alertes i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: 0 0 auto; }
.bve-alertes li.rouge i { background: var(--red); } .bve-alertes li.orange i { background: #d98b00; }
.bve-alertes li.rouge button { border-color: #f5c2c0; }
.bve-ok { display: flex; align-items: center; gap: 8px; color: #1d7a3a; font-weight: 600; margin: 0 0 14px; }
.bve-vert { color: #1d7a3a; font-weight: 600; }
.bve-verdicts { display: grid; gap: 12px; }
.bve-v-l { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 5px; }
.bve-v-l b { font-variant-numeric: tabular-nums; }
.bve-barre { height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.bve-barre i { display: block; height: 100%; border-radius: 999px; background: var(--muted); }
.v-reemploi .bve-barre i { background: #1d7a3a; } .v-remanufacture .bve-barre i { background: #2d5fb0; } .v-recyclage .bve-barre i { background: #8a8fa0; } .v-quarantaine .bve-barre i { background: var(--red); } .v-sans_verdict .bve-barre i { background: var(--line-strong); }
.bve-verdict { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); }
.bve-verdict i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.bve-verdict.v-reemploi i { background: #1d7a3a; } .bve-verdict.v-remanufacture i { background: #2d5fb0; } .bve-verdict.v-recyclage i { background: #8a8fa0; } .bve-verdict.v-quarantaine i { background: var(--red); }
.bve-methode { padding: 0; }
.bve-methode summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; cursor: pointer; font-weight: 650; font-size: 15px; }
.bve-methode summary::-webkit-details-marker { display: none; }
.bve-methode summary > span { display: flex; align-items: center; gap: 9px; }
.bve-methode summary > span .ico { color: var(--accent); }
.bve-methode .bve-chev { color: var(--muted); transition: transform .15s; }
.bve-methode[open] .bve-chev { transform: rotate(90deg); }
.bve-barrieres { margin: 0; padding: 0 18px 16px 40px; display: grid; gap: 10px; font-size: 14px; }
.bve-barrieres li { padding-left: 4px; }
.bve-barrieres li b { display: block; }
.bve-barrieres li span { color: var(--muted); font-size: 13px; }

/* rappels */
.bve-outils { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.bve-outils input[type=search] { flex: 1 1 260px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 12px; font-size: 14px; background: var(--surface); }
.bve-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.bve-spacer { flex: 1; }
.bve-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bve-chips .lp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; }
.bve-pt { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.bve-pt.rouge { background: var(--red); } .bve-pt.orange { background: #d98b00; }
.bve-aide { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.bve-aide summary { cursor: pointer; color: var(--ink); font-weight: 600; width: max-content; }
.bve-aide p { margin: 6px 0 0; max-width: 880px; }
.bve-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.bve-vins, .bve-packs { display: grid; gap: 8px; }
.bve-vin, .bve-pack { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 14px; cursor: pointer; display: grid; gap: 6px; font: inherit; font-size: 14px; color: var(--ink); position: relative; transition: border-color .15s, box-shadow .15s; }
.bve-vin { padding-right: 40px; }
.bve-vin:hover, .bve-pack:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.bve-vin-go { position: absolute; right: 12px; top: 50%; margin-top: -8px; color: var(--muted); }
.bve-packs { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.bve-pack > span { font-size: 13px; color: var(--muted); }
.bve-pack-l { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bve-vin-t span { color: var(--muted); margin-left: 8px; }
.bve-vin-s, .bve-vin-e { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bve-src { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.bve-badge { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 2px 8px; background: var(--bg); color: var(--muted); justify-self: start; }
.bve-badge.rouge { background: var(--red-soft); color: var(--red-ink); } .bve-badge.orange { background: #fff4dc; color: #8a5a00; } .bve-badge.vert { background: #e3f4e8; color: #1d7a3a; } .bve-badge.gris { background: var(--bg); color: var(--muted); }
.bve-org { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; padding: 2px 6px; }
.bve-org.tc { background: #fde3e2; color: #a5201e; } .bve-org.us { background: #e5ecf8; color: #23407a; }
.bve-rappel { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; background: var(--surface); }
.bve-rappel.ht { border-left: 3px solid var(--red); }
.bve-r-t { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bve-r-c { font-size: 12px; color: var(--muted); margin: 6px 0; text-transform: uppercase; letter-spacing: .03em; }
.bve-rappel details summary { cursor: pointer; font-size: 14px; }
.bve-rappel details p { font-size: 13px; white-space: pre-line; }
.bve-r-s { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.bve-r-s select, .bve-r-s input { height: 38px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 8px; font-size: 13px; background: var(--surface); }
.bve-r-s input { flex: 1 1 260px; }

/* pack choisi, garde, vente */
.bve-entete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
.bve-entete > div { flex: 1; min-width: 200px; }
.bve-entete-i { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.bve-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bve-table th, .bve-table td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; vertical-align: top; }
.bve-table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.bve-edit input { width: 100%; height: 34px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 6px; }
.bve-x { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; color: var(--muted); }
.bve-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 12px; }
.bve-form .bve-large { grid-column: 1 / -1; }
.bve-tmd { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin: 12px 0; display: grid; gap: 7px; }
.bve-tmd legend { font-weight: 650; padding: 0 4px; font-size: 14px; }
.bve-tmd[hidden] { display: none; }
.bve-chaine { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.bve-chaine li { border-left: 2px solid var(--line-strong); padding-left: 12px; }
.bve-etat h3 .ico { flex: 0 0 auto; }
.bve-etat.pret h3 { color: #1d7a3a; } .bve-etat.bloque h3 { color: var(--red-ink); }
.bve-check { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.bve-check li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.bve-check li > div { display: grid; gap: 2px; }
.bve-check li > div span { font-size: 13px; color: var(--muted); }
.bve-ck { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: #fff; }
.bve-check li.ok .bve-ck { background: #1d7a3a; } .bve-check li.ko .bve-ck { background: var(--red); }
.bve-check li.ko { border-color: #f5c2c0; background: #fff8f7; }
.bve-vente { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 8px 0; }
.bve-pre { white-space: pre-line; }
.bve-integ { margin-top: 12px; word-break: break-all; }
.bve-fiche { padding: 4px 18px 16px; }
.bve-fiche .bt-head { padding: 12px 0 6px; }
.bve-lien { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.bve-lien a { word-break: break-all; }
.bve-invalides { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.bve-pied { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ---------- Suggestions d'achat (v3.5.0) ---------- */
.ach-corps { padding-bottom: 30px; }
.ach-regl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
.ach-regl .f { margin: 0; }
.ach-regl select, .ach-regl input { width: 100%; height: 38px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 8px; font-size: 14px; background: var(--surface); }
.ach-unite { display: flex; align-items: center; gap: 6px; }
.ach-unite i { font-style: normal; font-size: 13px; color: var(--muted); }
.ach-regl-act { display: flex; justify-content: flex-end; grid-column: 4 / 5; }
.ach-regl .f > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ach-regl-act .btn { width: 100%; justify-content: center; }
.ach-donnees { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); margin: 0 2px 10px; }
.ach-donnees .ico { margin-top: 1px; }
.ach-donnees b { color: var(--ink); }
.ach-notes { border: 1px solid #f1d9a6; background: #fffaf0; border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 14px; font-size: 13px; }
.ach-notes p { margin: 3px 0; }
.ach-tuiles .bve-tuile.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bve-tuile.orange .bve-tuile-i { background: #fff4dc; color: #8a5a00; } .bve-tuile.orange b { color: #8a5a00; }
.ach-resume { font-size: 13px; color: var(--muted); margin: 4px 2px 8px; }
.ach-resume b { color: var(--ink); }
.ach-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.ach-tr { display: grid; grid-template-columns: minmax(0, 1fr) 78px 82px 74px 92px 118px; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums; }
.ach-tr .r { text-align: right; }
.ach-th { border-top: 0; background: var(--bg); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 9px 14px; }
.ach-tr small { display: block; font-size: 11px; color: var(--muted); }
.ach-piece { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ach-piece img, .ach-noimg { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: var(--bg); border: 1px solid var(--line); }
.ach-noimg { display: grid; place-items: center; color: var(--muted); }
.ach-piece > div { min-width: 0; }
.ach-piece b { display: block; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ach-piece > div > span { font-size: 12px; color: var(--muted); }
.ach-piece a { color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
.ach-piece a:hover { color: var(--ink); }
.ach-piece em { font-style: normal; color: #8a5a00; }
.ach-zero { color: var(--red-ink); font-weight: 700; }
.ach-souvent { color: var(--red-ink); font-weight: 700; }
.ach-sugg b { font-size: 17px; }
.ach-statut { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 8px; background: var(--bg); color: var(--muted); white-space: nowrap; }
.ach-statut i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ach-statut.rouge { background: var(--red-soft); color: var(--red-ink); } .ach-statut.orange { background: #fff0d6; color: #8a5a00; }
.ach-statut.jaune { background: #fdf7d8; color: #6f5d00; } .ach-statut.vert { background: #e3f4e8; color: #1d7a3a; }
.ach-vide { display: flex; gap: 10px; align-items: flex-start; }
.ach-vide p { margin: 2px 0 0; }
.ach-fam { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 18px; }
.ach-fam button { text-align: left; border: 0; background: none; padding: 6px 4px; border-radius: 6px; cursor: pointer; font: inherit; color: var(--ink); }
.ach-fam button:hover { background: var(--bg); }
.ach-fam-l { display: grid; gap: 1px; font-size: 13px; margin-bottom: 6px; }
.ach-fam-l span { color: var(--muted); font-size: 12px; }
.ach-fam-l em { font-style: normal; color: var(--red-ink); font-weight: 600; }
.ach-fam .bve-barre i { background: var(--accent); }
@media (max-width: 900px) {
  .ach-th { display: none; }
  .ach-tr { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; }
  .ach-tr > div[data-l="État"] { grid-column: 1 / -1; }
  .ach-tr .ach-piece { grid-column: 1 / -1; }
  .ach-tr > div[data-l] { text-align: left; }
  .ach-tr > div[data-l]::before { content: attr(data-l); display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .ach-regl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ach-regl-act { grid-column: 1 / -1; }
}

/* Sélection de VIN à retirer (v3.5.1) */
.bve-vin-l { display: flex; align-items: stretch; gap: 0; }
.bve-vin-l .bve-vin { flex: 1; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bve-coche { width: 44px; flex: 0 0 auto; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); cursor: pointer; color: var(--muted); }
.bve-coche input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); }
.bve-vin-l.sel .bve-coche, .bve-vin-l.sel .bve-vin { background: var(--accent-soft); border-color: var(--line-strong); }
.bve-selbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 10px; box-shadow: var(--shadow); font-size: 14px; }
.bve-selbar[hidden] { display: none; }
.bve-selbar .btn { height: 34px; padding: 0 10px; }
.bve-selbar > span:first-child { margin-right: 4px; }
.btn.bve-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.bve-danger:hover { background: var(--red-ink); }
.btn.bve-danger:disabled { opacity: .45; cursor: default; }
.lp-ph-site { background: none; font: inherit; font-size: 26px; }
.lp-ph-site:disabled { opacity: .5; cursor: default; }
.lp-phsite-msg { font-size: 13px; margin: 2px 0 8px; }
.lp-phsite-msg:empty { display: none; }
/* Étiquette PROGi dans la fiche de batterie (v3.7.0) */
.bt-progi { grid-template-columns: 1fr; }
.bt-progi-l { display: flex; gap: 6px; }
.bt-progi-l input { flex: 1; min-width: 0; }
.bt-progi-l .btn { height: auto; min-height: 38px; }
.bt-progi-res { font-size: 13px; margin-top: -2px; }
.bt-nouv { padding: 4px 18px 16px; display: grid; gap: 10px; }
.bt-photos { margin: 4px 0 10px; }
.bt-ph-list { display: flex; gap: 6px; flex-wrap: wrap; }
.bt-ph { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); display: block; }
.bt-ph img { width: 100%; height: 100%; object-fit: cover; }
.bt-ph span { position: absolute; left: 3px; bottom: 3px; font-size: 9px; font-weight: 700; background: #1f5fa8; color: #fff; border-radius: 3px; padding: 0 4px; }
.bt-ph-vide { font-size: 12px; }
.bt-ph-act { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; font-size: 13px; }
.bt-notes input { padding: 7px 10px; border: 1px solid #d7dae3; border-radius: 8px; font-size: 13px; font-family: inherit; }

/* ✍ Vente / installation de batterie signée par le client (v3.9.0) */
.vb-card .vb-intro { color: #555; font-size: 14px; margin: 0 0 12px; }
.vb-h2 { font-size: 15px; margin: 20px 0 8px; text-transform: uppercase; letter-spacing: .04em; color: #444; }
.vb-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.vb-tab th { text-align: left; color: #777; font-weight: 500; width: 34%; padding: 7px 8px 7px 0; vertical-align: top; border-bottom: 1px solid #f0f0f0; }
.vb-tab td { padding: 7px 0; border-bottom: 1px solid #f0f0f0; }
.vb-excl { margin-top: 12px; background: #fff8e8; border: 1px solid #f0dca8; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #6b5212; }
.vb-excl b { display: block; margin-bottom: 4px; }
.vb-div .dv-waiver-ack { font-size: 14px; margin-bottom: 10px; }
.vb-pied { font-size: 12px; color: #888; text-align: center; margin: 6px 0 0; }
.bve-signature { border-left: 4px solid #1f8a4c; }
.bve-signature.attente { border-left-color: #c98a12; }

/* 🔁 Même n° OEM déjà dans PROGi (v3.10.0) */
.lp-meme { background: #f3f8fc; border: 1px solid #d5e5f2; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.lp-meme-t { margin-bottom: 6px; }
.lp-meme-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.lp-meme-l > span { color: #667; min-width: 74px; }
.lp-meme .lp-ok { color: #1f8a4c; font-weight: 600; }

/* 🚗 Nouveau lot depuis le NIV (v3.11.0) */
.lp-vin-res { min-height: 44px; font-size: 14px; display: grid; gap: 4px; margin: 4px 0 10px; }
.lp-vin-ok b { font-size: 16px; }
.lp-vin-deja { background: #fff8e8; border: 1px solid #f0dca8; border-radius: 8px; padding: 6px 8px; }
.lp-gen-choix { display: grid; gap: 4px; background: #f3f8fc; border: 1px solid #d5e5f2; border-radius: 8px; padding: 8px 10px; }

/* 🚗 Identité du lot : NIV en évidence, véhicule, dossier PROGi (v3.12.1) */
.lp-id-vin { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 19px; letter-spacing: .06em; color: var(--ink, #1d1d2b); line-height: 1.2; word-break: break-all; }
.lp-id-vin small { font-family: inherit; font-size: 11px; letter-spacing: .08em; color: var(--muted, #888); margin-right: 4px; vertical-align: 2px; }
.lp-id-vin b { font-size: inherit; color: #c0392b; }
.lp-id-vin.grand { font-size: 24px; }
.lp-id-vin.sans { font-family: inherit; font-size: 14px; color: var(--muted, #888); letter-spacing: 0; }
.lp-id-veh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lp-lot .lp-id-veh b { font-size: 17px; color: #1a6fd1; }
.lp-lot .lp-id-progi, .lp-id-progi { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: #1f4f80; background: #eaf3fb; border: 1px solid #cfe2f3; border-radius: 999px; padding: 2px 9px 2px 4px; }
.lp-id-progi .lp-plogo { height: 14px; }
.lp-lot .lp-id-progi.off, .lp-id-progi.off { color: #8a6d1a; background: #fff8e8; border-color: #f0dca8; font-weight: 500; }
.lp-lot .lp-lot-meta, .lp-ident .lp-lot-meta { font-size: 13px; color: var(--muted, #666); }
.lp-lot.a-vin { border-left: 4px solid #c0392b; }
.lp-ident { display: grid; gap: 6px; padding: 12px 14px; margin: 6px 0 12px; border: 1px solid var(--line, #e3e3ea); border-left: 4px solid #c0392b; border-radius: 12px; background: var(--surface, #fff); }
.lp-ident .lp-id-veh b { font-size: 18px; }