/* Haradon 08/10 : bloc Item Shop (itemshop.js). Classes is-* seulement ; couleurs = variables de website.css. */
.is-shop { text-align: left; }
.is-top { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.is-lang { background: var(--bg-panel, #131828); color: var(--text, #d0d4dc); border: 1px solid var(--border, #2a3350); border-radius: 4px; padding: 4px 8px; }
.is-rankbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 12px 16px; margin-bottom: 24px;
  background: var(--bg-panel, #131828); border: 1px solid var(--border-gold, #5a4a28); border-radius: var(--panel-radius, 6px);
}
.is-ranklab { display: flex; align-items: center; gap: 10px; color: var(--gold-light, #f0d78a); font-family: 'Cinzel', serif; }
.is-rank { background: var(--bg-panel-alt, #111520); color: var(--text-bright, #eef0f4); border: 1px solid var(--border-light, #3a4a6a); border-radius: 4px; padding: 5px 8px; font-size: 1rem; }
.is-note { color: var(--text-dim, #7a8094); }
.is-note.is-on { color: var(--accent-green, #33aa55); font-weight: bold; }
.is-sec { margin-bottom: 36px; }
.is-h { font-family: 'Cinzel', serif; color: var(--gold, #d4a847); font-size: 1.6rem; margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.is-h3 { font-family: 'Cinzel', serif; color: var(--gold-light, #f0d78a); font-size: 1.1rem; margin: 22px 0 10px; }
.is-sub { color: var(--text-dim, #7a8094); line-height: 1.6; margin: 0 0 14px; }
.is-votelink { color: var(--gold-light, #f0d78a); }
.is-vote {
  font-family: inherit; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  color: #fff; background: var(--download-bg, #b02020); border-radius: 12px; padding: 3px 10px;
}
.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.is-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; background: var(--bg-panel, #131828);
  border: 1px solid var(--border, #2a3350); border-radius: var(--panel-radius, 6px);
}
.is-card:hover { border-color: var(--border-light, #3a4a6a); }
.is-item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.is-ic {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 4px; background: #0a0d16 center / contain no-repeat;
  border: 1px solid var(--border-light, #3a4a6a);
}
.is-txt { display: flex; flex-direction: column; min-width: 0; }
.is-name { font-weight: bold; line-height: 1.25; overflow-wrap: anywhere; }
.is-item:hover .is-name { text-decoration: underline; }
.is-st { color: var(--text-dim, #7a8094); font-size: .85rem; }
.is-q0, .is-q20 { color: var(--text-bright, #eef0f4); }
.is-q10 { color: #9d9d9d; }
.is-q30 { color: #1eff00; }
.is-q40 { color: #3d9bff; }
.is-q50 { color: #b55cf5; }
.is-q60 { color: #ff8000; }
.is-q70 { color: #e6cc80; }
.is-req { font-size: .85rem; color: var(--accent-red, #cc3333); }
.is-req.is-ok { color: var(--accent-green, #33aa55); }
.is-locked .is-item, .is-locked .is-price { opacity: .45; filter: grayscale(.85); }
.is-price {
  position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  cursor: help; outline: none; border-radius: 4px; padding: 1px 4px; margin-left: -4px;
}
.is-price:focus-visible { box-shadow: 0 0 0 2px var(--gold, #d4a847); }
.is-val { color: var(--gold-light, #f0d78a); font-size: 1.05rem; }
.is-old { color: var(--text-dim, #7a8094); }
.is-cur { width: 20px; height: 20px; background: center / contain no-repeat; }
.is-price[data-tip]:hover::after, .is-price[data-tip]:focus::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20;
  width: max-content; max-width: min(280px, 80vw); white-space: normal; text-align: left;
  padding: 8px 10px; font-size: .85rem; line-height: 1.45; font-weight: normal;
  color: var(--text-bright, #eef0f4); background: #05070d; border: 1px solid var(--border-gold, #5a4a28); border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55); filter: none;
}
.is-locked .is-price[data-tip]:hover, .is-locked .is-price[data-tip]:focus { opacity: 1; filter: none; }
@media (max-width: 520px) {
  .is-grid { grid-template-columns: 1fr; }
  .is-h { font-size: 1.3rem; }
}