:root{color-scheme:light}
*{box-sizing:border-box}
body{margin:0;font:var(--fs-md)/1.55 var(--font-body);background:var(--w);color:var(--k);-webkit-font-smoothing:antialiased}
.wrap{max-width:1150px;margin:auto;padding:0 16px}
.top{position:sticky;top:0;z-index:10;background:var(--k);color:var(--w)}
.bar{display:flex;align-items:center;gap:12px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:var(--w);text-decoration:none}
.logo i{display:grid;place-items:center;width:32px;height:32px;background:var(--o);color:var(--k);font-style:normal;transition:transform .4s}
.logo:hover i{transform:rotate(90deg)}
#search{flex:1;min-width:0;padding:10px 14px;border:1px solid #444;background:#111;color:var(--w);font:inherit}
#search:focus{outline:2px solid var(--o);border-color:var(--o)}
.cartBtn{border:0;background:var(--o);color:var(--k);padding:10px 16px;font:inherit;font-weight:700;cursor:pointer;transition:background .2s}
.cartBtn:hover{background:var(--w)}
.cartBtn span{display:inline-block;background:var(--k);color:var(--w);min-width:22px;padding:0 6px;margin-left:6px;text-align:center}
.cartBtn.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.15)}}

.hero{background:var(--k);color:var(--w);overflow:hidden}
.heroin{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:8px;min-height:480px}
.eyebrow{display:inline-block;background:var(--o);color:var(--k);font-weight:700;padding:2px 10px;margin:0 0 16px;animation:rise .6s both}
.hero h1{font-size:clamp(32px,5.5vw,58px);line-height:1.08;margin:0 0 16px;font-weight:700;animation:rise .6s .1s both}
.hero h1 span{color:var(--o)}
.sub{color:#bbb;margin:0 0 26px;animation:rise .6s .2s both}
.htxt .btn{animation:rise .6s .3s both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.hvis{position:relative;aspect-ratio:1;max-width:520px;width:100%;justify-self:center}
.halo{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(255,121,0,.55),rgba(255,121,0,0) 70%);animation:pulse 4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.15);opacity:.7}}
#heroCanvas{position:relative;width:100%;height:100%;display:block;animation:rise .9s .2s both}
.btn{display:inline-block;background:var(--o);color:var(--k);border:2px solid var(--o);padding:12px 24px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;transition:all .2s}
.btn:hover{background:var(--k);color:var(--w);border-color:var(--w)}
.btn.dark{background:var(--k);color:var(--w);border-color:var(--k)}
.btn.dark:hover{background:var(--o);color:var(--k);border-color:var(--o)}

