/* Appli Parc Auto : design « version B » repris de l'appli CRM (clair, fin, aéré ; noir en petite quantité, or en accent).
   Toutes les valeurs viennent de tokens.css. Les styles propres au parc sont à la fin du fichier. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.4; font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain; overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
svg { flex: none; }
h1, h2, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Types d'événement (TypeChip, points, cases) ---------- */
.t-mariage  { --ts: var(--ty-mariage-solid);  --tt: var(--ty-mariage-tint);  --ti: var(--ty-mariage-ink); }
.t-b2b      { --ts: var(--ty-b2b-solid);      --tt: var(--ty-b2b-tint);      --ti: var(--ty-b2b-ink); }
.t-loisir   { --ts: var(--ty-loisir-solid);   --tt: var(--ty-loisir-tint);   --ti: var(--ty-loisir-ink); }
.t-shooting { --ts: var(--ty-shooting-solid); --tt: var(--ty-shooting-tint); --ti: var(--ty-shooting-ink); }
.t-tour     { --ts: var(--ty-tour-solid);     --tt: var(--ty-tour-tint);     --ti: var(--ty-tour-ink); }
.t-autre    { --ts: var(--ty-autre-solid);    --tt: var(--ty-autre-tint);    --ti: var(--ty-autre-ink); }
.chip {
  display: inline-block; font-size: var(--fs-pill); line-height: var(--lh-label); padding: 2px 8px;
  border-radius: var(--r-pill); background: var(--tt); color: var(--ti); white-space: nowrap;
}

/* ---------- Statuts (StatusPill) ---------- */
.pill {
  display: inline-block; flex: none; font-size: var(--fs-pill); line-height: var(--lh-label); padding: 3px 9px;
  border-radius: var(--r-pill); border: 1px solid transparent; white-space: nowrap; color: var(--ink);
}
.pill.s-prospect { background: var(--st-new-bg); border-color: var(--st-new-bg); }
.pill.s-devis    { border-color: var(--ink); }
.pill.s-ok       { background: var(--gold); border-color: var(--gold); color: var(--black); }
.pill.s-done     { border-color: var(--st-done-line); color: var(--st-done-ink); }
.pill.s-paid     { background: var(--black); border-color: var(--black); color: var(--on-black); }
.pill.s-lost     { border-color: var(--line); color: var(--ink-muted); text-decoration: line-through; }

/* Mentions à côté des pastilles */
.note, .stp { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-muted); }
.stp { color: var(--ink); }
.stp.ok { color: var(--ok-ink); }
.flag {
  font-size: var(--fs-pill); line-height: var(--lh-label); padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--warn-bg); color: var(--warn-ink); white-space: nowrap;
}
.flag.late { background: var(--warn-ink); color: var(--on-black); }

/* ---------- Barre d'écran (titre de 38 px) ---------- */
.top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  max-width: 640px; margin: 0 auto; padding: calc(18px + var(--safe-t)) var(--gutter) 6px;
}
.brand { display: flex; flex-direction: column; min-width: 0; }
.screen-title { font-size: var(--fs-screen); line-height: var(--lh-screen); font-weight: var(--w-light); letter-spacing: -.01em; }
.who { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-muted); }
.icon-btn { width: var(--tap); height: var(--tap); margin-right: -10px; display: grid; place-items: center; flex: none; color: var(--ink); }
.icon-btn:active { opacity: .5; }
.icon-btn.spin svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

main { max-width: 640px; margin: 0 auto; padding-bottom: calc(32px + var(--safe-b)); }
body.has-tabs main { padding-bottom: calc(var(--nav-h) + 28px); }
.pad { padding: 0 var(--gutter); }

