/* ============================================================
   LOA · suivi du kilométrage — habillage
   Règles AJEAN : aucune couleur codée en dur qui casserait le thème
   de l'hôte, aucun style="" inline (les seules valeurs dynamiques
   passent par des variables CSS posées depuis app.js), aucune police
   externe. Tout vient des variables fournies :
   --bg --fg --muted --line --accent --card
   ============================================================ */

/* Reset local : sans lui, un input 46 px + 22 px de padding rend 70 px (content-box)
   et casse toute une grille. Et [hidden] doit gagner contre .form { display:flex }. */
.loa, .loa *, .loa *::before, .loa *::after { box-sizing: border-box; }
.loa [hidden] { display: none !important; }

.loa {
  --ink: var(--fg);
  --hair: var(--line);
  --tint: color-mix(in oklab, var(--fg) 6%, transparent);
  /* Sémantiques mélangées à l'encre : lisibles en thème clair comme sombre. */
  --good: color-mix(in oklab, #12a05c 64%, var(--fg));
  --bad: color-mix(in oklab, #e03a1f 72%, var(--fg));
  --warn: color-mix(in oklab, #d9930d 74%, var(--fg));
  --good-bg: color-mix(in oklab, #12a05c 13%, var(--card));
  --bad-bg: color-mix(in oklab, #e03a1f 12%, var(--card));
  --warn-bg: color-mix(in oklab, #d9930d 14%, var(--card));
  --good-ln: color-mix(in oklab, #12a05c 42%, var(--line));
  --bad-ln: color-mix(in oklab, #e03a1f 40%, var(--line));
  --warn-ln: color-mix(in oklab, #d9930d 44%, var(--line));
  --r: 16px;
  --r-sm: 10px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 18px 16px 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

/* ---------- tonalités ---------- */
.tone-good { color: var(--good); }
.tone-bad { color: var(--bad); }
.tone-warn { color: var(--warn); }
.tone-mute { color: var(--muted); }
.pos { color: var(--good); }
.neg { color: var(--bad); }
.dim { color: var(--muted); font-weight: 400; }

/* ---------- masthead ---------- */
/* Même tête que le carnet d'entretien : étiquette (eyebrow) en accent,
   grand titre fin, phrase d'accroisse en muted, le tout posé sur un halo
   flou coloré. Le halo se mélange au fond de l'hôte (color-mix sur --bg),
   donc il reste discret en thème sombre comme en clair. */
.hd { position: relative; overflow: hidden;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  flex-wrap: wrap; padding: 4px 0 22px; margin-bottom: 2px; border-bottom: 1px solid var(--hair); }
.hd-halo { position: absolute; inset: -30% -8% -60% -8%; pointer-events: none; filter: blur(46px); z-index: 0;
  background:
    radial-gradient(52% 55% at 14% 34%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 70%),
    radial-gradient(40% 45% at 86% 22%, color-mix(in oklab, var(--accent) 11%, transparent), transparent 72%); }
.hd-l { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.hd-r { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 8px; }
.hd-r .lbl { display: block; margin-bottom: 5px; }

.eyebrow { font-size: 11.5px; font-weight: 620; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); }
h1 { font-size: clamp(30px, 6vw, 46px); line-height: 1.04; margin: 0; font-weight: 330;
  letter-spacing: -.025em; max-width: 16ch; }
.sub { margin: 2px 0 0; font-size: 15px; color: var(--muted); max-width: 56ch; line-height: 1.5; }

/* ---------- cartes ---------- */
.card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r); padding: 18px; }
h2 { font-size: 11.5px; margin: 0 0 14px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--muted); font-weight: 650; display: flex; align-items: center; gap: 8px; }
h2::before { content: ""; width: 12px; height: 1px; background: var(--accent); flex: none; opacity: .9; }
h2 .cnt { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--tint); letter-spacing: 0; }
/* Titre laissé tel quel dans un en-tête de carte (Courbe, Historique) : même look
   que h2, mais sans le pied de 14 px — la règle des apps interdit un style="" inline. */
.h2 { font-size: 11.5px; margin: 0; text-transform: uppercase; letter-spacing: .11em;
  font-weight: 650; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.h2::before { content: ""; width: 12px; height: 1px; background: var(--accent); flex: none; opacity: .9; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid.g2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.row-b { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.hint { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.hint.tight { margin: 0; }          /* texte seul dans une carte vide */
.hint.mb { margin-bottom: 8px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: var(--tint); padding: 1px 5px; border-radius: 5px; }

/* ---------- verdict ---------- */
.vcard { position: relative; overflow: hidden; padding: 20px; }
.vcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--muted); }
.vcard.tone-good::before { background: linear-gradient(90deg, var(--good), transparent 78%); }
.vcard.tone-bad::before { background: linear-gradient(90deg, var(--bad), transparent 78%); }
.vcard.tone-warn::before { background: linear-gradient(90deg, var(--warn), transparent 78%); }
.vcard.tone-good { background: var(--good-bg); border-color: var(--good-ln); }
.vcard.tone-bad { background: var(--bad-bg); border-color: var(--bad-ln); }
.vcard.tone-warn { background: var(--warn-bg); border-color: var(--warn-ln); }
.vtop { display: flex; align-items: flex-start; gap: 20px 26px; flex-wrap: wrap; }
.vstate { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.vmain { flex: 1 1 240px; min-width: 0; }
.vnum { font-size: clamp(42px, 8.4vw, 68px); line-height: 1; font-weight: 720; letter-spacing: -.035em;
  margin: 8px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.tone-good .vnum { color: var(--good); }
.tone-bad .vnum { color: var(--bad); }
.tone-warn .vnum { color: var(--warn); }
.vlbl { margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.vbar { flex: 1 1 260px; min-width: 220px; position: relative; height: 34px; margin-top: 26px;
  border-radius: 8px; background: var(--tint); border: 1px solid var(--hair); overflow: hidden; }
.vbar-fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--muted);
  transition: width .45s cubic-bezier(.22,.61,.36,1); }
.vbar-fill.tone-good { background: color-mix(in oklab, var(--good) 55%, var(--card)); }
.vbar-fill.tone-bad { background: color-mix(in oklab, var(--bad) 55%, var(--card)); }
.vbar-fill.tone-warn { background: color-mix(in oklab, var(--warn) 55%, var(--card)); }
.vbar-cap { position: absolute; inset: 0 auto 0 var(--w, 100%); width: 0; border-left: 2px solid var(--ink); opacity: .7; }
.vmsg { margin: 16px 0 0; font-size: 14.5px; line-height: 1.55; max-width: 74ch; color: var(--ink); }
.vchips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.chip { display: inline-flex; align-items: baseline; gap: 7px; border: 1px solid var(--hair);
  border-radius: 999px; padding: 5px 11px; font-size: 12.5px; background: var(--bg); }
.chip i { font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.chip b { font-weight: 620; color: var(--ink); }
.chip.tone-good b { color: var(--good); }
.chip.tone-bad b { color: var(--bad); }
.chip.tone-warn b { color: var(--warn); }

/* ---------- onglets ---------- */
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--card); border: 1px solid var(--hair);
  border-radius: 999px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1 0 auto; appearance: none; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 13.5px; font-weight: 560; padding: 10px 16px; border-radius: 999px;
  min-height: 44px; cursor: pointer; white-space: nowrap; transition: background .16s, color .16s; }
.tab:hover { color: var(--ink); }
.tab.on { background: var(--accent); color: var(--bg, #fff); }
.view { display: none; flex-direction: column; gap: 14px; }
.view.on { display: flex; }

/* ---------- KPI ---------- */
.kpi { padding: 15px 16px; }
.k-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .11em; color: var(--muted);
  font-weight: 640; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  counter-increment: card; }
/* Numérotation « 01, 02… » des blocs chiffrés, comme le tableau de bord de la
   R5 E-Tech officielle. Compteur réinitialisé sur la grille, repris par chaque
   étiquette : purement CSS, il se remet à zéro tout seul à chaque rendu.
   Le numéro est un simple item de la flexbox de .k-lbl, placé avant le libellé. */
#kpiGrid { counter-reset: card; }
.k-lbl::before { content: counter(card, decimal-leading-zero); font-size: 10.5px;
  font-weight: 700; letter-spacing: .02em; color: var(--accent); }
.k-val { font-size: clamp(24px, 3.6vw, 31px); font-weight: 690; letter-spacing: -.02em; margin-top: 8px; }
.k-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px;
  border-radius: 999px; background: var(--tint); color: var(--muted); font-weight: 620; }

/* ---------- tableaux ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 500; color: var(--muted); padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--hair); white-space: nowrap; }
.tbl td { text-align: right; padding: 9px 0; border-bottom: 1px solid var(--hair); font-weight: 560; }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; }
.tbl tr:hover td, .tbl tr:hover th { background: color-mix(in oklab, var(--fg) 3%, transparent); }
.tablewrap { overflow-x: auto; margin-top: 6px; }
.hist { min-width: 620px; }
.hist th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.hist td.note { text-align: left; color: var(--muted); font-weight: 400; font-size: 12.5px;
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist td.a { text-align: right; width: 40px; }
/* Ligne unique « aucun relevé » : elle occupe toute la table, rien à tronquer. */
.hist td.note.wide { max-width: none; white-space: normal; }

/* Versions gardees : 3 colonnes tenant sans defilement, meme a 360 px.
   (ne pas reutiliser .hist : sa largeur mini de 620 px est faite pour les
   releves a 5 colonnes et couperait le bouton « Restaurer » sur telephone) */
.vers { width: 100%; table-layout: fixed; }
.vers th.vwhen { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.vers td.vn { width: 62px; }
.vers td.vb { width: 92px; }

/* ---------- graphique ---------- */
.chart-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: 14px; }
.seg { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--hair); border-radius: 999px;
  background: var(--bg); margin-left: 8px; }
.segb { appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit;
  font-size: 12.5px; font-weight: 560; padding: 6px 13px; border-radius: 999px; min-height: 36px; cursor: pointer; }
.segb.on { background: var(--accent); color: var(--bg, #fff); }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg::before { content: ""; width: 16px; height: 0; border-top: 2px solid var(--ink); }
.lg-band::before { height: 9px; border: 0; background: var(--tint); }
.lg-ci::before { height: 9px; border: 0; background: var(--accent); opacity: .35; }
.lg-allow::before { border-top: 2px dashed var(--bad); }
.lg-pts::before { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--accent); }
.chartbox { width: 100%; }
.chartbox svg { display: block; width: 100%; height: clamp(260px, 42vw, 430px); }
.chart-empty { display: grid; place-items: center; min-height: 220px; text-align: center;
  border: 1px dashed var(--hair); border-radius: var(--r-sm); color: var(--muted); font-size: 13.5px;
  line-height: 1.7; padding: 20px; }
/* Éléments du SVG — toutes les couleurs viennent d'ici. */
.chartbox .grid { display: block; }
.chartbox line.grid { stroke: var(--hair); stroke-width: 1; }
.chartbox text.tick { fill: var(--muted); font-size: 11px; }
.chartbox line.today { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: .8; }
.chartbox text.todaylbl { fill: var(--muted); font-size: 11px; }
.chartbox polygon.band { fill: var(--accent); opacity: .12; }
.chartbox polygon.ci { fill: var(--accent); opacity: .18; stroke: none; }
.chartbox line.allow { stroke: var(--bad); stroke-width: 1.6; stroke-dasharray: 7 5; }
.chartbox text.alowlbl { fill: var(--bad); font-size: 11.5px; font-weight: 600; }
.chartbox line.need { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 2 4; opacity: .75; }
.chartbox line.fit { stroke: var(--accent); stroke-width: 2.4; }
.chartbox line.fit.proj { stroke-dasharray: 6 5; opacity: .85; }
.chartbox circle.pt { fill: var(--card); stroke: var(--accent); stroke-width: 2; }
.chartbox circle.arrive.tone-good { fill: var(--good); stroke: var(--card); stroke-width: 2; }
.chartbox circle.arrive.tone-bad { fill: var(--bad); stroke: var(--card); stroke-width: 2; }
.chartbox circle.arrive.tone-warn { fill: var(--warn); stroke: var(--card); stroke-width: 2; }
.chartbox circle.arrive.tone-mute { fill: var(--muted); stroke: var(--card); stroke-width: 2; }
.chartbox text.arrivelbl { font-size: 13px; font-weight: 700; }
.chartbox circle.hit { fill: var(--bad); stroke: var(--card); stroke-width: 2; }
.chartbox text.hitlbl { fill: var(--bad); font-size: 11.5px; }

/* ---------- résidus ---------- */
.resid { margin-top: 16px; display: flex; flex-direction: column; gap: 5px; }
.rrow { display: grid; grid-template-columns: 84px 1fr 62px; align-items: center; gap: 9px; font-size: 12px; }
.rdate { color: var(--muted); white-space: nowrap; }
.rbar { position: relative; height: 14px; border-radius: 4px; background: var(--tint); overflow: hidden; }
.rbar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.rbar i { position: absolute; top: 2px; bottom: 2px; width: var(--w, 0%); border-radius: 3px; }
.rbar i.left { right: 50%; }
.rbar i.right { left: 50%; }
.rbar i.r-up { background: color-mix(in oklab, var(--warn) 65%, var(--card)); }
.rbar i.r-dn { background: color-mix(in oklab, var(--good) 60%, var(--card)); }
.rbar i.r-out { background: color-mix(in oklab, var(--bad) 70%, var(--card)); }
.rval { text-align: right; color: var(--muted); }

/* ---------- formulaire ---------- */
.form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form.wide .fld { flex: 1 1 200px; }
.fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fld.grow { flex: 1 1 220px; }
.fld.chk { justify-content: center; min-height: 44px; }
.lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 620; }
.in { appearance: none; font: inherit; font-size: 14px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--hair); border-radius: var(--r-sm); padding: 11px 12px; min-height: 46px;
  min-width: 0; width: 100%; transition: border-color .15s, box-shadow .15s; }
.in:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.in.num { text-align: right; }
.in[readonly] { color: var(--muted); background: var(--tint); }
.in::placeholder { color: color-mix(in oklab, var(--muted) 70%, transparent); }
.sel { font: inherit; font-size: 13.5px; color: var(--ink); background: var(--bg); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: 10px 12px; min-height: 44px; max-width: 240px; }
.ck { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; user-select: none; }
.ck input { width: 18px; height: 18px; accent-color: var(--accent); }
input[type="date"].in { min-width: 148px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; margin-top: 4px; }

.btn { appearance: none; font: inherit; font-size: 14px; font-weight: 570; border-radius: var(--r-sm);
  padding: 11px 17px; min-height: 46px; cursor: pointer; border: 1px solid transparent;
  background: var(--tint); color: var(--ink); transition: filter .15s, border-color .15s; }
.btn.primary { background: var(--accent); color: var(--bg, #fff); }
.btn.ghost { background: transparent; border-color: var(--hair); color: var(--muted); }
.btn:hover { filter: brightness(1.07); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.btn.sm { font-size: 12.5px; padding: 8px 13px; min-height: 40px; }
.iconb { appearance: none; border: 1px solid var(--hair); background: transparent; color: var(--muted);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; }
.iconb:hover { color: var(--bad); border-color: var(--bad-ln); }

.quickadd { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.2fr) auto;
  gap: 10px; align-items: end; }

/* ---------- notifications ---------- */
.toast-root { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 99; pointer-events: none; max-width: 92vw; }
.toast { background: var(--card); color: var(--ink); border: 1px solid var(--hair);
  border-radius: 10px; padding: 10px 14px; font-size: 13.5px; box-shadow: 0 6px 24px rgba(0,0,0,.18);
  opacity: 1; transition: opacity .4s; }
.toast-bad { border-color: var(--bad-ln); color: var(--bad); }
.toast.out { opacity: 0; }

/* ---------- pied ---------- */
.ft { font-size: 12px; color: var(--muted); padding-top: 4px; border-top: 1px solid var(--hair); }

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  .loa { padding: 14px 12px 88px; gap: 13px; }
  .hd { flex-direction: column; align-items: stretch; }
  .hd-r { justify-content: space-between; }
  .hd-r .sel { flex: 1; max-width: none; }
  .card { padding: 15px; border-radius: 14px; }
  .vtop { gap: 14px; }
  .vstate { align-self: flex-start; }
  .vbar { margin-top: 8px; flex-basis: 100%; }
  .vmsg { font-size: 14px; }
  .grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .grid > .kpi:nth-child(n+3) { grid-column: span 1; }
  .quickadd { grid-template-columns: 1fr 1fr; }
  .quickadd .btn { grid-column: 1 / -1; }
  .form .fld { flex: 1 1 100%; }
  .form .btn { flex: 1 1 100%; }
  .tab { font-size: 13px; padding: 10px 13px; }
  .chartbox svg { height: 300px; }
  .chart-legend { gap: 10px; font-size: 11px; }
  .rrow { grid-template-columns: 72px 1fr 54px; }
}
@media (max-width: 400px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .vnum { font-size: 38px; }
}

/* ---------- accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .vbar-fill { transition: none; }
  .btn, .tab, .in { transition: none; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- impression : la page de garde du suivi ---------- */
@media print {
  .loa { padding: 0; max-width: none; }
  .tabs, .quickadd, .form, .btn, .iconb, .ft, .seg { display: none !important; }
  .view { display: flex !important; page-break-after: always; }
  .card { break-inside: avoid; border-color: #bbb; }
  body { background: #fff; color: #000; }
}