/* =============================================================
   MODAL SUPERMARCHÉ - INTERFACE DE SHOP
   ============================================================= */

#supermarketModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999; /* Sous le modal de quantité (10000+) */
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

#supermarketModal.active {
  display: flex;
}

.supermarket-container {
  position: relative;
  width: 1920px;
  height: 1080px;
  background-image: url('../sprite/shop/interior_shop.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
  transform-origin: center center;
}

.supermarket-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
}

.supermarket-close-btn:hover {
  background: rgba(220, 53, 69, 1);
  transform: scale(1.1);
}

/* Zone des étagères où placer les items */
.shelf-zone {
  position: absolute;
  left: 50.73%; /* 974/1920 = 50.73% */
  top: 19.5%;   /* Descendu un peu plus bas */
  width: 37.81%; /* 726/1920 = 37.81% */
  height: 60%;   /* Augmenté pour mieux espacer les 4 rangées */
  /* Décommenter pour debug */
  /* border: 2px dashed rgba(255, 0, 0, 0.5); */
}

/* Cases de la grille (4 rangées x 5 colonnes) */
.shelf-item {
  position: absolute;
  width: 13.22%;  /* 96/726 = 13.22% de la largeur de shelf-zone */
  height: 14.81%; /* 96/648 = 14.81% ajusté pour height 60% */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;

  /* Style de la case avec fond marron */
  background: linear-gradient(145deg, #8b6f47, #6b5638);
  border: 3px solid #5a4a2f;
  border-radius: 10px;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(139, 111, 71, 0.3);
}

.shelf-item:hover {
  transform: scale(1.15);
  z-index: 5;
  border-color: #ffd700;
  background: linear-gradient(145deg, #a0804f, #806040);
  box-shadow:
    0 6px 16px rgba(255, 215, 0, 0.5),
    inset 0 2px 4px rgba(255, 215, 0, 0.2);
}

.shelf-item img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

/* Badge de prix en angle haut à droite (style badge qui dépasse) */
.shelf-item .item-price-tag {
  position: absolute;
  top: -10px;
  right: -10px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: bold;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(255, 215, 0, 0.4);
  border: 2px solid #fff;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: rotate(15deg);
  transform-origin: center;
  transition: opacity 0.15s;
}

/* Au survol : on masque le badge prix pour laisser place au tooltip */
.shelf-item:hover .item-price-tag {
  opacity: 0;
}

/* Tooltip amélioré avec nom et description au survol */
.shelf-item .item-tooltip {
  display: none;
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 20, 0.98);
  color: white;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  min-width: 200px;
  max-width: 250px;
  z-index: 10000;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
  border: 2px solid #ffd700;
}

.shelf-item .item-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #ffd700;
}

.shelf-item:hover .item-tooltip {
  display: block;
}

.item-tooltip .tooltip-name {
  color: #ffd700;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
}

.item-tooltip .tooltip-description {
  color: #ccc;
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 5px;
}

.item-tooltip .tooltip-price {
  color: #4CAF50;
  font-weight: bold;
  font-size: 13px;
}

.item-tooltip .tooltip-stock {
  color: #81c784;
  font-weight: bold;
  font-size: 12px;
  margin-top: 3px;
}

