/* ch.638 — « ACHATS & DÉPENSES » (décisions D1–D6 d'Anis, 11/10/2026) : feuilles du module, tableau de bord, À justifier, compte courant,
   fenêtre « Trajet IK ». Charte : actif #34D399 / texte #0F172A (R119) ; ⛔ aucune variable CSS ; grilles par CLASSE (R120) ; cibles ≥ 44 px ;
   fondus et dégradés, ⛔ aucune vraie 3D. Adaptations d'écran en @media uniquement. */

/* ── Feuilles du module (patron des feuilles de Paramètres, ch.635 ③) ── */
.ad638-feuilles { display: flex; flex-wrap: nowrap; gap: 6px; padding: 0; margin-bottom: 0 !important; border: none !important; border-radius: 0 !important;
  border-bottom: 1px solid #E2E8F0 !important; overflow-x: auto; overflow-y: hidden; width: 100% !important; scrollbar-width: thin; }
.ad638-feuilles > button.ad638-feuille { flex: 0 0 auto; min-height: 44px; /* ch.658 : 40 ⇒ 44 px (cible tactile, preuve_dom_c625) */ padding: 0 14px; border: 1px solid #E2E8F0; border-bottom: none; border-radius: 10px 10px 0 0;
  background: #F8FAFC; color: #475569; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ad638-feuilles > button.ad638-feuille[aria-selected="true"] { background: #34D399; border-color: #34D399; color: #0F172A; font-weight: 800; }
.ad638-pastille { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: #FEF3C7; color: #92400E; font-size: 11px; font-weight: 800; text-align: center; line-height: 18px; }
.ad638-feuille[aria-selected="true"] .ad638-pastille { background: #FFFFFF; color: #0F172A; }
.ad638-sous { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 8px; }
.ad638-sous[hidden] { display: none; }
.ad638-sous > button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px;   /* ch.664 UNIFIER : filtres de la liste, 44 px à toutes les largeurs (charte) */ padding: 0 14px; border: 1px solid #E2E8F0; border-radius: 18px;
  background: #FFFFFF; color: #475569; font-size: 12px; font-weight: 600; cursor: pointer; }
.ad638-sous > button[aria-pressed="true"] { background: #34D399; border-color: #34D399; color: #0F172A; }

/* ── Barre d'outils d'une feuille ── */
.ad638-barre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 14px 0 12px; }
.ad638-barre-g { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.ad638-select { min-height: 40px; padding: 0 10px; border: 1px solid #CBD5E1; border-radius: 9px; background: #FFFFFF; color: #0F172A; font-size: 13px; }
.ad638-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 9px; border: 1px solid #CBD5E1; background: #FFFFFF;
  color: #0F172A; font-size: 13px; font-weight: 700; cursor: pointer; }
.ad638-btn.ad638-prim { background: #34D399; border-color: #34D399; color: #0F172A; }
.ad638-btn[disabled] { opacity: .6; cursor: not-allowed; }
.ad638-bientot { font-size: 10px; font-weight: 800; color: #92400E; background: #FEF3C7; border-radius: 8px; padding: 1px 6px; }
.ad638-source { font-size: 11px; color: #64748B; margin: -4px 0 10px; overflow-wrap: anywhere; }

/* ── Chiffres clés (tuiles en fondu) ── */
.ad638-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ad638-kpi { position: relative; border-radius: 14px; padding: 14px 16px; min-width: 0; overflow: hidden; border: 1px solid rgba(15, 23, 42, .06);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 20px -12px rgba(15, 23, 42, .25), inset 0 1px 0 rgba(255, 255, 255, .7); }
.ad638-kpi-vert { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); }
.ad638-kpi-cyan { background: linear-gradient(135deg, #ECFEFF 0%, #CFFAFE 100%); }
.ad638-kpi-bleu { background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%); }
.ad638-kpi-ambre { background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%); }
.ad638-kpi-lib { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .03em; }
.ad638-kpi-val { font-size: 24px; font-weight: 800; color: #0F172A; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad638-kpi-sous { font-size: 12px; color: #334155; margin-top: 2px; overflow-wrap: anywhere; }
.ad638-jauge { height: 8px; border-radius: 4px; background: rgba(15, 23, 42, .08); overflow: hidden; margin-top: 8px; }
.ad638-jauge > span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #34D399, #10B981); }

/* ── Graphiques ── */
.ad638-graphes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ad638-carte { background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); border: 1px solid #E2E8F0; border-radius: 14px; padding: 14px; min-width: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -18px rgba(15, 23, 42, .3); }
.ad638-carte-large { grid-column: 1 / -1; }
.ad638-carte h4 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: #0F172A; }
.ad638-toile { position: relative; height: 260px; min-width: 0; }
.ad638-toile-petite { height: 220px; }
.ad638-liste { display: flex; flex-direction: column; gap: 6px; }
.ad638-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 32px; font-size: 13px; color: #0F172A; }
.ad638-ligne > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad638-ligne > b { white-space: nowrap; }
.ad638-estime { font-size: 10px; font-weight: 800; color: #6D28D9; background: #EDE9FE; border-radius: 8px; padding: 1px 6px; margin-left: 4px; }

/* ── À justifier / compte courant ── */
.ad638-bloc { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; padding: 14px; margin-bottom: 12px; min-width: 0; }
.ad638-bloc h4 { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: #0F172A; }
.ad638-note { font-size: 12px; color: #64748B; margin: 0 0 8px; overflow-wrap: anywhere; }
.ad638-elt { display: grid; grid-template-columns: 90px minmax(0, 1fr) 150px 110px; gap: 10px; align-items: center; min-height: 44px; padding: 6px 10px; border: 1px solid #F1F5F9;
  border-radius: 10px; background: #F8FAFC; font-size: 13px; color: #0F172A; cursor: pointer; text-align: left; width: 100%; box-sizing: border-box; font-family: inherit; }
.ad638-elt:hover { background: #F1F5F9; }
.ad638-elt-statique { cursor: default; }
.ad638-elt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad638-elt .ad638-droite { text-align: right; font-weight: 700; }
.ad638-elt .ad638-gris { color: #64748B; font-size: 12px; }
.ad638-vide { padding: 14px; border-radius: 12px; background: #F8FAFC; color: #64748B; font-size: 13px; text-align: center; }
.ad638-alerte { padding: 10px 12px; border-radius: 12px; background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-size: 13px; margin-bottom: 12px; }
.ad638-assoc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* ── Fenêtre « Trajet IK » ── */
.ik638-cadre { width: min(920px, 96vw); }
.ik638-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ── ch.665 — Fenêtre « Journée de déplacement » (même fenêtre IK, agrandie) ── */
.ik665-cadre { width: min(1100px, 96vw); }
.ik665-arret { display: grid; grid-template-columns: 34px 130px minmax(0, 1.2fr) minmax(0, 1.4fr) 84px 44px; gap: 8px; align-items: start; padding: 8px; border: 1px solid #E2E8F0; border-radius: 10px; background: #fff; margin-bottom: 8px; }
.ik665-rang { width: 34px; height: 34px; border-radius: 17px; background: #0F172A; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.ik665-resultats { border: 1px solid #CBD5E1; border-radius: 8px; background: #fff; margin-top: 4px; max-height: 220px; overflow-y: auto; }
.ik665-resultats > button { display: block; width: 100%; min-height: 44px; text-align: left; padding: 6px 10px; border: none; border-bottom: 1px solid #F1F5F9; background: #fff; cursor: pointer; font-size: 12px; color: #0F172A; }
.ik665-troncon { display: grid; grid-template-columns: 34px minmax(0, 1fr) 80px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid #E2E8F0; font-size: 12px; }
.ik665-totaux { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ik665-bascule { display: inline-flex; border: 1px solid #CBD5E1; border-radius: 10px; overflow: hidden; }
.ik665-bascule > button { min-height: 44px; padding: 0 12px; border: none; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; color: #0F172A; }
.ik665-bascule > button[aria-pressed="true"] { background: #0F172A; color: #fff; }

/* ── ≤ 1024 px ── */
@media (max-width: 1024px) {
  .ad638-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad638-feuilles > button.ad638-feuille, .ad638-sous > button, .ad638-btn, .ad638-select { min-height: 44px; }
  .ad638-assoc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ik638-cadre { width: 100vw; }
}
/* ── ≤ 900 px ── */
@media (max-width: 900px) {
  .ad638-graphes { grid-template-columns: minmax(0, 1fr); }
  .ad638-elt { grid-template-columns: 80px minmax(0, 1fr) 100px; }
  .ad638-elt > .ad638-col-payeur { display: none; }
}
/* ── ≤ 640 px ── */
@media (max-width: 640px) {
  /* UNE rangée qui défile (⚠️ passer à la ligne faisait grossir l'en-tête COLLÉ de ~200 px et il recouvrait les cartes — mesuré, ch.638) ;
     un FONDU à droite signale qu'il existe d'autres feuilles, et la feuille active est ramenée dans le champ (switchTab) */
  .ad638-feuilles { padding-right: 28px !important; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%); }
  .ad638-kpis { grid-template-columns: minmax(0, 1fr); }
  .ad638-kpi-val { font-size: 22px; }
  .ad638-toile { height: 230px; }
  .ad638-assoc, .ik638-grille { grid-template-columns: minmax(0, 1fr); }
  .ik665-arret { grid-template-columns: 34px minmax(0, 1fr) 44px; grid-template-areas: "rang type suppr" "lien lien lien" "adr adr adr" "km km km"; }
  .ik665-arret > .ik665-rang { grid-area: rang; } .ik665-arret > [data-zone="type"] { grid-area: type; } .ik665-arret > [data-zone="lien"] { grid-area: lien; }
  .ik665-arret > [data-zone="adresse"] { grid-area: adr; } .ik665-arret > [data-zone="km"] { grid-area: km; } .ik665-arret > [data-zone="suppr"] { grid-area: suppr; }
  .ik665-troncon { grid-template-columns: 34px minmax(0, 1fr) 70px; } .ik665-troncon > [data-zone="poste"] { grid-column: 2 / 4; }
  .ik665-totaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ik665-cadre { width: 100vw; }
  .ad638-elt { grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "quoi montant" "quand quand"; row-gap: 2px; }
  .ad638-elt > .ad638-col-date { grid-area: quand; } .ad638-elt > .ad638-col-quoi { grid-area: quoi; } .ad638-elt > .ad638-droite { grid-area: montant; }
}