/* ---------- BottomNav ---------- */
.nav {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; height: var(--nav-h);
  display: flex; align-items: flex-start; padding: 8px 8px 0;
  background: var(--surface); border-top: 1px solid var(--line-soft);
}
.tab {
  flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--ink-faint); font-size: var(--fs-nav); text-align: center;
}
.tab.on { color: var(--ink); font-weight: var(--w-medium); }
.tab i { width: 16px; height: 2px; }
.tab.on i { background: var(--gold); }

/* ---------- HeroDashboard ---------- */
.hero { position: relative; overflow: hidden; background: var(--black); color: var(--on-black); padding: calc(30px + var(--safe-t)) var(--gutter) var(--gutter); }
.hero-flag, .hero-streak { position: absolute; right: -40px; transform: skewX(-24deg); }
.hero-flag { top: 0; width: 230px; height: 16px; background: repeating-conic-gradient(var(--gold) 0 25%, var(--black) 0 50%) 0 0 / 16px 16px; }
.hero-streak { background: var(--gold); }
.hero-streak.a { top: 22px; width: 150px; height: 3px; }
.hero-streak.b { top: 30px; width: 96px; height: 2px; opacity: .6; }
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 18px; }
.hero-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero-date { font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--on-black-muted); }
.hero-month { font-size: var(--fs-screen); line-height: 42px; font-weight: var(--w-light); letter-spacing: -.01em; }
.hero-count { font-size: var(--fs-sec); line-height: var(--lh-sec); padding-top: 6px; }
.hero-ca { font-size: 22px; line-height: 28px; font-weight: var(--w-light); color: var(--gold); }
.hero-refresh { position: absolute; top: 0; left: 10px; width: var(--tap); height: var(--tap); display: grid; place-items: center; color: var(--on-black-muted); }

/* Tachometer */
.tacho { flex: none; width: 150px; height: 104px; }
.tacho path, .tacho line { fill: none; }
.t-track { stroke: var(--track-dark); stroke-width: 12; }
.t-val { stroke: var(--gold); stroke-width: 12; }
.t-red { stroke: var(--redline); stroke-width: 3; }
.t-tick { stroke: var(--on-black); stroke-width: 1; stroke-linecap: round; }
.t-tick.big { stroke-width: 2; }
.t-needle { stroke: var(--on-black); stroke-width: 3; stroke-linecap: round; }
.t-hub { fill: var(--gold); }
.t-pin { fill: var(--black); }
.t-txt { fill: var(--on-black); font-family: var(--font); font-size: 22px; font-weight: var(--w-light); paint-order: stroke; stroke: var(--black); stroke-width: 6px; stroke-linejoin: round; }

/* ---------- StatTriplet et FleetHeatmap ---------- */
.block { background: var(--surface); padding: var(--gutter) var(--gutter) 20px; display: flex; flex-direction: column; gap: 20px; }
.triplet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.stat b { font-size: var(--fs-big); line-height: 34px; font-weight: var(--w-light); }
.stat small { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-muted); }
.dot36 { flex: none; width: var(--dot); height: var(--dot); border-radius: var(--r-pill); display: grid; place-items: center; background: var(--st-new-bg); color: var(--ink); }
.dot36.ok { background: var(--ok-bg); color: var(--ok-ink); }
.dot36.info { background: var(--info-bg); color: var(--info-ink); }
.dot36.warn { background: var(--warn-bg); color: var(--warn-ink); }

.heat-wrap { display: flex; flex-direction: column; gap: 10px; }
.heat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.heat-head b { font-size: var(--fs-text); font-weight: var(--w-medium); }
.heat-head small { font-size: var(--fs-pill); color: var(--ink-muted); }
.heat { display: flex; flex-direction: column; gap: var(--cell-gap); }
.heat-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, var(--cell-size)); gap: var(--cell-gap); }
.heat-row i { aspect-ratio: 1; border-radius: var(--r-cell); background: var(--cell); }
.heat-row i.today { background: var(--cell-today); }
.heat-row i.on { background: var(--ts); }
.heat-row i.opt { background: var(--tt); box-shadow: inset 0 0 0 1px var(--ts); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: var(--fs-pill); line-height: var(--lh-label); color: var(--ty-autre-ink); }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: var(--cell-size); height: var(--cell-size); border-radius: var(--r-cell); background: var(--ts); }