/* Titre "Boutique de {ville}" en haut centré */
.supermarket-title {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(145deg, #2c3e50, #34495e);
  color: white;
  padding: 15px 40px;
  border-radius: 15px;
  font-size: 32px;
  font-weight: bold;
  z-index: 5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  border: 4px solid #ffd700;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
}

/* Bandeau du multiplicateur de prix de la boutique (coin bas-gauche) */
.supermarket-mult-banner {
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 6px 14px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.supermarket-mult-banner.low  { background: rgba(76,175,80,0.85); color:#fff; }
.supermarket-mult-banner.mid  { background: rgba(255,152,0,0.85); color:#fff; }
.supermarket-mult-banner.high { background: rgba(239,68,68,0.9); color:#fff; }

/* Bouton "Vendre" — positionné à hauteur de la caisse (gauche, milieu) */
.supermarket-sell-btn {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 14px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
  z-index: 6;
  transition: 0.15s;
}
.supermarket-sell-btn:hover {
  transform: translate(-50%, calc(-50% - 2px));
  box-shadow: 0 8px 18px rgba(0,0,0,0.6);
}

/* =============================================================
   PANNEAU DE VENTE - Style inventaire professionnel
   ============================================================= */

.sell-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 100001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sell-overlay.active { display: flex; }

.sell-container {
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9),
              0 0 0 1px rgba(255, 255, 255, 0.05);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  color: white;
  overflow: hidden;
}

/* Header */
.sell-header {
  padding: 24px 30px;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(255, 215, 0, 0.15));
  border-bottom: 2px solid rgba(76, 175, 80, 0.35);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.sell-header-left { flex: 1; }
.sell-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.sell-subtitle {
  margin: 5px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}
.sell-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sell-count {
  background: rgba(76, 175, 80, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(76, 175, 80, 0.5);
  color: #c8e6c9;
}
.sell-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,165,0,0.2));
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid rgba(255, 215, 0, 0.55);
  color: #FFD700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3),
              inset 0 1px 0 rgba(255,255,255,0.1);
}
.sell-balance-icon { font-size: 16px; }
.sell-balance-amount { font-family: 'Courier New', monospace; }
.sell-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sell-close:hover {
  background: rgba(255, 59, 48, 0.3);
  transform: rotate(90deg);
}

/* Tabs */
.sell-tabs {
  display: flex;
  background: rgba(0,0,0,0.2);
  border-bottom: 2px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
  overflow-x: auto;
}
.sell-tab {
  flex: 1;
  min-width: 120px;
  padding: 14px 18px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.sell-tab:hover {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.85);
}
.sell-tab.active {
  color: #4CAF50;
  border-bottom-color: #4CAF50;
  background: rgba(76, 175, 80, 0.12);
}

/* Body */
.sell-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px;
  height: 480px;
  min-height: 480px;
  max-height: 480px;
}
.sell-body::-webkit-scrollbar { width: 10px; }
.sell-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.sell-body::-webkit-scrollbar-thumb {
  background: rgba(76, 175, 80, 0.5);
  border-radius: 5px;
}
.sell-body::-webkit-scrollbar-thumb:hover { background: rgba(76,175,80,0.7); }

/* Grille d'items */
.sell-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, 80px);
  gap: 14px;
  justify-content: center;
}

/* Slot vendable */
.sell-slot {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(0,0,0,0.6));
  border: 2px solid rgba(139,139,139,0.5);
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.4),
              inset 2px 0 3px rgba(255,255,255,0.05);
}
.sell-slot:hover {
  border-color: rgba(76, 175, 80, 0.95);
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(76, 175, 80, 0.45),
              inset 0 -3px 6px rgba(0,0,0,0.4);
}
.sell-slot-image {
  max-width: 54px;
  max-height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.sell-slot-qty {
  position: absolute;
  bottom: 4px;
  right: 6px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  pointer-events: none;
}
.sell-slot-price {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  border: 1px solid #fff;
  pointer-events: none;
}
.sell-slot-weight {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #cfe7ff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  pointer-events: none;
  white-space: nowrap;
}

/* ==================== RARETÉ POISSONS ==================== */
.sell-slot.rarity-common {
  border-color: rgba(170, 170, 170, 0.7);
}
.sell-slot.rarity-uncommon {
  border-color: rgba(76, 175, 80, 0.85);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.4),
              0 0 8px rgba(76, 175, 80, 0.35);
}
.sell-slot.rarity-rare {
  border-color: rgba(64, 156, 255, 0.9);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.4),
              0 0 10px rgba(64, 156, 255, 0.45);
}
.sell-slot.rarity-epic {
  border-color: rgba(186, 85, 211, 0.95);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.4),
              0 0 12px rgba(186, 85, 211, 0.55);
}
.sell-slot.rarity-legendary {
  border-color: rgba(255, 165, 0, 1);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.4),
              0 0 14px rgba(255, 165, 0, 0.7),
              inset 0 0 12px rgba(255, 215, 0, 0.2);
  animation: legendaryPulse 2.5s ease-in-out infinite;
}
@keyframes legendaryPulse {
  0%, 100% { box-shadow: inset 0 -3px 6px rgba(0,0,0,0.4), 0 0 14px rgba(255, 165, 0, 0.7), inset 0 0 12px rgba(255, 215, 0, 0.2); }
  50%      { box-shadow: inset 0 -3px 6px rgba(0,0,0,0.4), 0 0 22px rgba(255, 215, 0, 0.95), inset 0 0 16px rgba(255, 215, 0, 0.35); }
}

/* État vide */
.sell-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 30px;
  color: rgba(255,255,255,0.45);
  font-size: 15px;
}
.sell-empty-icon {
  font-size: 56px;
  margin-bottom: 16px;
  opacity: 0.35;
}

