/* ===== Vox Aetern'Art — SHOP (FULL CSS) =======================================
   Ne change que ce qui suit : espacement uniforme, select stable, et garde
   tout le style validé précédemment.
============================================================================== */

/* ---------------- Variables ---------------- */
:root{
  --va-text:#e7e7e7;
  --va-muted:#a8a8a8;

  /* Frame/borders (blog-like) */
  --va-border: rgba(150,150,150,0.30);

  /* Approved palette */
  --violet-left:             #cfc4ff;   /* The Character Series / Figure */
  --menu-eisth-pink-lite:    #ff61ad;   /* The World of Eisth titles */
  --char-collect-text:       #8fb0ff;   /* Character Collectibles (mix un peu + bleu) */
  --pink-light:              #ffa0d2;   /* Eisth Collectibles (light pink) */

  --va-bg-100: rgba(18,18,28,.55);
  --va-bg-200: rgba(12,12,20,.88);

  --va-shadow: 0 10px 24px rgba(0,0,0,.35);

  /* angles plus carrés */
  --radius-xl: 0px; --radius-lg: 4px; --radius-md: 3px; --radius-sm: 3px;

  --shell-gap:18px;

  /* === Espacement validé (Collectibles) === */
  --va-first-gap: 36px;      /* marge entre toolbar et 1ère vignette */
  --va-sep-gap:   40px;      /* espace entre produits */
  --va-sep-pad:   42px;      /* padding haut pour tracer le séparateur */
}

/* ---------------- Page shell ---------------- */
.va-shop{ position:relative; z-index:2; margin:36px auto 100px; padding:0 20px; color:var(--va-text); max-width:1440px; width:100%; }
.va-shop *{ box-sizing:border-box; }

/* ---------------- Layout ---------------- */
.va-layout{ display:grid; grid-template-columns:300px 1fr; gap:28px; }


/* ---------------- Sidebar / Explore ---------------- */
.va-filter{
  background:rgba(12,12,20,.85);
  border:2px solid var(--va-border);
  border-radius:var(--radius-xl);
  padding:20px;
  box-shadow:0 0 14px rgba(169,163,243,.18);
  position: relative; z-index: 1;
}

/* Titre + flèches */
.va-filter__titlewrap{ display:flex; align-items:center; justify-content:center; margin-bottom:36px; position:relative; z-index:3; }
.va-explore-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:5px; width:100%;
  border:2px solid var(--va-border);
  background: var(--va-bg-100);
  padding:8px 26px;
  border-radius: var(--radius-xl);
  position: relative; z-index:4;
}
.va-filter__title{
  margin:0; font-size:22px; letter-spacing:.3px;
  font-family:'Orbitron', sans-serif;
  text-align:center; flex: 1 1 auto;
  text-shadow: 0 0 4px rgba(255,255,255,0.08);
}
/* --- Explore arrows always on top & clickable --- */
.va-filter__titlewrap{ position: relative; z-index: 3; }
.va-explore-bar{ position: relative; z-index: 4; }
.va-filter__arrow{
  position: relative;
  z-index: 5;
  cursor: pointer;
  pointer-events: auto !important;
  opacity: 1 !important;
  filter: none !important;
  width:30px; height:auto; user-select:none;
  transition: transform .12s ease, opacity .12s ease, filter .12s ease;
}
.va-filter__arrow:active{ transform: scale(.96); }
.va-filter__arrow.is-disabled{ opacity:.6 !important; filter: grayscale(.2) !important; }
.va-filter__arrow::after{ content:""; position:absolute; inset:-6px; } /* hitbox */

/* Liste scrollable */
.va-filter__list{
  list-style:none; padding:0; margin:18px 0 0;
  display:flex; flex-direction:column; gap:16px;
  max-height: clamp(260px, 55vh, 520px);
  overflow:auto; scroll-behavior:smooth; padding-right:6px;
  -webkit-overflow-scrolling: touch;
}
.va-filter__list::-webkit-scrollbar{ width:8px; }
.va-filter__list::-webkit-scrollbar-thumb{
  background: rgba(150,150,150,.28);
  border-radius: 8px;
}

/* Boutons de catégories */
.va-filter__link{
  appearance:none; display:flex; align-items:center; justify-content:center;
  width:100%; padding:13px 16px;
  border:2px solid var(--va-border);
  border-radius:var(--radius-md);
  background:var(--va-bg-100);
  color:var(--va-text);
  cursor:pointer; line-height:1; text-align:center;
  transition: box-shadow .18s, border-color .18s, color .18s;
  font-size:16px; position:relative; z-index:0;
}
/* Hover fix: pas de translate qui “mord” le haut */
.va-filter__link:hover{
  transform: none;
  box-shadow:0 0 10px rgba(159,159,208,.22), inset 0 0 6px rgba(159,159,208,.12);
}

/* Polices & couleurs (inchangées) */
.va-filter__link[data-cat="all"]{
  color:#fff; font-family:'Orbitron', sans-serif;
  text-shadow: 0 0 2px rgba(255,255,255,.10);
}
.va-filter__link[data-cat="character"]{
  color:#cfc4ff; font-family:'Hellios Gothic', serif; font-size:18px;
  text-shadow:
    0 0 6px  #8ab6ff,
    0 0 14px #8ab6ff,
    0 0 28px #5f5fa0,
    0 0 48px #5f5fa0;
}
.va-filter__link[data-cat="eisth"]{
  color:var(--menu-eisth-pink-lite); font-family:'Thunderstrike Halftone', serif; font-size:18px;
  text-shadow:
    0 0 8px  color-mix(in oklab, var(--menu-eisth-pink-lite) 80%, transparent),
    0 0 16px color-mix(in oklab, var(--menu-eisth-pink-lite) 55%, transparent),
    0 0 26px color-mix(in oklab, var(--menu-eisth-pink-lite) 35%, transparent);
}
.va-filter__link[data-cat="merch"]{
  color:#cfd6e5; font-family:'Orbitron', sans-serif;
  text-shadow: 0 0 3px rgba(255,255,255,.08);
}
.va-filter__link[data-cat="services"]{
  color:#e6d08a; font-family:'Orbitron', sans-serif;
  text-shadow: 0 0 3px rgba(255,255,255,.08);
}

/* Anneau actif simple (non-All) */
.va-filter__link.is-active[data-cat="character"],
.va-filter__link.is-active[data-cat="eisth"],
.va-filter__link.is-active[data-cat="merch"],
.va-filter__link.is-active[data-cat="services"]{
  border: 2px solid transparent;
  border-radius:var(--radius-md);
  border-image-slice:1;
  border-image-source: linear-gradient(currentColor, currentColor);
}

/* ALL (actif) — anneau dégradé sans border-image (pas de bord “mordu”) */
.va-filter__link.is-active[data-cat="all"]{
  position: relative;
  border-color: transparent;
}
.va-filter__link.is-active[data-cat="all"]::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  padding:2px;
  background: linear-gradient(90deg,
    var(--violet-left) 0%,
    var(--menu-eisth-pink-lite) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

/* Sous-catégories */
.va-subfilter{ list-style:none; margin:14px 0 0 0; padding:0 0 0 8px; display:flex; flex-direction:column; gap:14px; }
.va-subfilter__link{
  appearance:none; width:56%; align-self:center; padding:7px 10px;
  border:2px solid var(--va-border);
  background:rgba(18,18,28,.45); color:#fff; border-radius:var(--radius-sm);
  cursor:pointer; text-align:center; letter-spacing:.2px;
  transition: box-shadow .18s, border-color .18s, color .18s;
  position:relative; z-index:0;
}
.va-subfilter__link:hover{
  transform: none;
  box-shadow:0 0 8px rgba(159,159,208,.18), inset 0 0 5px rgba(159,159,208,.10);
}
.va-subfilter__link[data-cat="character"][data-subcat="figure"]{
  font-family:'Hellios Gothic', serif; font-size:17px; color:#cfc4ff;
  text-shadow:
    0 0 6px  #8ab6ff,
    0 0 14px #8ab6ff,
    0 0 28px #5f5fa0;
}
.va-subfilter__link[data-cat="character"][data-subcat="collectibles"]{
  font-family:'Hellios Gothic', serif; font-size:17px; color:var(--char-collect-text);
  text-shadow: 0 0 6px var(--char-collect-text), 0 0 12px var(--char-collect-text);
}
.va-subfilter__link[data-cat="eisth"][data-subcat="scenes" i]{
  font-family:'Thunderstrike Halftone', serif; font-size:13.5px; color:var(--menu-eisth-pink-lite);
  text-shadow:
    0 0 8px  color-mix(in oklab, var(--menu-eisth-pink-lite) 80%, transparent),
    0 0 16px color-mix(in oklab, var(--menu-eisth-pink-lite) 55%, transparent);
}
.va-subfilter__link[data-cat="eisth"][data-subcat="collectibles"]{
  font-family:'Thunderstrike Halftone', serif; font-size:13.5px; color:var(--pink-light);
  text-shadow: 0 0 4px color-mix(in oklab, var(--pink-light) 80%, transparent), 0 0 7px color-mix(in oklab, var(--pink-light) 50%);
}
.va-subfilter__link.is-active{
  border: 2px solid transparent; border-radius:var(--radius-sm);
  border-image-slice:1; border-image-source: linear-gradient(currentColor, currentColor);
}

/* ---------------- Toolbar (Search + Sort) ---------------- */
.va-shop__header{ display:flex; align-items:center; justify-content:flex-end; }
.va-shop__title{ position:absolute !important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; }

.va-shop__toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:nowrap;
  margin-left:auto;
  flex: 0 0 520px; width:520px; min-width:520px; max-width:520px;
}


/* Hauteur fixe pour éviter tout “saut” au focus/ouvrir l'option */
.va-shop__search input, .va-shop__sort select{
  --h: 40px;
  background:var(--va-bg-100); border:2px solid var(--va-border); color:var(--va-text);
  height:var(--h); line-height:var(--h);
  padding:0 12px; border-radius:var(--radius-sm);
  outline:none; box-shadow:var(--va-shadow);
}
.va-shop__search input{ width:260px; min-width:260px; max-width:260px; }
.va-shop__sort select{ width:200px; min-width:200px; max-width:200px; cursor:pointer; }

/* Focus propre qui ne change pas la taille */
.va-shop__search input:focus, .va-shop__sort select:focus{
  border-color: var(--va-border);
  box-shadow: 0 0 0 3px rgba(167,167,196,.15);
  outline: none;
}

/* Dropdown plus sombre */
.va-shop__sort select {
  background: #0f1119;
  color: #ececf7;
}
.va-shop__sort select option,
.va-shop__sort select optgroup {
  background: #0f1119 !important;
  color: #ececf7 !important;
}
.va-shop__sort select option:hover,
.va-shop__sort select option:checked {
  background: #171a24 !important;
  color: #ffffff !important;
}

/* ---------------- Catalog & grid ---------------- */
.va-catalog{ min-width:0; display:grid; grid-template-rows:auto 1fr; gap:52px; min-height:560px; }
.va-shop__grid{ list-style:none; padding:0; margin:0; display:block; position:relative; min-height:380px; }
.va-shop__grid .va-empty{
  display:none !important; position:absolute; inset:0; place-items:center; color:var(--va-muted);
  font-size:15.5px; opacity:.95; padding:16px; text-align:center;
}
.va-shop__grid.is-empty .va-empty{ display:grid !important; }

/* === Séparateurs & marges uniformes (toutes catégories) === */
.va-shop__grid > .va-product{ position:relative; border-top:none; padding-top:0; margin-top:0; }
.va-shop__grid > .va-product.with-sep{ padding-top: var(--va-sep-pad); }
.va-shop__grid > .va-product.with-sep:not([hidden]) + .va-product.with-sep:not([hidden]){ margin-top: var(--va-sep-gap); }
/* Distance validée (Collectibles) appliquée partout */
.va-shop__grid > .va-product.with-sep[data-first-visible]{ margin-top: var(--va-first-gap); }
.va-shop__grid > .va-product.with-sep::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; background: var(--va-border);
}

/* ---------------- Product outer frame ---------------- */
.va-shell{
  position:relative; padding:var(--shell-gap); background:transparent;
  border:4px solid rgba(150,150,150,0.30);
  box-shadow:0 0 25px rgba(0,0,0,.35); border-radius:0;
}

