/* Reporting, tableau exécutif, accueil opérationnel et graphiques SVG (27-graphiques.js) — agent D, 28/10/2026.
   Couleurs uniquement par variables ; orange réservé aux liserés (jamais dans une série de graphique). */
:root,[data-theme=light]{
  --s-1:#16315c;--s-2:#00a94f;--s-3:#8a5f00;--s-4:#5b7bb0;--s-5:#7a3e9d;--s-6:#1f7a7a;--s-7:#a3121f;--s-8:#5c6470;--s-autre:#8a96ab;
  --k-grille:#e6ebf2;--k-axe:#000;--k-bulle:#16315c;--k-bulle-texte:#fff;--k-survol:#eef2f8;
}
[data-theme=dark]{
  --s-1:#9fb6d6;--s-2:#3fbf6b;--s-3:#fab219;--s-4:#6fa8ff;--s-5:#c39be0;--s-6:#4fc4c4;--s-7:#ff5a6e;--s-8:#a9b9cc;--s-autre:#6f7f8e;
  --k-grille:#1c2e45;--k-axe:#a9b9cc;--k-bulle:#e3ecf3;--k-bulle-texte:#0b1626;--k-survol:#1a2c45;
}

/* ------------------------------------------------------------ graphiques */
.kg{position:relative;width:100%;min-width:0}
.kg svg{display:block;overflow:visible}
.kg text{fill:var(--k-axe);font-size:11px}
.kg .grille-l{stroke:var(--k-grille);stroke-width:1}
.kg .axe-l{stroke:var(--trait);stroke-width:1}
.kg .marque{cursor:pointer;outline:none;transition:opacity .15s}
.kg .marque:focus-visible{stroke:var(--focus);stroke-width:2}
.kg .cible-l{stroke:var(--texte);stroke-width:1.5;stroke-dasharray:4 3}
.kg .ligne-c{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.kg .aire-c{opacity:.14}
.kg .repere{stroke:var(--texte-2);stroke-width:1;stroke-dasharray:2 3}
.kg .vide{padding:18px;color:var(--texte-2)}
.kg .kg-centre{font-size:20px;font-weight:800;fill:var(--texte)}
.kg .kg-centre-s{font-size:11px;fill:var(--texte-2)}
.kg-anneau{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.kg-legende{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;margin-top:6px}
.kg-legende.colonne{flex-direction:column;flex:1 1 140px;align-items:flex-start}
.kg-legende button{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:2px 4px;cursor:pointer;color:var(--texte);font:inherit;border-radius:4px;min-height:44px}
.kg-legende button:hover{background:var(--k-survol)}
.kg-legende button[aria-pressed=false]{opacity:.45;text-decoration:line-through}
.kg-legende button[disabled]{cursor:default}
.kg-legende .pastille{width:10px;height:10px;border-radius:3px}
.kg-legende .trait{width:14px;height:3px;border-radius:2px;display:inline-block}
.kg-bulle{position:fixed;z-index:80;pointer-events:none;background:var(--k-bulle);color:var(--k-bulle-texte);border-radius:8px;padding:6px 9px;font-size:12px;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;max-width:280px}
.kg-bulle.visible{opacity:1;transform:none}
.kg-bulle .t{font-weight:700;margin-bottom:2px}
.kg-bulle .l{display:flex;align-items:center;gap:6px;white-space:nowrap}
.kg-bulle .l i{width:9px;height:9px;border-radius:2px;display:inline-block}
.kg-bulle .l b{margin-left:auto;padding-left:10px;font-variant-numeric:tabular-nums}
.kg-bulle .a{margin-top:3px;opacity:.85;font-size:11px}
.kg-classe{display:flex;flex-direction:column;gap:2px}
.kg-classe .rang{display:grid;grid-template-columns:minmax(80px,36%) 1fr auto;gap:8px;align-items:center;width:100%;background:none;border:0;padding:6px 4px;color:var(--texte);font:inherit;text-align:left;border-radius:6px;min-height:44px}
.kg-classe button.rang{cursor:pointer}
.kg-classe button.rang:hover,.kg-classe button.rang:focus-visible{background:var(--k-survol)}
.kg-classe .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kg-classe .val{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.kg-classe .val small{font-weight:400;color:var(--texte-2)}
.kg-classe .piste{position:relative;height:14px;background:var(--k-grille);border-radius:4px}
.kg-classe .seg{position:absolute;top:1px;height:12px;border-radius:0 4px 4px 0;transform-origin:left}
.kg-classe .seg+.seg{box-shadow:-2px 0 0 var(--panneau)}
.kg-classe .cible-v{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px dashed var(--texte)}
@keyframes kg-pousse-v{from{transform:scaleY(0)}to{transform:none}}
@keyframes kg-pousse-h{from{transform:scaleX(0)}to{transform:none}}
@keyframes kg-trace{to{stroke-dashoffset:0}}
.kg-pousse-v{transform-box:fill-box;transform-origin:bottom;animation:kg-pousse-v .5s cubic-bezier(.2,.7,.2,1) both}
.kg-pousse-h{animation:kg-pousse-h .5s cubic-bezier(.2,.7,.2,1) both}
.kg-trace{animation:kg-trace .9s ease-out forwards}
@media (prefers-reduced-motion:reduce){.kg-pousse-v,.kg-pousse-h,.kg-trace{animation:none}}

/* ------------------------------------------------------------ écran Reporting */
.rp-filtres{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:8px 0 4px}
.rp-filtres label{display:flex;flex-direction:column;font-size:12px;color:var(--texte-2);gap:2px;min-width:0}
.rp-filtres select,.rp-filtres input{min-width:0;max-width:220px}
.rp-filtres .pousse{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.rp-kpi-etat{font-size:12px}
.rp-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.rp-grille>.carte{margin-bottom:0}
.rp-actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.rp-recherche{display:flex;align-items:center}
.rp-recherche input{width:200px;min-height:44px}
.rp-resultats{list-style:none;margin:0;padding:0}
.rp-resultats li a{display:flex;flex-direction:column;padding:8px 4px;min-height:44px;border-bottom:1px solid var(--trait);text-decoration:none;color:var(--texte)}
.rp-resultats li small{color:var(--texte-2)}
.rp-participant{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:6px}
.rp-titre{font-size:15px;margin:12px 0 0}
.rp-plis{margin:4px 0 12px}
.rp-plis details.pli .kpis{margin-top:0}
.rp-pli-filtres{margin:8px 0}
.rp-pli-filtres .rp-filtres{margin:0 0 4px}
@media (max-width:720px){
  .kpis.kpis-bande{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .kpis.kpis-bande .kpi{padding:8px 6px}
  .kpis.kpis-bande .kpi .l{font-size:12px;letter-spacing:0;text-transform:none;overflow-wrap:anywhere}
  .kpis.kpis-bande .kpi .v{font-size:18px}
  .kpis.kpis-bande .kpi .s{display:none}
  .rp-filtres label{flex:1 1 45%}
  .rp-filtres select,.rp-filtres input{max-width:none;width:100%}
  .rp-grille{grid-template-columns:minmax(0,1fr)}
  .rp-participant{grid-template-columns:1fr}
}
