/* Suite de ui.css : animations, couleurs par statistique */

/* ── Animations fluides ── */
.stagger>*{animation:itemIn .55s var(--ease) both;animation-delay:calc(var(--i,0) * 26ms)}
@keyframes itemIn{from{opacity:0;transform:translateY(10px)}}
.btn,.mode-btn,.icon-btn,.rmt,.sp-btn,.s-pill,.ui-select,.cal-d,.ed-step{transition:transform .15s var(--ease),background .2s,border-color .2s,color .2s,opacity .2s,box-shadow .2s}
.btn:active,.mode-btn:active,.icon-btn:active:not(:disabled),.rmt:active,.sp-btn:active,.s-pill:active{transform:scale(.96)}
.kpi,.an-card,.rec-card,.sc-card,.ed-card,.day-cell{transition:background .25s ease}
.rk-item,tbody tr{transition:background .18s ease}
.drawer{animation:drawerIn .38s cubic-bezier(.16,1,.3,1)}
@keyframes drawerIn{from{transform:translateX(60px);opacity:0}}
.overlay .modal{animation:modalIn .34s cubic-bezier(.16,1,.3,1)}
.tab-panel.active{animation:panelIn .35s cubic-bezier(.16,1,.3,1)}
.an-bar-fill,.rk-bar-f,.pbar i{animation:barGrow .9s cubic-bezier(.16,1,.3,1) both}
@keyframes barGrow{from{width:0}}

/* ── Couleur propre à chaque statistique (--mc) ── */
.mc-chip{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;margin-right:8px;vertical-align:middle;
  background:color-mix(in srgb,var(--mc,#ff6b00) 14%,transparent);color:var(--mc,#ff6b00)}
.mc-chip .ic{width:13px;height:13px;vertical-align:0}
.kpi .kpi-val{color:var(--mc,var(--text))}
.kpi:hover{background:color-mix(in srgb,var(--mc,#ff6b00) 5%,var(--s1))}
.rec-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;opacity:1;background:color-mix(in srgb,var(--mc,#ff6b00) 13%,transparent)}
.rec-icon .ic{color:var(--mc,#ff6b00)}
.rec-val{color:var(--mc,var(--orange))}
.rec-card:hover{background:color-mix(in srgb,var(--mc,#ff6b00) 5%,var(--s1))}
.an-bar-fill{background:var(--mc,var(--orange))}
.an-card:hover{background:color-mix(in srgb,var(--mc,#ff6b00) 5%,var(--s1))}
.sc-card{border-top:3px solid var(--sc,var(--orange))}
.sc-year{color:var(--sc,var(--orange))}
.ed-card{box-shadow:inset 3px 0 0 var(--ec,var(--orange))}
.ed-card .ed-cnt{color:var(--ec,var(--orange))}
.rmt.on{background:color-mix(in srgb,var(--mc,#ff6b00) 12%,transparent);border-color:color-mix(in srgb,var(--mc,#ff6b00) 40%,transparent);color:var(--mc,var(--orange))}
.since-badge{display:inline-block;padding:0 7px;border-radius:10px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;margin-left:4px}
.ic.star-best{color:var(--gold)}
.td-rank{font-size:14px!important;font-weight:800!important;color:var(--t2)}
.rk-item .score-chip{flex-shrink:0}

/* ── Pleine largeur + tableau des émissions sans défilement horizontal ── */
.wrap{max-width:none}
#tab-streams table{font-size:12.5px}
#tab-streams thead th{white-space:normal;padding:9px 8px;line-height:1.25;vertical-align:bottom}
#tab-streams tbody td{padding:9px 8px}
#tab-streams .td-num{width:1%;text-align:center}
#tab-streams .n-cell{min-width:0;gap:10px}
#tab-streams .n-text{max-width:210px}
#tab-streams .stream-logo,#tab-streams .logo-placeholder{width:34px;height:34px}
#tab-streams .yr-pill{font-size:10.5px;font-weight:500;color:var(--t2);letter-spacing:0}
#tab-streams .rtags{flex-direction:column;align-items:flex-start;gap:3px}
#tab-streams .rtag{padding:1px 6px;font-size:9.5px}
#tab-streams .rank-cell small{margin-left:1px}
#tab-streams .row-go{width:18px;padding-left:0!important;padding-right:6px!important}

/* ── Pastilles de rang : survol dissocié de la ligne ── */
.rtag,.rc-main,.rc-sub,#streamBody .score-chip,.hl{display:inline-block;cursor:pointer;
  transition:transform .3s ease-in-out,box-shadow .3s ease-in-out,background-color .2s ease-in-out}
.rank-cell>span{align-self:flex-start;border-radius:6px;padding:1px 4px;margin:-1px -4px}
.rtag:hover,.rc-main:hover,.rc-sub:hover,#streamBody .score-chip:hover,.hl:hover{transform:scale(1.1) rotate(-2.5deg);box-shadow:0 6px 16px rgba(0,0,0,.13)}
.rc-main:hover,.rc-sub:hover{background:var(--bg)}
/* la ligne ne s'éclaire pas quand on vise un élément cliquable à part */
tbody tr.row-link:has(.rtag:hover,.rc-main:hover,.rc-sub:hover,.score-chip:hover,.n-text:hover,.stream-logo:hover,.logo-placeholder:hover){background:transparent}
tbody tr.row-link:has(.rtag:hover,.rc-main:hover,.rc-sub:hover,.score-chip:hover) .row-go{color:var(--t3)}
/* fiche émission : rangs saison / historique cliquables à part */
.sd-tbl td:has(.rk-cell){cursor:pointer}
.sd-tbl .rk-cell{display:inline-flex;border-radius:8px;padding:2px 6px;margin:-2px -6px;transition:transform .3s ease-in-out,box-shadow .3s ease-in-out,background-color .2s}
.sd-tbl td:has(.rk-cell):hover .rk-cell{transform:scale(1.08) rotate(-2deg);box-shadow:0 6px 16px rgba(0,0,0,.12);background:var(--bg)}
.sd-tbl tbody tr:has(td:has(.rk-cell):hover){background:transparent}
@media(max-width:1400px){
  #tab-streams table{font-size:12px}
  #tab-streams thead th,#tab-streams tbody td{padding-left:6px;padding-right:6px}
  #tab-streams .n-text{max-width:150px}
  #tab-streams .stream-logo,#tab-streams .logo-placeholder{width:30px;height:30px}
  #tab-streams .n-cell{gap:8px}
}