/* ==========================================================
TwelveProd · panier boutique + ajustements téléphone
========================================================== */

/* ---------- Bouton panier (en-tête) ---------- */
.hd-cart{display:none;position:relative;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;align-items:center;justify-content:center;flex:none;transition:background-color .2s ease}
.hd-cart:hover{background:rgba(255,255,255,.2)}
.hd-cart svg{width:20px;height:20px}
.cart-on .hd-cart{display:inline-flex}
.hd-cart-n{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--accent);color:#111;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.hd-cart-n[hidden]{display:none}
.hd-bar{gap:14px}
.hd-bar .hd-nav{margin:0 16px}

/* ---------- Tiroir ---------- */
.ct,.op{position:fixed;inset:0;z-index:300;visibility:hidden;pointer-events:none}
.ct.on,.op.on{visibility:visible;pointer-events:auto}
.ct-bg,.op-bg{position:absolute;inset:0;background:rgba(10,10,10,.42);opacity:0;transition:opacity .3s ease}
.ct.on .ct-bg,.op.on .op-bg{opacity:1}
.ct-pn{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .45s var(--ease);box-shadow:-20px 0 60px rgba(0,0,0,.12)}
.ct.on .ct-pn{transform:none}
.ct-open,.op-open{overflow:hidden}
.ct-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px 24px;border-bottom:1px solid var(--line)}
.ct-hd h2{font-size:22px;letter-spacing:-.03em}
.ct-c{color:var(--mut);font-weight:500}
.ct-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.ct-x svg{width:18px;height:18px}
.ct-x:hover{border-color:#111}
.ct-x:focus:not(:focus-visible),.sz button:focus:not(:focus-visible){outline:none}
.ct-pre{display:flex;gap:12px;align-items:flex-start;margin:14px 20px 0 24px;padding:12px 14px;border-radius:16px;background:var(--card);font-size:13.5px;line-height:1.5;color:var(--mut)}
.ct-pre b{color:var(--ink)}
.ct-badge{display:inline-block;flex:none;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:#fff;background:#111;border-radius:99px;padding:4px 10px;line-height:1.3}
.ct-bd{flex:1;overflow-y:auto;padding:4px 20px 8px 24px;overscroll-behavior:contain}
.ct-ls{list-style:none;margin:0;padding:0}
.ct-li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.ct-im{position:relative;flex:none;width:72px;height:90px;border-radius:14px;overflow:hidden;background:var(--card)}
.ct-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ct-im.two img:first-child{clip-path:inset(0 50% 0 0)}
.ct-im.two img:last-child{clip-path:inset(0 0 0 50%)}
.ct-im.two:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff}
.ct-in{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.ct-nm{display:grid;gap:2px}
.ct-nm strong{font-size:15.5px;letter-spacing:-.01em}
.ct-nm span{font-size:13.5px;color:var(--mut)}
.ct-nm em{font-style:normal;font-size:11.5px;font-weight:600;justify-self:start;border:1px solid #111;border-radius:99px;padding:1px 8px;margin-top:4px}
.ct-rw{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ct-rw b{font-size:15px;white-space:nowrap}
.ct-q{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:99px;height:38px}
.ct-q button{width:38px;height:36px;border:0;background:none;font-size:18px;cursor:pointer;border-radius:99px;line-height:1}
.ct-q button:disabled{opacity:.3;cursor:default}
.ct-q span{min-width:22px;text-align:center;font-size:14.5px;font-weight:600}
.ct-rm{align-self:flex-start;border:0;background:none;padding:2px 0;font-size:13px;color:var(--mut);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ct-rm:hover{color:var(--ink)}
.ct-em{display:none;text-align:center;padding:48px 0;color:var(--mut)}
.ct-em p{margin-bottom:16px}
.ct.empty .ct-em{display:block}
.ct.empty .ct-ft,.ct.empty .ct-pre{display:none}
.ct-ft{border-top:1px solid var(--line);padding:14px 20px calc(16px + env(safe-area-inset-bottom)) 24px;background:#fff}
.ct-tt{margin:0 0 10px}
.ct-tt div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:14.5px}
.ct-tt dt{color:var(--mut)}
.ct-tt dd{margin:0;font-weight:500}
.ct-tt .ct-tot{padding-top:8px;margin-top:6px;border-top:1px solid var(--line);font-size:17px}
.ct-tt .ct-tot dt{color:var(--ink);font-weight:600}
.ct-tt .ct-tot dd{font-weight:700}
.ct-code{font-size:12.5px;color:var(--mut);margin:0 0 12px;border:1px dashed var(--line);border-radius:12px;padding:7px 12px}
.ct-code b{color:var(--ink);letter-spacing:.04em}
.ct-ok{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--mut);margin:0 0 12px;cursor:pointer}
.ct-ok input{margin:2px 0 0;width:18px;height:18px;flex:none;accent-color:#111}
.ct-ok a{color:var(--ink);text-underline-offset:3px}
.ct-go{width:100%;justify-content:space-between;height:52px;font-size:15.5px}
.ct-go:disabled{opacity:.4;cursor:not-allowed}
.ct-go.load{opacity:.7;cursor:progress}
.ct-go.load .arw{animation:ctspin 1s linear infinite}
@keyframes ctspin{to{transform:rotate(360deg)}}
.ct-err{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#fff4f2;color:#b42318;border:1px solid #fecdca;font-size:13px;line-height:1.5}
.ct-err[hidden]{display:none}
.ct-pay{text-align:center;font-size:12px;color:var(--mut);margin:10px 0 0}

/* ---------- Fenêtre d'options (packs) ---------- */
.op-pn{position:absolute;left:50%;top:50%;width:min(480px,calc(100% - 32px));max-height:calc(100% - 40px);overflow-y:auto;background:#fff;border-radius:26px;padding:24px;transform:translate(-50%,-46%);opacity:0;transition:transform .4s var(--ease),opacity .25s ease}
.op.on .op-pn{transform:translate(-50%,-50%);opacity:1}
.op-x{position:absolute;top:14px;right:14px}
.op-hd{display:flex;gap:16px;align-items:center;margin:0 50px 18px 0}
.op-hd .ct-im{width:84px;height:104px}
.op-hd h2{font-size:21px;letter-spacing:-.03em;margin:8px 0 2px}
.op-pr{display:flex;gap:8px;align-items:baseline}
.op-pr b{font-size:18px}
.op-pr s{color:var(--mut);font-size:14px}
.op-f{border:0;margin:0 0 16px;padding:0;min-width:0}
.op-f legend{font-size:14px;font-weight:600;margin-bottom:8px;padding:0}
.op-f.need legend{color:#b42318}
.sz{display:flex;flex-wrap:wrap;gap:8px}
.sz button,.pp-sz button{min-width:52px;height:44px;padding:0 14px;border-radius:99px;border:1px solid var(--line);background:#fff;font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.sz button:hover,.pp-sz button:hover{border-color:#111}
.sz button[aria-pressed=true],.pp-sz button[aria-checked=true]{background:#111;color:#fff;border-color:#111}
.op-f.need .sz button,.pp-sz.need button{border-color:#f0a59b}
.op-msg,.pp-szm{color:#b42318;font-size:13.5px;margin:0 0 12px}
.op-msg[hidden],.pp-szm[hidden]{display:none}
.pp-szm{margin:10px 0 0}
.op-add{width:100%;justify-content:space-between;height:52px}
.op-nt{font-size:12.5px;color:var(--mut);margin:12px 0 0;text-align:center}

/* ---------- Fiche produit ---------- */
.pp-sz{gap:8px}
.pp-buy button.btn{width:100%;justify-content:center;padding-top:16px;padding-bottom:16px}
button.btn{font-family:inherit}

/* ---------- Téléphone ---------- */
@media (max-width:900px){
  .hd-bar{gap:8px}
  .hd-logo{margin-right:auto}
  .hd-cart{width:44px;height:44px}

  /* tiroir plein écran, fenêtre d'options en bas */
  .ct-pn{width:100%}
  .ct-hd{padding:14px 14px 12px 18px}
  .ct-pre{margin:12px 14px 0 18px}
  .ct-bd{padding:2px 14px 8px 18px}
  .ct-ft{padding:12px 16px calc(14px + env(safe-area-inset-bottom)) 18px}
  .op-pn{left:0;right:0;top:auto;bottom:0;width:100%;max-height:92%;border-radius:24px 24px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);opacity:1}
  .op.on .op-pn{transform:none}
  .sz button{flex:1 0 calc(33.333% - 8px)}

  /* champs : 16 px pour éviter le zoom automatique sur iPhone */
  .in,select.in,textarea.in{font-size:16px}

  /* zones tactiles */
  .ft-cols ul a{display:inline-block;padding:6px 0}
  .crumb{flex-wrap:wrap;row-gap:4px}
  .crumb a{padding:6px 0}
  .bq-lk{display:inline-block;padding:8px 0}

  /* pied de page : 2 colonnes au lieu d'une longue liste */
  .ft-cols{grid-template-columns:1fr 1fr;gap:30px 16px}
  .ft-cols>div:first-child{grid-column:1/-1}
  .ft-cols ul{gap:2px}

  /* liste des points forts (accueil) : pastilles centrées */
  .pl{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
  .pl span{border:1px solid var(--line);border-radius:99px;padding:7px 12px;font-size:13.5px}

  /* packs sur la fiche produit */
  .pp-pkr{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}
  .pp-pkr .pk-ts{grid-row:span 2}
  .pp-pkn{font-size:14.5px}
  .pp-pkp{justify-self:start;flex-wrap:wrap}

  /* barre d'achat collée en bas */
  .pp-bar{gap:10px}
  .pp-bar>div{min-width:0}
  .pp-bar .btn{flex:none}
  .pp-sz{justify-content:center}
  .pp-sz button{min-width:48px}

  /* boutique */
  .bq-pack .btn{width:100%;justify-content:center;grid-column:1/-1}
  .bq-cta-b{flex-direction:column;align-items:stretch;width:100%}
  .bq-cta-b .btn{justify-content:space-between}
}
@media (max-width:380px){
  .hd-bar{padding-left:14px}
  .hd-logo img{height:19px}
  .bq-grid{gap:22px 10px}
  .bq-n strong{font-size:15px}
  .bq-go{font-size:13px;padding:7px 7px 7px 12px}
}
@media (prefers-reduced-motion:reduce){.ct-pn,.op-pn,.ct-bg,.op-bg{transition:none}}