/* ===== NOUR FLOWERS – ANIMATIONS ===== */
/* Rideau de transition de page */
#cur{position:fixed;inset:0;z-index:999;background:linear-gradient(135deg,#fde3ed,#cf5d8a);display:grid;place-items:center;transform-origin:top;animation:cur-out .85s .25s cubic-bezier(.77,0,.18,1) forwards;pointer-events:none}
#cur img{height:84px;filter:brightness(0) invert(1);animation:cur-logo .8s ease both}
#cur.go{transform-origin:bottom;animation:cur-in .48s cubic-bezier(.77,0,.18,1) forwards;pointer-events:all}#cur.go img{animation:none}
@keyframes cur-out{from{transform:scaleY(1)}to{transform:scaleY(0)}}@keyframes cur-in{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cur-logo{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
/* Barre de progression + canvas */
#spb{position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,#f8bcd3,#cf5d8a,#c2185b);transform-origin:left;transform:scaleX(var(--p,0));z-index:300}
.fxc{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#fx-a{z-index:45}#fx-b{z-index:400}
/* En-tête */
header.nav{animation:hd .9s .9s cubic-bezier(.2,.7,.2,1) backwards;transition:background .3s,box-shadow .3s}
@keyframes hd{from{transform:translateY(-100%)}}
header .wrap{transition:height .3s}header .logo img{transition:height .3s}
header.nav.sc{background:#fff9fbf2;box-shadow:0 6px 24px #cf5d8a2e}
header.nav.sc .wrap{height:62px}header.nav.sc .logo img{height:44px}
nav.menu a{position:relative}
nav.menu a:not(.on):not(.fvm)::after{content:"";position:absolute;left:50%;bottom:3px;width:0;height:2px;background:var(--p);border-radius:2px;transition:width .3s,left .3s}
nav.menu a:not(.on):hover::after{width:56%;left:22%}
.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}@keyframes bump{40%{transform:scale(1.6)}}
.oc:hover .ico,.fv-h:hover .ico{animation:wig .6s}
/* Hero */
.hero{position:relative;overflow:hidden;background:none}
.hero::before{content:"";position:absolute;inset:-5%;background:url(../assets/hero.png) right center/cover;translate:var(--px,0) var(--py,0);animation:kb 22s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff1f6 30%,#fff1f600 62%)}
.hero .wrap{position:relative;z-index:2}
@keyframes kb{from{scale:1.04}to{scale:1.15}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
.hero small{animation:rise .9s .8s both}.hero p{animation:rise .9s 1.5s both}
.hero .btn{animation:rise .9s 1.7s both,glow 2.8s 2.8s infinite}
@keyframes glow{50%{box-shadow:0 0 0 14px #cf5d8a22}}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .05em .2em;margin-bottom:-.2em}
.w>span{display:inline-block;transform:translateY(118%);animation:wup .95s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.95s + var(--i)*.1s)}
.pg h1 .w>span{animation-delay:calc(.9s + var(--i)*.08s)}
@keyframes wup{to{transform:none}}
.hero .it .w>span{background:linear-gradient(90deg,#c2185b,#e885ab,#c2185b);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wup .95s cubic-bezier(.2,.8,.2,1) forwards,shine 4s linear infinite;animation-delay:calc(.95s + var(--i)*.1s),0s}
@keyframes shine{to{background-position:-200% 0}}
.hero .it .ico{animation:beat 1.5s ease-in-out infinite}
@keyframes beat{15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.18)}}
/* Apparition au scroll */
.fx .r{opacity:0;transform:translateY(46px) scale(.97);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.fx .r.l{transform:translateX(-70px)}.fx .r.rt{transform:translateX(70px)}.fx .r.z{transform:scale(.85)}
.fx .r.in{opacity:1;transform:none}
.sh h2::after{content:"";display:block;height:3px;width:0;margin-top:8px;border-radius:3px;background:linear-gradient(90deg,var(--p),transparent);transition:width 1.1s .35s cubic-bezier(.2,.7,.2,1)}
.sh.seen h2::after{width:110px}
/* Images */
.fx .ph img:not(.ld),.fx .gal img:not(.ld),.fx #bigimg:not(.ld){opacity:0}
.fx .ph img,.fx .gal img,.fx #bigimg{transition:opacity .8s ease,transform .5s ease}
/* Cartes */
.card{position:relative;transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .35s}
.card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px);box-shadow:0 22px 44px #cf5d8a45}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),#ffffff66,transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::after{opacity:1}
.fav.pop{animation:pop .55s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{40%{transform:scale(1.55)}70%{transform:scale(.9)}}
/* Catégories */
.cats .ico{animation:flt 4.5s ease-in-out infinite}.cats a:nth-child(2n) .ico{animation-delay:.6s}.cats a:nth-child(3n) .ico{animation-delay:1.2s}
@keyframes flt{50%{transform:translateY(-6px)}}
.cats a:hover .ico{animation:wig .7s}
@keyframes wig{25%{transform:rotate(-14deg) scale(1.18)}75%{transform:rotate(14deg) scale(1.18)}}
.trust>div{transition:transform .3s}.trust>div:hover{transform:translateY(-4px)}.trust .ico{transition:transform .4s}.trust>div:hover .ico{transform:scale(1.25) rotate(-8deg)}
.three>div{transition:transform .3s,box-shadow .3s}.three>div:hover{transform:translateY(-8px);box-shadow:0 16px 34px #cf5d8a30}
/* Boutons */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(100deg,transparent,#ffffff77,transparent);transform:skewX(-20deg);transition:left .75s}
.btn:hover::before{left:150%}.btn:active{transform:scale(.97)}
.rip{position:absolute;border-radius:50%;background:#ffffff88;transform:scale(0);animation:rip .65s ease-out;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
/* WhatsApp flottant */
.wa-f::before{content:"";position:absolute;inset:0;border-radius:50%;background:#cf5d8a;z-index:-1;animation:ring 2.2s ease-out infinite}
@keyframes ring{from{transform:scale(1);opacity:.55}to{transform:scale(1.9);opacity:0}}
.wa-f{animation:rise .8s 2.2s backwards}
/* Modale, panier, tiroir */
.md:not([hidden]){animation:fadein .35s}.mbox{animation:pop2 .55s cubic-bezier(.2,1.4,.4,1)}
@keyframes fadein{from{opacity:0}}@keyframes pop2{from{opacity:0;transform:scale(.8) translateY(30px)}}
.mck{animation:tick .7s .15s cubic-bezier(.3,1.6,.5,1) backwards}@keyframes tick{from{transform:scale(0) rotate(-90deg)}}
#dr.open .li{animation:slidein .45s both}#dr.open .li:nth-child(2){animation-delay:.07s}#dr.open .li:nth-child(3){animation-delay:.14s}#dr.open .li:nth-child(n+4){animation-delay:.2s}
@keyframes slidein{from{opacity:0;transform:translateX(30px)}}
.ok h2{animation:rise .8s both}.ok .ref{animation:rise .8s .15s both}.ok .btn{animation:rise .8s .3s both}.ok .ico{animation:beat 1.4s infinite}
/* Produit */
.ths button{transition:transform .25s,border-color .25s}.ths button:hover{transform:translateY(-4px)}
.opt button{transition:transform .2s,background .2s,border-color .2s}.opt button:hover{transform:translateY(-2px)}
.pimg img{transition:transform .6s}.pimg:hover img{transform:scale(1.03)}
.gal img{transition:transform .5s,box-shadow .4s}.gal img:hover{transform:scale(1.03) rotate(-.6deg);box-shadow:0 18px 40px #cf5d8a45}
.rvi{transition:transform .3s}.rvi:hover{transform:translateX(6px)}
@media(max-width:860px){.hero::after{background:linear-gradient(#fff1f6d0,#fff1f680)}.hero::before{background-position:70% center}.card:hover{transform:translateY(-4px)}}

.rm *,.rm *::before,.rm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.rm #cur,.rm .fxc{display:none}.rm .w>span{transform:none}
/* ===== VERSION SPECTACULAIRE ===== */
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;will-change:transform;background:radial-gradient(40% 40% at 20% 20%,#ffb3d0aa,transparent),radial-gradient(35% 35% at 80% 30%,#f8bcd399,transparent),radial-gradient(45% 45% at 50% 90%,#e885ab66,transparent);animation:aur 16s ease-in-out infinite alternate}
@keyframes aur{to{transform:translate3d(7%,-5%,0) rotate(9deg) scale(1.18)}}
#cur img{height:96px;animation:cur-logo 1s ease both,glowl 1.6s ease-in-out infinite alternate}
@keyframes glowl{to{filter:brightness(0) invert(1) drop-shadow(0 0 22px #fff)}}
.hero .wrap{translate:0 var(--hy,0);opacity:var(--ho,1)}
.fxh{position:absolute;inset:0;z-index:1;pointer-events:none}
.orb{position:absolute;border-radius:50%;background:radial-gradient(circle,#ff8fbc99 0%,#ff8fbc33 45%,transparent 70%);will-change:transform;animation:orb 9s ease-in-out infinite alternate}
.o1{width:420px;height:420px;right:4%;top:-8%}.o2{width:320px;height:320px;right:34%;bottom:-14%;background:radial-gradient(circle,#ffffffcc 0%,#ffffff55 45%,transparent 70%);animation-delay:-3s}.o3{width:220px;height:220px;right:-4%;bottom:6%;animation-delay:-6s}
@keyframes orb{to{transform:translate3d(-60px,40px,0) scale(1.25)}}
.sp{position:absolute;width:var(--z);height:var(--z);background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:tw var(--t) ease-in-out infinite var(--dl)}
@keyframes tw{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(90deg)}}
.swp{position:absolute;top:-20%;bottom:-20%;width:16%;left:-30%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:swp 7s 3.5s ease-in-out infinite}
@keyframes swp{0%{left:-30%}35%,100%{left:130%}}
.band{margin:60px -3vw;transform:rotate(-1.8deg);background:linear-gradient(90deg,#cf5d8a,#e885ab,#cf5d8a);background-size:200% 100%;animation:bgs 8s linear infinite;color:#fff;overflow:hidden;padding:16px 0;box-shadow:0 14px 40px #cf5d8a55}
@keyframes bgs{to{background-position:-200% 0}}
.band .tr{display:flex;width:max-content;animation:mqb 30s linear infinite}.band:hover .tr{animation-play-state:paused}
.band .tr>div{display:flex;align-items:center;gap:30px;padding-right:30px;font:italic 500 clamp(26px,4vw,46px) 'Cormorant Garamond',serif;white-space:nowrap}.band .ico{width:.8em;height:.8em;animation:beat 1.6s infinite}
@keyframes mqb{to{transform:translateX(-50%)}}
.sh h2{background:linear-gradient(100deg,#3a0f24 40%,#cf5d8a 50%,#3a0f24 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine2 5s linear infinite}
@keyframes shine2{to{background-position:-250% 0}}
.fx .card.r{transform:perspective(900px) rotateX(38deg) translateY(70px);transform-origin:50% 0}
.fx .card.r.in{transform:none}
.ph::before{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(100deg,transparent,#ffffffa6,transparent);transform:skewX(-20deg);z-index:1;pointer-events:none}
.card:hover .ph::before{left:150%;transition:left .85s}
.btn{translate:var(--tx,0) var(--ty,0)}
#cu,#cd{position:fixed;left:0;top:0;pointer-events:none;z-index:1000;border-radius:50%;opacity:0}
#cu{width:36px;height:36px;margin:-18px 0 0 -18px;border:2px solid #cf5d8a;transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s}
#cu.h{width:68px;height:68px;margin:-34px 0 0 -34px;background:#cf5d8a22;border-color:#c2185b}
#cd{width:8px;height:8px;margin:-4px 0 0 -4px;background:#c2185b;transition:opacity .3s}
@media(max-width:860px){.o1{width:260px;height:260px}.band{margin:40px -4vw}}

#best{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){#best{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){#best{grid-template-columns:repeat(2,1fr)}}

.wrap.pg{padding-top:30px;padding-bottom:10px}

/* ===== Mode léger (appareils lents : activé automatiquement) ===== */
.lite #fx-a,.lite .fxh,.lite .swp,.lite .orb{display:none}
.lite body::before,.lite .hero::before,.lite .band,.lite .cats .ico,.lite .hero .it .ico,.lite .wa-f::before,.lite .sh h2,.lite .hero .btn{animation:none}
.lite .hero::before{translate:none}
.lite .sh h2{background:none;color:var(--tx);-webkit-text-fill-color:currentColor}
.lite .hero .it .w>span{animation:wup .95s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.95s + var(--i)*.1s);background:none;-webkit-text-fill-color:currentColor;color:var(--pd)}
.lite .card::after,.lite .ph::before{display:none}

/* ===== Zones de toucher confortables (mobile) ===== */
.fav::before{content:"";position:absolute;inset:-8px}
.qty button{min-width:36px;min-height:36px}
@media(max-width:860px){.ic{gap:0}.ic button,.ic .fv-h{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}#cnt,#fcnt{top:4px;right:2px}}
.pinfo .fav{position:relative}

/* ===== Aucun débordement horizontal (mobile) ===== */
html{overflow-x:hidden}
.bandw{overflow:hidden;padding:30px 0;margin:30px 0}.bandw .band{margin:0 -3vw}
@media(max-width:860px){
 .fx .r.l,.fx .r.rt,.fx .r.z{transform:translateY(40px) scale(.97)}
 .fx .card.r{transform:translateY(46px) scale(.97)}
 .fx .r.in,.fx .card.r.in{transform:none}
}

/* ===== Responsive : finitions ===== */
.st small{font-size:12px}.tg{font-size:12px}
@media(max-width:860px){.btn.sm{font-size:12.5px;padding:11px 8px;min-height:40px}.fav{width:34px;height:34px}}
@media(min-width:481px) and (max-width:860px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:700px) and (max-width:860px){#best{grid-template-columns:repeat(4,1fr)}.pd{grid-template-columns:1fr 1fr}}
.tg{max-width:calc(100% - 58px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rel{grid-template-columns:repeat(4,1fr)}
@media(min-width:481px) and (max-width:1100px){.rel{grid-template-columns:repeat(3,1fr)}.rel .card:nth-child(4){display:none}}
@media(max-width:480px){.rel{grid-template-columns:repeat(2,1fr)}}
/* alignement identique en-tête / hero / sections sur très grands écrans */
.wrap{max-width:1760px}
.hero .wrap{max-width:1760px;margin:0 auto;width:100%}
@media(max-width:860px){.fav{width:36px;height:36px}.hero small{font-size:12px}}