/* ---------- Sections et ListRow ---------- */
.section { padding: 24px var(--gutter) 0; display: flex; flex-direction: column; }
.section-title { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: var(--w-light); }
.sep { height: 1px; background: var(--line); margin: 12px 0 4px; }
.lrow {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: var(--row-h);
  font-size: var(--fs-row); line-height: var(--lh-row); cursor: pointer;
}
.lrow:active { opacity: .55; }
.lrow-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lrow-val { flex: none; max-width: 46%; font-size: var(--fs-sec); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev { color: var(--chevron); }
.empty-line { padding: 14px 0; color: var(--ink-muted); font-size: var(--fs-text); }

/* ---------- RoadTimeline ---------- */
.road-row { display: flex; align-items: stretch; gap: 12px; min-height: var(--road-h); cursor: pointer; }
.road-lane { position: relative; flex: none; width: 28px; }
.road-lane::before { content: ''; position: absolute; top: 0; bottom: 0; left: 8px; width: 12px; background: var(--track-dark); }
.road-lane::after { content: ''; position: absolute; top: 0; bottom: 0; left: 13.5px; width: 1px; background: repeating-linear-gradient(var(--on-black) 0 5px, transparent 5px 10px); }
.road-lane i { position: absolute; z-index: 1; top: 26px; left: 4px; width: 20px; height: 20px; border-radius: var(--r-pill); border: 3px solid var(--bg); background: var(--ts); }
.road-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.road-day { flex: none; width: 38px; display: flex; flex-direction: column; }
.road-day small { font-size: var(--fs-pill); line-height: 14px; color: var(--ink-faint); }
.road-day b { font-size: var(--fs-total); line-height: 28px; font-weight: var(--w-light); }
.road-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.veh { font-size: var(--fs-row); line-height: var(--lh-row); font-weight: var(--w-medium); overflow-wrap: anywhere; }
.veh.todo { font-weight: var(--w-regular); color: var(--ink-muted); }
.sub { font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-muted); overflow-wrap: anywhere; }
.road-end { display: flex; }
.road-end span { width: 28px; display: flex; justify-content: center; }
.road-end i { width: 20px; height: 12px; border: 1px solid var(--black); background: repeating-conic-gradient(var(--black) 0 25%, var(--surface) 0 50%) 0 0 / 8px 8px; }
.month-title { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: var(--w-light); padding: 22px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 0; }

/* ---------- Filtres : champ de recherche, onglets de mode, pastilles ---------- */
.input {
  width: 100%; min-height: var(--field-h); padding: 11px 14px; font: inherit; font-size: var(--fs-body);
  border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--surface); color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: var(--ink-muted); }
.input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
textarea.input { line-height: var(--lh-body); }
.search { margin: 8px 0 14px; }

.modes { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.modes button { flex: 1; min-height: var(--tap); text-align: center; font-size: var(--fs-text); color: var(--ink-faint); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.modes button.on { color: var(--ink); font-weight: var(--w-medium); border-bottom-color: var(--gold); }
.modes small { font-size: var(--fs-pill); margin-left: 4px; }

.pills { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)) 12px; padding: 0 var(--gutter); scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pills button {
  flex: none; min-height: var(--pill-h); padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--outline); font-size: var(--fs-text); white-space: nowrap;
}
.pills button.on { background: var(--black); border-color: var(--black); color: var(--on-black); }
.pills small, .pills .n { font-size: var(--fs-pill); margin-left: 6px; color: var(--ink-muted); }
.pills button.on small, .pills button.on .n { color: var(--on-black-muted); }
.count { color: var(--ink-muted); font-size: var(--fs-label); line-height: var(--lh-label); padding: 6px 0 8px; border-bottom: 1px solid var(--line); }

