/* =========================================================================
   VooX — le méga-menu des rayons du Store, comme sur une place de marché :
   sous la barre, un panneau flottant par rayon — les catégories en
   vignettes, les marques avec leur logo, et un visuel qui mène au rayon.
   ========================================================================= */

.vs-mega{position:absolute;left:0;right:0;top:100%;padding:10px 26px 0;pointer-events:none}
.vs-mega-panneau{
  max-width:1468px;margin:0 auto;pointer-events:auto;
  background:#fff;
  border:1px solid rgba(11,15,20,.08);border-radius:24px;
  box-shadow:0 30px 60px -12px rgba(11,15,20,.22),0 0 0 1px rgba(255,255,255,.6) inset;
  animation:vs-mega-entre .18s cubic-bezier(.2,.8,.2,1);
}
.vs-mega-panneau[hidden]{display:none}
@keyframes vs-mega-entre{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
.vs-mega-inner{padding:28px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 320px;gap:32px}
.vs-mega-col{min-width:0}
.vs-mega-col + .vs-mega-col{padding-left:32px;border-left:1px solid rgba(11,15,20,.08)}
.vs-mega-col.est-large{grid-column:span 2}
.vs-mega-titre{margin:0 0 14px;font:700 11.5px/1 var(--voox-font-text,'Inter',sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--voox-brand-ink,#B8286E)}

/* La barre a ses propres styles de lien (.vs-rayons a) : on les défait ici. */
.vs-rayons .vs-mega a{flex:initial;padding:0;border:0;border-radius:0;white-space:normal;background:none;font:inherit;color:inherit}
.vs-rayons .vs-mega a:hover{background:none}

/* Les catégories : des vignettes, deux par ligne. */
.vs-mega-categories + .vs-mega-titre{margin-top:22px}
.vs-mega-categories{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vs-rayons .vs-mega-categories a{
  display:flex;align-items:center;gap:14px;padding:10px;border-radius:16px;
  border:1px solid transparent;transition:background .18s,border-color .18s,transform .18s;
}
.vs-rayons .vs-mega-categories a:hover{background:#fff;border-color:rgba(11,15,20,.08);box-shadow:0 8px 20px rgba(11,15,20,.07);transform:translateY(-1px)}
.vs-mega-vignette{
  flex:0 0 56px;width:56px;height:56px;border-radius:14px;overflow:hidden;
  background:linear-gradient(140deg,#FFE3F1 0%,#ECE5FF 100%);
  display:flex;align-items:center;justify-content:center;
  font:700 20px/1 var(--voox-font-title,'Oxanium',sans-serif);color:var(--voox-brand-ink,#B8286E);
}
.vs-mega-vignette img{width:100%;height:100%;object-fit:cover}
.vs-mega-cat{display:flex;flex-direction:column;gap:3px;min-width:0}
.vs-mega-cat strong{font:600 15px/1.25 var(--voox-font-text,'Inter',sans-serif);color:var(--voox-title,#0B0F14)}
.vs-mega-cat small{font-size:12.5px;color:var(--voox-text,#46536A)}

/* Les marques, avec leur logo. */
.vs-mega-marques{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.vs-rayons .vs-mega-marques a{display:flex;align-items:center;gap:12px;padding:8px 10px;margin:0 -10px;border-radius:14px;font:600 15px/1.3 var(--voox-font-text,'Inter',sans-serif);color:var(--voox-title,#0B0F14);transition:background .18s}
.vs-rayons .vs-mega-marques a:hover{background:var(--voox-soft,#F2F5F9)}
.vs-mega-marques.est-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 24px}
.vs-mega-logo{
  flex:0 0 40px;width:40px;height:40px;border-radius:12px;overflow:hidden;background:#fff;
  border:1px solid rgba(11,15,20,.1);display:flex;align-items:center;justify-content:center;
  font:700 16px/1 var(--voox-font-title,'Oxanium',sans-serif);
}
.vs-mega-logo img{width:100%;height:100%;object-fit:contain}
.vs-mega-vide{margin:0;font-size:14px;line-height:1.6;color:var(--voox-text,#46536A)}
.vs-rayons .vs-mega-vide a{color:var(--voox-title,#0B0F14);font-weight:600}
.vs-rayons a.vs-mega-plus{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font:600 14px/1 var(--voox-font-text,'Inter',sans-serif);color:var(--voox-title,#0B0F14)}
.vs-rayons a.vs-mega-plus:hover{color:var(--voox-brand-ink,#B8286E)}

/* Le visuel du rayon : grande image, texte sur dégradé, bouton pilule. */
.vs-rayons a.vs-mega-carte{
  position:relative;display:flex;align-items:flex-end;min-height:250px;border-radius:20px;overflow:hidden;
  background:linear-gradient(140deg,#FFD6EA 0%,#DCD4FF 100%);isolation:isolate;
}
.vs-mega-carte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.vs-mega-carte:hover img{transform:scale(1.06)}
.vs-mega-carte img + .vs-mega-carte-corps{background:linear-gradient(0deg,rgba(11,15,20,.85) 0%,rgba(11,15,20,.35) 55%,rgba(11,15,20,0) 100%);color:#fff}
.vs-mega-carte-corps{display:flex;flex-direction:column;gap:6px;width:100%;padding:70px 22px 22px;color:var(--voox-title,#0B0F14)}
.vs-mega-carte-corps strong{font:700 22px/1.15 var(--voox-font-title,'Oxanium',sans-serif)}
.vs-mega-carte-corps span{font-size:13.5px;line-height:1.45;opacity:.88}
.vs-mega-bouton{
  align-self:flex-start;margin-top:10px;padding:10px 16px;border-radius:999px;
  background:#fff;color:#0B0F14;font-style:normal;font:600 13.5px/1 var(--voox-font-text,'Inter',sans-serif);
  box-shadow:0 6px 16px rgba(11,15,20,.18);transition:transform .18s;
}
.vs-mega-carte:hover .vs-mega-bouton{transform:translateX(3px)}
.vs-rayons a.vs-mega-carte.est-sombre{background:radial-gradient(120% 120% at 100% 0%,#5B2346 0%,#161B22 55%,#0B0F14 100%)}
.vs-mega-carte.est-sombre .vs-mega-carte-corps{color:#fff}

/* Le lien du rayon dont le panneau est ouvert. */
.vs-rayons a.est-ouvert:not(.is-active){background:var(--voox-soft,#F2F5F9);color:var(--voox-title,#0B0F14)}

@media (max-width:1023px), (hover:none){
  .vs-mega{display:none}
}