/* « Puces vivantes » (product page, budget 5 KB): the formula cards (.offer) and the result chips (.benefit) move
   a little, in each theme's style, so the shop reads as a live 2026 shop. Everything ≤ 1 s, no flash (only what is
   below the fold starts hidden), never a colour change (contrasts untouched), still with prefers-reduced-motion.
   chips.js: the cascade on scroll (.chips-wait → .chips-in, --i), the rail of the results on phones, the badge pulse. */
:root{--chip-lift:-2px;--chip-glow:0 10px 26px -14px color-mix(in srgb,var(--brand) 70%,transparent);--chip-ease:cubic-bezier(.2,.8,.2,1);--chip-sheen:color-mix(in srgb,var(--brand) 14%,transparent)}
/* 1. Cascade: in view at load, a short rise (never hidden); below the fold, a fade-in in turn. */
.chips-rise>*{animation:chip-rise .42s var(--chip-ease) both;animation-delay:calc(var(--i,0) * 60ms)}
.chips-wait>*{opacity:0;transform:translateY(10px)}
.chips-in>*{opacity:1;transform:none;transition:opacity .38s var(--chip-ease),transform .42s var(--chip-ease);transition-delay:calc(var(--i,0) * 60ms)}
@keyframes chip-rise{from{transform:translateY(6px)}}
/* 2. Hover / touch: a lift, a soft glow of the brand, a light sweeping along the edge. */
.offer,.benefit__go{background-image:linear-gradient(105deg,transparent 35%,var(--chip-sheen) 50%,transparent 65%);background-size:260% 100%;background-position:120% 0;background-repeat:no-repeat}
.offer{transition:box-shadow var(--q),background-color var(--m),transform .22s var(--chip-ease),background-position .7s var(--chip-ease)}
.benefit__go{transition:box-shadow var(--q),transform .22s var(--chip-ease),background-position .7s var(--chip-ease)}
@media (hover:hover){
  .offer:not(.is-off):hover{transform:translateY(var(--chip-lift));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 55%,transparent),var(--chip-glow);background-position:-20% 0}
  .offer--best:not(.is-off):hover{box-shadow:inset 0 0 0 2px var(--accent),var(--chip-glow)}
  .offer.is-on:hover{box-shadow:inset 0 0 0 2.5px var(--ink),var(--chip-glow)}
  .benefit__go:hover{transform:translateY(var(--chip-lift));box-shadow:inset 0 0 0 1.5px var(--tag),var(--chip-glow);background-position:-20% 0}
  .benefit__go:hover::after{transform:translateX(3px)}
}
.benefit__go::after{display:inline-block;transition:transform .22s var(--chip-ease)}
.offer:not(.is-off):active,.benefit__go:active{transform:translateY(0) scale(.98)}
/* 3. Selection: the chosen card settles, its price follows (offers.js bumps the price). */
.offer.is-on{background-position:-20% 0}
.offer .offer__price strong{display:inline-block;transition:transform .3s var(--spring)}
.offer.is-on .offer__price strong{transform:scale(1.04)}
/* 4. « Le plus choisi » / « Nouveau »: one pulse when it shows, never again. */
.offer__ribbon.chip-pulse{animation:chip-pulse .9s var(--chip-ease) 1}
@keyframes chip-pulse{35%{transform:scale(1.08);box-shadow:0 0 0 2px var(--paper),0 0 0 7px color-mix(in srgb,var(--accent) 35%,transparent)}}
/* 5. Phones: the results on one rail that glides a little when it holds more than the width, then stops. */
@media (max-width:699px){
  .benefits--page.is-rail{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 2px 6px;scroll-padding:0 2px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .benefits--page.is-rail::-webkit-scrollbar{display:none}
  .benefits--page.is-rail.is-end{-webkit-mask-image:none;mask-image:none}
  .benefits--page.is-rail .benefit{flex:none}
}
/* Each theme's way of moving. */
.theme-brut,.theme-retro{--chip-glow:4px 4px 0 var(--ink);--chip-lift:-3px;--chip-sheen:transparent}
.theme-neon,.theme-immersion,.theme-univers{--chip-glow:0 0 0 1px color-mix(in srgb,var(--brand) 60%,transparent),0 0 22px -2px color-mix(in srgb,var(--brand) 55%,transparent);--chip-sheen:color-mix(in srgb,var(--brand) 22%,transparent)}
.theme-journal,.theme-carnet,.theme-fil{--chip-lift:-1px;--chip-glow:0 6px 16px -12px color-mix(in srgb,var(--ink) 60%,transparent)}
.theme-eclat,.theme-aurora{--chip-sheen:color-mix(in srgb,var(--accent) 24%,transparent)}
.theme-wax,.theme-marche,.theme-recolte{--chip-glow:0 10px 24px -14px color-mix(in srgb,var(--accent) 75%,transparent)}
@media (prefers-reduced-motion:reduce){.chips-rise>*,.chips-wait>*,.chips-in>*,.offer,.benefit__go,.offer__ribbon,.offer .offer__price strong{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}}
.motion-low :is(.chips-rise,.chips-wait,.chips-in)>*,.motion-low :is(.offer,.benefit__go,.offer__ribbon){animation:none!important;transition:none!important;opacity:1!important;transform:none!important}