/* ---------- Liste des clients ---------- */
.item { cursor: pointer; }
.crow { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.crow.col { flex-direction: column; align-items: stretch; gap: 0; }
.crow .row { display: flex; align-items: center; gap: 14px; }
.crow:active { opacity: .6; }
.body { flex: 1; min-width: 0; }
.avatar { flex: none; width: var(--dot); height: var(--dot); border-radius: var(--r-pill); display: grid; place-items: center; background: var(--st-new-bg); font-size: var(--fs-label); font-weight: var(--w-medium); }
.nom { font-size: var(--fs-row); line-height: var(--lh-row); font-weight: var(--w-medium); overflow-wrap: anywhere; }
.next { font-size: var(--fs-sec); line-height: var(--lh-sec); margin-top: 4px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; align-items: center; font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-muted); }
.road-main .meta { margin-top: 0; }
.call { flex: none; width: var(--tap); height: var(--tap); border-radius: var(--r-pill); display: grid; place-items: center; border: 1px solid var(--outline); background: var(--surface); }
.call:active { opacity: .5; }
.money { flex: none; font-size: var(--fs-total); font-weight: var(--w-light); white-space: nowrap; }
.empty { text-align: center; color: var(--ink-muted); margin-top: 40px; }

/* Actions rapides */
.quick { display: flex; gap: 8px; margin-top: 12px; }
.qa { flex: 1; min-height: var(--tap); padding: 0 8px; border-radius: var(--r-btn); border: 1px solid var(--outline); background: var(--surface); font-size: var(--fs-text); font-weight: var(--w-medium); text-align: center; }
.qa.strong { background: var(--black); border-color: var(--black); color: var(--on-black); }
.qa:active { opacity: .6; }
.qa[disabled] { opacity: .35; }
.send { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.avis-meta { margin-top: 0; }

/* À encaisser : total */
.total { background: var(--surface); margin: 0 calc(-1 * var(--gutter)); padding: 18px var(--gutter); display: flex; flex-direction: column; gap: 4px; }
.total small { font-size: var(--fs-label); color: var(--ink-muted); }
.total b { font-size: var(--fs-screen); line-height: var(--lh-screen); font-weight: var(--w-light); letter-spacing: -.01em; }
.total span { font-size: var(--fs-sec); color: var(--ink-muted); }
.total em { font-style: normal; color: var(--warn-ink); font-weight: var(--w-medium); }

/* Alerte de conflit de voiture */
.alert { align-self: stretch; margin-top: 6px; padding: 10px 12px; border-radius: var(--r-btn); font-size: var(--fs-sec); line-height: var(--lh-sec); background: var(--warn-bg); color: var(--warn-ink); }
.alert.hard { background: var(--warn-ink); color: var(--on-black); }
.fiche-body > .alert { margin: 8px 0 6px; }
.alert b { display: block; font-weight: var(--w-semi); margin-bottom: 2px; }
.alert span { display: block; }

/* ---------- Flotte ---------- */
.fleet-car { padding: 18px 0 6px; border-bottom: 1px solid var(--line); }
.fleet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.fleet-car .lrow { min-height: 52px; font-size: var(--fs-text); border-top: 1px solid var(--line-soft); }
.fleet-car .heat-row { margin-bottom: 12px; }
.fleet-car .road-day-inline { flex: none; width: 64px; color: var(--ink-muted); font-size: var(--fs-sec); }

/* ---------- Panneaux plein écran ---------- */
.sheet { position: fixed; inset: 0; z-index: 30; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; animation: up .2s ease-out; }
@keyframes up { from { transform: translateY(20px); opacity: 0; } }
.sheet-body { max-width: 640px; margin: 0 auto; padding: var(--safe-t) var(--gutter) calc(36px + var(--safe-b)); }
/* ScreenHeader */
.sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 68px; padding-top: 12px; }
.sheet-head h2 { font-size: var(--fs-row); font-weight: var(--w-semi); }
.sheet-head > :first-child { justify-self: start; }
.back { width: var(--tap); height: var(--tap); margin-left: -10px; display: grid; place-items: center; }
.text-btn { min-height: var(--tap); padding: 0 2px; font-size: var(--fs-row); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--outline); }
.text-btn.center { display: block; margin: 10px auto 0; text-align: center; }
.text-btn.small { font-size: var(--fs-sec); color: var(--ink-muted); }
.split-parent { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: var(--w-light); }

