/* Boutique (30/09/2026) : panier, tiroir, achat en fiche, tunnel de commande. Aucun paiement réel. */
:root{--err:#b3261e;--ok:#1f6f43;--field:#fff}
[hidden]{display:none!important}

/* bouton panier du header */
.cartbtn{position:relative;width:34px;height:34px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink);margin-left:-14px;transition:background .3s}
.cartbtn:hover{background:rgba(13,13,13,.06)}
.cartbtn svg{width:19px;height:19px}
.cartbtn .cnt{position:absolute;top:0;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--ink);color:var(--bg);font-size:9.5px;font-weight:600;line-height:16px;text-align:center;transform:scale(0);transition:transform .45s var(--ease)}
.cartbtn.has .cnt{transform:scale(1)}
.cartbtn.bump{animation:bump .65s var(--ease)}
@keyframes bump{30%{transform:scale(1.25)}60%{transform:scale(.92)}100%{transform:scale(1)}}

/* tiroir panier */
.drw{position:fixed;inset:0;z-index:80;pointer-events:none}
.drw .ov{position:absolute;inset:0;background:rgba(13,13,13,.3);opacity:0;transition:opacity .5s var(--ease)}
.drw .pn{position:absolute;top:10px;right:10px;bottom:10px;width:min(440px,calc(100% - 20px));background:var(--bg);border-radius:22px;display:flex;flex-direction:column;transform:translateX(calc(100% + 24px));transition:transform .75s var(--ease);box-shadow:0 24px 70px rgba(13,13,13,.2);overflow:hidden}
.drw.open{pointer-events:auto}.drw.open .ov{opacity:1}.drw.open .pn{transform:none}
.drw .hd{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 18px 24px;border-bottom:1px solid var(--line)}
.drw .hd h3{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:0;text-transform:uppercase}
.drw .hd h3 span{color:var(--mute);font-weight:300}
.x{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:transform .5s var(--ease),background .3s}.x:hover{transform:rotate(90deg);background:var(--alt)}
.drw .ship{margin:16px 24px 4px;padding:12px 14px;border-radius:12px;background:var(--alt);font-size:12.5px;color:var(--ink2);display:flex;gap:10px;align-items:center}
.drw .ls{flex:1;overflow:auto;padding:4px 24px 8px;overscroll-behavior:contain}
.li{display:grid;grid-template-columns:78px 1fr auto;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li .th{display:block;border-radius:12px;background:var(--card);overflow:hidden;aspect-ratio:4/5}.li .th img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.li .n{display:block;font-size:14px;font-weight:500}.li .v{font-size:12px;color:var(--mute);margin-top:2px}
.li .p{font-size:14px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.li .rm{display:block;margin:10px 0 0 auto;font:inherit;font-size:11.5px;color:var(--mute);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.li .rm:hover{color:var(--ink)}
.drw.anim .li{animation:liin .7s var(--ease) both;animation-delay:calc(var(--d) + .25s)}
@keyframes liin{from{opacity:0;transform:translateX(26px)}}
.li.out{animation:liout .4s var(--ease) forwards}
@keyframes liout{to{opacity:0;transform:translateX(40px)}}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:99px;height:34px;margin-top:12px;background:var(--field)}
.qty button{width:32px;height:32px;border:0;background:transparent;cursor:pointer;font-size:15px;color:var(--ink2);border-radius:50%;transition:background .25s}.qty button:hover{background:var(--alt)}
.qty span{min-width:20px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.drw .ft{padding:18px 24px 22px;border-top:1px solid var(--line);background:var(--bg)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px}.row+.row{margin-top:8px}
.row.tot{font-size:16px;font-weight:600}
.drw .ft small{display:block;font-size:12px;color:var(--mute);margin:4px 0 16px}
.btn.full{width:100%;justify-content:center;height:54px;font-size:14px}
.drw .ct{display:block;width:100%;margin-top:12px;background:none;border:0;font:inherit;font-size:13px;color:var(--ink2);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.drw .empty{padding:70px 10px;text-align:center;color:var(--ink2)}.drw .empty p{margin-bottom:22px}
.pays{display:flex;gap:6px;justify-content:center;margin-top:16px}.pb{display:block;height:22px;width:auto}
.drw-on body{overflow:hidden}

/* fiche produit : achat */
.lbl b{font-weight:500}
.sw li{cursor:pointer;user-select:none;transition:border-color .3s,color .3s,transform .3s var(--ease)}
.sw li:hover{border-color:var(--ink2)}.sw li:active{transform:scale(.96)}
.sw li:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.buy{display:flex;gap:10px;margin-top:30px}
.buy .qty{margin:0;height:54px;padding:0 4px}.buy .qty button{width:38px;height:44px}
.buy .add{flex:1;height:54px;justify-content:space-between;padding:0 26px;font-size:14px;position:relative;overflow:hidden}
.buy .add .pr{opacity:.7;font-variant-numeric:tabular-nums}
.add .t,.add .pr{transition:opacity .3s,transform .4s var(--ease)}
.add.load .t,.add.load .pr{opacity:0;transform:translateY(-8px)}
.add .sp,.add .okk{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:all .35s var(--ease);display:flex;align-items:center;gap:8px;white-space:nowrap}
.add.load .sp{opacity:1;transform:translate(-50%,-50%)}
.add.done{background:var(--ok)}.add.done .t,.add.done .pr{opacity:0}.add.done .okk{opacity:1;transform:translate(-50%,-50%)}
.stock{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2);margin-top:14px}
.stock i{width:8px;height:8px;border-radius:50%;background:#2f9e5b;position:relative}
.stock i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2f9e5b;animation:ping 2s ease-out infinite}
@keyframes ping{to{transform:scale(2.6);opacity:0}}
.spin{width:16px;height:16px;border:2px solid rgba(250,250,245,.3);border-top-color:var(--bg);border-radius:50%;animation:spin .75s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.fly{position:fixed;z-index:90;border-radius:14px;overflow:hidden;pointer-events:none;background:var(--card);box-shadow:0 18px 40px rgba(13,13,13,.18)}
.fly img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}

/* ---------- tunnel de commande ---------- */
.co-page{background:var(--bg)}
.coh{border-bottom:1px solid var(--line);background:var(--bg)}
.coh-in{max-width:1280px;margin:0 auto;padding:18px 32px;display:flex;justify-content:space-between;align-items:center}
.coh .brand .lg-sym{height:30px}.coh .brand .lg-nom{height:15px}
.secu{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2);letter-spacing:.04em}
.cog{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:calc(100vh - 71px)}
.co-l{padding:34px 64px 90px;display:flex;justify-content:flex-end}
.co-lin{width:100%;max-width:590px}
.steps{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--mute);flex-wrap:wrap;margin-bottom:6px}
.steps a,.steps button{background:none;border:0;font:inherit;color:inherit;padding:0;cursor:default;transition:color .3s}
.steps a{cursor:pointer;color:var(--ink2)}.steps a:hover{color:var(--ink)}
.steps .on{color:var(--ink);font-weight:500}.steps .ok{color:var(--ink2);cursor:pointer}.steps .ok:hover{color:var(--ink)}
.steps i{font-style:normal;opacity:.6}
.st{border-bottom:1px solid var(--line);padding:26px 0}
.st-h{display:flex;align-items:center;gap:14px}
.st-h h2{flex:1;font-family:var(--serif);font-weight:400;font-size:25px;letter-spacing:0;text-transform:uppercase;transition:opacity .4s}
.num{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:600;position:relative;flex:none;transition:background .45s var(--ease),border-color .45s,color .45s}
.num b,.num svg{grid-area:1/1;transition:opacity .35s,transform .5s var(--ease)}
.num svg{opacity:0;transform:scale(.3) rotate(-40deg)}
.st.open .num{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.st.done .num{background:var(--ok);border-color:var(--ok);color:#fff}
.st.done .num b{opacity:0;transform:scale(.3)}.st.done .num svg{opacity:1;transform:none}
.st.todo .st-h h2,.st.todo .num{opacity:.4}
.edit{background:none;border:0;font:inherit;font-size:13px;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .35s}
.st.done .edit{opacity:1;pointer-events:auto}.edit:hover{color:var(--ink)}
.st-b,.st-sum,.rev{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.st.open>.st-b,.st.done>.st-sum,.rev.on{grid-template-rows:1fr}
.st-in,.st-sin,.rev-in{min-height:0;overflow:hidden;padding:0 4px;margin:0 -4px}
.st-in{opacity:0;transition:opacity .35s}.st.open .st-in{opacity:1;transition:opacity .5s .2s}
.st-in.vis,.rev-in.vis{overflow:visible}
.st-in>:first-child{margin-top:22px}.st-in>:last-child{margin-bottom:4px}
.st-sin p{padding:14px 0 0 44px;font-size:13.5px;color:var(--ink2);line-height:1.6}
.sub{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:30px 0 14px}
.st-in>.sub:first-child{margin-top:22px}
.fs{display:grid;gap:12px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fl{position:relative;display:block}
.fl input,.fl select{width:100%;height:54px;border:1px solid var(--line);border-radius:12px;background:var(--field);padding:21px 14px 6px;font:inherit;font-size:14.5px;color:var(--ink);outline:0;appearance:none;-webkit-appearance:none;transition:border-color .25s,box-shadow .25s}
.fl select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a877f' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.fl .lb{position:absolute;left:15px;top:17px;font-size:14.5px;color:var(--mute);pointer-events:none;transition:top .25s var(--ease),font-size .25s var(--ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 30px)}
.fl input:focus~.lb,.fl input:not(:placeholder-shown)~.lb,.fl select~.lb{top:8px;font-size:11px}
.fl input:hover,.fl select:hover{border-color:#cfcabd}
.fl input:focus,.fl select:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(13,13,13,.07)}
.fl em{display:block;font-style:normal;font-size:12px;color:var(--err);max-height:0;opacity:0;transition:max-height .35s var(--ease),opacity .3s,margin .35s}
.fl.err input{border-color:var(--err);box-shadow:0 0 0 3px rgba(179,38,30,.08)}
.fl.err em{max-height:40px;opacity:1;margin-top:6px}
.fl.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.fl.ico input{padding-right:120px}
.brands{position:absolute;right:12px;top:15px;display:flex;gap:5px;pointer-events:none}
.brands .pb{height:24px;transition:opacity .3s,transform .35s var(--ease)}
.brands.det .pb{opacity:.18;transform:scale(.9)}.brands.det .pb.on{opacity:1;transform:scale(1.06)}
.tip{position:absolute;right:14px;top:16px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);font-size:11px;display:grid;place-items:center;color:var(--mute);cursor:help;background:var(--field)}
.tip::after{content:attr(data-t);position:absolute;bottom:calc(100% + 8px);right:-8px;width:190px;padding:9px 11px;border-radius:10px;background:var(--ink);color:var(--bg);font-size:11.5px;line-height:1.4;opacity:0;transform:translateY(4px);pointer-events:none;transition:all .25s}
.tip:hover::after,.tip:focus::after{opacity:1;transform:none}
.fl-ac{position:relative}
.ac{position:absolute;left:0;right:0;top:58px;background:var(--field);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(13,13,13,.12);z-index:6;overflow:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s,transform .3s var(--ease)}
.ac.on{opacity:1;transform:none;pointer-events:auto}
.ac button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:11px 14px;border:0;background:none;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
.ac button+button{border-top:1px solid var(--line)}
.ac button:hover,.ac button.hl{background:var(--alt)}
.ac small{color:var(--mute)}
.ac svg{flex:none;color:var(--mute)}
.ck{display:flex;gap:11px;align-items:center;font-size:14px;cursor:pointer;color:var(--ink2);user-select:none}
.ck input{appearance:none;-webkit-appearance:none;width:19px;height:19px;border:1.5px solid #cfcabd;border-radius:6px;display:grid;place-items:center;flex:none;background:var(--field);cursor:pointer;transition:background .25s,border-color .25s}
.ck input:checked{background:var(--ink);border-color:var(--ink)}
.ck input::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .3s var(--ease)}
.ck input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.opts{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--field)}
.opt,.pm{display:flex;align-items:center;gap:14px;padding:17px 16px;cursor:pointer;transition:background .3s;position:relative}
.opt+.opt,.pay>.pm:not(:first-child){border-top:1px solid var(--line)}
.opt input,.pm input{position:absolute;opacity:0;pointer-events:none}
.rd{width:19px;height:19px;border-radius:50%;border:1.5px solid #cfcabd;position:relative;flex:none;transition:border-color .3s}
.rd::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .4s var(--ease)}
.opt input:checked~.rd,.pm input:checked~.rd{border-color:var(--ink)}
.opt input:checked~.rd::after,.pm input:checked~.rd::after{transform:scale(1)}
.opt:has(input:checked),.pm:has(input:checked){background:var(--alt)}
.opt input:focus-visible~.rd,.pm input:focus-visible~.rd{outline:2px solid var(--ink);outline-offset:3px}
.ot{flex:1;display:grid;gap:1px}.ot b{font-size:14px;font-weight:500}.ot small{font-size:12.5px;color:var(--mute)}
.op{font-size:13.5px;font-weight:500;color:var(--ok)}
.pay{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--field);margin-top:14px}
.pm b{flex:1;font-size:14px;font-weight:500}
.logos{display:flex;gap:5px}
.pay .rev{background:var(--alt);border-top:1px solid transparent;transition:grid-template-rows .7s var(--ease),border-color .4s}
.pay .rev.on{border-top-color:var(--line)}
.pay .rev-in>div,.pay .rev-in>p{padding:16px}
.pmx{display:flex;gap:14px;align-items:center;font-size:13.5px;color:var(--ink2)}
.pmx svg{flex:none;color:var(--mute)}
.note{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--mute)}
.nx{margin-top:26px;height:56px;padding:0 30px;font-size:14px;border:0;cursor:pointer;font-family:inherit}
.nx:disabled{cursor:progress}
.pay-b{width:100%;justify-content:center;position:relative}
.pay-b .spin{display:none}.pay-b.load .spin{display:block}
.pay-b.load{background:#2b2b2b}
.alert{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border-radius:12px;background:#fbeeed;border:1px solid #efc9c5;color:#6f1a14;font-size:13.5px;line-height:1.5;margin-top:18px}
.alert svg{flex:none;margin-top:1px}
.alert b{display:block;font-weight:600;margin-bottom:2px}
.alert.in{animation:alin .6s var(--ease)}
@keyframes alin{0%{opacity:0;transform:translateY(-8px)}40%{opacity:1}55%{transform:translateX(-5px)}70%{transform:translateX(4px)}85%{transform:translateX(-2px)}100%{transform:none}}
.cgv{font-size:12px;color:var(--mute);margin-top:14px;text-align:center}
.co-foot{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:34px;font-size:12px;color:var(--mute)}
.co-foot .pays{margin:0}

/* récapitulatif */
.sum{background:var(--alt);border-left:1px solid var(--line)}
.sum-in{position:sticky;top:0;max-width:480px;padding:40px 48px 48px}
.sumtg{display:none}
.sl{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:10px 0}
.sl .th{position:relative;border-radius:12px;background:var(--card);aspect-ratio:4/5;box-shadow:inset 0 0 0 1px rgba(13,13,13,.06)}
.sl .th img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;border-radius:12px}
.sl .th b{position:absolute;top:-8px;right:-8px;min-width:21px;height:21px;padding:0 6px;border-radius:99px;background:var(--ink2);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}
.sl .n{font-size:14px;font-weight:500}.sl .v{font-size:12px;color:var(--mute)}
.sl .p{font-size:14px;font-variant-numeric:tabular-nums}
.promo{display:flex;gap:10px;margin:22px 0 4px;align-items:flex-start}.promo .fl{flex:1}
.promo .btn{height:54px;border-radius:12px;padding:0 20px;cursor:pointer;font-family:inherit;flex:none;background:var(--field);border:1px solid var(--line);color:var(--ink)}
.promo .btn.load{color:transparent;position:relative}.promo .btn.load::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(13,13,13,.2);border-top-color:var(--ink);border-radius:50%;animation:spin .75s linear infinite}
.tots{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}
.tots .row{color:var(--ink2)}.tots .row .fr{color:var(--ok);font-weight:500}
.tots .row.tot{color:var(--ink);margin-top:16px;align-items:center}
.tots .row.tot small{font-size:11px;color:var(--mute);font-weight:400;margin-right:6px}
.tots .row.tot b{font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:0}
.tva{font-size:12px;color:var(--mute);margin-top:2px}
.co-empty{max-width:520px;margin:0 auto;padding:130px 24px;text-align:center}
.co-empty .h2{margin-bottom:18px}.co-empty p{color:var(--ink2);margin-bottom:30px}

@media (max-width:760px){
  .hdr{gap:2px}
  .cartbtn{margin-left:auto}
  .buy .add{padding:0 20px}
  .coh-in{padding:14px 18px}
  .coh .brand .lg-sym{height:24px}.coh .brand .lg-nom{height:12px}
  .secu span{display:none}
  .cog{display:flex;flex-direction:column;min-height:0}
  .sum{order:-1;border-left:0;border-bottom:1px solid var(--line)}
  .sumtg{display:flex;width:100%;justify-content:space-between;align-items:center;padding:16px 18px;background:none;border:0;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
  .sumtg>span{display:flex;align-items:center;gap:8px}
  .sumtg .chev{transition:transform .5s var(--ease)}
  .sumtg[aria-expanded=true] .chev{transform:rotate(180deg)}
  .sumtg b{font-size:16px;font-weight:600}
  .sum-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
  .sum-b.on{grid-template-rows:1fr}
  .sum-b>.sum-in{min-height:0;overflow:hidden;position:static;padding:0 18px;max-width:none}
  .sum-b.on>.sum-in{padding-bottom:22px}
  .co-l{padding:22px 18px 70px}
  .g2{grid-template-columns:1fr}
  .g2.keep{grid-template-columns:1fr 1fr}
  .st-sin p{padding-left:0}
  .st-h h2{font-size:22px}
  .fl.ico input{padding-right:96px}
  .brands{top:17px;gap:4px}.brands .pb{height:19px}
}
.fl.tipf input{padding-right:46px}