/* Le bandeau du Store : trois visuels qui défilent sous le menu des rayons.

   Deux animations, et deux seulement : la piste qui glisse d'un volet à
   l'autre, et l'image du volet visible qui s'approche très lentement. La
   seconde donne la vie ; la première donne le rythme. */

.vs-ruban{
  position:relative;overflow:hidden;
  height:380px;
  background:#0B0F14;
  border-bottom:1px solid var(--voox-line,rgba(11,15,20,.10));
}

.vs-ruban-piste{
  display:flex;height:100%;
  width:calc(var(--vs-volets,3) * 100%);
  transform:translateX(calc(var(--vs-courant,0) * -100% / var(--vs-volets,3)));
  transition:transform .6s cubic-bezier(.33,.1,.2,1);
}

.vs-volet{
  position:relative;flex:0 0 calc(100% / var(--vs-volets,3));
  height:100%;overflow:hidden;
}

/* L'image remplit le volet et s'approche doucement tant qu'il est devant. */
.vs-volet-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 8s linear;
}
.vs-volet.est-active .vs-volet-image{transform:scale(1.12)}

/* Un voile depuis la gauche : le texte reste lisible quelle que soit l'image. */
.vs-volet::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,15,20,.86) 0%,rgba(11,15,20,.62) 42%,rgba(11,15,20,.18) 100%);
}