.lbl { display: block; font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-muted); margin: 22px 0 8px; }
.muted { color: var(--ink-muted); }
.date-row { display: flex; gap: 12px; align-items: center; }
.date-row .input { flex: 1; }
.hint { color: var(--ink-muted); font-size: var(--fs-sec); text-align: center; margin: 8px 0 0; }
.hint.left { text-align: left; }
.hint.warn { color: var(--warn-ink); font-weight: var(--w-medium); }

/* PrimaryButton */
.btn-primary {
  display: block; width: 100%; min-height: var(--btn-h); margin-top: 24px; text-align: center;
  border-radius: var(--r-btn); background: var(--black); color: var(--on-black); font-size: var(--fs-body); font-weight: var(--w-medium);
}
.btn-primary:active { opacity: .7; }
.btn-primary[disabled] { opacity: .5; }
.btn-secondary {
  display: block; width: 100%; min-height: var(--field-h); margin-top: 12px; text-align: center;
  border-radius: var(--r-btn); border: 1px solid var(--ink); font-size: var(--fs-body); font-weight: var(--w-medium);
}
.btn-secondary:active { opacity: .6; }

/* Choix rapides : pastilles de 40 px */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qc { min-height: var(--pill-h); padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--outline); font-size: var(--fs-text); }
.qc.on { background: var(--black); border-color: var(--black); color: var(--on-black); }
.grp { display: block; color: var(--ink-muted); font-size: var(--fs-label); margin: 14px 0 8px; }
.grp:first-child { margin-top: 0; }

/* Bouton de dictée */
.mic {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--field-h); margin-bottom: 8px;
  border-radius: var(--r-btn); border: 1px solid var(--outline); background: var(--surface); font-size: var(--fs-text); font-weight: var(--w-medium);
}
.mic.rec { background: var(--black); border-color: var(--black); color: var(--on-black); }
.mic.rec svg { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.15); } }
.mic + .hint { margin: 0 0 8px; }
.mic + .hint:empty { display: none; }

/* ---------- Fiche ---------- */
.fiche { background: var(--bg); }
.fiche .sheet-body { padding-top: 0; }
.fiche .sheet-head { background: var(--surface); margin: 0 calc(-1 * var(--gutter)); padding: calc(12px + var(--safe-t)) var(--gutter) 0; }
.fiche-head { background: var(--surface); margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) 24px; display: flex; flex-direction: column; align-items: flex-start; }
.d-title { margin-top: 12px; font-size: var(--fs-screen); line-height: var(--lh-screen); font-weight: var(--w-light); letter-spacing: -.01em; overflow-wrap: anywhere; }
.d-sub { margin-top: 6px; font-size: var(--fs-lead); line-height: var(--lh-lead); overflow-wrap: anywhere; }
/* StepProgress */
.steps { align-self: stretch; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 22px; }
.steps i { height: 4px; background: var(--track); }
.steps i.on { background: var(--gold); }
.steps-txt { align-self: stretch; display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-muted); }
.big3 { align-self: stretch; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; text-align: center; padding-top: 26px; }
.big3 div { display: flex; flex-direction: column; gap: 6px; }
.big3 small { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-muted); }
.big3 b { font-size: clamp(22px, 7.4vw, var(--fs-big)); line-height: var(--lh-big); font-weight: var(--w-light); white-space: nowrap; }
.big3 b small { font-size: var(--fs-sec); }

