/* Maintenance TEV Le Havre — identité atelier Toutenvélo */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  --ink: #171a14;
  --paper: #f4f5ef;
  --card: #ffffff;
  --lime: #a8c63c;
  --lime-dark: #74901f;
  --steel: #5f665a;
  --line: #e1e4d8;
  --amber: #c07a08;
  --red: #bd3f2b;
  --ok: #4c8c3b;
  --radius: 10px;

  /* remplissages de cartes par état */
  --fill-ok: #e2efc9;
  --fill-ok-line: #bcd487;
  --fill-warn: #f6d79f;
  --fill-warn-line: #e6b45f;
  --fill-warn-ink: #6a4400;
  --fill-bad: #bd3f2b;
  --fill-bad-line: #9a3020;
  --fill-neutral: #eaece3;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}
.mono { font-family: 'IBM Plex Mono', monospace; }
a { color: var(--lime-dark); }

/* ---------- barre de navigation ---------- */
.topbar {
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 22px;
  position: sticky; top: 0; z-index: 20;
  border-bottom: 3px solid var(--lime);
}
.brand { font-weight: 700; letter-spacing: .02em; font-size: 17px; white-space: nowrap; }
.brand em { font-style: normal; font-weight: 400; color: #b9bfae; font-size: 13px; }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a {
  color: #d8dccb; text-decoration: none; font-size: 13.5px; font-weight: 500;
  padding: 6px 11px; border-radius: 6px;
}
.topbar nav a.on { background: var(--lime); color: var(--ink); font-weight: 700; }
.topbar nav a:not(.on):hover { background: #2a2e25; color: #fff; }

/* ---------- structure de page ---------- */
main { max-width: 1080px; margin: 0 auto; padding: 22px 18px 60px; }
h1 {
  font-size: 25px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  margin: 6px 0 4px;
}
h1::after { content: ''; display: block; width: 52px; height: 5px; background: var(--lime); margin-top: 7px; border-radius: 3px; }
.subtitle { color: var(--steel); margin: 10px 0 16px; }
#content > .section-title:first-child { margin-top: 4px; }

/* titres de section — agrandis */
.section-title {
  font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink); margin: 34px 0 14px; display: flex; align-items: center; gap: 10px;
}
.section-title::before { content: ''; width: 8px; height: 22px; background: var(--lime); border-radius: 3px; }
.section-title .count { font-size: 14px; color: var(--steel); font-weight: 500; letter-spacing: 0; }

