@font-face{font-family:Mali;src:url(../fonts/mali-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Mali;src:url(../fonts/mali-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Mali;src:url(../fonts/mali-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Mali;src:url(../fonts/mali-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --rose:#DEA8C0;
  --rose-2:#E9C3D4;
  --blush:#F6E6EE;
  --mauve:#C581A6;
  --prune:#45192F;
  --prune-2:#8E4D74;
  --kraft:#C9A27A;
  --kraft-2:#E7D3BB;
  --cream:#FCF5F8;
  --choco:#3B2216;
  --gut:clamp(16px,3vw,40px);
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--prune);font-family:Mali,"Trebuchet MS",sans-serif;font-weight:500;font-size:17px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{font-weight:700;line-height:1;letter-spacing:-.02em;margin:0}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--prune);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--prune);outline-offset:3px}

/* barre */
.bar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:24px;padding:10px var(--gut);background:var(--rose);transition:background .3s var(--ease)}
.bar.scrolled{background:var(--blush)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:20px}
.logo{width:46px;height:46px;flex:none}
.logo.big{width:120px;height:120px}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:16px;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--prune);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.cart-btn{display:flex;align-items:center;gap:8px;border:0;background:var(--prune);color:var(--blush);border-radius:999px;padding:10px 16px;font-weight:700;transition:transform .2s var(--ease)}
.cart-btn:hover{transform:translateY(-2px)}
.cart-btn:active{transform:scale(.96)}
.cart-btn svg{width:20px;height:20px}
.count{background:var(--blush);color:var(--prune);border-radius:999px;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;padding:0 6px}
.count.bump{animation:bump .45s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;background:var(--prune);color:var(--blush);padding:15px 26px;font-weight:700;font-size:17px;text-decoration:none;transition:transform .2s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px);background:#4a1f38}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--blush);color:var(--prune)}
.btn.ghost:hover{background:#fff}
.btn.wide{width:100%}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* hero */
.hero{position:relative;background:var(--rose);min-height:100vh;min-height:100svh;padding:96px 0 0;overflow:hidden;display:flex;flex-direction:column} /* taste-skill-ignore */
.hero-word{display:block;font-weight:700;color:#7E3F63;font-size:15.4vw;line-height:.8;letter-spacing:-.05em;white-space:nowrap;text-align:center;margin:16px 0 0;padding-bottom:1.2vw;pointer-events:none;user-select:none}
.hero-grid{position:relative;max-width:1360px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:center;flex:1;width:100%}
.hero h1{font-size:clamp(46px,6.2vw,100px);color:var(--prune);max-width:9.5em}
.lead{font-size:clamp(18px,1.5vw,22px);max-width:30em;margin-top:24px}
.hero-stage{display:flex;flex-direction:column;align-items:center}
.stage{position:relative;width:100%;aspect-ratio:1/0.82;max-height:68vh}
.stage canvas{width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.stage canvas:active{cursor:grabbing}
.stage-fallback{position:absolute;left:12%;top:8%;width:76%;filter:drop-shadow(0 30px 30px rgba(94,42,72,.35))} /* taste-skill-ignore : ombre douce des produits détourés (brief) */
.flavours{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}
.chip{border:0;border-radius:999px;background:var(--blush);color:var(--prune);padding:9px 16px;font-weight:600;font-size:15px;transition:background .2s,transform .2s var(--ease)}
.chip:hover{transform:translateY(-2px)}
.chip.on{background:var(--prune);color:var(--blush)}
.flavour-desc{margin-top:12px;text-align:center;font-size:16px;min-height:1.6em}

/* parfums du moment */
.moment{padding:140px 0 120px;background:var(--cream)}
.moment h2,.order h2,.machine h2,.events h2{font-size:clamp(44px,6vw,92px);color:var(--prune-2)}
.intro{font-size:clamp(18px,1.4vw,21px);max-width:34em;margin-top:20px}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1360px;margin:0 auto;padding:48px var(--gut) 0}
.slot{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:22px;background:var(--kraft-2);cursor:pointer}
.slot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.slot:hover img{transform:scale(1.05)}
.tag{position:absolute;left:14px;bottom:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--blush);border-radius:999px;padding:9px 10px 9px 18px;font-weight:700;font-size:18px}
.tag::after{content:"+";display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:var(--prune);color:var(--blush);font-size:22px;line-height:1;flex:none}

/* commande */
.order{background:var(--blush);padding:140px 0}
.order-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:48px 0 32px}
.filter{border:0;border-radius:999px;background:#fff;padding:11px 20px;font-weight:700;font-size:16px;transition:background .2s,transform .2s var(--ease)}
.filter:hover{transform:translateY(-2px)}
.filter.on{background:var(--prune);color:var(--blush)}
.menu{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.duo{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.duo .item{flex-direction:row}
.duo .item .pic{flex:0 0 48%;aspect-ratio:auto;min-height:300px}
.duo .item .info{padding:26px 26px}
.duo .item h3{font-size:30px}
.duo .item .d{font-size:17px}
.group-title{grid-column:1/-1;font-size:clamp(28px,3vw,40px);color:var(--prune-2);margin-top:28px}
.group-title:first-child{margin-top:0}
.item{display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;cursor:pointer;transition:transform .3s var(--ease)}
.item:hover{transform:translateY(-4px)}
.item .pic{position:relative;aspect-ratio:1;background:var(--rose);overflow:hidden}
.item .pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.item .pic.float{display:flex;align-items:center;justify-content:center}
.item .pic.float img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 22px 18px rgba(94,42,72,.32))} /* taste-skill-ignore : ombre douce des produits détourés (brief) */
.item:hover .pic img{transform:scale(1.05)}
.item .info{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.item h3{font-size:21px;line-height:1.1}
.item .d{font-size:16px;line-height:1.45;flex:1}
.item .row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.item .p{font-weight:700;font-size:19px}
.add{border:0;width:42px;height:42px;border-radius:999px;background:var(--prune);color:var(--blush);font-size:24px;line-height:1;transition:transform .2s var(--ease)}
.add:hover{transform:rotate(90deg)}
.badge{position:absolute;left:12px;top:12px;background:var(--blush);border-radius:999px;padding:5px 12px;font-weight:700;font-size:14px}

/* distributeur */
.machine{background:var(--rose);padding:140px 0}
.machine h2{color:var(--prune);font-size:clamp(44px,5.2vw,84px)}
.machine-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.statement{font-size:clamp(20px,2vw,28px);line-height:1.3;max-width:24em;margin-top:22px;font-weight:600}
.status{margin-top:28px;background:var(--prune);color:var(--blush);border-radius:20px;padding:18px 22px}
.status-line{font-weight:700;font-size:19px;line-height:1.35}
.status-line small{display:block;font-weight:500;font-size:16px;margin-top:4px}
.refill{margin-top:22px;border-collapse:separate;border-spacing:0 6px;width:100%;max-width:440px}
.refill th,.refill td{padding:9px 16px;text-align:left;font-size:17px;background:var(--rose-2)}
.refill th{border-radius:999px 0 0 999px;font-weight:700}
.refill td{border-radius:0 999px 999px 0}
.refill tr.today th,.refill tr.today td{background:var(--blush)}
.machine-visual{position:relative;display:grid;grid-template-columns:1fr .78fr;gap:16px;align-items:end;max-width:640px;justify-self:end;width:100%}
.vending{background:#f8f2f5;border-radius:26px;padding:16px;display:flex;flex-direction:column;gap:12px}
.vending-screen{background:var(--mauve);color:#fff;border-radius:14px;padding:18px;text-align:center;font-weight:700;font-size:24px}
.vending-rows{display:flex;flex-direction:column;gap:10px;background:#efe3ea;border-radius:16px;padding:12px}
.vrow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-bottom:12px}
.vrow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;border-radius:4px;background:#d9c3cf}
.vrow i{aspect-ratio:1;background-size:contain;background-position:center bottom;background-repeat:no-repeat;transition:transform .5s var(--ease)}
.vending:hover .vrow i{transform:translateY(-4px)}
.vending-tray{height:46px;border-radius:12px;background:var(--prune)}
.machine-photo{border-radius:22px;aspect-ratio:3/4;object-fit:cover;width:100%;max-height:520px}

/* événements */
.events{background:var(--cream);padding:140px 0}
.events-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.events-photo{border-radius:26px;aspect-ratio:1/1;object-fit:cover;width:100%;max-height:620px}
.events-copy p:not(.statement){margin-top:18px;max-width:34em;font-size:18px}

/* histoire */
.story{background:var(--prune);color:var(--blush);padding:140px 0}
.story-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.big{font-size:clamp(21px,1.9vw,26px);line-height:1.3;font-weight:600;max-width:20em}
.story-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.story-photos img{border-radius:22px;aspect-ratio:4/5;object-fit:cover;width:100%;max-height:460px}
.story-photos img:last-child{margin-top:64px}

/* pied */
.foot{background:var(--rose);padding:90px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.foot-brand p{font-weight:700;font-size:22px;margin-top:16px}
.foot h3{font-size:20px;margin-bottom:10px}
.foot p{font-size:17px}
.link{text-decoration:underline;text-underline-offset:3px}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:70px;font-size:15px}
.signature{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600}
.signature img{width:66px;height:auto;background:#111;border-radius:6px;padding:3px 6px;box-sizing:content-box}

/* panneau produit */
.sheet,.checkout{position:fixed;top:0;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.sheet[hidden],.checkout[hidden],.drawer[hidden]{display:none}
.sheet-back,.checkout-back,.drawer-back{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(59,22,40,.45)}
.sheet-card{position:relative;background:var(--cream);border-radius:28px;max-width:920px;width:100%;max-height:calc(100vh - 32px);overflow:auto;display:grid;grid-template-columns:1fr 1fr;animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.98)}}
.sheet-media{background:var(--rose);min-height:320px}
.sheet-media img{width:100%;height:100%;object-fit:cover}
.sheet-media.float{display:flex;align-items:center;justify-content:center}
.sheet-media.float img{width:80%;height:auto;object-fit:contain;filter:drop-shadow(0 26px 22px rgba(94,42,72,.35))} /* taste-skill-ignore : ombre douce des produits détourés (brief) */
.sheet-body{padding:34px 30px;display:flex;flex-direction:column;gap:14px}
.sheet-body h3{font-size:34px;color:var(--prune-2);padding-right:40px}
.price{font-weight:700;font-size:24px}
.x{position:absolute;top:12px;right:12px;width:42px;height:42px;border:0;border-radius:999px;background:var(--blush);font-size:26px;line-height:1;z-index:2}
.opts{display:flex;flex-direction:column;gap:8px}
.opts p{font-weight:700}
.opts .choices{display:flex;flex-wrap:wrap;gap:8px}
.opts label{display:inline-flex;position:relative}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts span{border-radius:999px;background:#fff;padding:9px 15px;font-weight:600;font-size:15px;cursor:pointer;transition:background .2s}
.opts input:checked+span{background:var(--prune);color:var(--blush)}
.opts input:focus-visible+span{outline:3px solid var(--prune);outline-offset:2px}
.qty-row{display:flex;gap:12px;align-items:center;margin-top:auto;flex-wrap:wrap}
.qty{display:inline-flex;align-items:center;background:#fff;border-radius:999px;padding:4px}
.qty button{border:0;background:var(--blush);width:38px;height:38px;border-radius:999px;font-size:20px;font-weight:700}
.qty span{min-width:34px;text-align:center;font-weight:700}

/* tiroir panier */
.drawer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:55}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--cream);display:flex;flex-direction:column;animation:slide .35s var(--ease)}
@keyframes slide{from{transform:translateX(100%)}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 10px}
.drawer-head h3{font-size:30px;color:var(--prune-2)}
.drawer-head .x{position:static}
.drawer-list{flex:1;overflow:auto;padding:8px 22px;display:flex;flex-direction:column;gap:12px}
.line{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;background:#fff;border-radius:18px;padding:10px}
.line img{width:72px;height:72px;object-fit:cover;border-radius:12px;background:var(--rose)}
.line h4{margin:0;font-size:16px;line-height:1.2}
.line small{display:block;font-size:13px}
.line .qty{background:var(--blush);margin-top:6px}
.line .qty button{width:30px;height:30px;background:#fff;font-size:17px}
.line .rm{border:0;background:none;text-decoration:underline;font-size:14px;margin-top:6px;padding:0;display:block}
.line .lp{font-weight:700;text-align:right}
.empty{padding:30px 0;font-size:18px}
.drawer-foot{padding:18px 22px 24px;background:var(--blush)}
.sub{display:flex;justify-content:space-between;font-size:19px;margin-bottom:14px}

/* paiement démo */
.checkout-card{position:relative;background:var(--cream);border-radius:28px;max-width:640px;width:100%;max-height:calc(100vh - 32px);overflow:auto;padding:34px 28px;animation:pop .35s var(--ease)}
.checkout-card h3{font-size:34px;color:var(--prune-2);margin-bottom:18px;padding-right:40px}
.co{display:flex;flex-direction:column;gap:14px}
.co fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.co legend{font-weight:700;margin-bottom:6px}
.co label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
.co label[hidden]{display:none}
.co .opt{flex-direction:row;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:12px 14px;font-size:16px}
.co input,.co select,.co textarea{font:inherit;font-weight:500;color:var(--prune);background:#fff;border:2px solid var(--rose-2);border-radius:14px;padding:12px 14px;width:100%}
.co .opt input{width:auto;accent-color:var(--prune)}
.co .bad{border-color:var(--prune)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.recap{background:var(--blush);border-radius:18px;padding:14px 16px;font-size:15px}
.recap div{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.recap .tot{font-weight:700;font-size:18px;margin-top:6px}
.fine{font-size:14px;text-align:center}
.done{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.done h3{margin-bottom:0}
.done .statement{margin-top:0}

/* révélations */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}*{animation:none!important}}

@media (max-width:1180px){
  .menu{grid-template-columns:repeat(3,1fr)}
  .duo{grid-template-columns:1fr}
  .nav{gap:18px}
}
@media (max-width:900px){
  .nav{display:none}
  .cart-btn{margin-left:auto}
  .hero-grid{grid-template-columns:1fr;min-height:0;padding-top:40px}
  .stage{aspect-ratio:1/0.8;max-height:none}
  .order-head,.machine-grid,.events-grid,.story-grid{grid-template-columns:1fr;gap:36px}
  .menu{grid-template-columns:repeat(3,1fr)}
  .strip{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .sheet-card{grid-template-columns:1fr}
  .sheet-media{min-height:0;aspect-ratio:4/3}
}
@media (max-width:560px){
  body{font-size:16px}
  .brand span{display:none}
  .cart-btn span:not(.count){display:none}
  .hero{padding-top:84px}
  .hero h1{font-size:44px}
  .moment,.order,.machine,.events,.story{padding:96px 0}
  .menu{grid-template-columns:1fr 1fr;gap:12px}
  .item .info{padding:12px}
  .strip{gap:10px}
  .tag{left:8px;right:8px;bottom:8px;font-size:14px;padding:6px 6px 6px 12px;line-height:1.15}
  .tag::after{width:28px;height:28px;font-size:18px}
  .item h3{font-size:17px}
  .item .d{display:none}
  .duo .item{flex-direction:column}
  .duo .item .pic{aspect-ratio:4/3;min-height:0}
  .duo .item .d{display:block;font-size:15px}
  .duo .item h3{font-size:22px}
  .duo .item .info{padding:16px}
  .item .p{font-size:16px}
  .add{width:36px;height:36px;font-size:20px}
  .machine-visual{grid-template-columns:1fr}
  .machine-photo{display:none}
  .two{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .story-photos img:last-child{margin-top:32px}
  .checkout-card{padding:28px 18px}
  .sheet-body{padding:24px 20px}
}