/* =====================================================================
   InterTour — thème de marque
   Palette extraite du logo : vert #089040 (dominante), orange #F8A000.
   Cette feuille est le socle des NOUVEAUX écrans (voir maquettes/README.md).
   ===================================================================== */
:root {
  /* --- couleurs de marque --- */
  --vert:        #089040;   /* primaire : barres, actions, titres */
  --vert-fonce:  #06612e;   /* texte sur fond clair vert */
  --vert-nuit:   #053a1d;   /* réservé aux aplats très sombres */
  --vert-clair:  #e8f6ee;   /* fonds de réussite */
  --vert-pale:   #cdebd9;   /* survols, entêtes */

  --orange:      #f8a000;   /* accent : identité, à faire, attention */
  --orange-fonce:#8a5a00;   /* texte sur fond orange clair */
  --orange-clair:#fdf3e0;

  /* --- sémantique (à ne pas confondre avec les accents de marque) --- */
  --rouge:       #b3261e;   /* refusé, annulé, impayé, alerte */
  --rouge-clair: #fbedec;

  /* --- neutres, légèrement verdis pour rester dans la teinte du logo --- */
  --encre:    #1b2a21;
  --gris:     #5e7368;
  --gris-clair:#8fa197;
  --fond:     #f3f7f4;
  --bord:     #dce5df;
  --blanc:    #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { width: 100%; max-width: 1400px; min-height: 880px; overflow: visible;
       font-family: "Segoe UI", Roboto, Arial, sans-serif; background: var(--fond);
       color: var(--encre); font-size: 12px; }

/* ---------- barre haute avec le logo ---------- */
.topbar { background: var(--vert); color: #fff; display: flex; align-items: center;
          gap: 14px; padding: 9px 18px; }
.topbar .brand { background: #fff; border-radius: 6px; padding: 5px 9px; display: flex;
                 align-items: center; }
.topbar .brand img { height: 26px; display: block; }
.crumb { color: var(--vert-pale); }
.crumb b { color: #fff; font-weight: 600; }
.user { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 11px; }
.badge { background: rgba(255,255,255,.18); padding: 3px 9px; border-radius: 10px; }

/* ---------- bande de contexte ---------- */
.ctx { background: #fff; border-bottom: 1px solid var(--bord); padding: 10px 18px;
       display: flex; gap: 26px; align-items: flex-end; flex-wrap: wrap; }
.ctx .lbl { font-size: 10px; color: var(--gris); text-transform: uppercase; letter-spacing: .3px; }
.ctx .val { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ctx .val.pos { color: var(--vert-fonce); }
.ctx .val.due { color: var(--rouge); }

.wrap { padding: 14px 18px; }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--bord); border-radius: 6px; padding: 12px 14px; }
.kpi .lab { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--gris); }
.kpi .val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 5px; }
.kpi .sub { font-size: 10.5px; color: var(--gris-clair); margin-top: 3px; }
.kpi.hi    { border-top: 3px solid var(--vert); }
.kpi.acc   { border-top: 3px solid var(--orange); }
.kpi.good  .val { color: var(--vert-fonce); }
.kpi.warn  .val { color: var(--rouge); }

.cols { display: grid; grid-template-columns: 1fr 400px; gap: 12px; margin-top: 12px; }
.card { background: #fff; border: 1px solid var(--bord); border-radius: 6px; }
.card + .card { margin-top: 12px; }
.card h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--vert-fonce);
           padding: 11px 14px 9px; display: flex; align-items: center; }
.card h2 .r { margin-left: auto; font-size: 10px; color: var(--gris-clair); text-transform: none;
              letter-spacing: 0; font-weight: 400; }