.fiche-body { padding-top: 10px; display: flex; flex-direction: column; }
.fiche-body .sep { margin: 10px 0 18px; }
.d-sec { display: flex; flex-direction: column; gap: 8px; }
.d-sec > small { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-muted); }
.d-text { font-size: var(--fs-body); line-height: var(--lh-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: var(--fs-text); line-height: var(--lh-row); padding: 4px 0; }
.kv span { color: var(--ink-muted); flex: none; }
.kv b { font-weight: var(--w-regular); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.kv b a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--outline); }
.kv.total-line b { font-size: var(--fs-total); font-weight: var(--w-light); }
.done-line { text-align: center; font-size: var(--fs-text); color: var(--ink-muted); padding: 24px 0 0; }

/* Journal de suivi */
.tl { position: relative; padding: 0 0 16px 22px; border-left: 1px solid var(--line); margin-left: 5px; }
.tl:last-of-type { padding-bottom: 2px; }
.tl::before { content: ''; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--ink); box-shadow: 0 0 0 3px var(--bg); }
.tl.g-reglement::before { background: var(--gold); }
.tl.g-avis::before { background: var(--bg); box-shadow: 0 0 0 3px var(--bg), inset 0 0 0 1.5px var(--ink); }
.tl-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tl-h b { font-size: var(--fs-body); font-weight: var(--w-medium); }
.tl-d { color: var(--ink-muted); font-size: var(--fs-label); margin-left: auto; }
.tl p { margin-top: 4px; color: var(--ink-muted); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-text); }
.tl-empty { color: var(--ink-muted); font-size: var(--fs-text); }

/* Message bref */
.toast {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(var(--nav-h) + 12px); z-index: 50; margin: 0 auto; max-width: 400px;
  padding: 13px 16px; border-radius: var(--r-btn); background: var(--black); color: var(--on-black); text-align: center; font-size: var(--fs-text);
}
.toast.err { background: var(--warn-ink); }

/* Envoi d'un message : boutons au contour, pour garder le noir en petite quantité */
.send .qa.strong { background: var(--surface); color: var(--ink); border-color: var(--ink); }

/* =====================================================================
   Parc Auto : ajouts propres à l'appli (mêmes jetons que le CRM)
   ===================================================================== */

