/* SUPLEX — styles partagés. Rail à gauche, bandes noires, cartes très arrondies sur brume verte */
:root{
  --ink:#0a0c0a;--ink-2:#161a16;--ink-3:#232922;
  --canvas:#eff2ec;--surface:#ffffff;--line:#e3e7df;--muted:#6b7266;--muted-d:#aab1a5;
  --green:#2fe31c;--lime:#c6f51a;--on-green:#071006;
  --display:"Archivo","Arial Black",Impact,sans-serif;
  --body:"Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-card:28px;--r-img:20px;
  --sh-card:rgba(0,0,0,.10) 0 4px 6px -1px,rgba(0,0,0,.10) 0 2px 4px -2px;
  --sh-pill:rgba(0,0,0,.06) 0 2px 8px 0;
  --sh-lift:rgba(0,0,0,.14) 0 18px 40px -12px;
  --sh-green:rgba(47,227,28,.45) 0 6px 24px 0;
  --ease:cubic-bezier(.2,.8,.2,1);
  --rail:72px;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.38;letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--ink)}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;letter-spacing:inherit;color:var(--ink)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:12px}
svg text{font-family:var(--display);font-stretch:118%}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.label{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:11px;letter-spacing:.32em;text-transform:uppercase}
.muted{color:var(--muted)}
h1,h2,h3{text-wrap:balance;margin:0}
main,.announce,footer{margin-left:var(--rail)}

/* progression + curseur */
#progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--green),var(--lime));z-index:100}
#cursor{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--lime);pointer-events:none;z-index:120;mix-blend-mode:difference;transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease);display:none}
#cursor.big{width:54px;height:54px;margin:-27px 0 0 -27px}
@media (pointer:fine){#cursor{display:block}}

/* transition entre pages */
.curtain{position:fixed;inset:0;z-index:200;visibility:hidden;background:var(--ink);display:grid;place-items:center;transform:translateY(100%);pointer-events:none}
.curtain img{width:84px;opacity:0;transform:scale(.6)}
.curtain.in,.curtain.out{visibility:visible}
.curtain.in{transition:transform .5s cubic-bezier(.7,0,.3,1);transform:none}
.curtain.in img{transition:.4s .2s var(--ease);opacity:1;transform:none}
.curtain.out{animation:curtainOut .7s cubic-bezier(.7,0,.3,1) .1s both}
.curtain.out img{animation:markOut .5s both}
@keyframes curtainOut{from{transform:none}to{transform:translateY(-100%)}}
@keyframes markOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-40px) scale(.8)}}

