/* Onglet Composition des indices : carte des variations et liste des valeurs */

.ic-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ic-breadth { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-weight: 600; min-width: 220px; flex: 1; }
.ic-breadth-bar { flex-basis: 100%; display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--panel-2); max-width: 360px; }
.ic-breadth-bar .up-fill { background: var(--up); }
.ic-breadth-bar .down-fill { background: var(--down); margin-left: auto; }
.ic-controls { display: flex; gap: 8px; flex-wrap: wrap; }


/* Carte : tuiles colorées selon la variation du jour, plus grandes pour les grosses capitalisations */
.ic-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: 78px; grid-auto-flow: dense; gap: 4px; margin-top: 10px; }
.ic-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; border-radius: 8px; color: #fff; font: inherit; cursor: pointer; padding: 6px; min-width: 0;
  transition: transform .15s, box-shadow .15s;
}
.ic-tile:hover { transform: scale(1.03); box-shadow: 0 0 0 2px rgba(255,255,255,.35); z-index: 1; }
.ic-tile.big { grid-column: span 2; grid-row: span 2; }
.ic-tile.mid { grid-column: span 2; }
.ic-tile .logo-wrap { width: 24px; height: 24px; }
.ic-tile.big .logo-wrap { width: 40px; height: 40px; }
.ic-name { font-size: 12px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.ic-tile.big .ic-name { font-size: 15px; }
.ic-change { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .95; }
.ic-tile.big .ic-change { font-size: 16px; font-weight: 700; }

/* Liste */
.ic-list { display: flex; flex-direction: column; margin-top: 8px; }
.ic-row {
  display: grid; grid-template-columns: 28px minmax(160px, 1.6fr) 1fr 104px 1.4fr; align-items: center; gap: 10px;
  background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--text); font: inherit;
  text-align: left; padding: 7px 4px; cursor: pointer;
}
.ic-row:hover:not(.ic-header) { background: var(--panel-2); }
.ic-header { cursor: default; padding-top: 0; }
.ic-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ic-who > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ic-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-price { font-variant-numeric: tabular-nums; }
.ic-row .pill { justify-self: start; font-size: 12px; }
.ic-size { display: flex; align-items: center; gap: 8px; }
.ic-size .hbar-track { flex: 1; }
.ic-size b { font-weight: 500; font-size: 12px; white-space: nowrap; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .ic-row { grid-template-columns: 22px 1fr auto; }
  .ic-row .ic-price, .ic-row .ic-size, .ic-header span:nth-child(n+3) { display: none; }
  .ic-map { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}