/* ---------- Touche voiture : silhouette dans le bandeau et route sous les titres ---------- */
.hero.with-car { padding-top: calc(78px + var(--safe-t)); }
.hero-car { position: absolute; top: calc(18px + var(--safe-t)); left: 56px; width: 132px; height: 44px; color: var(--gold); }
.hero-car .speed { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.hero-car .body { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.hero-car .wheel { fill: var(--black); stroke: var(--gold); stroke-width: 1.6; }
.hero-car .hub { fill: var(--gold); }
.top-road { position: relative; max-width: 640px; margin: 0 auto 6px; padding: 0 var(--gutter); height: 26px; }
.top-road::before { content: ''; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 4px; height: 1px; background: var(--line); }
.top-road svg { position: absolute; right: var(--gutter); bottom: 4px; width: 66px; height: 22px; }
.top-road .body { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.top-road .wheel { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; }
.top-road .hub { fill: var(--gold); }
.top-road .speed { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }

/* ---------- Vignettes et photos ---------- */
.vthumb { flex: none; width: 64px; height: 46px; border-radius: var(--r-btn); background: var(--line-soft); display: grid; place-items: center; overflow: hidden; color: var(--ink-muted); }
.vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vrow { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; width: 100%; }
.vrow:active { opacity: .6; }
.vrow.sold .vthumb img { filter: grayscale(1); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cover { position: relative; margin-top: 8px; aspect-ratio: 16 / 10; border-radius: var(--r-btn); background: var(--line-soft); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-muted); font-size: var(--fs-sec); width: 100%; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover.sold img { filter: grayscale(.85); }
.cover .count { position: absolute; right: 10px; bottom: 10px; border: 0; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .7); color: var(--on-black); font-size: var(--fs-pill); }
.gallery { display: flex; gap: 8px; overflow-x: auto; margin: 10px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery button { flex: none; width: 96px; height: 72px; border-radius: var(--r-btn); overflow: hidden; background: var(--line-soft); position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery button.main::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); }
.gallery .add { border: 1px dashed var(--ink-muted); background: var(--surface); font-size: var(--fs-sec); display: grid; place-items: center; color: var(--ink); }
.uploading { opacity: .5; }

/* Visionneuse plein écran */
.lightbox { position: fixed; inset: 0; z-index: 40; background: var(--black); color: var(--on-black); display: flex; flex-direction: column; }
.lb-head { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + var(--safe-t)) 12px 6px; }
.lb-head button { min-height: var(--tap); padding: 0 10px; color: var(--on-black); }
.lb-head span { font-size: var(--fs-sec); color: var(--on-black-muted); }
.lb-img { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; touch-action: pan-y; }
.lb-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: var(--tap); height: 64px; display: grid; place-items: center; color: var(--on-black); }
.lb-nav.prev { left: 4px; } .lb-nav.next { right: 4px; }
.lb-foot { display: flex; gap: 8px; padding: 12px var(--gutter) calc(16px + var(--safe-b)); }
.lb-foot button { flex: 1; text-align: center; min-height: var(--tap); border-radius: var(--r-btn); border: 1px solid var(--track-dark); color: var(--on-black); font-size: var(--fs-text); }
.lb-foot button.on { border-color: var(--gold); color: var(--gold); }

/* ---------- Fiche véhicule ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.plate { display: inline-block; margin-top: 10px; padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 4px; font-size: var(--fs-text); letter-spacing: .08em; font-weight: var(--w-medium); }
.kv b.warn { color: var(--warn-ink); font-weight: var(--w-medium); }
.kv b.ok { color: var(--ok-ink); }
.sold-box { margin: 8px 0 6px; padding: 14px; border-radius: var(--r-btn); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.sold-box b { font-size: var(--fs-row); font-weight: var(--w-medium); }
.sold-box span { font-size: var(--fs-sec); color: var(--ink-muted); }
.trow { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.trow .chk { flex: none; width: 26px; height: 26px; margin-top: -2px; border-radius: var(--r-pill); border: 1.5px solid var(--ink-muted); display: grid; place-items: center; }
.trow .chk.on { background: var(--black); border-color: var(--black); color: var(--on-black); }
.trow .chk-wrap { flex: none; width: var(--tap); height: var(--tap); margin: -10px -8px -10px -10px; display: grid; place-items: center; }
.trow-txt { flex: 1; min-width: 0; }
.trow-txt b { display: block; font-weight: var(--w-regular); font-size: var(--fs-text); overflow-wrap: anywhere; }
.trow-txt small { display: block; color: var(--ink-muted); font-size: var(--fs-label); margin-top: 2px; }
.trow.done .trow-txt b { color: var(--ink-muted); text-decoration: line-through; }
.trow .amt { flex: none; font-size: var(--fs-sec); color: var(--ink-faint); }

/* ---------- Formulaires ---------- */
select.input { background-image: none; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.form-sec { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: var(--w-light); margin: 30px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.form-sec:first-of-type { margin-top: 10px; }

/* ---------- Échéances et journal ---------- */
.road-lane i { background: var(--gold); }
.road-day { width: 48px; }
.road-day small { white-space: nowrap; }
.road-lane.late i { background: var(--warn-ink); }
.road-lane.ins i { background: var(--info-ink); }
.road-lane.mvt-in i { background: var(--ok-ink); }
.road-lane.km i { background: var(--ink-muted); }
.road-lane.trav i { background: var(--ink); }
.crm-warn { margin: 8px var(--gutter) 0; }