/* Refonte « étal » (inspiration sweetgreen, refero.design) + animations.
   Tout est ici et dans refonte.js. Actif pour tous (ACTIF dans refonte.js), ?classique le retire.
   Suppression définitive : retirer les 2 lignes « refonte » de index.html. */

/* Rayons : grands titres d'étal, petit sur-titre */
.rayon{padding-top:72px}
.rayon h2{font:500 clamp(44px,7vw,92px)/.88 var(--jost);letter-spacing:-.035em;margin-bottom:14px}
.rayon .r-note{font:700 11px/1.4 var(--manrope);letter-spacing:.14em;text-transform:uppercase;margin-bottom:28px}
.rayon .r-note a{letter-spacing:.08em}
.cat-tete h1{font-weight:500;letter-spacing:-.035em}

/* Cartes : coins doux, boutons pilules */
.vignette{border-radius:14px}
.ajout,.btn-plein,.btn-vide{border-radius:999px}
.ajout{padding:10px 16px}
.ajout[data-qte]::after{margin-right:-8px}

/* Survol : la vignette se soulève, le contenu zoome légèrement */
@media (hover:hover){
  .piece .vignette{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
  .piece:hover .vignette{transform:translateY(-4px)}
  .piece:hover .vignette .ph{transform:scale(1.06)}
  .piece:hover .vignette .relief{transform:translateY(4px)}
  .vignette .relief{transition:transform .6s var(--ease)}
}

/* Apparition au défilement (seulement si refonte.js tourne) */
.anim-ok .piece{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.anim-ok .piece.vu{opacity:1;transform:none}
.anim-ok .rayon h2{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.anim-ok .rayon h2.vu{opacity:1;transform:none}

/* Onglet de rayon actif : soulignement qui glisse */
.rayons ul{position:relative}
.rayons a[aria-current="true"]{border-color:transparent}
.rayons .curseur{position:absolute;bottom:0;left:0;height:2px;background:var(--vert);width:0;transition:transform .45s var(--ease),width .45s var(--ease);pointer-events:none}

/* Ajout au panier : le bouton fait un petit rebond */
.ajout.pop{animation:pop .4s var(--ease)}
@keyframes pop{35%{transform:scale(1.12)}70%{transform:scale(.97)}}

@media (prefers-reduced-motion:reduce){
  .anim-ok .piece,.anim-ok .rayon h2{opacity:1;transform:none;transition:none}
  .rayons .curseur,.piece .vignette,.vignette .ph,.vignette .relief{transition:none}
  .piece:hover .vignette,.piece:hover .vignette .ph{transform:none}
  .ajout.pop{animation:none}
}

/* Photos produits */
.vignette img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.vignette.avec-photo img.photo{opacity:1}
.vignette.avec-photo .relief,.vignette.avec-photo .etiq{display:none}
@media (hover:hover){.piece:hover .vignette img.photo{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.vignette img.photo{transition:none}.piece:hover .vignette img.photo{transform:none}}