/* ---------- cartes véhicules ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  text-align: left;
}
.card.clickable { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.card.clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(23,26,20,.12); }
.card .name { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card .meta { font-size: 13px; margin-top: 6px; opacity: .85; }
.card .km { font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 600; margin-top: 8px; }

/* états de carte */
.card.st-ok { background: var(--fill-ok); border-color: var(--fill-ok-line); }
.card.st-warn { background: var(--fill-warn); border-color: var(--fill-warn-line); color: var(--fill-warn-ink); }
.card.st-bad { background: var(--fill-bad); border-color: var(--fill-bad-line); color: #fff; }
.card.st-neutral { background: var(--fill-neutral); border-color: var(--line); }
.card.st-bad .meta, .card.st-warn .meta { opacity: .9; }

/* ligne d'alerte "à garder à l'œil" sous le nom */
.alerte-line {
  margin-top: 9px; font-size: 13px; padding: 6px 9px; border-radius: 6px;
  background: rgba(23,26,20,.08); display: flex; gap: 7px; align-items: baseline;
}
.card.st-bad .alerte-line { background: rgba(255,255,255,.2); }
.alerte-line .ico { font-size: 12px; flex: none; }

/* carte remorque : image 1/3 à gauche */
.card.trailer { display: flex; padding: 0; overflow: hidden; }
.card.trailer .tr-img {
  flex: 0 0 33%; background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding: 0; overflow: hidden; border-right: 1px solid var(--line); min-height: 96px;
}
/* photo réelle : remplit tout le cadre, recadrée au centre, sans déformation */
.card.trailer .tr-img img.tr-photo {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
/* illustration générique : gardée entière, avec une marge */
.card.trailer .tr-img svg.tr-photo {
  width: 100%; height: auto; max-height: 90px; padding: 10px; box-sizing: border-box;
}
.card.trailer .tr-body { flex: 1; padding: 13px 15px; min-width: 0; }

.badge {
  display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .04em;
}
.badge.hs { background: #7a2417; color: #fff; }
.badge.retard { background: #8a5a00; color: #fff; }
.badge.urgence { background: #7a2417; color: #fff; }
.badge.confirm { background: #d9dccf; color: var(--steel); }

/* ---------- alertes 3 colonnes ---------- */
.alert-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.alert-col-stack { display: flex; flex-direction: column; gap: 14px; }
.alert-col { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px 14px; }
.alert-col > h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  padding: 13px 0 10px; margin: 0 0 4px; border-bottom: 2px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
.alert-col > h3 .k { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.alert-col.rev > h3 .k { background: var(--amber); }
.alert-col.stk > h3 .k { background: var(--lime-dark); }
.alert-col.hs > h3 .k { background: var(--red); }
.alert-col.rq > h3 .k { background: var(--ok); }
.alert-col > h3.clickable { cursor: pointer; }
.alert-col > h3.clickable:hover { color: var(--lime-dark); }
.alert-col > h3.clickable::after { content: '↗'; font-size: 12px; color: var(--steel); margin-left: 6px; }
.alert-col > h3 .n {
  margin-left: auto; background: var(--paper); color: var(--steel);
  font-size: 12px; padding: 1px 8px; border-radius: 20px; letter-spacing: 0;
}
.alert-item {
  padding: 11px 0; border-top: 1px solid #eef0e7; text-align: left;
  display: flex; gap: 10px; justify-content: space-between; align-items: flex-start;
}
.alert-item:first-of-type { border-top: none; }
.alert-item .ai-main { flex: 1; min-width: 0; }
.alert-item .ai-name { font-weight: 700; font-size: 14.5px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.ai-name .vi { flex: none; display: inline-flex; color: var(--steel); }
.ai-name .vi svg { width: 19px; height: 19px; }
.alert-col.hs .ai-name .vi { color: var(--red); }
.alert-col.rq .ai-name .vi { color: var(--ok); }
.alert-item .ai-sub { color: var(--steel); font-size: 13px; margin-top: 3px; }
.alert-item .ai-sub.reason { color: var(--ink); }
.alert-col .empty-col { color: var(--steel); font-style: italic; padding: 14px 0 6px; font-size: 13.5px; text-align: left; }

.btn-sm {
  display: inline-block; flex: none; margin: 0; padding: 6px 13px; border-radius: 7px;
  font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; border: none;
  font-family: inherit; white-space: nowrap;
}
.btn-sm.rev { background: var(--amber); color: #fff; }
.btn-sm.rev:hover { background: #a86a06; }
.btn-sm.rep { background: var(--red); color: #fff; }
.btn-sm.rep:hover { background: #a3341f; }
.btn-sm.cmd { background: var(--ink); color: var(--lime); }
.btn-sm.cmd:hover { background: #2a2e25; }
.btn-sm.cmd.disabled { background: var(--paper); color: var(--steel); cursor: default; pointer-events: none; }

/* boutons d'action en haut d'une fiche */
.fiche-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.fiche-actions .btn-sm { padding: 9px 16px; font-size: 13.5px; }
.btn-sm.hsbtn { background: #7a2417; color: #fff; }
.btn-sm.hsbtn:hover { background: #641c11; }
.btn-sm.edit { background: var(--ink); color: #fff; }
.btn-sm.edit:hover { background: #2a2e25; }
.btn-sm.neutral { background: var(--line); color: var(--ink); }
.btn-sm.neutral:hover { background: #d5d9cc; }

/* tuile "+ ajouter" */
.card.add-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px dashed var(--line); background: transparent; color: var(--steel);
  cursor: pointer; min-height: 104px; font-weight: 600; text-align: center;
}
.card.add-tile:hover { border-color: var(--lime-dark); color: var(--ink); }
.card.add-tile .plus { font-size: 26px; line-height: 1; }

/* photo de remorque dans la fiche */
.fiche-photo {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff;
  margin-bottom: 14px; display: flex; align-items: center; justify-content: center;
}
.fiche-photo img.tr-photo { width: 100%; height: 210px; object-fit: cover; object-position: center; display: block; }
.fiche-photo svg.tr-photo { width: 100%; max-width: 240px; height: auto; padding: 20px; box-sizing: border-box; color: var(--steel); }

/* formulaire d'édition dans une fiche */
.fiche-form { margin-top: 4px; }
.fiche-form .field { margin-bottom: 12px; }
.fiche-form textarea { min-height: 64px; }

/* barre d'outils (bouton ajouter une pièce) */
.toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.toolbar .btn-add { background: var(--ink); color: var(--lime); border: none; font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 8px; cursor: pointer; }
.toolbar .btn-add:hover { background: #2a2e25; }

/* ---------- formulaires ---------- */
form .field { margin-bottom: 16px; }
label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
input[type=text], input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px;
  font: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--lime); outline-offset: 1px; border-color: var(--lime-dark); }
textarea { min-height: 96px; resize: vertical; }
.hint { font-size: 12.5px; color: var(--steel); margin-top: 4px; }

.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button {
  flex: 1; min-width: 110px; padding: 10px; border: 1.5px solid var(--line); background: #fff;
  border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer;
}
.seg button.on { background: var(--ink); color: var(--lime); border-color: var(--ink); font-weight: 700; }

.check { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--red); }
.check.reprise input { accent-color: var(--ok); }
.field.alerte-field label::before { content: '👁 '; }

button.primary {
  background: var(--lime); color: var(--ink); border: none; font: inherit; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 13px 26px; border-radius: 8px;
  cursor: pointer; width: 100%; font-size: 15px;
}
button.primary:hover { background: #b8d558; }
button.primary:disabled { background: var(--line); color: var(--steel); cursor: default; }
button.ghost {
  background: none; border: 1.5px solid var(--line); border-radius: 7px; font: inherit;
  font-size: 13px; padding: 6px 12px; cursor: pointer; color: var(--ink);
}
button.ghost:hover { border-color: var(--lime-dark); }

/* sélecteur de pièces */
.pieces-box { border: 1.5px solid var(--line); border-radius: 8px; background: #fff; }
.pieces-box .search { border: none; border-bottom: 1.5px solid var(--line); border-radius: 8px 8px 0 0; }
.pieces-list { max-height: 300px; overflow-y: auto; }
.pieces-list .group {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--lime-dark);
  font-weight: 700; padding: 9px 12px 4px;
}
.piece-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid #f0f2e9; }
.piece-row .pname { flex: 1; font-size: 13.5px; }
.piece-row .pref { color: var(--steel); font-size: 12px; }
.piece-row .pstock { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--steel); flex: none; }
.piece-row .pstock.low { color: var(--red); font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 6px; flex: none; }
.stepper button { width: 26px; height: 26px; border: 1.5px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; font-weight: 700; line-height: 1; }
.stepper .qty { min-width: 20px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.piece-row.selected { background: #f4f8e6; }

/* ---------- stock ---------- */
.stock-cat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px 18px 16px; margin-bottom: 16px; }
.stock-cat > header { display: flex; align-items: center; gap: 12px; padding: 14px 0 6px; }
.cat-icon {
  width: 38px; height: 38px; border-radius: 9px; background: #eef4dc; color: var(--lime-dark);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.cat-icon svg { width: 22px; height: 22px; }
.stock-cat > header .cat-name { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.stock-cat > header .cat-count { margin-left: auto; font-size: 12.5px; color: var(--steel); }

.type-group { padding-top: 2px; }
.type-group + .type-group.spaced { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.type-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--steel); font-weight: 700; margin: 4px 0 2px; }

.stock-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid #f0f2e9; }
.stock-row:first-child { border-top: none; }
.stock-row .sr-name { flex: 1; min-width: 0; }
.stock-row .sr-ref { color: var(--steel); font-size: 12.5px; }
.stock-row .sr-qty { font-family: 'IBM Plex Mono', monospace; font-size: 14px; flex: none; text-align: right; min-width: 58px; }
.stock-row .sr-qty.low { color: var(--red); font-weight: 700; }
.stock-row .sr-actions { flex: none; display: flex; gap: 6px; align-items: center; }
.link-order {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 7px;
  background: var(--ink); color: var(--lime); font-size: 12px; font-weight: 700; text-decoration: none;
}
.link-order:hover { background: #2a2e25; }
.link-order.disabled { background: var(--paper); color: var(--steel); cursor: default; pointer-events: none; }

/* onglets de catégorie */
.cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; }
.cat-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1.5px solid var(--line); background: #fff; border-radius: 9px;
  font: inherit; font-weight: 600; cursor: pointer; color: var(--ink);
}
.cat-tab:hover { border-color: var(--lime-dark); }
.cat-tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.cat-tab .ti { width: 20px; height: 20px; color: var(--lime-dark); flex: none; display: inline-flex; }
.cat-tab .ti svg { width: 20px; height: 20px; }
.cat-tab.on .ti { color: var(--lime); }
.cat-tab .cbadge {
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* panneau de la catégorie active */
.stock-panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 18px 16px; }

/* cartouche de sous-catégorie (type de pièce) */
.subcat {
  display: block; background: var(--ink); color: #fff; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: 12px;
  padding: 6px 12px; border-radius: 6px; margin: 16px 0 6px;
}
.stock-panel > .subcat:first-child { margin-top: 8px; }
.subcat + .stock-row { border-top: none; }
.stock-row .sr-name { text-align: left; }
.stock-row .sr-name.link {
  flex: 1; min-width: 0; background: none; border: none; padding: 0; font: inherit;
  font-weight: 500; color: var(--ink); cursor: pointer;
}
.stock-row .sr-name.link:hover { color: var(--lime-dark); text-decoration: underline; }

/* rangée du bouton "ajouter une pièce" sous le tableau */
.add-row { margin-top: 12px; }
.add-row .btn-add {
  width: 100%; background: transparent; color: var(--steel); border: 2px dashed var(--line);
  font: inherit; font-weight: 700; padding: 12px; border-radius: 10px; cursor: pointer;
}
.add-row .btn-add:hover { border-color: var(--lime-dark); color: var(--ink); }

/* ---------- tableaux (fiche) ---------- */
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--steel); padding: 10px 12px; border-bottom: 1.5px solid var(--line); background: #fafbf6; }
td { padding: 9px 12px; border-bottom: 1px solid #f0f2e9; font-size: 14px; vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.num { font-family: 'IBM Plex Mono', monospace; text-align: right; white-space: nowrap; }

/* ---------- divers ---------- */
.result { margin-top: 16px; padding: 14px 16px; border-radius: 8px; background: #e0ecd0; border: 1.5px solid var(--ok); font-size: 14px; }
.result.err { background: #f5ded9; border-color: var(--red); }
.result ul { margin: 8px 0 0; padding-left: 18px; }
.loading { color: var(--steel); padding: 30px 0; text-align: center; }
.empty { color: var(--steel); font-style: italic; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(23,26,20,.55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 50; overflow-y: auto; }
.modal { background: var(--card); border-radius: 12px; max-width: 560px; width: 100%; padding: 22px; }
.modal h3 { margin: 0 0 14px; font-size: 18px; }
.modal .fiche-alerte { background: var(--fill-warn); color: var(--fill-warn-ink); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 14px; }
.modal .fiche-alerte.hs { background: #f3d9d3; color: #7a2417; }
.modal .close-row { display: flex; justify-content: flex-end; margin-top: 14px; }

.timeline { display: grid; gap: 8px; }
.tl-item { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.tl-item .tl-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: 13px; color: var(--steel); }
.tl-item .tl-head b { color: var(--ink); font-size: 14px; }
.tl-item .tl-body { margin-top: 5px; font-size: 14px; white-space: pre-wrap; }
.tl-item .tl-alerte { margin-top: 6px; font-size: 13px; color: var(--amber); font-weight: 600; }

@media (max-width: 760px) {
  .alert-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  main { padding: 16px 12px 50px; }
  .grid { grid-template-columns: 1fr; }
  table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }