/* =========================================================================
   Collection DoNNiii — Stores et dématérialisé
   ========================================================================= */

/* ---------- Pilule de store (Steam, GOG, Epic, etc.) ---------- */

.store-pill {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .22em .55em;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 2px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}
.store-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.store-pill-sm { font-size: .68rem; padding: .2em .5em; }
.store-pill-md { font-size: .85rem; padding: .3em .7em; }
.store-pill-lg { font-size: 1rem;   padding: .4em .9em; }

.store-icon-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .25em;
  padding: .1em;
  flex-shrink: 0;
}
.store-icon-img img {
  display: block;
  width: 1em;
  height: 1em;
  object-fit: contain;
}
.store-pill-md .store-icon-img img { width: 1.15em; height: 1.15em; }
.store-pill-lg .store-icon-img img { width: 1.35em; height: 1.35em; }
.store-label { line-height: 1; }

/* ---------- Badge "Démat" sur les cartes ---------- */

.demat-badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .2em .55em;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(135deg, #00BFFF 0%, #1E90FF 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
}
.demat-badge::before { content: '💾'; }

.hybrid-badge {
  background: linear-gradient(135deg, #9333EA 0%, #C026D3 100%);
}
.hybrid-badge::before { content: '🔀'; }

/* ---------- Carte démat : liseré bleu discret ---------- */

.game-card.is-demat {
  position: relative;
}
.game-card.is-demat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 191, 255, .35);
  z-index: 1;
}

.game-card.is-hybrid::before {
  box-shadow: inset 0 0 0 1px rgba(147, 51, 234, .4);
}

/* ---------- Page Démat : stores liste ---------- */

.stores-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  background: linear-gradient(135deg, #141414 0%, #1a1a1a 100%);
  border: 1px solid #2a2a2a;
  border-radius: .5rem;
  margin-bottom: .5rem;
  transition: all .2s ease;
}
.stores-row:hover {
  border-color: #D4A95C;
  box-shadow: 0 2px 8px rgba(212, 169, 92, .15);
}
.stores-row.inactive { opacity: .55; }
.stores-row-preview { min-width: 200px; }
.stores-row-info { flex: 1; }
.stores-row-info .slug { font-family: monospace; font-size: .8rem; color: #888; }
.stores-row-actions { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ---------- Sélecteur multi-stores (formulaire) ---------- */

.stores-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.stores-picker .store-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.stores-picker .store-choice input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.stores-picker .store-choice .store-pill {
  opacity: .4;
  filter: grayscale(.7);
  transition: opacity .15s, filter .15s, transform .15s;
}
.stores-picker .store-choice:hover .store-pill {
  opacity: .7;
  transform: translateY(-1px);
}
.stores-picker .store-choice input:checked ~ .store-pill {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 2px #D4A95C, 0 2px 6px rgba(0,0,0,.3);
}

/* ---------- Détails store sur fiche jeu ---------- */

.demat-stores-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.demat-store-entry {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .85rem;
  background: rgba(0, 191, 255, .04);
  border: 1px solid rgba(0, 191, 255, .15);
  border-radius: .4rem;
  flex-wrap: wrap;
}
.demat-store-entry .store-pill { flex-shrink: 0; }
.demat-store-entry .meta {
  font-size: .85rem;
  color: #aaa;
  flex: 1;
  min-width: 200px;
}
.demat-store-entry .meta strong { color: #fff; }
.demat-store-entry .meta .free {
  color: #6BCB77;
  font-weight: 600;
}

/* ---------- Vue tableau (page démat) ---------- */

.table-demat {
  font-size: .9rem;
}
.table-demat th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #999;
  font-weight: 600;
}
.table-demat td { vertical-align: middle; }
.table-demat .cover-mini {
  width: 36px;
  height: 48px;
  object-fit: cover;
  border-radius: .25rem;
  background: #222;
}
.table-demat tr:hover { background: rgba(212,169,92,.05); }

.view-toggle {
  display: inline-flex;
  border: 1px solid #2a2a2a;
  border-radius: .35rem;
  overflow: hidden;
}
.view-toggle .btn {
  border: 0;
  border-radius: 0;
  padding: .35rem .75rem;
  background: transparent;
  color: #888;
}
.view-toggle .btn.active {
  background: rgba(212,169,92,.15);
  color: #D4A95C;
}

/* ---------- Mode clair ---------- */

[data-bs-theme="light"] .stores-row,
.theme-light .stores-row {
  background: #fff;
  border-color: #dee2e6;
}
[data-bs-theme="light"] .stores-row-info .slug,
.theme-light .stores-row-info .slug { color: #6c757d; }
[data-bs-theme="light"] .demat-store-entry .meta,
.theme-light .demat-store-entry .meta { color: #555; }
[data-bs-theme="light"] .demat-store-entry .meta strong,
.theme-light .demat-store-entry .meta strong { color: #111; }

/* En taille sm, on cache le label : seule l'icône s'affiche (compact) */
.store-pill-sm .store-label {
  display: none;
}

/* =========================================================================
   Tooltips CSS sur les pilules stores (au survol)
   ========================================================================= */

.store-pill {
  position: relative;
}
.store-pill[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: .4em .8em;
  border-radius: .35em;
  white-space: nowrap;
  border: 1px solid #D4A95C;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  pointer-events: none;
  z-index: 1000;
  animation: tooltipFadeIn .15s ease;
}
.store-pill[title]:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #D4A95C;
  pointer-events: none;
  z-index: 1000;
}
@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}