/* UltraPC 23/10/2026 — Accueil : vignettes des boutiques de marque (templates/_partials/upc-boutiques-accueil.tpl).
   Une ligne de 4 sous le slider ; defilement horizontal sur mobile. Couleurs reprises de chaque boutique. */
.upc-vg { clear: both; padding: 18px 0 6px; }
.upc-vg__titre { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: #2b2f36; font: 700 17px/1.2 "Open Sans", sans-serif; }
.upc-vg__titre::after { content: ""; flex: 1; height: 1px; background: #e1e5ec; }
.upc-vg__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.upc-vg__item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 118px;
  padding: 14px 0 14px 16px;
  overflow: hidden;
  border-radius: 10px;
  color: #fff;
  text-decoration: none !important;
  isolation: isolate;
  transition: transform .2s, box-shadow .2s;
}
.upc-vg__item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.upc-vg__item:focus-visible { outline: 3px solid #19488f; outline-offset: 2px; }
.upc-vg__texte { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; max-width: 60%; }
.upc-vg__logo { display: block; width: auto; max-width: 100%; height: 22px; margin-bottom: 6px; object-fit: contain; object-position: left center; }
.upc-vg__label { font: 700 10.5px/1.2 "Open Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.upc-vg__desc { font: 600 13px/1.3 "Open Sans", sans-serif; }
.upc-vg__cta { margin-top: 6px; font: 700 12.5px/1 "Open Sans", sans-serif; }
.upc-vg__produit {
  position: absolute;
  right: -6px;
  bottom: 50%;
  z-index: 0;
  width: 46%;
  max-height: 104px;
  height: auto;
  object-fit: contain;
  transform: translateY(50%);
  transition: transform .3s cubic-bezier(.2, 0, 0, 1);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
}
.upc-vg__item:hover .upc-vg__produit { transform: translateY(50%) translateX(-6px) scale(1.06); }

/* couleurs des boutiques */
.upc-vg__item--razer { background: radial-gradient(circle at 80% 50%, rgba(68, 214, 44, .35), transparent 60%), #000; }
.upc-vg__item--razer .upc-vg__cta { color: #44d62c; }
.upc-vg__item--logitech { background: radial-gradient(circle at 80% 50%, rgba(0, 184, 252, .35), transparent 60%), #000; }
.upc-vg__item--logitech .upc-vg__cta { color: #00b8fc; }
.upc-vg__item--redragon { background: radial-gradient(circle at 80% 50%, rgba(229, 24, 32, .38), transparent 60%), radial-gradient(circle at 100% 0%, rgba(70, 60, 255, .25), transparent 55%), #090909; }
.upc-vg__item--redragon .upc-vg__cta { color: #ff4a50; }
.upc-vg__item--redragon .upc-vg__logo { height: 26px; }
.upc-vg__item--attack-shark { background: radial-gradient(circle at 80% 50%, rgba(84, 140, 252, .55), transparent 62%), linear-gradient(120deg, #040915, #0a1838); }
.upc-vg__item--attack-shark .upc-vg__cta { color: #8db2ff; }
.upc-vg__item--attack-shark .upc-vg__logo { height: 28px; }

@media (max-width: 991px) {
  .upc-vg__liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 260px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
  .upc-vg__liste::-webkit-scrollbar { display: none; }
  .upc-vg__item { scroll-snap-align: start; }
}
@media (max-width: 575px) {
  .upc-vg { padding-top: 12px; }
  .upc-vg__liste { grid-auto-columns: 78%; }
}
@media (prefers-reduced-motion: reduce) { .upc-vg__item, .upc-vg__produit { transition: none; } }
/* le theme masque #alt-column sur mobile : on l'affiche quand il porte les vignettes */
#alt-column:has(.upc-vg) { display: block !important; }