/* bandeau */
.announce{background:var(--ink);color:#fff;height:40px;overflow:hidden;display:flex;align-items:center;position:relative;z-index:5}
.announce .track{display:flex;gap:48px;white-space:nowrap;animation:slide 26s linear infinite;padding-left:48px;font-size:13px}
.announce b{color:var(--lime);font-weight:600}
@keyframes slide{to{transform:translateX(-50%)}}

/* rail */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);background:var(--surface);z-index:60;display:flex;flex-direction:column;align-items:center;gap:6px;padding:calc(14px + env(safe-area-inset-top,0px)) 0 calc(16px + env(safe-area-inset-bottom,0px));padding-left:env(safe-area-inset-left,0px);box-shadow:rgba(0,0,0,.05) 1px 0 0}
.rail .mark{width:48px;height:48px;border-radius:16px;background:var(--ink);display:grid;place-items:center;margin-bottom:14px;transition:transform .5s var(--ease)}
.rail .mark:hover{transform:rotate(-8deg) scale(1.06)}
.rail .mark img{width:30px}
.rail a:not(.mark),.rail button{position:relative;width:48px;height:48px;border-radius:20px;display:grid;place-items:center;color:var(--ink);text-decoration:none;transition:background .25s,transform .25s var(--ease)}
.rail a:not(.mark):hover,.rail button:hover{background:var(--canvas);transform:scale(1.08)}
.rail a.on{background:var(--ink);color:var(--lime)}
.rail a.on:hover{background:var(--ink)}
.rail .tip{position:absolute;left:58px;top:50%;transform:translate(-6px,-50%);opacity:0;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;padding:6px 10px;border-radius:999px;white-space:nowrap;transition:.25s var(--ease)}
.rail a:hover .tip,.rail button:hover .tip{opacity:1;transform:translate(0,-50%)}
.rail .spacer{flex:1}
.badge{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--green);color:var(--on-green);font-size:11px;font-weight:600;display:grid;place-items:center;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.badge.show{transform:scale(1)}
.badge.bump{animation:bump .45s}
@keyframes bump{40%{transform:scale(1.5)}}
svg.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* barre mobile + menu */
.topbar{display:none}
.mmenu{display:none}
@media (max-width:820px){
  :root{--rail:0px}
  .rail{display:none}
  .topbar{display:flex;position:sticky;top:env(safe-area-inset-top,0px);z-index:70;align-items:center;justify-content:space-between;gap:12px;background:var(--ink);color:#fff;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .topbar .logo img{height:34px}
  .topbar .r{display:flex;gap:8px}
  .topbar button{position:relative;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:var(--ink-2)}
  .mmenu{display:flex;position:fixed;inset:0;z-index:65;background:var(--ink);color:#fff;flex-direction:column;justify-content:center;gap:4px;padding:80px max(24px,env(safe-area-inset-right,0px)) 40px max(24px,env(safe-area-inset-left,0px));clip-path:circle(0% at calc(100% - 40px) 32px);transition:clip-path .6s cubic-bezier(.7,0,.3,1);visibility:hidden}
  .mmenu.open{clip-path:circle(150% at calc(100% - 40px) 32px);visibility:visible}
  .mmenu a{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:42px;letter-spacing:-.04em;line-height:1.05;text-transform:uppercase;text-decoration:none;transform:translateY(30px);opacity:0;transition:.5s var(--ease)}
  .mmenu a.on{color:var(--lime)}
  .mmenu.open a{transform:none;opacity:1}
  .mmenu.open a:nth-child(2){transition-delay:.05s}.mmenu.open a:nth-child(3){transition-delay:.1s}.mmenu.open a:nth-child(4){transition-delay:.15s}.mmenu.open a:nth-child(5){transition-delay:.2s}.mmenu.open a:nth-child(6){transition-delay:.25s}
}

/* hero de page (pages internes) */
.phero{background:var(--ink);color:#fff;border-radius:0 0 40px 40px;position:relative;overflow:hidden;padding-block:64px 48px}
.phero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 7px);pointer-events:none}
.phero .glow{position:absolute;width:560px;height:560px;right:-120px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(47,227,28,.25),rgba(198,245,26,.06) 45%,transparent 70%);animation:breathe 6s ease-in-out infinite;pointer-events:none}
@keyframes breathe{50%{transform:scale(1.15);opacity:.7}}
.phero .wrap{position:relative}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted-d);margin-bottom:18px}
.crumbs a{text-decoration:none;transition:color .2s}.crumbs a:hover{color:var(--lime)}
.big-title{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(54px,11vw,150px);line-height:.86;letter-spacing:-.06em;text-transform:uppercase;margin:0}
.big-title .ln{display:block;overflow:hidden;padding-bottom:.04em}
.big-title .ln>span{display:inline-block;animation:rise 1s var(--ease) both}
.big-title .ln:nth-child(2)>span{animation-delay:.08s}
.big-title em{font-style:normal;color:var(--lime)}
.big-title .out{color:transparent;-webkit-text-stroke:2px #fff}
@keyframes rise{from{transform:translateY(105%)}}
.phero .lead{max-width:52ch;color:var(--muted-d);font-size:17px;margin:20px 0 0;animation:fadeUp .9s .2s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}}