/* ---------------- Product card ---------------- */
.va-product-card{ position:relative; margin:0; }
.va-product-inner{
  position:relative; display:grid; grid-template-columns:1.2fr 1fr; gap:0;
  background:var(--va-bg-200); border:2px solid var(--card-accent, rgba(255,255,255,.82));
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--va-shadow);
  transition: opacity .45s ease, transform .45s ease;
}
.va-media{ position:relative; min-height:340px; border-right:2px solid var(--card-accent, rgba(255,255,255,.82)); }
.va-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Tag + wishlist heart */
.va-card__tag{ position:absolute; top:12px; left:12px; font-size:12px; padding:6px 9px; border-radius:999px; border:2px solid var(--va-border); background:rgba(25,25,40,.65); color:var(--card-accent, #cfd2ff); }
.wishlist-btn{ position:absolute; z-index:3; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:2px solid var(--card-accent, #cfd2ff); background:rgba(25,25,40,.6); cursor:pointer; }
.wishlist-btn::before{ content:"♥"; display:grid; place-items:center; font-size:19px; line-height:36px; color:#fff; text-shadow:0 0 6px rgba(159,159,208,.22); transition:color .18s ease; }
.wishlist-btn.is-active::before{ color:#ff3b5c; }
.wishlist-btn.pulse::before{ animation:heart-pop .24s ease-out; }
.wishlist-btn::after{ content:""; position:absolute; inset:-6px; border:2px solid var(--card-accent, #cfd2ff); border-radius:50%; opacity:0; transform:scale(.6); }
.wishlist-btn.pulse::after{ animation:wish-pulse .42s ease-out; }
@keyframes heart-pop{ 0%{transform:scale(.85)} 60%{transform:scale(1.15)} 100%{transform:none} }
@keyframes wish-pulse{ 0%{opacity:.55} 80%{opacity:0} 100%{opacity:0} }

/* Titles */
.va-card__title{
  margin:0; line-height:1.25; letter-spacing:.2px; font-size:clamp(18px,1.6vw,24px);
  color:var(--card-accent, #fff);
  text-shadow:0 0 8px rgba(255,255,255,.05), 0 0 12px currentColor;
}
.va-product[data-category="character"] .va-card__title{ font-family:'Hellios Gothic', serif; }
.va-product[data-category="eisth"]     .va-card__title{ font-family:'Thunderstrike Halftone', serif; }
.va-product[data-category="merch"]     .va-card__title,
.va-product[data-category="services"]  .va-card__title{ font-family:'Orbitron', sans-serif; }

/* Accent par famille */
.va-product[data-category="character"] .va-product-inner{ --card-accent: #cfc4ff; }
.va-product[data-category="character"][data-subcategory="figure"]       .va-product-inner{ --card-accent: #cfc4ff; }
.va-product[data-category="character"][data-subcategory="collectibles"] .va-product-inner{ --card-accent: var(--char-collect-text); }
.va-product[data-category="eisth"]     .va-product-inner{ --card-accent: var(--menu-eisth-pink-lite); }
.va-product[data-category="eisth"][data-subcategory="collectibles"] .va-product-inner{ --card-accent: var(--pink-light); }
.va-product[data-category="merch"]     .va-product-inner{ --card-accent: #cfd6e5; }
.va-product[data-category="services"]  .va-product-inner{ --card-accent: #e6d08a; }

.va-info{ display:flex; flex-direction:column; gap:12px; padding:18px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06)); }
.va-card__desc{ margin:0; font-size:14.5px; color:#d6d6ee; opacity:.95; }
.va-card__price{ margin:0; font-weight:700; letter-spacing:.35px; }

.va-card__actions{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.va-qty{ display:inline-flex; align-items:center; height:36px; min-width:126px; background:var(--va-bg-100); border:2px solid var(--va-border); border-radius:var(--radius-sm); overflow:hidden; }
.va-qty__btn{ min-width:34px; height:36px; border:none; background:transparent; color:var(--va-text); font-size:18px; cursor:pointer; }
.va-qty__input{ width:46px; height:36px; border:none; background:transparent; color:var(--va-text); text-align:center; font-size:15px; outline:none; -moz-appearance:textfield; }
.va-qty__input::-webkit-outer-spin-button, .va-qty__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.va-btn{ border:2px solid var(--va-border); border-radius:var(--radius-sm); background:rgba(35,35,60,.55); color:var(--va-text); padding:10px 14px; cursor:pointer; white-space:nowrap; transition:box-shadow .2s, transform .12s, border-color .2s, background .2s; }
.va-btn--primary{ display:inline-flex; align-items:center; justify-content:center; height:36px; min-width:140px; }
.va-btn--primary:hover{ border-color:var(--card-accent); background:rgba(45,45,80,.68); box-shadow:0 0 10px rgba(159,159,208,.28), inset 0 0 10px rgba(159,159,208,.12); }







/* === Go to Top button (scoped to the shop footer) === */


/* Conteneur du bouton */
/* ===== GO TO TOP — fond transparent, bordure dégradée uniforme, texte 2 couleurs ===== */
/* Hover/focus : juste la lumière (glow), aucun fond ajouté */
.shop-go-top .go-back-btn:hover,
/* clic */
/* anti-underline/couleurs imposées par styles globaux */
.shop-go-top .go-back-btn:link,
/* accessibilité: moins de mouvement si demandé par l’utilisateur */

/* Conteneur du bouton (en dehors du cadre) */
/* Conteneur du bouton (en dehors du cadre) */
.shop-go-top{
  display: flex;
  justify-content: center;
  margin: -40px 0 12px; /* ← remonte franchement le bouton */
}


/* Bouton GO TO TOP — fond transparent, texte 2 couleurs, bordure dégradée uniforme */
.shop-go-top .go-back-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:220px; padding:12px 24px;
  border-radius:8px;
  text-decoration:none; text-transform:uppercase; letter-spacing:.08em;
  cursor:pointer; font-family:'Orbitron','Montserrat',system-ui,sans-serif;

  background: transparent;

  /* TEXTE : violet -> rose (coupure nette + léger fondu) */
  --violet-text:#cfc4ff;
  --rose-text:#ff66cc;
  --split:50%;
  --feather:4%;
  color: var(--violet-text); /* fallback */
  background-image: linear-gradient(
    90deg,
    var(--violet-text) 0%,
    var(--violet-text) calc(var(--split) - var(--feather)),
    var(--rose-text)   calc(var(--split) + var(--feather)),
    var(--rose-text)   100%
  );
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color: transparent;

  /* BORDURE dégradée (violet foncé -> rose) uniforme sur 4 côtés */
  border:2px solid transparent;
  border-image-slice:1;
  border-image-source: linear-gradient(90deg,#4a1fb8 0%, #ff57b0 100%);

  box-shadow:none;
  transition: box-shadow .2s ease, transform .15s ease;
}

.shop-go-top .go-back-btn:hover,
.shop-go-top .go-back-btn:focus-visible{
  box-shadow:
    0 0 14px rgba(74,31,184,.55),
    0 0 22px rgba(255,87,176,.45);
  transform: translateY(-1px);
  outline:none;
}

.shop-go-top .go-back-btn:active{ transform:translateY(0); }

.shop-go-top .go-back-btn:link,
.shop-go-top .go-back-btn:visited{ text-decoration:none; }

/* The World of Eisth — sous-catégories : texte légèrement plus petit */
.va-subfilter__link[data-cat="eisth"][data-subcat="SCENES"]{ font-size:14px; }
.va-subfilter__link[data-cat="eisth"][data-subcat="collectibles"]{ font-size:14px; }

/* ===================== Responsive (tout en bas) ===================== */
@media (max-width:1100px){ .va-layout{ grid-template-columns:1fr; } }

@media (max-width:900px){
  .va-shop__toolbar{ flex:1 1 auto; width:100%; min-width:0; max-width:none; }
}

@media (prefers-reduced-motion: no-preference){
  .va-product.will-animate .va-product-inner,
  .va-product.will-animate .va-shell{ opacity:0; transform: translateY(8px); }
  .va-product.is-visible .va-product-inner,
  .va-product.is-visible .va-shell{ opacity:1; transform:none; }
}

@media (max-width:820px){
  :root{ --shell-gap:14px; }
  .va-product-inner{ grid-template-columns:1fr; }
  .va-media{ min-height:240px; border-right:none; border-bottom:2px solid var(--card-accent, rgba(255,255,255,.82)); }
}

@media (prefers-reduced-motion: reduce){
  .shop-go-top .go-back-btn:hover,
  }
  
  
  
  
  
  
  
/* ====== SUBFILTER — perfect centering + fixed width desktop, fluid mobile ====== */

/* Container */
.va-subfilter{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-left: 0;
}

/* Cases: equal height, fixed width on desktop */
.va-subfilter__link{
  width: 180px;             /* narrower fixed width on desktop */
  margin-left: auto;
  margin-right: auto;

  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Text sizes (validated) */
.va-subfilter__link[data-cat="character"][data-subcat="figure"],
.va-subfilter__link[data-cat="character"][data-subcat="collectibles"]{
  font-size: 19px;
}
.va-subfilter__link[data-cat="eisth"][data-subcat="SCENES" i]{
  font-size: 13px;
}

/* Glow restored */
.va-subfilter__link[data-cat="character"][data-subcat="collectibles"]{
  text-shadow:
    0 0 6px  var(--char-collect-text),
    0 0 12px var(--char-collect-text);
}
.va-subfilter__link[data-cat="eisth"][data-subcat="collectibles"]{
  text-shadow:
    0 0 8px  color-mix(in oklab, var(--pink-light) 80%, transparent),
    0 0 16px color-mix(in oklab, var(--pink-light) 55%, transparent);
}

/* Section titles */
.va-filter__link[data-cat="character"]{
  font-size: 20px;
}
.va-filter__link[data-cat="eisth"]{
  font-size: 16px;
}

/* Mobile: make width fluid so it doesn't break layout */
@media (max-width: 480px){
  .va-subfilter__link{
    width: 88%;
  }
}





/* ===================== Explore — v17 (fade early, play glow, MS full glow) ===================== */

/* Pas de clipping pour le glow */
.va-filter{ position: relative; }
.va-filter__list{ overflow: visible; padding-block: 20px; }
.va-filter__link, .va-subfilter__link{ position: relative; overflow: visible; }

/* Cadre volant — visible seulement pendant la glisse */
.va-focus-frame{
  position:absolute; top:0; left:0; z-index:6; pointer-events:none;
  display:none; opacity:1;
  color: var(--va-border);
  border: 2px solid currentColor;
  border-radius: var(--radius-md, 10px);
  background: none;
  box-shadow: 0 0 12px color-mix(in oklab, currentColor 55%, transparent);
  transition:
    transform 1.1s cubic-bezier(.22,.8,.22,1),
    width     1.1s cubic-bezier(.22,.8,.22,1),
    height    1.1s cubic-bezier(.22,.8,.22,1),
    color     1.1s linear,
    opacity   .14s ease; /* fondu contrôlé par le JS */
  will-change: transform, width, height, color, opacity;
}
.va-focus-frame.is-lock::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid currentColor; opacity:0; transform: scale(1.03);
  animation: vaLock .22s ease;
}
@keyframes vaLock{
  0%   { opacity:0;   transform:scale(1.05); }
  60%  { opacity:.9;  transform:scale(1.01); }
  100% { opacity:0;   transform:scale(1.00); }
}
/* fade déclenché par JS avant l’arrivée */
.va-focus-frame.is-fading{ opacity:0; }

/* Pulse SUR LA CASE (jamais sur le cadre) */
.va-pulse-border{ position: relative; }
.va-pulse-border::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:.50;
  box-shadow:
    0 0 10px var(--va-pulse-color, currentColor),
    0 0 16px var(--va-pulse-color, currentColor);
  animation: vaPulseGlow 1.6s ease-in-out infinite;
}
@keyframes vaPulseGlow{
  0%   { opacity:.36; box-shadow:0 0 8px  var(--va-pulse-color), 0 0 12px var(--va-pulse-color); }
  50%  { opacity:.72; box-shadow:0 0 16px var(--va-pulse-color), 0 0 20px var(--va-pulse-color); }
  100% { opacity:.36; box-shadow:0 0 8px  var(--va-pulse-color), 0 0 12px var(--va-pulse-color); }
}

/* “Glow play” court au moment de la prise (avant le pulse) */
.va-glow-play{ position: relative; }
.va-glow-play::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:
    0 0 18px var(--va-pulse-color, currentColor),
    0 0 28px var(--va-pulse-color, currentColor);
  opacity:.85;
  animation: vaGlowPlay .22s ease-out forwards;
}
@keyframes vaGlowPlay{
  0%   { opacity:.85; box-shadow:0 0 22px var(--va-pulse-color), 0 0 34px var(--va-pulse-color); }
  100% { opacity:.00; box-shadow:0 0 0   transparent, 0 0 0 transparent; }
}

/* Merch & Services : glow PLEIN de la case (persistant) */
.va-ms-glow{ position: relative; }
.va-ms-glow::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: color-mix(in oklab, var(--va-pulse-color, currentColor) 14%, transparent);
  box-shadow:
    0 0 16px var(--va-pulse-color, currentColor),
    0 0 24px var(--va-pulse-color, currentColor);
  opacity:.65;
}
.va-ms-glow::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:.45;
  box-shadow:
    0 0 10px var(--va-pulse-color, currentColor),
    0 0 18px var(--va-pulse-color, currentColor);
  animation: vaPulseGlow 1.6s ease-in-out infinite;
}

/* “All” : on ne pulse jamais (look natif conservé) */
.va-filter__link[data-cat="all"].va-pulse-border,
.va-filter__link[data-cat="all"].va-pulse-border::after{
  animation:none !important; box-shadow:none !important;
}

/* Vibration courte */
.va-locked-shake{ animation: vaShake .18s ease; }
@keyframes vaShake{
  0%{ transform:translateX(0)      scale(1); }
  25%{transform:translateX(-1.8px) scale(1.005);}
  50%{transform:translateX( 1.8px) scale(1.000);}
  75%{transform:translateX(-1.0px) scale(1.000);}
  100%{transform:translateX(0)     scale(1); }
}



/* STORE menu button — glow externe seulement (même que BLOG) */
.menu-box a[href="shop.html"] {
  border: 1.5px solid #fdfdf4 !important;  /* bordure plus fine */
  color: #fdfdf4 !important;

  /* glow externe serré */
  box-shadow:
    0 0 1px #fdfdf4,
    0 0 2px #fdfdf4;
}




/* Animation de va-et-vient horizontal pour les flèches */
@keyframes slide-left {
  0% { transform: translateX(0); }
  50% { transform: translateX(-10px); } /* Flèche gauche va vers la gauche */
  100% { transform: translateX(0); }
}

@keyframes slide-right {
  0% { transform: translateX(0); }
  50% { transform: translateX(10px); } /* Flèche droite va vers la droite */
  100% { transform: translateX(0); }
}

/* Appliquer l'animation de mouvement aux flèches lors du survol */
.va-filter__arrow:hover {
  animation: slide 0.5s ease-in-out infinite; /* Effet de va-et-vient horizontal */
}

/* Appliquer l'animation de va-et-vient pour la flèche gauche */
.va-filter__arrow--left:hover {
  animation: slide-left 0.5s ease-in-out infinite; /* Flèche gauche va vers la gauche puis retour */
}

/* Appliquer l'animation de va-et-vient pour la flèche droite */
.va-filter__arrow--right:hover {
  animation: slide-right 0.5s ease-in-out infinite; /* Flèche droite va vers la droite puis retour */
}










@keyframes glowFlicker {
  0% {
    opacity: 0.8;
    box-shadow: -5px 0 5px rgba(148, 0, 211, 0.4), -8px 0 10px rgba(148, 0, 211, 0.3), /* Lueur violette à gauche */
                5px 0 5px rgba(255, 105, 180, 0.4), 8px 0 10px rgba(255, 105, 180, 0.3); /* Lueur rose à droite */
  }
  50% {
    opacity: 1;
    box-shadow: -5px 0 10px rgba(255, 200, 150, 0.5), -8px 0 15px rgba(148, 0, 211, 0.5), /* Lueur jaune-rose à gauche */
                5px 0 10px rgba(255, 105, 180, 0.6), 8px 0 15px rgba(255, 200, 150, 0.5); /* Lueur rose-jaune à droite */
  }
  100% {
    opacity: 0.8;
    box-shadow: -5px 0 5px rgba(148, 0, 211, 0.4), -8px 0 10px rgba(148, 0, 211, 0.3), /* Lueur violette à gauche */
                5px 0 5px rgba(255, 105, 180, 0.4), 8px 0 10px rgba(255, 105, 180, 0.3); /* Lueur rose à droite */
  }
}

.va-filter__arrow {
  animation: glowFlicker 1s infinite ease-in-out;
}








.digital-screen-content {
  position: relative;
  z-index: 6; /* contenu au-dessus */
}

/* garder l’overlay visible mais non bloquant */
.digital-screen-overlay {
  pointer-events: none;
}

/* Grand cadre du shop */
#shop.va-shop > .va-frame {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-xl);
  padding: 22px;
  overflow: visible;
  background: rgba(12,12,20,0.8) !important; /* ajuste l’opacité ici */
  border: 4px solid var(--va-border);
  box-shadow: 0 0 25px rgba(150,150,150,0.25);
}


#shop.va-shop > .va-frame {
  border-radius: 12px;       /* même arrondi que Character Series */
  border-width: 2.5px;         /* même épaisseur que Character Series */
}


.va-filter {
  border-radius: 5px; /* arrondi visible */
}


/* Arrondi pour les cadres qui entourent les vignettes */
.va-shell {
  border-radius: 7px;   /* même arrondi que le grand cadre */
  border-width: 3px;     /* optionnel : harmoniser avec le grand cadre */
}




/* === SHOP : étendre la wide frame violet/rose === */
body:has(#shop.va-shop) .home-neon-frame.lavender,
body:has(#shop.va-shop) .home-neon-frame.pink {
  bottom: 64px !important;   /* ajuste : plus petit chiffre = cadre plus long */
}


/* GO TO TOP — fond noir + bordure dégradée ARRONDIE + glow */
.shop-go-top .go-to-top {
  position: relative;
  display: inline-block;
  padding: 12px 20px;

  /* 1) Bordure dégradée arrondie (sans border-image) */
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(#000, #000) padding-box,                          /* fond noir */
    linear-gradient(90deg, #9c8cff, #ff66e0) border-box;              /* dégradé bordure */
  -webkit-background-clip: padding-box, border-box;
          background-clip: padding-box, border-box;

  /* 2) Texte */
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;

  /* 3) Glow dégradé (superposition violet + rose) */
  box-shadow:
    0 0 10px rgba(156,140,255,0.45),
    0 0 18px rgba(255,102,224,0.45);
}

.shop-go-top .go-to-top:hover,
.shop-go-top .go-to-top:focus {
  box-shadow:
    0 0 14px rgba(156,140,255,0.65),
    0 0 26px rgba(255,102,224,0.65);
  outline: none;
}




/* SHOP — Harmoniser l’écart sous la subtitle box (comme Character Series) */
.frame-container .digital-screen-content > .content .subtitle-box {
  margin-bottom: 20px !important;  /* ajuste : 8–16px selon ton œil */
}

/* Pas d’espace en plus côté section shop */
.frame-container .digital-screen-content > .content .subtitle-box + #shop.va-shop {
  margin-top: 0 !important;
}

/* filet de sécurité si un autre CSS met un margin-top sur .va-shop */
#shop.va-shop { margin-top: 0 !important; }



/* === SHOP : faire descendre le digital screen jusqu’en bas de la wide frame === */
body:has(#shop.va-shop) .digital-screen-overlay {
  top: -42.5px !important;
  bottom: 64px !important;   /* même marge que tes wide frames */
  height: auto !important;
}




/* Grand cadre du Store — effet lumineux (couleur Infos) */
#shop.va-shop > .va-frame{
  border-color: rgba(253, 253, 244, 0.90) !important; /* blanc chaud, + lumineux */
  box-shadow:
    0 0 12px rgba(253, 253, 244, 0.55),
    0 0 24px rgba(253, 253, 244, 0.35) !important;     /* halo doux */
}