.vs-volet-texte{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  height:100%;max-width:1180px;margin:0 auto;padding:0 24px;
  color:#fff;
}
.vs-volet-sur{
  margin:0 0 10px;font:600 11.5px/1 inherit;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.74);
}
.vs-volet-texte h2{margin:0 0 10px;font-size:clamp(30px,4vw,46px);line-height:1.05;color:#fff}
.vs-volet-texte h2 a{color:inherit;text-decoration:none}
.vs-volet-texte h2 a:hover{text-decoration:underline}
.vs-volet-accroche{
  margin:0 0 22px;max-width:42ch;font-size:16px;line-height:1.5;color:rgba(255,255,255,.90);
}
.vs-volet-texte .voox-btn{background:#fff;color:var(--voox-title,#0B0F14)}
.vs-volet-texte .voox-btn:hover{opacity:.88}

/* Le texte entre quand son volet arrive. */
.vs-volet-texte>*{opacity:0;transform:translateY(10px)}
.vs-volet.est-active .vs-volet-texte>*{opacity:1;transform:none;transition:opacity .5s,transform .5s}
.vs-volet.est-active .vs-volet-texte>*:nth-child(1){transition-delay:.14s}
.vs-volet.est-active .vs-volet-texte>*:nth-child(2){transition-delay:.20s}
.vs-volet.est-active .vs-volet-texte>*:nth-child(3){transition-delay:.26s}
.vs-volet.est-active .vs-volet-texte>*:nth-child(4){transition-delay:.32s}

.vs-ruban-fleche{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.90);color:var(--voox-title,#0B0F14);
  font:400 24px/1 inherit;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.vs-ruban-fleche:hover{background:#fff}
.vs-ruban-fleche.est-avant{left:16px}
.vs-ruban-fleche.est-apres{right:16px}

.vs-ruban-points{
  position:absolute;left:0;right:0;bottom:18px;z-index:2;
  display:flex;gap:8px;justify-content:center;
}
.vs-ruban-points button{
  width:9px;height:9px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.44);transition:width .25s,background .25s;
}
.vs-ruban-points button.est-active{width:28px;background:#fff}

@media (max-width:760px){
  .vs-ruban{height:300px}
  .vs-volet-texte{padding:0 18px}
  .vs-ruban-fleche{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vs-ruban-piste,.vs-volet-image,.vs-volet-texte>*{transition:none}
  .vs-volet-image,.vs-volet.est-active .vs-volet-image{transform:none}
  .vs-volet-texte>*{opacity:1;transform:none}
}

/* ---------- maj86 : un bandeau « waw » ----------
   La couverture de la marque devient une ambiance floutée ; devant, ses vrais
   produits en cartes blanches qui se déploient en éventail. */
.vs-ruban{height:460px;background:#0B0F14}
.vs-volet-image{filter:blur(28px) saturate(1.4) brightness(.8);transform:scale(1.3)}
.vs-volet.est-active .vs-volet-image{transform:scale(1.4)}
.vs-volet::after{background:
  radial-gradient(60% 90% at 78% 50%,rgba(184,40,110,.38) 0%,transparent 70%),
  radial-gradient(50% 80% at 10% 100%,rgba(124,92,255,.35) 0%,transparent 70%),
  linear-gradient(100deg,rgba(11,15,20,.9) 0%,rgba(11,15,20,.6) 50%,rgba(11,15,20,.35) 100%)}
.vs-volet-texte{flex-direction:row;align-items:center;justify-content:space-between;gap:40px;max-width:1240px;padding:0 70px}
.vs-volet-gauche{display:flex;flex-direction:column;align-items:flex-start}
.vs-volet-texte h2{font-size:clamp(38px,5vw,68px);letter-spacing:-.02em}
.vs-volet-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.vs-volet-actions .voox-btn{border-radius:999px;padding:15px 26px}
.vs-volet-swipe{color:#fff;font-weight:600;text-decoration:none;padding:14px 20px;border:1px solid rgba(255,255,255,.35);border-radius:999px;transition:background .2s}
.vs-volet-swipe:hover{background:rgba(255,255,255,.12);color:#fff}

.vs-volet-scene{position:relative;flex:0 0 470px;height:360px}
.vs-volet-carte{position:absolute;top:50%;left:50%;width:210px;padding:10px 10px 14px;border-radius:26px;background:#fff;color:#0B0F14;text-decoration:none;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  transform:translate(-50%,-50%) translateX(calc((var(--k) - (var(--vs-n) - 1) / 2) * 0px)) rotate(0deg) scale(.9);opacity:0;
  transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.vs-volet-carte img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;background:#F3F1F7}
.vs-volet-carte span{display:block;margin-top:10px;font:600 13.5px/1.3 var(--voox-font-text,Inter),sans-serif;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-volet-carte:hover{color:#0B0F14}
/* L'éventail s'ouvre quand le volet arrive. */
.vs-volet.est-active .vs-volet-carte{opacity:1;
  transform:translate(-50%,-50%) translateX(calc((var(--k) - (var(--vs-n) - 1) / 2) * 150px))
            translateY(calc(var(--k) * 0px + (var(--k) - (var(--vs-n) - 1) / 2) * (var(--k) - (var(--vs-n) - 1) / 2) * 14px))
            rotate(calc((var(--k) - (var(--vs-n) - 1) / 2) * 9deg)) scale(1);
  transition-delay:calc(.15s + var(--k) * .08s)}
.vs-volet.est-active .vs-volet-carte:nth-child(2){z-index:2}
.vs-volet.est-active .vs-volet-carte:hover{transform:translate(-50%,-50%) translateX(calc((var(--k) - (var(--vs-n) - 1) / 2) * 150px)) translateY(-14px) rotate(0deg) scale(1.04);z-index:3}

@media (max-width:980px){
  .vs-volet-texte{padding:0 56px}
  .vs-volet-scene{flex-basis:340px}
  .vs-volet-carte{width:160px}
  .vs-volet.est-active .vs-volet-carte{transform:translate(-50%,-50%) translateX(calc((var(--k) - (var(--vs-n) - 1) / 2) * 110px)) rotate(calc((var(--k) - (var(--vs-n) - 1) / 2) * 9deg))}
}
@media (max-width:760px){
  .vs-ruban{height:560px}
  .vs-volet-texte{flex-direction:column;justify-content:center;align-items:stretch;gap:14px;padding:30px 20px 46px}
  .vs-volet-texte h2{font-size:38px}
  .vs-volet-accroche{margin-bottom:16px}
  .vs-volet-scene{flex:0 0 230px;height:230px}
  .vs-volet-carte{width:140px;padding:7px 7px 10px;border-radius:20px}
  .vs-volet-carte img{border-radius:14px}
  .vs-volet-carte span{font-size:12px;margin-top:6px}
  .vs-volet.est-active .vs-volet-carte{transform:translate(-50%,-50%) translateX(calc((var(--k) - (var(--vs-n) - 1) / 2) * 92px)) rotate(calc((var(--k) - (var(--vs-n) - 1) / 2) * 8deg))}
  .vs-volet-actions .voox-btn,.vs-volet-swipe{padding:12px 18px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .vs-volet-carte{transition:none}
}