/* Kaya — couche « animations » de la boutique (chargée après kaya.css).
   Tout est désactivé si l'utilisateur demande moins d'animations. */
:root{--ease:cubic-bezier(.22,.8,.26,1)}

/* Bandeau défilant */
.announce{padding:0;overflow:hidden;white-space:nowrap}
.announce .marquee{display:inline-flex;gap:56px;padding:9px 0;animation:marquee 32s linear infinite;will-change:transform}
.announce:hover .marquee{animation-play-state:paused}
.announce .marquee span{flex:none}
.announce .marquee span::before{content:'✦';color:var(--pink);margin-right:14px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Header qui se compacte */
.header{transition:box-shadow .25s,background .25s}
.header .container{transition:min-height .25s var(--ease)}
.header.scrolled{box-shadow:0 10px 30px -18px rgba(11,25,87,.35)}
.header.scrolled .container{min-height:64px}
.badge-count{animation:pop .5s var(--ease) both}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* Hero animé */
.hero{position:relative;isolation:isolate}
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;filter:blur(60px);z-index:-1;opacity:.55;animation:blob 14s ease-in-out infinite alternate}
.hero::before{width:380px;height:380px;background:var(--pink);left:-120px;top:-100px}
.hero::after{width:340px;height:340px;background:#fff;right:8%;bottom:-140px;animation-delay:-6s}
@keyframes blob{to{transform:translate(60px,40px) scale(1.15)}}
.js .hero .pill-tag,.js .hero h1,.js .hero p.lead,.js .hero .actions{opacity:0;transform:translateY(22px);animation:rise .8s var(--ease) forwards}
.js .hero h1{animation-delay:.12s}.js .hero p.lead{animation-delay:.24s}.js .hero .actions{animation-delay:.36s}
@keyframes rise{to{opacity:1;transform:none}}
.pill-tag i{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(250,158,188,.7)}50%{box-shadow:0 0 0 8px rgba(250,158,188,0)}}
.hero-visual{animation:floaty 6s ease-in-out infinite}
.js .hero-visual .frame{opacity:0;transform:scale(.94) translateY(20px);animation:rise-scale .9s .2s var(--ease) forwards}
@keyframes rise-scale{to{opacity:1;transform:none}}
@keyframes floaty{50%{transform:translateY(-10px)}}
.hero-visual .frame img{transition:transform .25s ease-out;transform:scale(1.04)}
.float-card{animation:floaty 5s ease-in-out infinite reverse}

/* Apparition au défilement (uniquement si JS actif) */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0) * 80ms)}
.js .rv.in{opacity:1;transform:none}

/* Boutons */
.btn{position:relative;overflow:hidden;transition:transform .15s,background .2s,color .2s,box-shadow .2s}
.btn:not([disabled]):hover{box-shadow:0 14px 26px -14px rgba(11,25,87,.55)}
.btn:active{transform:scale(.97)}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.btn:hover::after{transform:translateX(120%)}
.btn-outline::after{display:none}

/* Catégories et cartes produits */
.cat-tile{transition:transform .35s var(--ease),box-shadow .35s}
.cat-tile:hover{transform:translateY(-6px);box-shadow:0 26px 40px -24px rgba(11,25,87,.45)}
.cat-tile .cap span{display:inline-block;transition:transform .25s}
.cat-tile:hover .cap span{transform:translateX(5px)}
.card .thumb{transition:box-shadow .35s,transform .35s var(--ease)}
.card:hover .thumb{box-shadow:0 26px 36px -24px rgba(11,25,87,.5);transform:translateY(-4px)}
.card .thumb img{transition:transform .6s var(--ease),opacity .25s}
.card .thumb img.swap{opacity:.2}
.dot{cursor:pointer;transition:transform .2s,box-shadow .2s}
.dot:hover,.dot.on{transform:scale(1.25);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--navy)}
.mini-btn{transition:background .2s,transform .25s var(--ease)}
.card:hover .mini-btn{transform:rotate(-45deg) scale(1.08)}
.chip{animation:pop .6s var(--ease) both}

/* Réassurance et bannière */
.trust-item .ic{transition:transform .3s var(--ease),background .2s}
.trust-item:hover .ic{transform:translateY(-3px) rotate(-6deg);background:var(--peach)}
.promo .steps div{transition:transform .25s var(--ease),background .2s}
.promo .steps div:hover{transform:translateX(8px);background:rgba(255,255,255,.16)}
.promo::after{animation:blob 10s ease-in-out infinite alternate}
.section-title .script{display:inline-block;animation:wiggle 5s ease-in-out infinite}
@keyframes wiggle{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-3deg)}96%{transform:rotate(3deg)}}

/* Fiche produit */
.gallery .main img{transition:opacity .25s,transform .6s var(--ease)}
.gallery .main img.swap{opacity:.2;transform:scale(1.03)}
.opt span{transition:transform .15s,background .15s,color .15s,border-color .15s}
.opt:active span{transform:scale(.94)}
.opt input:checked + span{animation:pop .35s var(--ease)}
.opt input:disabled + span{text-decoration:line-through;cursor:not-allowed}

/* Messages et bandeau d'information */
.flash{animation:rise .45s var(--ease) both}
.fab a{transition:transform .25s var(--ease)}
.fab a:hover{transform:scale(1.1)}
.fab-wa{animation:ring 3.4s ease-in-out infinite}
@keyframes ring{0%,80%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}90%{box-shadow:0 0 0 14px rgba(37,211,102,0)}}

.notice{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;z-index:70;background:var(--navy);color:#fff;border-radius:16px;padding:16px 18px;display:flex;gap:16px;align-items:center;box-shadow:0 20px 40px -16px rgba(11,25,87,.6);font-size:13px;line-height:1.5;animation:rise .5s .6s var(--ease) both}
.notice a{text-decoration:underline}
.notice button{flex:none;background:var(--pink);color:var(--navy);border:0;border-radius:999px;font-weight:800;padding:10px 18px;cursor:pointer}
.notice[hidden]{display:none}
@media(max-width:640px){.notice{bottom:84px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv,.js .hero .pill-tag,.js .hero h1,.js .hero p.lead,.js .hero .actions{opacity:1;transform:none}
  .js .hero-visual .frame{opacity:1;transform:none}
  .announce .marquee{animation:none}
}