/* ===================== LA VITRINE (vt-) =====================
   Deux bandeaux : une tête d'affiche sombre, puis la rangée de coloris qui ÉMERGE de ce
   noir. Aucun aplat sombre derrière les cards : ce sont les couleurs des coloris qui font
   le bloc, et elles n'ont pas besoin d'un cadre pour ressortir.
   Toutes les couleurs passent par les jetons de ds-base.css. Le volt n'est utilisé que sur
   du sombre : mesuré, il tombe à 1,7:1 sur le sable et 2,0:1 sur le vert, où il disparaît.
   ============================================================================ */

.vt{width:100vw;margin-inline:calc(50% - 50vw)}
/* COLLÉE SOUS LE MENU. `main.wrap` porte `padding:20px var(--gut) 70px` (ds-home.css) :
   la rangée démarrait 20 px sous l'en-tête, et cette bande d'os lisait comme un défaut
   d'alignement plutôt que comme une respiration. Le rembourrage du haut ne tombe QUE
   quand la vitrine ouvre la page — les autres premières sections gardent le leur, et
   la règle ne peut pas s'appliquer sans elle puisque cette feuille n'est chargée que
   si la vitrine s'affiche. */
main.wrap:has(> .vt:first-child){padding-top:0}

/* ---------- tête d'affiche ---------- */
.vt-hero{background:linear-gradient(140deg,#242424 0%,var(--ink) 70%);color:var(--bone);
  padding:clamp(22px,2.6vw,38px) max(var(--gut),calc((100vw - 1240px)/2 + var(--gut)));
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,52px);align-items:center}
/* 7fr/5fr donnait a la colonne texte 175 px qu'aucune ligne n'atteignait : un trou entre
   la fin du prix et le debut de la photo. La ligne la plus longue du bloc fait 525 px, la
   moitie de 1240 en fait 594. On rend la place inutilisee a l'image. */
@media (max-width:900px){.vt-hero{grid-template-columns:1fr}}
.vt-kick{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--volt);display:flex;align-items:center;gap:8px;margin:0}
.vt-dot{width:8px;height:8px;border-radius:50%;background:var(--volt);flex:none;
  animation:vtbr 2s ease-in-out infinite}
@keyframes vtbr{0%,100%{opacity:.45}50%{opacity:1}}
.vt-h{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,4vw,54px);
  line-height:.95;letter-spacing:.005em;margin:14px 0 0}
.vt-h span{display:block}
.vt-l2{color:transparent;-webkit-text-stroke:1.5px var(--bone)}
.vt-sub{font-size:15.5px;line-height:1.5;max-width:44ch;color:rgb(245 243 238 / .78);margin:10px 0 0}
.vt-sub b{color:var(--bone);font-weight:700}
.vt-clock{margin-top:clamp(20px,2.6vw,30px);padding-bottom:clamp(18px,2.4vw,26px);
  border-bottom:1px solid rgb(245 243 238 / .16)}