.marquee{background:var(--o);color:var(--k);overflow:hidden;white-space:nowrap;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.track{display:inline-flex;animation:slide 28s linear infinite}
.track span{padding:10px 28px}.track span::after{content:"■";margin-left:56px;font-size:10px;vertical-align:middle}
@keyframes slide{to{transform:translateX(-50%)}}

.title{font-size:30px;margin:44px 0 0}
.filters{display:flex;gap:8px;flex-wrap:wrap;padding-top:18px}
.chip{border:2px solid var(--k);background:var(--w);color:var(--k);padding:8px 16px;cursor:pointer;font:inherit;font-weight:700;transition:all .15s}
.chip:hover{border-color:var(--o);color:var(--o)}
.chip.on{background:var(--k);color:var(--w)}
.sort{display:flex;justify-content:space-between;align-items:center;margin:16px 0;color:var(--g3)}
.sort select{padding:8px;border:1px solid var(--k);background:var(--w);color:var(--k)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;padding-bottom:50px}
.card{background:var(--w);border:1px solid var(--g2);display:flex;flex-direction:column;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;opacity:0;transform:translateY(30px)}
.card.in{opacity:1;transform:none;transition:opacity .6s,transform .6s,border-color .2s,box-shadow .2s}
.card.in:hover{transform:translateY(-4px);border-color:var(--o);box-shadow:0 12px 28px rgba(0,0,0,.14);transition:transform .2s,border-color .2s,box-shadow .2s}
.pic{position:relative;aspect-ratio:1;background:radial-gradient(circle at 50% 60%,#fff 0,var(--g1) 70%);display:grid;place-items:center;font-size:80px}
.pic.ok{font-size:0}
.pic canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.pic .tag{position:absolute;top:0;left:0;background:var(--o);color:var(--k);font-size:11px;font-weight:700;padding:2px 8px;text-transform:uppercase;z-index:1}
.info{padding:14px;display:flex;flex-direction:column;gap:4px;flex:1;border-top:3px solid var(--k)}
.info h3{margin:0;font-size:16px}
.info p{margin:0;color:var(--g3);font-size:13px;flex:1}
.buy{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
.price{font-weight:700;font-size:17px}
.add{background:var(--k);color:var(--w);border:0;padding:9px 14px;cursor:pointer;font:inherit;font-weight:700;transition:background .2s,color .2s}
.add:hover{background:var(--o);color:var(--k)}
.add:active{transform:scale(.95)}
.empty{color:var(--g3);text-align:center;margin-top:40px;grid-column:1/-1}

.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;padding-bottom:50px}
.perks div{border-left:4px solid var(--o);background:var(--g1);padding:18px;display:flex;flex-direction:column}
.perks span{font-size:13px;color:var(--g3)}
footer{background:var(--k);color:#aaa;padding-block:26px;text-align:center;border-top:4px solid var(--o)}

#overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:20;animation:fade .2s}
@keyframes fade{from{opacity:0}}
#drawer{position:fixed;top:0;right:0;height:100%;width:min(400px,100%);background:var(--w);z-index:30;transform:translateX(100%);transition:transform .3s;display:flex;flex-direction:column}
#drawer.open{transform:none}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--k);color:var(--w)}
.dhead h2{margin:0;font-size:18px}.dhead button{border:0;background:none;color:var(--w);font-size:20px;cursor:pointer}
.items{flex:1;overflow:auto;padding:12px 16px}
.line{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--g2)}
.line .em{font-size:28px;width:46px;height:46px;display:grid;place-items:center;background:var(--g1)}
.line .t{flex:1;min-width:0}.line .t b{display:block}.line .t span{color:var(--g3);font-size:13px}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:28px;height:28px;border:1px solid var(--k);background:var(--w);cursor:pointer;font-weight:700}
.qty button:hover{background:var(--o)}
.checkout{padding:16px;border-top:1px solid var(--g2);display:flex;flex-direction:column;gap:8px}
.checkout input{padding:10px;border:1px solid var(--k);font:inherit}
.checkout input:focus{outline:2px solid var(--o)}
.checkout .btn{width:100%}
.total{display:flex;justify-content:space-between;font-size:17px}
.checkout small{color:var(--g3);text-align:center}

#modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.7);animation:fade .2s}
#modal[hidden]{display:none}
.mbox{position:relative;background:var(--w);width:min(860px,100%);max-height:100%;overflow:auto;display:grid;grid-template-columns:1.2fr 1fr;animation:pop .3s}
@keyframes pop{from{opacity:0;transform:scale(.92)}}
.x{position:absolute;top:8px;right:8px;z-index:2;border:0;background:var(--k);color:var(--w);width:34px;height:34px;cursor:pointer;font-size:16px}
.x:hover{background:var(--o);color:var(--k)}
.mview{position:relative;aspect-ratio:1;background:radial-gradient(circle at 50% 60%,#fff 0,var(--g1) 75%);cursor:grab}
.mview:active{cursor:grabbing}
.mview canvas{width:100%;height:100%;display:block;touch-action:none}
.mview small{position:absolute;bottom:8px;left:0;right:0;text-align:center;color:var(--g3)}
.mtxt{padding:28px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.mtxt small{color:var(--o);font-weight:700;text-transform:uppercase}
.mtxt h2{margin:0;font-size:26px}.mtxt p{margin:0;color:var(--g3)}.mtxt .price{font-size:26px}

@media(max-width:760px){.heroin{grid-template-columns:1fr;padding-top:28px}.hvis{max-width:360px}.mbox{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.card{opacity:1;transform:none}}

.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%}
.pic .tag.out{left:auto;right:0;background:var(--k);color:var(--w)}
.card.soldout .price{color:var(--g3)}
.add:disabled{background:var(--g2);color:var(--g3);cursor:not-allowed}
.mview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%}
.mview img[hidden]{display:none}
.done{display:none;padding:24px 16px;flex:1;flex-direction:column;gap:12px;align-items:flex-start}
.done h3{margin:0;font-size:22px}.done p{margin:0;color:var(--g3)}
.done-mode .done{display:flex}.done-mode #cartItems,.done-mode #checkout{display:none!important}
.ferr{margin:0;padding:10px 16px;background:#fde8e8;color:#9b1c1c;font-weight:700}

.pay{border:1px solid var(--k);margin:0;padding:8px 12px 12px}
.pay legend{font-weight:700;padding:0 6px}
.pay label{display:flex;gap:8px;align-items:center;padding:6px 0;cursor:pointer}
.pay input[type=radio]{accent-color:var(--o);width:18px;height:18px}
.payinfo{background:var(--g1);border-left:4px solid var(--o);padding:10px;margin-top:6px}
.payinfo p{margin:0 0 8px;font-size:14px}
.payinfo input{width:100%}

/* ---- accessibilité & lisibilité (règles ui-ux-pro-max) ---- */
html{scroll-padding-top:84px}
:focus-visible{outline:3px solid #000;outline-offset:2px}
.top :focus-visible,.hero :focus-visible,footer :focus-visible,.dhead :focus-visible{outline-color:#fff}
.checkout input:focus{outline:3px solid #000;outline-offset:1px}
.checkout label{font-weight:700;font-size:14px;margin-top:4px}
.payinfo label{margin-top:0}
.mtxt small,.chip:hover{color:#b34f00}
.info p,.perks span{font-size:14px}
.pic .tag{font-size:12px}
.qty button{width:40px;height:40px}.qty{gap:8px}
.x,.dhead button{min-width:40px;min-height:40px}
.pic .ph{color:#9aa0a8}.pic .ph svg{width:72px;height:72px}
.pic.ok .ph{display:none}
.mi{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.line .em .mi{width:26px;height:26px;color:#595959}
.low{color:#b42318;font-weight:700;font-size:13px}
.halo{animation:none}
.marquee{position:relative}
.mqBtn{position:absolute;right:0;top:0;bottom:0;z-index:2;width:48px;border:0;background:var(--o);color:#000;cursor:pointer;display:grid;place-items:center;box-shadow:-14px 0 12px var(--o)}
.mqBtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mqBtn .pl{display:none}.marquee.paused .mqBtn .pa{display:none}.marquee.paused .mqBtn .pl{display:block}
.marquee.paused .track,.marquee:hover .track{animation-play-state:paused}
.card.sk{cursor:default}.card.sk:hover{transform:none;box-shadow:none;border-color:var(--g2)}
.sk .pic{background:linear-gradient(90deg,#eceef1 25%,#f6f7f9 37%,#eceef1 63%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
.sk .info h3,.sk .info p{background:#eceef1;color:transparent;border-radius:0}
@keyframes shimmer{to{background-position:-200% 0}}
.empty .btn{margin-top:12px}
@media(pointer:coarse){.chip,.add{min-height:44px}}

/* ---- fiches produit : rendu "vitrine" ---- */
.grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.card.in:hover{border-color:#000;box-shadow:0 16px 36px rgba(0,0,0,.12)}
.pic{background:radial-gradient(ellipse at 50% 36%,#fff 0,#f4f5f7 60%,#e8eaee 100%);border-bottom:1px solid var(--g2)}
.pic::after{content:"";position:absolute;left:24%;right:24%;bottom:11%;height:7%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.26),transparent 70%);filter:blur(3px);pointer-events:none}
.pic canvas,.pic img{z-index:1}
.info{border-top:0;padding:16px 18px 18px;gap:6px}
.info .cat{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#595959;font-weight:700}
.info h3{font-size:17px;line-height:1.25}
.info p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em;margin:0;color:#595959;flex:none}
.buy{display:block;margin-top:auto;padding-top:10px}
.price{display:flex;align-items:baseline;gap:6px;font-size:inherit}
.price b{font-size:22px}.price span{font-size:13px;color:#595959;font-weight:700}
.add{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:12px 14px}
.add svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:12px;left:12px;z-index:2;padding:3px 10px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.b-low{background:var(--o);color:#000}.b-out{background:#000;color:#fff}
.view{position:absolute;bottom:12px;left:50%;transform:translate(-50%,8px);opacity:0;z-index:2;background:#000;color:#fff;font-size:12px;font-weight:700;padding:6px 14px;transition:opacity .2s,transform .2s;white-space:nowrap}
.card:hover .view,.card:focus-visible .view{opacity:1;transform:translate(-50%,0)}
@media(hover:none){.view{display:none}}
.card.soldout .pic canvas,.card.soldout .pic img{opacity:.45}
.mstock{margin:0;font-weight:700}.mstock.ok{color:#0e7a45}.mstock.low{color:#b42318}
.mperks{margin:6px 0 0;padding:0;list-style:none;color:#595959;font-size:14px}
.mperks li{padding:3px 0 3px 22px;position:relative}
.mperks li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:10px;background:var(--o)}
@media(max-width:600px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .info{padding:12px}.info h3{font-size:15px}.info p{display:none}.price b{font-size:18px}
  .add{padding:10px 8px;font-size:13px}.add svg{display:none}
  .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}.chip{white-space:nowrap}
}

/* ============ charte v2 : typographie, rythme, blocs (tokens.css) ============ */
h1,h2,h3,.logo,.btn,.chip,.add,.badge,.view,.eyebrow,.cat,.price b,.cartBtn,.marquee,.mtxt small{font-family:var(--font-head)}
.btn,.add,.chip,.cartBtn{font-weight:600;letter-spacing:.01em}
.price b,.cartBtn span,.total b,.line .t span{font-variant-numeric:tabular-nums}
.logo{font-weight:700;letter-spacing:-.01em}
/* sections : grands espaces, titres francs (Vibrant & Block-based) */
.hero{padding-block:var(--s7)}
.hero h1{font-size:var(--fs-3xl);line-height:1.05;font-weight:700;letter-spacing:-.02em}
.hero .sub{font-size:var(--fs-lg)}
.title{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.01em;margin:var(--s8) 0 0}
.filters{padding-top:var(--s4);gap:var(--s2)}
.sort{margin:var(--s4) 0 var(--s5)}
.grid{gap:var(--s5);padding-bottom:var(--s8)}
.perks{gap:var(--s4);padding-bottom:var(--s8)}
.perks b{font-family:var(--font-head);font-size:var(--fs-lg)}
.perks div{padding:var(--s5) var(--s5);border-left-width:6px}
footer{padding-block:var(--s6)}
/* blocs géométriques décoratifs du héros (statiques) */
.hvis{overflow:visible}
.blk{position:absolute;display:block;pointer-events:none}
.blk.b1{width:44px;height:44px;background:var(--o);right:4%;top:8%}
.blk.b2{width:20px;height:20px;background:#fff;opacity:.9;left:6%;bottom:22%}
.blk.b3{width:120px;height:120px;border:3px solid var(--o);right:-2%;bottom:6%;opacity:.55}
#heroCanvas,.halo{position:relative}
.halo{position:absolute}
/* mouvement : durées et courbes de la charte */
.btn,.add,.chip,.cartBtn{transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1),transform var(--dur-1)}
.card{transition:border-color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-2) var(--ease-out)}
.card.in:hover{box-shadow:var(--sh-2)}
.card.in:hover h3{color:var(--ot)}
.card h3{transition:color var(--dur-1)}
#drawer{transition:transform var(--dur-3) var(--ease-out)}
@media(max-width:760px){.blk.b3{display:none}.hero{padding-block:var(--s6)}.title{margin-top:var(--s7)}}

/* photos réelles : le fond blanc des photos se fond dans le fond de vitrine */
.pic img,.mview img{mix-blend-mode:multiply}

/* ============ assistant (chat) ============ */
#chat{position:relative;z-index:15}
.chat-btn{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:15;width:60px;height:60px;border:0;background:var(--o);color:#000;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:background var(--dur-1),color var(--dur-1),transform var(--dur-2) var(--ease-out)}
.chat-btn:hover{background:#000;color:var(--o);transform:translateY(-2px)}
.chat-btn svg,.chat-head button svg,.chat-form button svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chat-panel{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 72px);z-index:15;width:min(390px,calc(100vw - 32px));height:min(580px,calc(100vh - 130px));background:#fff;border:1px solid #000;display:flex;flex-direction:column;box-shadow:0 20px 48px rgba(0,0,0,.3);transform-origin:bottom right;animation:cpop var(--dur-3) var(--ease-out)}
.chat-panel[hidden]{display:none}
@keyframes cpop{from{opacity:0;transform:translateY(16px) scale(.96)}}
.chat-head{background:#000;color:#fff;padding:12px 8px 12px 16px;display:flex;align-items:center;gap:12px;border-bottom:4px solid var(--o)}
.chat-head .av{width:38px;height:38px;background:var(--o);color:#000;display:grid;place-items:center;font:700 17px var(--font-head)}
.chat-head b{font-family:var(--font-head)}.chat-head small{display:block;color:#c9ccd1}
.chat-head button{margin-left:auto;background:none;border:0;color:#fff;width:44px;height:44px;cursor:pointer;display:grid;place-items:center}
.chat-head button:hover{color:var(--o)}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#f4f5f7}
.msg{max-width:88%;padding:10px 14px;line-height:1.45;animation:up var(--dur-2) var(--ease-out)}
.msg.bot{background:#fff;border:1px solid var(--g2);align-self:flex-start}
.msg.me{background:#000;color:#fff;align-self:flex-end}
.msg .wa{display:inline-block;margin-top:8px;background:var(--o);color:#000;font:700 14px var(--font-head);padding:9px 14px;text-decoration:none}
.msg .wa:hover{background:#000;color:var(--o)}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;max-width:96%}
.chips button{border:1px solid #000;background:#fff;padding:7px 12px;font:600 14px var(--font-head);cursor:pointer;min-height:38px;transition:background var(--dur-1),color var(--dur-1)}
.chips button:hover{background:#000;color:#fff}
.pcard{display:grid;grid-template-columns:60px 1fr;gap:10px;background:#fff;border:1px solid var(--g2);padding:10px;animation:up var(--dur-2) var(--ease-out)}
.pcard .pi{width:60px;height:60px;background:var(--g1);display:grid;place-items:center;color:#595959;overflow:hidden}
.pcard .pi svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pcard .pi img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pcard b{font-family:var(--font-head);display:block;line-height:1.25}.pcard .pr{font-weight:700;font-variant-numeric:tabular-nums}
.pcard small.ok{color:#0e7a45}.pcard small.low{color:#b42318}.pcard small{font-weight:700}
.pcard .pa{grid-column:1/-1;display:flex;gap:6px}
.pcard .pa button{flex:1;min-height:40px;border:1px solid #000;background:#000;color:#fff;font:600 14px var(--font-head);cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.pcard .pa button:hover{background:var(--o);color:#000;border-color:var(--o)}
.pcard .pa button.ghost{background:#fff;color:#000}.pcard .pa button.ghost:hover{background:#000;color:#fff;border-color:#000}
.typing{display:inline-flex;gap:4px;align-items:center;height:20px}
.typing i{width:7px;height:7px;background:#595959;animation:blink 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.chat-form{display:flex;border-top:1px solid var(--g2)}
.chat-form input{flex:1;min-width:0;border:0;padding:15px 16px;font:inherit}
.chat-form input:focus-visible{outline:3px solid #000;outline-offset:-3px}
.chat-form button{width:60px;border:0;background:var(--o);color:#000;cursor:pointer;display:grid;place-items:center}
.chat-form button:hover{background:#000;color:var(--o)}
@media(max-width:520px){.chat-panel{right:0;left:0;bottom:0;width:auto;height:min(82vh,640px);border-width:1px 0 0}.chat-btn{width:56px;height:56px}}
@media(prefers-reduced-motion:reduce){.chat-panel,.msg,.pcard{animation:none}.typing i{animation:none;opacity:.6}}

/* ---- robot animé de l'assistant ---- */
.chat-btn{width:68px;height:68px;overflow:visible}
.chat-btn .robot{width:58px;height:58px;display:block;pointer-events:none;transition:transform var(--dur-2) var(--ease-out)}
.chat-btn:hover{background:var(--o2);color:#000}
.chat-btn:hover .robot{transform:scale(1.12) rotate(-4deg)}
.chat-panel{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 80px)}
.chat-head .av{width:44px;height:44px;padding:2px}
.chat-head .av img{width:100%;height:100%;display:block}
@media(max-width:520px){.chat-btn{width:62px;height:62px}.chat-btn .robot{width:52px;height:52px}}

/* ---- animation d'ajout au panier ---- */
.fly{position:fixed;z-index:200;pointer-events:none;will-change:transform,opacity;color:#14161c;filter:drop-shadow(0 12px 14px rgba(0,0,0,.35))}
.fly img,.fly svg{width:100%;height:100%;object-fit:contain;display:block}
.fly svg{stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ring{position:fixed;z-index:199;width:56px;height:56px;border:3px solid #ff7900;pointer-events:none}

/* ---- conversation animée : visage du robot, bulles qui apparaissent, texte tapé ---- */
.chat-head .av{width:50px;height:50px;padding:3px;background:var(--o)}
.chat-head .av .rb{animation:rbBob 2.8s ease-in-out infinite}
.chat-panel{overflow:hidden}
.brow{display:flex;align-items:flex-end;gap:8px;align-self:flex-start;max-width:94%}
.mav{width:32px;height:32px;flex:none;background:var(--o);padding:2px;display:block}
.mav .rb,.mav .rb *{animation:none!important}
.brow .msg{max-width:none;animation:none}
.brow{animation:bubbleIn var(--dur-3) cubic-bezier(.2,.9,.3,1.25) both;transform-origin:left bottom}
.msg.me{animation:bubbleInR var(--dur-3) cubic-bezier(.2,.9,.3,1.25) both;transform-origin:right bottom}
.tw{white-space:pre-wrap}
.tw:not(:empty)+.caret,.caret{display:none}
.chips button{animation:chipIn .4s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--i,0)*70ms)}
.pcard{margin-left:40px;animation:cardIn .5s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0)*120ms)}
.chips{margin-left:40px}
@keyframes bubbleIn{from{opacity:0;transform:translateY(10px) scale(.85)}}
@keyframes bubbleInR{from{opacity:0;transform:translateX(18px) scale(.9)}}
@keyframes chipIn{from{opacity:0;transform:translateY(8px) scale(.8)}}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.95)}}
@media(prefers-reduced-motion:reduce){.brow,.msg.me,.chips button,.pcard{animation:none}}

/* ---- ajout au panier : effet spectaculaire ---- */
.fly{position:fixed;z-index:200;pointer-events:none;will-change:transform,opacity;color:#14161c;filter:drop-shadow(0 16px 18px rgba(0,0,0,.45))}
.fly::before{content:"";position:absolute;inset:-30%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(255,121,0,.65),rgba(255,121,0,0) 66%);animation:auraPulse .45s ease-in-out infinite alternate}
@keyframes auraPulse{from{transform:scale(.85);opacity:.7}to{transform:scale(1.15);opacity:1}}
.fly-scrim{position:fixed;inset:0;z-index:9;background:rgba(0,0,0,.55);pointer-events:none}
.ghost{position:fixed;z-index:199;pointer-events:none}
.ghost img,.ghost svg{width:100%;height:100%;display:block;object-fit:contain}
.spark{position:fixed;z-index:201;pointer-events:none;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.ring{z-index:208;border-width:4px}
.plus1{position:fixed;z-index:209;pointer-events:none;font:700 26px var(--font-head);color:#ff7900;text-shadow:0 2px 0 #000,0 0 12px rgba(255,121,0,.6)}
.fx-screen{position:fixed;inset:0;z-index:210;pointer-events:none;overflow:hidden}
.praise{position:fixed;z-index:205;display:flex;align-items:center;gap:10px;background:#000;color:#fff;padding:8px 16px 8px 8px;font:700 15px var(--font-head);box-shadow:0 14px 34px rgba(0,0,0,.4);border-bottom:4px solid var(--o);max-width:calc(100vw - 24px)}
.praise::before{content:"";position:absolute;top:-8px;right:34px;width:14px;height:14px;background:#000;transform:rotate(45deg)}
.praise .pface{width:46px;height:46px;background:var(--o);padding:3px;flex:none}
.add.added{background:var(--o);color:#000;animation:addedPop .55s cubic-bezier(.2,.9,.3,1.4)}
@keyframes addedPop{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.add.added{animation:none}}
.pcard .pa button{flex:1 1 0;min-width:0}