/* ---------- tableaux ---------- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 9.5px; color: var(--gris); text-transform: uppercase; letter-spacing: .3px;
     padding: 6px 8px; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord);
     background: #fbfdfc; }
td { padding: 7px 8px; border-bottom: 1px solid #eff4f1; font-variant-numeric: tabular-nums;
     vertical-align: middle; }
td.nm { font-variant-numeric: normal; }
.r { text-align: right; } td.r, th.r { white-space: nowrap; }
tr.tot td { font-weight: 700; background: #fbfdfc; border-top: 1px solid var(--bord); }
tr.sel { background: var(--vert-clair); } tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--vert); }
.sub2 { color: var(--gris-clair); font-size: 10px; }
.nm2 { font-weight: 600; }

/* recherche + pagination : règle de tous les tableaux */
.toolbar { display: flex; gap: 8px; align-items: center; padding: 0 14px 10px; flex-wrap: wrap; }
.toolbar input, .toolbar select, input, select { border: 1px solid var(--bord); border-radius: 4px;
    padding: 6px 8px; font-family: inherit; font-size: 12px; color: var(--encre); background: #fff; }
.toolbar input, .toolbar select { width: auto; min-width: 140px; }
.toolbar input.q, input.q { flex: 1; min-width: 180px; width: 100%; }
.toolbar .res { font-size: 10.5px; color: var(--gris-clair); margin-left: auto; white-space: nowrap; }
.pager { display: flex; align-items: center; gap: 7px; padding: 8px 14px 12px; color: var(--gris); font-size: 10.5px; }
.pager .pg { border: 1px solid var(--bord); border-radius: 4px; padding: 3px 8px; background: #fff; }
.pager .pg.on { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 600; }
.pager .sz { margin-left: auto; }

/* ---------- pastilles d'état ---------- */
.tag { font-size: 9.5px; padding: 2px 7px; border-radius: 9px; font-weight: 600; white-space: nowrap; }
.tag.ok    { background: var(--vert-clair);  color: var(--vert-fonce); }
.tag.wait  { background: var(--orange-clair);color: var(--orange-fonce); }
.tag.ko    { background: var(--rouge-clair); color: var(--rouge); }
.tag.info  { background: #eef2f0;            color: #46584e; }
.tag.auto  { background: var(--vert-pale);   color: var(--vert-fonce); }
.tag.loy   { background: var(--orange-clair);color: var(--orange-fonce); }

/* ---------- boutons ---------- */
button, .btn { font-family: inherit; font-size: 12.5px; border-radius: 5px; padding: 9px 13px;
       border: 1px solid var(--bord); background: #fff; color: var(--encre); cursor: default; }
button.primary, .btn.primary { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 700; }
button.accent  { background: var(--orange); border-color: var(--orange); color: #3d2700; font-weight: 700; }

/* ---------- blocs de texte, notes, listes ---------- */
.line { display: flex; justify-content: space-between; padding: 6px 14px; border-bottom: 1px dashed #e9efec; }
.line:last-child { border-bottom: none; }
.line .k { color: var(--gris); } .line .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.line .v.pos { color: var(--vert-fonce); } .line .v.neg { color: var(--rouge); }
.line .v.zero { color: var(--gris-clair); }
.line.big .v { font-size: 15px; }
.note { background: #f8fbf9; border: 1px dashed var(--bord); border-radius: 4px; padding: 8px 10px;
        margin: 0 14px 12px; font-size: 10.5px; color: #46584e; line-height: 1.45; }
.foot { color: var(--gris-clair); font-size: 10.5px; padding: 9px 14px; line-height: 1.45; }
.to { padding: 0 14px 12px; }
.to .it { display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px dashed #e9efec; font-size: 11px;
          line-height: 1.35; }
.to .it:last-child { border-bottom: none; }
.to .ic { width: 18px; height: 18px; border-radius: 50%; flex: none; text-align: center; line-height: 18px;
          font-size: 10px; font-weight: 700; color: #fff; background: var(--rouge); }
.to .ic.o { background: var(--orange); color: #3d2700; }
.to .ic.b { background: var(--vert); }
.to .dg { color: var(--gris-clair); font-size: 10px; }
.msg { background: #f8fbf9; border: 1px dashed var(--bord); border-radius: 4px; padding: 9px 11px;
       margin: 0 14px 12px; font-size: 11px; line-height: 1.5; }
.canaux { display: flex; gap: 8px; padding: 0 14px 10px; }
.canal { border: 1px solid var(--bord); border-radius: 5px; padding: 6px 10px; font-size: 11px; background: #fff; }
.canal.on { border-color: var(--vert); background: var(--vert-clair); color: var(--vert-fonce); font-weight: 600; }
.pad { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.pad button { width: 100%; }
.fld { padding: 0 14px 9px; }
.fld .k { font-size: 10px; color: var(--gris); } .fld .v { font-size: 12.5px; font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- barres et micro-graphiques ---------- */
.bar { height: 10px; background: #edf2ef; border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--vert); }
.bar > i.md { background: var(--orange); } .bar > i.hi { background: var(--rouge); }
.part { height: 10px; background: #edf2ef; border-radius: 3px; overflow: hidden; }
.part > i { display: block; height: 100%; background: var(--orange); }
.fill .bar { width: 54px; display: inline-block; vertical-align: middle; }

/* ---------- formulaires ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 0 14px 12px; }
.form.one { grid-template-columns: 1fr; }
.form.three { grid-template-columns: 1fr 1fr 1fr; }
.f label { display: block; font-size: 10px; color: var(--gris); margin-bottom: 3px; }
.f input, .f select { width: 100%; }
input.big { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini { font-size: 10px; color: var(--gris-clair); line-height: 1.35; }
.moyens { display: flex; gap: 8px; flex-wrap: wrap; }
.moyen { border: 1px solid var(--bord); border-radius: 5px; padding: 6px 10px; font-size: 11.5px; background: #fff; }
.moyen.on { border-color: var(--vert); background: var(--vert-clair); color: var(--vert-fonce); font-weight: 600; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px 8px; }

/* ---------- flux de statuts ---------- */
.flux { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px; }
.flux .et { border: 1px solid var(--bord); border-radius: 12px; padding: 3px 10px; font-size: 10.5px;
            background: #fff; color: var(--gris); }
.flux .et.on { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 600; }
.flux .ar { color: var(--gris-clair); font-size: 11px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .cols { grid-template-columns: 1fr; }
  body { min-height: 0; }
}
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; padding: 9px 14px; gap: 9px; }
  .crumb { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .wrap { padding: 10px; }
  .ctx { gap: 10px 18px; padding: 10px 14px; }
  .card h2 .r { display: none; }
  table { table-layout: fixed; font-size: 10.5px; }
  td, th { word-break: break-word; padding: 4px 5px; }
  td.r, th.r { white-space: nowrap; }
  .grid2, .form, .form.three, .duo { grid-template-columns: 1fr; }
}

/* --- Blocs de dossier : composants repris des maquettes, qui n'étaient pas
   remontés dans le thème partagé. Sans eux, la fiche d'un dossier s'effondre
   (bloc client, montants, puces de prise en charge). --- */
.dossier { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; padding: 6px 14px 0; }
.who .nm { font-size: 17px; font-weight: 700; }
.who .sub { color: #6b7b8d; font-size: 11px; margin-top: 3px; }
.kv { display: flex; gap: 30px; flex-wrap: wrap; }
.kv .k { font-size: 10px; color: #6b7b8d; text-transform: uppercase; letter-spacing: .3px; }
.kv .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kv .v.due { color: #a3402a; }
.kv .v.ok { color: #1c7a45; }
.pc { display: flex; flex-wrap: wrap; gap: 5px 7px; font-size: 11px; }
.pc span { border: 1px solid #cfe0d5; background: #f4f8f5; border-radius: 10px; padding: 2px 8px; }
.pc span.retire { border-color: #e2bdb5; background: #fdf1ee; color: #a3402a; }
.tag { font-size: 10px; padding: 2px 7px; border-radius: 9px; background: #e8f0fb;
       color: #14508f; font-weight: 600; }
a.btn, .btn { display: inline-block; font-size: 13px; border-radius: 5px; padding: 9px 14px;
              border: 1px solid #c8d2de; background: #fff; color: #1c2430;
              text-decoration: none; font-family: inherit; cursor: pointer; }