.vt-clab{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.vt-digits{display:flex;align-items:flex-end;gap:clamp(10px,1.3vw,18px);
  font-family:var(--display);font-variant-numeric:tabular-nums}
.vt-g{display:flex;flex-direction:column;align-items:center}
.vt-g .vt-d{font-size:clamp(34px,5vw,60px);line-height:1;color:var(--bone)}
.vt-g em{font-style:normal;font-family:var(--body);font-size:11px;letter-spacing:.12em;
  line-height:1;text-transform:uppercase;color:var(--mute);margin-top:8px}
.vt-s .vt-d{font-size:clamp(20px,3vw,36px);color:var(--mute)}
.vt-sep{font-size:clamp(24px,3.4vw,44px);line-height:1;color:var(--mute);margin-bottom:19px}
.vt-price{margin:clamp(12px,1.6vw,18px) 0 0;display:flex;align-items:baseline;gap:10px 16px;flex-wrap:wrap}
/* La pastille et le barre forment UN bloc : ils qualifient tous deux le meme prix et
   doivent passer a la ligne ensemble. Sans ce groupe, sur 390 px, le barre partait seul
   deux etages sous le « 150 € ». */
.vt-cmp{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vt-now{font-family:var(--display);font-size:clamp(44px,5.4vw,76px);line-height:.9;color:var(--bone);
  font-variant-numeric:tabular-nums}
.vt-now .woocommerce-Price-amount{font-family:inherit}
.vt-badge{font-weight:700;font-size:13px;letter-spacing:.03em;color:var(--volt);
  border:1.5px solid var(--volt);border-radius:999px;padding:5px 12px;white-space:nowrap}
.vt-was{color:var(--red);font-size:17px;font-weight:700}
.vt-was s{text-decoration:line-through;text-decoration-thickness:2px}
.vt-acts{margin:clamp(14px,1.8vw,22px) 0 0}
.vt-cta{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 26px;
  border-radius:10px;background:var(--volt);color:var(--ink);font-family:var(--display);
  font-size:17px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none}
.vt-cta .vt-ic{transition:transform .2s var(--ease)}
.vt-cta:hover .vt-ic{transform:translateX(4px)}
/* LA PHOTO COMMANDAIT LA HAUTEUR. En ratio naturel (11/9 ici) elle faisait 387 px à
   elle seule, plus que la colonne de texte une fois celle-ci resserrée : la section ne
   pouvait pas descendre. Elle est donc contrainte en 16/9, et `contain` remplace le
   remplissage pour qu'aucun recadrage ne morde la chaussure.
   Le fond passe au BLANC, pas à l'os : les packshots du catalogue sont détourés sur du
   blanc pur (mesuré 255,255,255 sur les quatre coins) et l'os laissait voir un rectangle
   plus clair de chaque côté de la photo. */
/* `height:auto` EST OBLIGATOIRE. WordPress écrit `width="600" height="518"` sur la balise ;
   ces attributs sont un indice de présentation, et sans `height:auto` pour les écraser la
   hauteur reste figée à 518 px — `aspect-ratio` est alors ignoré, les deux dimensions étant
   déjà données. Mesuré : la tête d'affiche restait à 593 px au lieu de 405. */
.vt-shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;padding:6px 12px;
  display:block;border-radius:14px;background:#fff}
@media (max-width:900px){.vt-shot img{aspect-ratio:2/1;padding:6px 14px}}
.vt-sizes{margin:14px 0 0;font-size:12.5px;color:var(--mute)}
.vt-sizes b{color:var(--bone)}

/* ---------- la couture : filet volt coupé par l'éclair ----------
   Le trou est un segment TRANSPARENT du dégradé, pas un aplat posé par-dessus : derrière
   il y a le dégradé du bandeau, aucun aplat ne s'y fond. `z-index` obligatoire, la rangée
   qui suit est positionnée et peindrait sur le trait. */
.vt-seam{position:relative;height:0;z-index:4}
.vt-seam i{position:absolute;left:0;right:0;top:0;height:4px;display:block;
  background:linear-gradient(90deg,
    var(--volt) 0 calc(max(var(--gut),calc((100vw - 1240px)/2 + var(--gut))) - 8px),
    #0000 calc(max(var(--gut),calc((100vw - 1240px)/2 + var(--gut))) - 8px)
          calc(max(var(--gut),calc((100vw - 1240px)/2 + var(--gut))) + 38px),
    var(--volt) calc(max(var(--gut),calc((100vw - 1240px)/2 + var(--gut))) + 38px) 100%)}
.vt-seam svg{position:absolute;left:max(var(--gut),calc((100vw - 1240px)/2 + var(--gut)));top:0;
  transform:translateY(-50%) skewX(-8deg);fill:var(--volt);z-index:3}

/* ---------- LE MOT DE MARQUE, EN TETE DE VITRINE ----------
   `.vt` fait 100vw : le mot doit etre rentre a la main sur la marge du conteneur, avec la
   MEME expression que la couture volt quelques lignes plus haut. Et c est une MARGE, pas
   un padding : le span est en `position:absolute`, son bloc conteneur est la boite de
   PADDING de l element — un padding ne l aurait pas decale d un pixel.
   Le rembourrage du haut revient ici : `.vt` l avait supprime pour coller la rangee sous
   le menu, mais ce n est plus la rangee qui ouvre la section. */
.vt-geant{margin-inline:max(var(--gut),calc((100vw - 1240px)/2 + var(--gut)));
  margin-top:clamp(10px,1.6vw,22px)}
@media (max-width:700px){.vt-geant{margin-top:8px}}

/* ---------- la rangée ---------- */
.vt-rang{background:var(--pg,var(--bone));position:relative}
.vt-nu{width:100%;display:grid;grid-template-columns:repeat(var(--vt-cols,5),1fr);
  min-height:min(70vh,570px)}
/* LA SORTIE VERS LE RAYON, derniere cellule. Elle apporte sa propre feuille
   (`ds-carte-sortie.css`) et ne connait pas la vitrine : c est ICI qu on lui donne le
   filet de separation des cards voisines, rien de plus. */
.vt-nu > .dsx{border-right:1px solid #00000022}
/* Colonne en FLEX, pas en grille de rangées : quand un bloc du bas disparaît, une grille
   fait tomber la chaussure dans une rangée `auto` et elle sort de la card sans erreur. */
/* LE VOILE DU HAUT EST PARTI le 24/08, avec l'inversion de l'ordre. Il prolongeait le
   noir de la tête d'affiche vers le bas des cards : la rangée émergeait de ce noir. Elle
   est maintenant la première chose sous le menu, et au-dessus d'elle il n'y a plus de
   sombre à prolonger — le voile serait une bande noire posée sur rien.
   Les 96 px de sommet qui lui laissaient la place partent avec lui : c'est le gain de
   hauteur pour la chaussure (277 → 358 px au bureau, 197 → 278 sur téléphone).
   Le fondu se fait maintenant en BAS, tout seul : la barre du bouton est déjà en encre et
   elle enchaîne sans rupture sur le noir de la tête d'affiche qui suit. */
.vt-bd{position:relative;background:var(--c1);color:var(--fg);text-decoration:none;display:flex;
  flex-direction:column;padding:15px 13px 0;overflow:hidden;min-height:390px}
.vt-pc{font-family:var(--display);font-size:clamp(30px,3.4vw,54px);line-height:.86;
  letter-spacing:-.01em;color:transparent;-webkit-text-stroke:2px var(--fg);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.vt-pc i{font-style:normal;font-size:.5em;-webkit-text-stroke:1.4px var(--fg);margin-left:2px}
.vt-n{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;margin-top:8px}
.vt-cimg{flex:1 1 auto;min-height:0;width:84%;margin-inline:8%;object-fit:contain;
  mix-blend-mode:multiply;opacity:.92;transition:transform .5s var(--ease)}
.vt-bd:hover .vt-cimg{transform:translateY(-6px) scale(1.03)}

/* le ticket : la même paire encre/volt que le bouton du bas */
.vt-tkt{margin-top:7px;display:flex;align-items:stretch;max-width:100%;color:var(--bone);
  border:1px solid #2a2a2a;border-radius:11px;background:var(--ink2);overflow:hidden}
.vt-c{padding:8px 9px;position:relative;overflow:hidden;min-width:0}
.vt-c + .vt-c{border-left:1px dashed #3a3a3a}
.vt-cl{display:block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:#8a877e;margin-bottom:2px}
.vt-now2{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 4px}
.vt-now2 .vt-cl{width:100%;color:var(--volt)}
.vt-prc{font-family:var(--display);font-size:clamp(16px,1.5vw,21px);line-height:1;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.vt-prc .woocommerce-Price-amount{font-family:inherit}
.vt-was2 .vt-prc{color:var(--mute);position:relative;display:inline-block}
.vt-was2 .vt-prc::after{content:"";position:absolute;left:-.08em;right:-.08em;top:calc(50% - .03em);
  height:3px;border-radius:2px;background:var(--red);transform:skewX(-8deg)}
.vt-now2 .vt-prc{color:var(--volt);display:inline-block}
.vt-bolt{fill:var(--volt);transform:skewX(-8deg);flex:none;align-self:center;
  animation:vtbolt .42s var(--ease) .5s both}
.vt-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,#0000 38%,#C8FF0055 50%,#0000 62%);transform:translateX(-110%);
  animation:vtsheen .85s var(--ease) .25s both}
@keyframes vtbolt{0%{opacity:0;transform:skewX(-8deg) scale(.4)}
  55%{opacity:1;transform:skewX(-8deg) scale(1.25)}100%{opacity:1;transform:skewX(-8deg) scale(1)}}
@keyframes vtsheen{0%{opacity:0;transform:translateX(-110%)}12%{opacity:1}88%{opacity:1}
  100%{opacity:0;transform:translateX(140%)}}

/* le bouton : volt sur encre, identique sur toutes les cards.
   Le volt ne tient que sur du sombre, et l'encre supprime au passage le damier que
   produisait un fond pris sur la couleur du texte, blanc ici et noir là. */
.vt-cta2{margin:9px -13px 0;padding:15px 13px;display:flex;align-items:center;position:relative;
  justify-content:space-between;gap:8px;background:var(--ink);color:var(--volt);overflow:hidden}
.vt-pl{font-family:var(--display);font-weight:400;font-size:clamp(14px,1.35vw,17px);
  text-transform:uppercase;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  white-space:nowrap;transition:transform .28s var(--ease)}
.vt-cta2 .vt-ic{flex:none;transition:transform .2s var(--ease)}
.vt-bd:hover .vt-cta2 .vt-ic{transform:translateX(4px)}
/* L'éclair est en position ABSOLUE : posé dans le flux il élargissait le contenu de 21 px
   et la barre, en `overflow:hidden`, coupait la flèche au survol. */
.vt-cbolt{position:absolute;left:13px;top:50%;flex:none;fill:var(--volt);opacity:0;
  transform:translateY(-50%) skewX(-8deg) scale(.4);
  transition:opacity .18s var(--ease),transform .28s var(--ease)}
.vt-bd:hover .vt-cbolt,.vt-bd:active .vt-cbolt{opacity:1;transform:translateY(-50%) skewX(-8deg) scale(1)}
.vt-bd:hover .vt-pl,.vt-bd:active .vt-pl{transform:translateX(21px)}
.vt-csheen{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,#0000 38%,#C8FF0055 50%,#0000 62%);transform:translateX(-110%)}
.vt-bd:hover .vt-csheen,.vt-bd:active .vt-csheen{animation:vtcsheen .62s var(--ease) both}
@keyframes vtcsheen{0%{opacity:0;transform:translateX(-110%)}14%{opacity:1}86%{opacity:1}
  100%{opacity:0;transform:translateX(140%)}}

@media (prefers-reduced-motion:reduce){
  .vt-dot{animation:none;opacity:.9}
  .vt-bolt,.vt-sheen{animation:none}.vt-sheen,.vt-csheen{display:none}
  .vt-bolt{transform:skewX(-8deg)}
  .vt-cbolt,.vt-pl{transition:none}
  .vt-bd:hover .vt-cbolt{transform:translateY(-50%) skewX(-8deg)}}

/* Sous 1000 px on repasse a trois colonnes fixes : a six cellules la grille calculee
   donnerait des bandes de 166 px, plus etroites que la chaussure qu elles montrent. */
@media (max-width:1000px){.vt-nu{grid-template-columns:repeat(3,1fr)}}
/* Sous 700 px la rangée devient un rail qui se fait glisser. Six bandes en deux colonnes
   tiendraient, mais empileraient trois rangées hautes et écraseraient les proportions. */
@media (max-width:700px){
  .vt-nu{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    min-height:0;scrollbar-width:none}
  .vt-nu::-webkit-scrollbar{display:none}
  .vt-bd,.vt-nu > .dsx{flex:0 0 66vw;scroll-snap-align:start;min-height:min(76vh,480px);
    border-right:1px solid #00000022}
  .vt-n{font-size:12px}
  /* Le rail est haut et étroit : une chaussure large en `contain` s'y centre en laissant un
     grand vide au-dessus. On la descend, elle vient se poser sur le ticket. */
  .vt-cimg{object-position:center 68%}
  .vt-prc{font-size:21px}.vt-pl{font-size:19px}
}