/* UltraPC - Boutiques de marque : vignettes de l'accueil (carrousel sous le slider : 4 visibles, fleches, defilement).
   Couleurs par vignette : --vg-fond, --vg-lueur, --vg-lien (reglees dans le module). Cadrage : --bq-z, --bq-x, --bq-y. */
#alt-column:has(.upc-vg) { display: block !important; } /* le theme masque #alt-column sur mobile */
.upc-vg { clear: both; padding: 18px 0 6px; }
.upc-vg__tete { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.upc-vg__titre { display: flex; flex: 1; align-items: center; gap: 12px; margin: 0; color: #2b2f36; font: 700 17px/1.2 "Open Sans", sans-serif; }
.upc-vg__titre::after { content: ""; flex: 1; height: 1px; background: #e1e5ec; }
.upc-vg__fleches { display: flex; gap: 6px; }
.upc-vg__fleche { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid #d5dae2; border-radius: 50%; background: #fff; color: #2b2f36; cursor: pointer; transition: background-color .2s, border-color .2s, opacity .2s; }
.upc-vg__fleche:hover { border-color: #19488f; background: #19488f; color: #fff; }
.upc-vg__fleche:disabled { opacity: .35; cursor: default; background: #fff; color: #2b2f36; border-color: #d5dae2; }
.upc-vg__fleche svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* piste defilante : 4 vignettes visibles, le reste a droite */
/* grid-template-columns: none : annule l'ancienne regle « 4 colonnes » (CSS critique en ligne genere avant le carrousel) */
.upc-vg__liste { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 4); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.upc-vg__liste::-webkit-scrollbar { display: none; }
.upc-vg__item { scroll-snap-align: start; }
.upc-vg__item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 118px;
  padding: 14px 0 14px 16px;
  overflow: hidden;
  border-radius: 10px;
  background: radial-gradient(circle at 80% 50%, color-mix(in srgb, var(--vg-lueur, #19488f) 45%, transparent), transparent 60%), var(--vg-fond, #000);
  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: 24px; margin-bottom: 6px; object-fit: contain; object-position: left center; }
.upc-vg__nom { margin-bottom: 4px; font: 800 18px/1 "Open Sans", sans-serif; text-transform: uppercase; }
.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; color: var(--vg-lien, #fff); font: 700 12.5px/1 "Open Sans", sans-serif; }
.upc-vg__produit {
  position: absolute;
  right: -6px;
  top: 50%;
  z-index: 0;
  width: 46%;
  max-height: 104px;
  height: auto;
  object-fit: contain;
  transform: translateY(-50%);
  translate: calc(var(--bq-x, 0) * 1%) calc(var(--bq-y, 0) * 1%);
  scale: var(--bq-z, 1);
  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); }
@media (max-width: 991px) {
  .upc-vg__liste { grid-auto-columns: 260px; padding-bottom: 6px; }
}
@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; } .upc-vg__liste { scroll-behavior: auto; } }