/* ════════════════════════════════════════════════════════════════════════════
   Module « achats » — écarts fournisseurs
   Reprend les jetons du module demo : navy, corail, ambre pour ce qui attend,
   vert pour ce qui est réglé. L'écran de Litige-Killer noyait le montant dans
   un tableau ; ici le montant se lit d'abord, la preuve juste dessous.
   ════════════════════════════════════════════════════════════════════════════ */
.ach-module {
  --dm-vert:#1D6F52; --dm-vert-fond:#E6F1EC;
  --dm-ambre:#96601A; --dm-ambre-fond:#FBF0DF;
  --dm-bordure:var(--kanso-bordure, #ECE4DA);
  --dm-surface:#fff; --dm-encre:var(--kanso-encre, #3a3550);
  --dm-douce:var(--kanso-encre-douce, #6b6780);
  --dm-navy:var(--kanso-navy, #140E59);
  color:var(--dm-encre); font-size:14px; line-height:1.55;
}
.ach-entete h1 { font-family:Lato,sans-serif; font-size:26px; font-weight:900;
  letter-spacing:-.4px; color:var(--dm-navy); margin:0 0 4px; }
.ach-entete p { margin:0; color:var(--dm-douce); max-width:66ch; }

/* Trois chiffres, pas douze. Le premier est celui qui décide d'agir. */
.ach-bilan { display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--dm-bordure); border:1px solid var(--dm-bordure);
  border-radius:3px; overflow:hidden; margin:22px 0 18px; }
.ach-chiffre { background:var(--dm-surface); padding:15px 20px; display:flex;
  flex-direction:column; }
.ach-chiffre .n { font-family:Lato,sans-serif; font-weight:900; font-size:24px;
  line-height:1.1; color:var(--dm-navy); font-variant-numeric:tabular-nums; }
.ach-chiffre .l { font-size:12.5px; color:var(--dm-douce); margin-top:2px; }
.ach-chiffre .s { font-size:11.5px; color:var(--dm-douce); margin-top:6px;
  padding-top:6px; border-top:1px solid var(--dm-bordure); font-variant-numeric:tabular-nums; }
/* Le temps n'est pas de l'argent : il ne doit pas se lire comme un montant. */
.ach-temps { background:#FBFAF8; }
.ach-temps .n { color:var(--dm-douce); }

/* ── Filtrer : par fournisseur, par montant ─────────────────────────────── */
.ach-chercher { margin:0 0 16px; }
.ach-chercher input { width:100%; font:inherit; font-size:13.5px;
  padding:9px 13px; border:1px solid var(--dm-bordure); border-radius:3px;
  background:var(--dm-surface); color:var(--dm-encre); }
.ach-chercher input:focus { outline:2px solid rgba(20,14,89,.16);
  outline-offset:-2px; border-color:rgba(20,14,89,.35); }

.ach-filtres { display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap;
  margin-bottom:18px; }
.ach-fournisseurs { display:flex; gap:8px; flex-wrap:wrap; }
.ach-jeton { font-family:Lato,sans-serif; font-size:12.5px; font-weight:700;
  color:var(--dm-navy); background:var(--dm-surface);
  border:1px solid rgba(20,14,89,.2); border-radius:20px; padding:6px 14px;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.ach-jeton:hover { border-color:var(--kanso-corail,#EF7D53); }
.ach-jeton.actif { background:var(--dm-navy); color:#fff; border-color:var(--dm-navy); }
.ach-jeton-n { font-size:11px; background:rgba(20,14,89,.1); border-radius:10px;
  padding:1px 7px; font-variant-numeric:tabular-nums; }
.ach-jeton.actif .ach-jeton-n { background:rgba(255,255,255,.22); }
.ach-seuil { display:flex; flex-direction:column; gap:3px; }
.ach-seuil label { font-size:11px; letter-spacing:.7px; text-transform:uppercase;
  color:var(--dm-douce); font-weight:700; }
.ach-seuil input { font:inherit; font-size:13px; width:110px; padding:6px 9px;
  border:1px solid var(--dm-bordure); border-radius:3px;
  font-variant-numeric:tabular-nums; }
.ach-seuil-note { font-size:11.5px; color:var(--dm-douce); font-style:italic; }

/* ── La liste ───────────────────────────────────────────────────────────── */
.ach-liste { list-style:none; margin:0; padding:0; }
.ach-ecart { padding:15px 20px; border-bottom:1px solid var(--dm-bordure); }
.ach-ecart:last-child { border-bottom:none; }
.ach-ecart.a_arbitrer { background:var(--dm-ambre-fond);
  box-shadow:inset 3px 0 0 var(--dm-ambre); }
.ach-ecart.envoye { background:#F1F0FA; box-shadow:inset 3px 0 0 #4B4DA8; }
.ach-ecart.envoye .ach-regle { color:#3B3D8F; }
.ach-ecart.recupere, .ach-ecart.accepte { background:var(--dm-vert-fond);
  box-shadow:inset 3px 0 0 var(--dm-vert); }
.ach-ecart.courrier_pret { background:var(--dm-ambre-fond);
  box-shadow:inset 3px 0 0 var(--dm-ambre); }

.ach-tete { display:grid; grid-template-columns:1fr auto; align-items:baseline;
  gap:4px 16px; }
.ach-quoi { display:flex; align-items:baseline; gap:6px 11px; flex-wrap:wrap;
  min-width:0; }
.ach-piece { font-family:Lato,sans-serif; font-weight:700; font-size:14px;
  color:var(--dm-navy); }
.ach-genre { font-size:11px; letter-spacing:.7px; text-transform:uppercase;
  font-weight:700; color:var(--dm-ambre); }
/* Le ton : une livraison partielle n'est pas un litige, et ça se voit. */
.ach-ton { font-size:11px; color:var(--dm-douce); background:var(--dm-surface);
  border:1px solid var(--dm-bordure); border-radius:2px; padding:1px 7px; }
.ach-frs { font-size:12.5px; color:var(--dm-douce); }
.ach-enjeu { font-family:Lato,sans-serif; font-weight:900; font-size:18px;
  color:var(--dm-navy); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ach-dit { margin:7px 0 0; font-size:13.5px; }

/* ── La source : ce qui rend le chiffre défendable ──────────────────────── */
.ach-source { margin-top:9px; display:flex; gap:8px 18px; flex-wrap:wrap;
  align-items:baseline; padding-top:9px; border-top:1px dashed var(--dm-bordure); }
.ach-source a { font-size:12.5px; font-weight:600; color:var(--dm-navy);
  text-decoration:none; border-bottom:1px solid rgba(20,14,89,.25); }
.ach-source a:hover { color:var(--kanso-corail,#EF7D53);
  border-bottom-color:var(--kanso-corail,#EF7D53); }
.ach-cmd { font-size:12.5px; color:var(--dm-douce); }
.ach-calcul { font-size:12px; color:var(--dm-douce); font-style:italic; }
.ach-manque { font-size:12.5px; color:var(--dm-ambre); font-style:italic; }

.ach-gestes { display:flex; gap:10px; margin-top:11px; flex-wrap:wrap;
  align-items:center; }
.ach-regle { font-size:12.5px; font-weight:600; color:var(--dm-vert); }
.ach-vide { padding:22px 20px; color:var(--dm-douce); font-size:13.5px; }

/* ── Le courrier ────────────────────────────────────────────────────────── */
.ach-courrier { margin-top:13px; border:1px solid var(--dm-bordure);
  border-radius:3px; background:var(--dm-surface); overflow:hidden; }
.ach-courrier .courrier-tete { padding:10px 14px;
  border-bottom:1px solid var(--dm-bordure); background:#FDFBF9; font-size:12.5px;
  display:flex; flex-direction:column; gap:2px; }
.ach-courrier .courrier-tete strong { color:var(--dm-navy); }
.ach-courrier .courrier-tete span { color:var(--dm-douce); }
.ach-courrier pre { margin:0; padding:14px; font:inherit; font-size:13px;
  line-height:1.6; white-space:pre-wrap; word-break:break-word; }
/* Le texte se corrige : le champ doit ressembler a du courrier, pas a un
   formulaire — sinon personne ne le relit vraiment. */
.ach-courrier textarea.ach-corps { display:block; width:100%; border:none;
  border-radius:0; padding:14px; font:inherit; font-size:13px; line-height:1.6;
  color:var(--dm-encre); background:var(--dm-surface); resize:vertical;
  min-height:180px; }
.ach-courrier textarea.ach-corps:focus { outline:2px solid rgba(20,14,89,.18);
  outline-offset:-2px; }
.ach-champ { display:flex; align-items:baseline; gap:8px; margin-top:4px; }
.ach-champ > span { font-size:11px; letter-spacing:.7px; text-transform:uppercase;
  color:var(--dm-douce); font-weight:700; }
.ach-courrier .courrier-tete { gap:6px; }
.ach-retenir { display:flex; align-items:center; gap:7px; font-size:12px;
  color:var(--dm-douce); }
.ach-retenir input { margin:0; }
.ach-demo { font-size:12px; color:var(--dm-ambre); font-style:italic; }
.ach-champ input.ach-dest, .ach-champ input.ach-objet { flex:1; min-width:0; font:inherit; font-size:13px;
  padding:5px 9px; border:1px solid var(--dm-bordure); border-radius:3px;
  background:var(--dm-surface); color:var(--dm-encre); }
.ach-courrier .courrier-note { margin:0; padding:11px 14px;
  border-top:1px solid var(--dm-bordure); background:#EEF0FA; color:#3B3D8F;
  font-size:12.5px; }
.ach-courrier .ach-gestes { margin:0; padding:12px 14px;
  border-top:1px solid var(--dm-bordure); }
.ach-relance { margin-bottom:20px; }
/* Les avoirs passent avant la liste : c'est de l'argent deja revenu. */
.ach-avoirs { margin-bottom:20px; }
.ach-choix { font:inherit; font-size:13px; padding:6px 9px;
  border:1px solid var(--dm-bordure); border-radius:3px; max-width:100%; }
.ach-relance .compte { white-space:nowrap; }

@media (min-width:1100px) { .ach-bilan { grid-template-columns:repeat(4,1fr); } }

@media (max-width:460px) { .ach-bilan { grid-template-columns:1fr; } }

@media (max-width:640px) {
  .ach-tete { grid-template-columns:1fr; }
  .ach-chercher { margin:0 0 16px; }
.ach-chercher input { width:100%; font:inherit; font-size:13.5px;
  padding:9px 13px; border:1px solid var(--dm-bordure); border-radius:3px;
  background:var(--dm-surface); color:var(--dm-encre); }
.ach-chercher input:focus { outline:2px solid rgba(20,14,89,.16);
  outline-offset:-2px; border-color:rgba(20,14,89,.35); }

.ach-filtres { flex-direction:column; align-items:stretch; }
}

/* ── Le fil d'échanges ──────────────────────────────────────────────────── */
.ach-fil { margin-top:13px; border:1px solid var(--dm-bordure); border-radius:3px;
  background:var(--dm-surface); overflow:hidden; }
.ach-fil-vide { margin:0; padding:16px; color:var(--dm-douce); font-size:13px;
  font-style:italic; }

/* La synthèse passe devant : c'est ce qu'on lit quand on n'a pas le temps. */
.ach-synthese { padding:14px 16px; background:#EEF0FA; color:#25276B;
  border-bottom:1px solid var(--dm-bordure); }
.ach-synthese-tete { font-family:Lato,sans-serif; font-weight:900; font-size:13px;
  letter-spacing:.2px; margin-bottom:6px; display:flex; align-items:center;
  gap:9px; flex-wrap:wrap; }
.ach-position { font-family:inherit; font-weight:700; font-size:11px;
  letter-spacing:.6px; text-transform:uppercase; background:#fff;
  border:1px solid rgba(37,39,107,.25); border-radius:20px; padding:2px 9px; }
.ach-synthese p { margin:0 0 6px; font-size:13.5px; line-height:1.55; }
.ach-suite { color:#1C1E52; }
/* Ce qu'elle a lu, et quand : sinon on ne sait pas si elle est en retard. */
.ach-synthese-pied { margin:8px 0 0 !important; font-size:11.5px;
  color:rgba(37,39,107,.7); font-style:italic; }

.ach-messages { list-style:none; margin:0; padding:0; }
.ach-msg { padding:13px 16px; border-bottom:1px solid var(--dm-bordure); }
.ach-msg:last-child { border-bottom:none; }
.ach-msg.recu { background:#FBFAF8; box-shadow:inset 3px 0 0 var(--dm-ambre); }
.ach-msg.envoye { box-shadow:inset 3px 0 0 rgba(20,14,89,.25); }
.ach-msg-tete { display:flex; justify-content:space-between; gap:12px;
  align-items:baseline; font-size:12.5px; }
.ach-msg-tete strong { color:var(--dm-navy); }
.ach-msg-tete span { color:var(--dm-douce); font-size:11.5px; }
.ach-msg-objet { font-size:12.5px; color:var(--dm-douce); margin-top:2px; }
.ach-msg pre { margin:8px 0 0; font:inherit; font-size:13px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word; max-height:260px; overflow:auto; }

/* ── L'appariement ──────────────────────────────────────────────────────────
   Deux lignes alignées, colonne par colonne : commande, article, montant. Ce
   qui concorde se voit sans lire ; ce qui diffère saute aux yeux. C'est tout
   l'intérêt — on ne doit plus ouvrir les deux PDF pour vérifier. */
.ach-appariement { margin-top:11px; padding:11px 13px; border-radius:3px;
  background:#FBFAF8; border:1px solid var(--dm-bordure);
  display:flex; flex-direction:column; gap:5px; }
.ach-cote { display:grid; grid-template-columns:78px 118px 1fr auto;
  align-items:baseline; gap:4px 12px; font-size:12.5px; }
.ach-cote-titre { font-size:10.5px; letter-spacing:.8px; text-transform:uppercase;
  font-weight:700; color:var(--dm-douce); }
.ach-cote-cmd { font-variant-numeric:tabular-nums; color:var(--dm-encre); }
.ach-cote-art { color:var(--dm-douce); min-width:0; }
.ach-cote-art code { font-family:"SF Mono",Menlo,monospace; font-size:12px;
  background:var(--dm-surface); border:1px solid var(--dm-bordure);
  border-radius:2px; padding:1px 6px; color:var(--dm-navy); }
.ach-cote-art code.vide { color:var(--dm-douce); border-style:dashed; }
.ach-cote-detail { color:var(--dm-douce); font-style:italic; margin-left:8px; }
.ach-cote-eur { font-variant-numeric:tabular-nums; font-weight:700;
  color:var(--dm-navy); white-space:nowrap; }

.ach-verdict { font-size:12px; padding-top:5px; margin-top:2px;
  border-top:1px dashed var(--dm-bordure); }
.ach-verdict.bon { color:var(--dm-vert); font-weight:600; }
.ach-verdict.alerte { color:var(--dm-ambre); font-weight:700; }
.ach-verdict.doute { color:var(--dm-douce); font-style:italic; }

@media (max-width:640px) {
  .ach-cote { grid-template-columns:1fr auto; }
  .ach-cote-titre { grid-column:1 / -1; }
}