/* Tooltip flottant */
.sell-tooltip {
  position: fixed;
  z-index: 999999999;
  background: rgba(10, 0, 20, 0.98);
  border: 2px solid rgba(76, 175, 80, 0.85);
  border-radius: 8px;
  padding: 14px 16px;
  min-width: 240px;
  max-width: 320px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.9),
              0 0 20px rgba(76,175,80,0.3),
              inset 0 0 30px rgba(76,175,80,0.08);
  color: white;
}
.sell-tooltip.show { opacity: 1; visibility: visible; }
.sell-tooltip-image {
  text-align: center;
  margin-bottom: 12px;
  padding: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
}
.sell-tooltip-image img {
  max-width: 96px;
  max-height: 96px;
  border-radius: 4px;
}
.sell-tooltip-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.sell-tooltip-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
  margin-bottom: 10px;
  white-space: pre-line;
}
.sell-tooltip-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin: 3px 0;
}
.sell-tooltip-qty { color: #fff; font-weight: 700; }
.sell-tooltip-price {
  color: #FFD700;
  font-weight: 700;
}
.sell-tooltip-action {
  font-size: 11px;
  color: rgba(100, 255, 150, 0.95);
  font-style: italic;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.15);
  text-align: center;
}

/* =============================================================
   MODAL DE QUANTITÉ
   ============================================================= */
.sell-qty-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 100002;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sell-qty-overlay.active { display: flex; }
.sell-qty-container {
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.9),
              0 0 0 1px rgba(76,175,80,0.4);
  width: 100%;
  max-width: 480px;
  color: white;
  overflow: hidden;
}
.sell-qty-header {
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(76,175,80,0.2), rgba(255,215,0,0.12));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sell-qty-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}
.sell-qty-close {
  background: rgba(255,255,255,0.08);
  border: none;
  color: white;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.sell-qty-close:hover {
  background: rgba(255,59,48,0.3);
  transform: rotate(90deg);
}
.sell-qty-body { padding: 22px; }
.sell-qty-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 18px;
}
.sell-qty-preview img {
  width: 60px; height: 60px;
  object-fit: contain;
  background: rgba(0,0,0,0.4);
  border-radius: 8px;
  padding: 6px;
}
.sell-qty-info { flex: 1; }
.sell-qty-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.sell-qty-unit {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
}
.sell-qty-controls {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  align-items: center;
  justify-content: center;
}
.sell-qty-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 36px;
}
.sell-qty-btn:hover {
  background: rgba(76,175,80,0.25);
  border-color: rgba(76,175,80,0.6);
  color: white;
}
.sell-qty-input {
  width: 80px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(76,175,80,0.5);
  border-radius: 6px;
  color: white;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}
.sell-qty-input::-webkit-outer-spin-button,
.sell-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sell-qty-slider {
  width: 100%;
  margin-bottom: 18px;
  accent-color: #4CAF50;
}
.sell-qty-total {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #FFD700;
  padding: 14px;
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 10px;
  margin-bottom: 18px;
}
.sell-qty-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.sell-qty-cancel,
.sell-qty-confirm {
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.sell-qty-cancel {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
}
.sell-qty-cancel:hover {
  background: rgba(255,255,255,0.15);
  color: white;
}
.sell-qty-confirm {
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  color: white;
  box-shadow: 0 4px 12px rgba(76,175,80,0.4);
}
.sell-qty-confirm:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(76,175,80,0.55);
}
.sell-qty-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Affichage du solde en haut à gauche */
.supermarket-balance {
  position: absolute;
  top: 20px;
  left: 20px;
  background: linear-gradient(145deg, #2c3e50, #34495e);
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 22px;
  font-weight: bold;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 3px solid #ffd700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.supermarket-balance .coin-icon {
  font-size: 24px;
}

.supermarket-balance .coin-amount {
  color: #ffd700;
}

/* Animation de déduction d'argent */
.money-deduction-animation {
  position: absolute;
  top: 20px;
  left: 200px; /* À droite du solde */
  font-size: 28px;
  font-weight: bold;
  color: #ff4444;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  z-index: 10;
  pointer-events: none;
  animation: moneyDeductionFloat 2s ease-out forwards;
}

@keyframes moneyDeductionFloat {
  0% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-30px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(0.8);
  }
}

/* Loading spinner */
.supermarket-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  text-align: center;
}

.supermarket-loading::after {
  content: '⏳';
  display: block;
  font-size: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive pour petits écrans - scale proportionnel */
@media (max-width: 1920px) and (min-width: 1601px) {
  .supermarket-container {
    transform: scale(0.85);
  }
}

@media (max-width: 1600px) and (min-width: 1201px) {
  .supermarket-container {
    transform: scale(0.7);
  }
}

@media (max-width: 1200px) and (min-width: 801px) {
  .supermarket-container {
    transform: scale(0.55);
  }
}

@media (max-width: 800px) {
  .supermarket-container {
    transform: scale(0.35);
  }
}

/* Ajustement dynamique selon la taille de viewport */
@media (max-height: 900px) {
  .supermarket-container {
    transform: scale(0.75);
  }
}

@media (max-height: 700px) {
  .supermarket-container {
    transform: scale(0.6);
  }
}