/* marquee */
.band{margin-block:48px 0;overflow:hidden;transform:rotate(-2deg);background:var(--green);color:var(--on-green);padding-block:14px;box-shadow:var(--sh-green)}
.band.alt{transform:rotate(1.5deg);margin-top:-30px;background:var(--ink);color:var(--lime);box-shadow:none}
.band .row{display:flex;white-space:nowrap;font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(22px,3.4vw,40px);letter-spacing:-.02em;text-transform:uppercase;will-change:transform}
.band .row span{padding-right:.9em}
.band .row span::after{content:"✦";padding-left:.9em;font-size:.6em;vertical-align:.25em}

/* sections */
section{padding-block:72px 0}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:24px}
.head h2{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:clamp(30px,4.4vw,52px);letter-spacing:-.045em;line-height:1}
.head h2 .chev{display:inline-block;transition:transform .3s var(--ease)}
.head h2:hover .chev{transform:translateX(8px)}
.head p{margin:8px 0 0;color:var(--muted);max-width:46ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-pill);font-size:14px;transition:transform .25s var(--ease),background .25s,color .25s}
.chip:hover{transform:translateY(-2px)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip small{font-size:11px;opacity:.6;font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;background:var(--green);color:var(--on-green);font-weight:600;text-decoration:none;box-shadow:var(--sh-green);transition:background .25s,transform .35s var(--ease),box-shadow .25s}
.btn:hover{background:var(--lime)}
.btn.dark{background:var(--ink);color:#fff;box-shadow:none}
.btn.dark:hover{background:var(--ink-3)}
.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:var(--sh-pill);border:1px solid var(--line)}
.btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.go{width:48px;height:48px;flex:none;border-radius:50%;background:var(--green);color:var(--on-green);display:grid;place-items:center;box-shadow:var(--sh-green);transition:transform .35s var(--ease),background .25s}
.go:hover{transform:rotate(-45deg) scale(1.08);background:var(--lime)}
.go svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.search{display:flex;align-items:center;width:min(560px,100%);background:var(--surface);border-radius:999px;padding:5px 5px 5px 22px;box-shadow:rgba(0,0,0,.4) 0 20px 40px -12px;transition:transform .35s var(--ease),box-shadow .35s}
.search:focus-within{transform:translateY(-3px) scale(1.02);box-shadow:rgba(47,227,28,.35) 0 0 0 4px,rgba(0,0,0,.4) 0 20px 40px -12px}
.search input{flex:1;min-width:0;border:0;outline:0;font-size:16px;letter-spacing:-.03em;background:transparent;padding:10px 0}
.search input::placeholder{color:var(--muted)}

/* carte produit */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1060px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.p{position:relative;background:var(--surface);border-radius:var(--r-card);padding:8px 8px 14px;box-shadow:var(--sh-card);transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s var(--ease);will-change:transform}
.p:hover{box-shadow:var(--sh-lift)}
.p .lk{position:absolute;inset:0;z-index:1;border-radius:inherit}
.p .img{position:relative;aspect-ratio:1;border-radius:var(--r-img);overflow:hidden;display:grid;place-items:center;background:var(--bg)}
.p .img svg{width:74%;height:74%;transition:transform .7s var(--ease)}
.p:hover .img svg{transform:scale(1.1) rotate(-4deg) translateY(-4px)}
.p .img::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.55),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.p:hover .img::after{opacity:1}
.tag{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);font-size:12px;font-weight:600;z-index:2}
.tag.hot{background:var(--ink);color:var(--lime)}
.add{position:absolute;right:10px;bottom:10px;z-index:3;height:42px;min-width:42px;padding:0 13px;border-radius:999px;background:var(--ink);color:#fff;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;box-shadow:rgba(0,0,0,.25) 0 8px 20px -6px;transition:background .25s,color .25s,transform .35s var(--ease)}
.add span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .4s var(--ease)}
.p:hover .add span,.add:focus-visible span{max-width:90px}
.add:hover{background:var(--green);color:var(--on-green);transform:scale(1.05)}
.add svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.p .meta{padding:12px 6px 0;display:grid;gap:4px}
.p h3{font-size:15px;font-weight:600;letter-spacing:-.03em;line-height:1.2}
.p .spec{font-size:12px;color:var(--muted)}
.p .row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.price{font-family:var(--display);font-stretch:100%;font-weight:800;font-size:17px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sw{display:flex;gap:4px}
.sw i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12)}
.empty{grid-column:1/-1;padding:40px;text-align:center;background:var(--surface);border-radius:var(--r-card);color:var(--muted)}

