/* indemnites-c708.css — ch.708 — Achats & Dépenses › Indemnités km : tuiles par associé (relief), section collante (filtres ⊕ actions), carnet en lignes qui défile SEUL,
   modal « Trajet » en tuiles. Charte claire : accent #34D399 (texte #0F172A), ⛔ aucun bouton noir, ⛔ aucune variable CSS (règle du projet). Chargé APRÈS responsive.css.
   ⛔ R120 : toute grille d'un modal est déclarée ICI (une grille en ligne serait écrasée en une colonne par responsive.css). */

/* ── TUILES PAR ASSOCIÉ ─────────────────────────────────────────────────────────────── */
.ik708-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; align-items: start; }
.ik708-tuile { position: relative; min-width: 0; border-radius: 16px; padding: 14px 16px 12px; cursor: pointer; border: 1px solid #E2E8F0; border-top-width: 4px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 20px -10px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .8); transition: transform .15s, box-shadow .15s; text-align: left; font: inherit; color: #0F172A; width: 100%; }
.ik708-tuile:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15, 23, 42, .08), 0 14px 28px -12px rgba(15, 23, 42, .35), inset 0 1px 0 rgba(255, 255, 255, .8); }
.ik708-tuile:focus-visible { outline: 3px solid #34D399; outline-offset: 2px; }
.ik708-c1 { border-top-color: #34D399; background: linear-gradient(160deg, rgba(52, 211, 153, .16), rgba(255, 255, 255, .96) 55%); }
.ik708-c2 { border-top-color: #38BDF8; background: linear-gradient(160deg, rgba(56, 189, 248, .16), rgba(255, 255, 255, .96) 55%); }
.ik708-c3 { border-top-color: #A78BFA; background: linear-gradient(160deg, rgba(167, 139, 250, .16), rgba(255, 255, 255, .96) 55%); }
.ik708-nom { font-size: 15px; font-weight: 800; color: #0F172A; }
.ik708-veh { font-size: 12px; color: #475569; margin-top: 2px; overflow-wrap: anywhere; }
.ik708-veh.vide { color: #94A3B8; font-style: italic; }
.ik708-net { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ik708-net b { font-size: 26px; font-weight: 800; line-height: 1.1; }
.ik708-net.pos b { color: #047857; } .ik708-net.neg b { color: #DC2626; } .ik708-net.nul b { color: #64748B; }
.ik708-net span { font-size: 12px; font-weight: 700; }
.ik708-net.pos span { color: #047857; } .ik708-net.neg span { color: #DC2626; } .ik708-net.nul span { color: #64748B; }
.ik708-chev { position: absolute; top: 12px; right: 12px; font-size: 12px; color: #64748B; transition: transform .15s; }
.ik708-tuile.ouverte .ik708-chev { transform: rotate(180deg); }
.ik708-detail { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #CBD5E1; font-size: 12px; color: #334155; }
.ik708-tuile.ouverte .ik708-detail { display: block; }
.ik708-detail dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; margin: 0; }
.ik708-detail dt { color: #64748B; } .ik708-detail dd { margin: 0; font-weight: 700; text-align: right; }

/* ── SECTION COLLANTE (filtres ⊕ actions) ─────────────────────────────────────────── */
.ik708-barre { position: sticky; z-index: 18; background: #F3F4F6; padding: 10px 0 8px; margin-top: 12px; }
.ik708-barre-in { background: #FFFFFF; border: 1px solid #E2E8F0; border-left: 4px solid #3B82F6; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 16px -10px rgba(15, 23, 42, .25); }
.ik708-filtres, .ik708-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ik708-champ { min-height: 44px; padding: 6px 9px; border: 1px solid #E2E8F0; border-radius: 8px; font-size: 13px; color: #1E293B; background: #FFFFFF; max-width: 100%; box-sizing: border-box; }
.ik708-btn { min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid #CBD5E1; background: #FFFFFF; color: #334155; font-size: 12px; font-weight: 700; cursor: pointer; }
.ik708-btn:hover { background: #F8FAFC; }
.ik708-btn.prim { border: none; background: #34D399; color: #0F172A; }
.ik708-btn.prim:hover { background: #2BC48C; }
.ik708-msg { font-size: 12px; min-height: 0; }

/* ── CARNET EN LIGNES (comme la Banque), cadre qui défile SEUL ───────────────────────── */
.ik708-cadre { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; overflow-y: auto; overflow-x: hidden; min-height: 200px; }
.ik708-ent, .ik708-l { display: grid; grid-template-columns: 96px minmax(0, 0.9fr) minmax(0, 2fr) minmax(0, 1.1fr) 76px 72px minmax(0, 1fr) 40px; column-gap: 10px; align-items: center; }
.ik708-ent { position: sticky; top: 0; z-index: 2; padding: 9px 12px 7px 16px; background: #F8FAFC; border-bottom: 1px solid #E2E8F0; font-size: 10px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .04em; }
.ik708-liste { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 12px; }
.ik708-l { min-height: 52px; padding: 8px 10px; background: #FFFFFF; border: 1px solid #E2E8F0; border-left-width: 4px; border-radius: 12px; font-size: 12px; color: #334155; cursor: pointer; transition: background .15s, box-shadow .15s; }
.ik708-l:hover { background: #F8FAFC; box-shadow: 0 2px 10px rgba(15, 23, 42, .06); }
.ik708-l > div { min-width: 0; overflow-wrap: anywhere; } .ik708-l .lb { display: none; color: #94A3B8; font-weight: 600; margin-right: 4px; }
.ik708-l .km { font-weight: 800; white-space: nowrap; } .ik708-l .etat-ok { color: #047857; font-weight: 700; font-size: 11px; } .ik708-l .etat-non { color: #92400E; font-weight: 700; font-size: 11px; }
.ik708-l .ajust { display: inline-block; margin-top: 2px; padding: 1px 6px; border-radius: 999px; background: #FFFBEB; color: #92400E; font-size: 10px; font-weight: 700; }
.ik708-l.retire { opacity: .6; }
.ik708-plus { grid-column: 1 / -1; display: none; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: #F8FAFC; border: 1px dashed #CBD5E1; font-size: 12px; color: #334155; }
.ik708-l.ouverte .ik708-plus { display: block; }
.ik708-plus ol { margin: 4px 0 0 18px; padding: 0; } .ik708-plus li { margin: 2px 0; }
.ik708-menu { width: 36px; height: 36px; border: none; background: none; color: #64748B; font-size: 16px; cursor: pointer; border-radius: 8px; }
.ik708-menu:hover { background: #F1F5F9; }
.ik708-sans-peage .col-peage { display: none; }
.ik708-sans-peage .ik708-ent, .ik708-sans-peage .ik708-l { grid-template-columns: 96px minmax(0, 0.9fr) minmax(0, 2fr) minmax(0, 1.1fr) 76px minmax(0, 1fr) 40px; }

@media (max-width: 1100px) {
  .ik708-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .ik708-ent { display: none; }
  .ik708-l, .ik708-sans-peage .ik708-l { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 3px; }
  .ik708-l > div { grid-column: 1; } .ik708-l > .act { grid-column: 2; grid-row: 1; } .ik708-l .lb { display: inline; }
  .ik708-menu { width: 44px; height: 44px; }
}
@media (max-width: 760px) { .ik708-tuiles { grid-template-columns: minmax(0, 1fr); } .ik708-net b { font-size: 22px; } }

/* ── MODAL « TRAJET » ─────────────────────────────────────────────────────────────── */
.tr708-ov { position: fixed; inset: 0; z-index: 9200; background: rgba(15, 23, 42, .45); display: flex; align-items: flex-start; justify-content: center; padding: 16px 8px; overflow-y: auto; }
.tr708-boite { width: min(1100px, 96vw); max-height: calc(100vh - 32px); background: #F8FAFC; border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, .3); display: flex; flex-direction: column; overflow: hidden; }
.tr708-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: #FFFFFF; border-bottom: 1px solid #E2E8F0; }
.tr708-tete h2 { margin: 0; font-size: 17px; font-weight: 800; color: #0F172A; }
.tr708-x { min-width: 44px; min-height: 44px; border: none; background: none; font-size: 24px; color: #64748B; cursor: pointer; border-radius: 10px; }
.tr708-corps { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px; }
.tr708-grille { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 14px; align-items: start; }
.tr708-pied { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; background: #FFFFFF; border-top: 1px solid #E2E8F0; }
.tr708-tuile { position: relative; background: #FFFFFF; border: 1px solid #E2E8F0; border-left: 5px solid #34D399; border-radius: 14px; padding: 12px 14px; min-width: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 22px -14px rgba(15, 23, 42, .35), inset 0 1px 0 rgba(255, 255, 255, .8); }
.tr708-tuile + .tr708-tuile { margin-top: 12px; }
.tr708-tuile h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #0F172A; display: flex; align-items: center; gap: 8px; }
.tr708-qui { border-left-color: #38BDF8; background: linear-gradient(160deg, rgba(56, 189, 248, .08), #FFFFFF 50%); }
.tr708-arret { border-left-color: #34D399; background: linear-gradient(160deg, rgba(52, 211, 153, .08), #FFFFFF 50%); }
.tr708-retour { border-left-color: #A78BFA; background: linear-gradient(160deg, rgba(167, 139, 250, .10), #FFFFFF 50%); }
.tr708-resume { position: sticky; top: 0; border-left-color: #F59E0B; background: linear-gradient(160deg, rgba(245, 158, 11, .10), #FFFFFF 55%); }
.tr708-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: #34D399; color: #0F172A; font-size: 13px; font-weight: 800; }
.tr708-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.tr708-3col { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.tr708-lab { display: block; font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: .03em; margin: 6px 0 3px; }
.tr708-champ { width: 100%; min-height: 44px; box-sizing: border-box; border: 1px solid #E2E8F0; border-radius: 10px; padding: 6px 10px; font-size: 14px; color: #1E293B; background: #FFFFFF; }
.tr708-champ.manuel { border-color: #F59E0B; background: #FFFBEB; }
.tr708-ligne { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; font-size: 13px; color: #334155; }
.tr708-ligne label { display: flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; }
.tr708-ligne input[type=checkbox] { width: 20px; height: 20px; accent-color: #34D399; }
.tr708-info { font-size: 12px; color: #475569; margin-top: 6px; overflow-wrap: anywhere; }
.tr708-alerte { font-size: 12px; color: #92400E; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 10px; padding: 6px 10px; margin-top: 6px; }
.tr708-poubelle { position: absolute; top: 8px; right: 8px; min-width: 40px; min-height: 40px; border: none; background: none; color: #64748B; font-size: 17px; cursor: pointer; border-radius: 10px; }
.tr708-poubelle:hover { background: #FEF2F2; color: #DC2626; }
.tr708-sugg { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 10px; box-shadow: 0 10px 24px rgba(15, 23, 42, .14); max-height: 240px; overflow-y: auto; }
.tr708-sugg button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 9px 10px; font-size: 13px; color: #1E293B; cursor: pointer; border-bottom: 1px solid #F1F5F9; min-height: 40px; }
.tr708-sugg button:hover { background: #F0FDF4; }
.tr708-sugg .grp { padding: 6px 10px 2px; font-size: 10px; font-weight: 800; color: #64748B; text-transform: uppercase; }
.tr708-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tr708-chiffre { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #334155; padding: 5px 0; border-bottom: 1px dashed #E2E8F0; }
.tr708-chiffre b { color: #0F172A; } .tr708-total { font-size: 18px; font-weight: 800; color: #047857; }
/* calendrier du trajet récurrent */
.tr708-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.tr708-cal .jsem { font-size: 10px; font-weight: 700; color: #64748B; text-align: center; padding: 2px 0; }
.tr708-cal button { min-height: 40px; border: 1px solid #E2E8F0; border-radius: 8px; background: #FFFFFF; color: #1E293B; font-size: 13px; cursor: pointer; }
.tr708-cal button.on { background: #34D399; border-color: #10B981; color: #0F172A; font-weight: 800; }
.tr708-cal button.doublon { box-shadow: inset 0 0 0 2px #F59E0B; }
.tr708-cal button:disabled { visibility: hidden; }
.tr708-cal-tete { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 900px) {
  .tr708-grille { grid-template-columns: minmax(0, 1fr); }
  /* mobile ⊕ tablette : le résumé devient une BARRE collée en bas du corps qui défile (compacte, défile elle-même si elle s'allonge) */
  .tr708-resume { position: sticky; top: auto; bottom: -14px; order: 2; z-index: 5; margin: 12px 0 0; max-height: 30vh; overflow-y: auto; box-shadow: 0 -6px 18px rgba(15, 23, 42, .12);
    background: #FFFBEB; }   /* fond OPAQUE : le formulaire défile dessous (mesuré : un fond translucide laissait lire le texte à travers) */
  .tr708-resume .tr708-info { display: none; }   /* barre compacte : les explications restent dans les tuiles */
  .tr708-resume h3 { margin-bottom: 2px; }
  .tr708-3col { grid-template-columns: minmax(0, 1fr); } .tr708-2col { grid-template-columns: minmax(0, 1fr); }
  .tr708-ov { padding: 0; } .tr708-boite { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
}
/* l'aide ❓ */
.ik708-aide h3 { font-size: 14px; font-weight: 800; color: #0F172A; margin: 14px 0 6px; } .ik708-aide p { font-size: 13px; color: #334155; line-height: 1.6; margin: 4px 0; }
.ik708-aide .ex { background: #F0FDF4; border: 1px solid #A7F3D0; border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.ik708-aide table { border-collapse: collapse; font-size: 12px; width: 100%; min-width: 420px; } .ik708-aide th, .ik708-aide td { border: 1px solid #CBD5E1; padding: 5px 7px; text-align: left; } .ik708-aide th { background: #ECFDF5; }
.ik708-aide .defile { overflow-x: auto; }
/* ch.722 — « 🛣️ Péages du mois » (relevé de télépéage) : même habillage que le modal « Trajet » ; grilles par CLASSE (R120) */
.pm722-filtres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pm722-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.pm722-releve { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px; border: 1px solid #E2E8F0; border-radius: 12px; background: #FFFFFF; margin-top: 8px; font-size: 13px; color: #0F172A; overflow-wrap: anywhere; }
.pm722-releve.on { border-color: #34D399; box-shadow: 0 0 0 2px rgba(52, 211, 153, .25); }
.pm722-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pm722-statut { font-weight: 700; } .pm722-statut.confirme { color: #047857; } .pm722-statut.a_confirmer { color: #92400E; } .pm722-statut.echec { color: #B91C1C; }
.pm722-alerte { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: #FFFBEB; border: 1px solid #FCD34D; color: #92400E; font-size: 12px; }
.pm722-resume { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.pm722-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid #E2E8F0; background: #F8FAFC; color: #334155; }
.pm722-chip.pro { background: #ECFDF5; border-color: #6EE7B7; color: #065F46; } .pm722-chip.perso { background: #F1F5F9; color: #475569; }
.pm722-chip.decider { background: #FFFBEB; border-color: #FCD34D; color: #92400E; } .pm722-chip.verifier { background: #FEF2F2; border-color: #FCA5A5; color: #991B1B; }
.pm722-lignes { display: grid; gap: 6px; margin-top: 8px; }
.pm722-ligne { display: grid; grid-template-columns: 110px minmax(0, 1fr) 90px minmax(220px, auto); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid #E2E8F0; border-radius: 10px; background: #FFFFFF; font-size: 13px; color: #0F172A; }
.pm722-ligne.decide { background: #F8FAFC; }
.pm722-quand { display: flex; flex-direction: column; } .pm722-mt { text-align: right; font-weight: 800; white-space: nowrap; }
.pm722-gares { min-width: 0; overflow-wrap: anywhere; } .pm722-ecart { font-size: 12px; color: #1E3A8A; margin-top: 2px; }
.pm722-dec { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; } .pm722-dec select { max-width: 100%; }
.pm722-mail { display: block; width: 100%; text-align: left; min-height: 44px; padding: 8px 10px; margin-top: 6px; border: 1px solid #E2E8F0; border-radius: 10px; background: #FFFFFF; color: #0F172A; font-size: 13px; cursor: pointer; overflow-wrap: anywhere; }
.pm722-mail span { font-size: 12px; color: #64748B; } .pm722-mail:hover { border-color: #34D399; }
@media (max-width: 900px) { .pm722-ligne { grid-template-columns: minmax(0, 1fr) auto; } .pm722-gares, .pm722-dec { grid-column: 1 / -1; } .pm722-dec { justify-content: flex-start; } }
@media (max-width: 600px) { .pm722-filtres, .pm722-releve { grid-template-columns: minmax(0, 1fr); } .pm722-btns { justify-content: flex-start; } }