/* TP PILOT — couche d'interactivité (interactif.js) */
:root{--ix-navy:#122440;--ix-yellow:#e8a92b;--ix-line:#e2e9f2;--ix-muted:#5b6b80;--ix-pos:#1f7a4d;--ix-neg:#b4321c}

/* Cartes cliquables */
.metric{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.metric.ix-link{cursor:pointer;position:relative}
.metric.ix-link::after{content:'→';position:absolute;top:12px;right:14px;color:var(--ix-muted);opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s}
.metric.ix-link:hover,.metric.ix-link:focus-visible{transform:translateY(-3px);box-shadow:0 10px 24px rgba(18,36,64,.12);border-color:var(--ix-yellow);outline:none}
.metric.ix-link:hover::after,.metric.ix-link:focus-visible::after{opacity:1;transform:none}
.metric.ix-link:active{transform:translateY(-1px) scale(.99)}

/* Tableaux */
.ix-filter{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.ix-filter input{flex:1;max-width:320px;padding:8px 12px;border:1px solid var(--ix-line);border-radius:10px;font:inherit;font-size:14px;background:#fff}
.ix-filter input:focus{outline:2px solid var(--ix-yellow);outline-offset:1px;border-color:transparent}
.ix-filter span{font-size:12px;color:var(--ix-muted)}
th.ix-sort{cursor:pointer;user-select:none;white-space:nowrap}
th.ix-sort::after{content:'↕';margin-left:6px;opacity:.3;font-size:11px}
th.ix-sort[aria-sort=ascending]::after{content:'↑';opacity:1}
th.ix-sort[aria-sort=descending]::after{content:'↓';opacity:1}
th.ix-sort:hover{color:var(--ix-navy)}
tbody tr{transition:background-color .15s}
tbody tr:hover{background:#f6f9fc}

/* Graphique */
.ix-chart .ix-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--ix-muted);margin-bottom:8px}
.ix-chart .ix-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.ix-svgwrap{position:relative}
.ix-svgwrap svg{width:100%;height:auto;display:block}
i.ix-sale,.ix-bar.ix-sale{background:var(--ix-navy);fill:var(--ix-navy)}
i.ix-budget,.ix-bar.ix-budget{background:var(--ix-yellow);fill:var(--ix-yellow)}
.ix-bar{transform-box:fill-box;transform-origin:left;animation:ix-grow .7s cubic-bezier(.2,.8,.2,1) both}
.ix-bar.ix-budget{animation-delay:.08s}
.ix-row{cursor:default;outline:none}
.ix-row .ix-bar{transition:opacity .15s}
.ix-svgwrap:hover .ix-row:not(.on) .ix-bar{opacity:.45}
.ix-lab{font-size:13px;fill:var(--ix-navy);font-weight:600}
.ix-val{font-size:12px;font-weight:700}
.ix-val.pos{fill:var(--ix-pos)}.ix-val.neg{fill:var(--ix-neg)}
.ix-tip{position:absolute;z-index:5;white-space:pre;background:var(--ix-navy);color:#fff;font-size:12px;line-height:1.5;padding:8px 10px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.2);pointer-events:none}

/* Animations */
main.ix-enter>*{animation:ix-in .35s ease both}
main.ix-enter>*:nth-child(2){animation-delay:.04s}
main.ix-enter>*:nth-child(3){animation-delay:.08s}
main.ix-enter>*:nth-child(n+4){animation-delay:.12s}
.btn,button{transition:transform .12s ease,box-shadow .15s ease,background-color .15s ease}
.btn:active,form button:active{transform:scale(.97)}
#toast:not(:empty){animation:ix-pop .3s cubic-bezier(.2,1.4,.4,1) both}
@keyframes ix-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ix-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ix-pop{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){main.ix-enter>*,.ix-bar,#toast:not(:empty){animation:none}.metric,.btn,button{transition:none}}

/* Cibles tactiles confortables sur téléphone (40 px minimum) */
@media (max-width:700px) and (pointer:coarse){
  main button,main select,main .btn,main input:not([type=checkbox]):not([type=radio]):not([type=range]){min-height:40px}
  main .btn.mini{padding-top:8px;padding-bottom:8px}
}