/* reveal */
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.pre{opacity:0;transform:translateY(46px) scale(.97)}

/* avantages */
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:820px){.perks{grid-template-columns:minmax(0,1fr)}}
.perk{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r-card);padding:26px;box-shadow:var(--sh-card);transition:transform .5s var(--ease),background .5s,color .5s}
.perk::before{content:"";position:absolute;width:180px;height:180px;right:-60px;bottom:-60px;border-radius:50%;background:var(--green);transform:scale(.2);opacity:0;transition:transform .7s var(--ease),opacity .5s}
.perk:hover{transform:translateY(-8px);background:var(--ink);color:#fff}
.perk:hover::before{transform:scale(1.6);opacity:.25}
.perk .ico{width:52px;height:52px;border-radius:18px;background:var(--canvas);display:grid;place-items:center;margin-bottom:18px;transition:background .5s,transform .6s var(--ease)}
.perk:hover .ico{background:var(--lime);transform:rotate(-10deg)}
.perk:hover .ico svg{stroke:var(--on-green)}
.perk h3{font-size:19px;font-weight:600;letter-spacing:-.035em;position:relative}
.perk p{margin:8px 0 0;color:var(--muted);position:relative;transition:color .5s}
.perk:hover p{color:#b4bbaf}

/* accordéon */
.acc{display:grid;gap:10px}
.acc details{background:var(--surface);border-radius:22px;box-shadow:var(--sh-card);overflow:hidden;transition:background .3s}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-weight:600;font-size:17px;letter-spacing:-.03em}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{width:34px;height:34px;flex:none;border-radius:50%;background:var(--canvas);display:grid;place-items:center;transition:transform .4s var(--ease),background .3s}
.acc summary .pm::before{content:"+";font-size:20px;line-height:1}
.acc details[open] summary .pm{transform:rotate(135deg);background:var(--lime)}
.acc summary:hover .pm{background:var(--lime)}
.acc .body{padding:0 20px 20px;color:var(--muted);max-width:70ch}
.acc .body p{margin:0 0 10px}
.acc details[open] .body{animation:fadeUp .45s var(--ease)}

/* tableau */
.tbl-wrap{overflow-x:auto;border-radius:20px;background:var(--surface);box-shadow:var(--sh-card)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .2s}
tbody tr:hover{background:var(--canvas)}
td.n,th.n{text-align:right}

/* newsletter */
.news{margin-top:72px;background:var(--ink);color:#fff;border-radius:40px;padding:48px 28px;text-align:center;display:grid;justify-items:center;gap:18px;position:relative;overflow:hidden}
.news h2{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(28px,4.6vw,54px);letter-spacing:-.05em;line-height:.95;text-transform:uppercase;position:relative}
.news h2 span{background:linear-gradient(90deg,var(--green),var(--lime));-webkit-background-clip:text;background-clip:text;color:transparent}
.news p{margin:0;color:var(--muted-d);position:relative}
.news .search{position:relative}
.news .orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.35;pointer-events:none}

/* footer */
footer{margin-top:72px;background:var(--ink);color:#c9cfc4;border-radius:40px 40px 0 0;overflow:hidden;padding-bottom:env(safe-area-inset-bottom,0px)}
footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;padding-block:56px 0}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}
footer h4{margin:0 0 12px;color:#fff;font-size:13px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
footer a{text-decoration:none;background:linear-gradient(var(--lime),var(--lime)) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease),color .3s}
footer a:hover{background-size:100% 1px;color:#fff}
footer .brand img{width:180px}
footer .brand p{font-size:14px;max-width:32ch}
.giant{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(70px,19vw,250px);line-height:.8;letter-spacing:-.06em;text-align:center;color:transparent;-webkit-text-stroke:1.5px #2a3028;margin-top:40px;transform:translateY(12%);white-space:nowrap;user-select:none}
.giant span{display:inline-block;transition:color .4s,-webkit-text-stroke-color .4s,transform .5s var(--ease)}
.giant span:hover{color:var(--green);-webkit-text-stroke-color:var(--green);transform:translateY(-12%)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:12px;color:#7c8478;padding-block:18px;border-top:1px solid #222820}

/* tiroir panier */
.scrim{position:fixed;inset:0;background:rgba(10,12,10,.45);backdrop-filter:blur(4px);z-index:110;opacity:0;pointer-events:none;transition:opacity .4s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--surface);z-index:111;transform:translateX(105%);visibility:hidden;transition:transform .55s var(--ease),visibility 0s .55s;display:flex;flex-direction:column;padding:calc(20px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 20px;border-radius:32px 0 0 32px;box-shadow:rgba(0,0,0,.3) -20px 0 60px -20px}
.drawer.open{transform:none;visibility:visible;transition:transform .55s var(--ease),visibility 0s}
.drawer header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.drawer h2{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:24px;letter-spacing:-.04em;text-transform:uppercase}
.x{width:42px;height:42px;border-radius:50%;background:var(--canvas);display:grid;place-items:center;transition:transform .35s var(--ease)}
.x:hover{transform:rotate(90deg)}
.items{flex:1;overflow-y:auto;display:grid;align-content:start;gap:10px}
.it{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:20px;background:var(--canvas);animation:pop .45s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(24px) rotate(-3deg) scale(.94)}}
.it .img{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;background:var(--bg)}
.it .img svg{width:80%;height:80%}
.it b{display:block;font-size:14px;font-weight:600}
.it small{color:var(--muted);font-variant-numeric:tabular-nums}
.qty{display:inline-flex;align-items:center;gap:4px;background:var(--surface);border-radius:999px;padding:3px}
.qty button{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:16px;transition:background .2s}
.qty button:hover{background:var(--lime)}
.qty span{min-width:18px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
.drawer .total{border-top:1px solid var(--line);padding-top:14px;margin-top:10px;display:grid;gap:12px}
.drawer .total>div{display:flex;justify-content:space-between;align-items:baseline}
.ship{height:8px;border-radius:9px;background:var(--canvas);overflow:hidden}
.ship i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--lime));width:0;transition:width .6s var(--ease)}
.note{font-size:13px;color:var(--muted)}
.cart-empty{text-align:center;color:var(--muted);padding:40px 10px}

.flyer{position:fixed;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--green);box-shadow:var(--sh-green);z-index:130;pointer-events:none}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,160%);background:var(--ink);color:#fff;padding:12px 18px 12px 12px;border-radius:999px;display:flex;align-items:center;gap:10px;z-index:140;font-size:14px;transition:transform .5s cubic-bezier(.3,1.5,.5,1);box-shadow:rgba(0,0,0,.3) 0 14px 30px -10px;max-width:calc(100% - 32px)}
.toast.show{transform:translate(-50%,0)}
.toast i{width:28px;height:28px;border-radius:50%;background:var(--green);color:var(--on-green);display:grid;place-items:center;font-style:normal;flex:none}

/* champs de formulaire */
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:500}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:13px 16px;font-size:16px;outline:0;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);box-shadow:rgba(47,227,28,.3) 0 0 0 4px}
.field .err{font-size:12px;color:#c0262d;min-height:0}
.field.bad input{border-color:#c0262d}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv.pre{opacity:1;transform:none}
}