/* =========================================================================
   MEETennis — assets/shop.css
   S'appuie sur les variables déjà définies par app.css (--brand, --ink,
   --ink-soft, --card…). Rien n'est redéfini en dur pour que le sélecteur
   de thème existant continue de fonctionner.
   ========================================================================= */

/* ---- Barre boutique ---------------------------------------------------- */
.shop-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 14px;padding:10px 0}
.sb-back{color:var(--ink-soft);text-decoration:none;font-weight:700;font-size:13px}
.sb-right{display:flex;align-items:center;gap:8px}
.sb-lang{font:800 11px/1 Montserrat,sans-serif;letter-spacing:.5px;padding:6px 9px;border-radius:7px;
  text-decoration:none;color:var(--ink-soft);border:1.5px solid rgba(128,128,128,.25)}
.sb-lang.on{background:var(--brand);border-color:var(--brand);color:#fff}
.sb-lib,.sb-cart{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--card,#fff);border:1.5px solid rgba(128,128,128,.18);color:var(--ink);text-decoration:none}
.sb-lib svg,.sb-cart svg{width:19px;height:19px}
.sb-cart b{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;
  background:var(--brand);color:#fff;font:800 10px/18px Montserrat,sans-serif;text-align:center;padding:0 4px}

/* ---- En-tête ----------------------------------------------------------- */
.shop-hero{margin:4px 0 18px}
.shop-hero h1{font:900 26px/1.15 Montserrat,sans-serif;margin:0 0 6px;color:var(--ink)}
.shop-hero p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.55}

/* ---- Grille produits --------------------------------------------------- */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px;margin-top:16px}
.p-card{background:var(--card,#fff);border-radius:15px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 2px 14px rgba(0,0,0,.06)}
.p-thumb{position:relative;display:block;aspect-ratio:4/3;background:rgba(128,128,128,.08)}
.p-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.p-noimg{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;opacity:.35}
.p-owned{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;
  background:#16a34a;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:900}
.p-body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:6px;flex:1}
.p-cat{font:800 9px/1 Montserrat,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:var(--brand)}
.p-body h3{margin:0;font:700 13.5px/1.35 Raleway,sans-serif}
.p-body h3 a{color:var(--ink);text-decoration:none}
.p-exc{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink-soft)}
.p-foot{margin-top:auto;padding-top:9px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.p-price{font:800 12.5px/1 Montserrat,sans-serif;color:var(--ink)}
/* Même règle que .f-price.pwyw : une modalité de paiement, pas un montant. */
.p-price.pwyw{font:800 11px/1 Montserrat,sans-serif;letter-spacing:.3px;text-transform:uppercase;
  color:var(--brand);background:rgba(225,94,1,.10);padding:5px 9px;border-radius:999px}
.p-btn{background:var(--brand);color:#fff;text-decoration:none;font:800 11px/1 Montserrat,sans-serif;
  padding:8px 11px;border-radius:8px;white-space:nowrap}
.p-btn.ghost{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand)}

/* ---- Fiche produit ----------------------------------------------------- */
.pd{background:var(--card,#fff);border-radius:17px;padding:18px;box-shadow:0 2px 14px rgba(0,0,0,.06)}
.pd-cover{border-radius:12px;overflow:hidden;margin:-4px -4px 16px}
.pd-cover img{width:100%;display:block}
.pd-title{font:900 22px/1.2 Montserrat,sans-serif;margin:8px 0 10px;color:var(--ink)}
.pd-exc{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0 0 12px}
.pd-desc{font-size:14px;line-height:1.7;color:var(--ink)}
.pd-desc p{margin:0 0 12px}
.pd-files{list-style:none;padding:12px 14px;margin:16px 0;background:rgba(128,128,128,.07);border-radius:11px;
  font-size:13px;line-height:2;color:var(--ink)}
.pd-files small{color:var(--ink-soft);font-size:11px}
.pd-buy{margin-top:20px;padding-top:18px;border-top:1px solid rgba(128,128,128,.16)}
.pd-price{font:900 26px/1 Montserrat,sans-serif;color:var(--brand);margin-bottom:14px}
.pd-owned{background:rgba(22,163,74,.12);color:#16a34a;font-weight:800;font-size:13px;
  padding:11px 14px;border-radius:10px;margin-bottom:12px}

/* ---- Prix libre -------------------------------------------------------- */
.pwyw{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 6px}
.pwyw-chip{background:transparent;border:1.5px solid rgba(128,128,128,.3);color:var(--ink);
  font:700 12px/1 Raleway,sans-serif;padding:9px 13px;border-radius:9px;cursor:pointer}
.pwyw-chip.on{border-color:var(--brand);background:var(--brand);color:#fff}
.pwyw-in{display:flex;align-items:center;gap:6px}
.pwyw-in input{width:100px;margin:0}
.pwyw-in.small input{width:78px;padding:7px 9px;font-size:13px}
.pwyw-in span{font-weight:800;color:var(--ink-soft)}

/* ---- Panier ------------------------------------------------------------ */
.cart-line{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(128,128,128,.14)}
.cart-line img{width:52px;height:52px;object-fit:cover;border-radius:9px;flex:none}
.cl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cl-main strong{font-size:13.5px;line-height:1.35;color:var(--ink)}
.cl-price{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.cl-price b{font:800 14px/1 Montserrat,sans-serif;color:var(--ink)}
.cl-rm{background:none;border:0;color:var(--ink-soft);font-size:11px;cursor:pointer;text-decoration:underline;padding:0}
.cart-total{display:flex;justify-content:space-between;align-items:center;padding-top:16px;margin-top:4px;
  font:800 17px/1 Montserrat,sans-serif;color:var(--ink)}
.cart-total b{color:var(--brand);font-size:21px}

/* ---- Bibliothèque ------------------------------------------------------ */
.lib-list{display:flex;flex-direction:column;gap:11px}
.lib-item{display:flex;gap:12px;align-items:center;background:var(--card,#fff);border-radius:14px;padding:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.05);flex-wrap:wrap}
.lib-item.flash{box-shadow:0 0 0 2px var(--brand),0 2px 12px rgba(0,0,0,.05)}
.li-cov{width:54px;height:54px;object-fit:cover;border-radius:10px;flex:none}
.li-main{flex:1;min-width:130px;display:flex;flex-direction:column;gap:3px}
.li-main strong{font-size:13.5px;line-height:1.35;color:var(--ink)}
.li-main small{font-size:11px;color:var(--ink-soft)}
.li-files{display:flex;flex-wrap:wrap;gap:7px}
.li-dl{background:var(--brand);color:#fff;text-decoration:none;font:800 11px/1 Montserrat,sans-serif;
  padding:9px 12px;border-radius:9px;white-space:nowrap}

/* ---- Confirmation ------------------------------------------------------ */
.thanks{text-align:center;padding:34px 22px}
.thanks-ico{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;background:#16a34a;color:#fff;
  display:grid;place-items:center;font-size:31px;font-weight:900}
.thanks-ico.wait{background:#d97706;font-size:26px}

@media (min-width:620px){
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:18px}
  .pd{padding:26px}
  .pd-title{font-size:27px}
}

/* ---- Code promo -------------------------------------------------------- */
.cart-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;font-size:14px;color:var(--ink-soft)}
.cart-sub b{font:800 14px/1 Montserrat,sans-serif;color:var(--ink)}
.cart-sub.promo,.cart-sub.promo b{color:var(--brand)}

.promo-box{margin-top:16px}
.promo-l{display:block;font:700 14px/1.3 Raleway,sans-serif;color:var(--ink);margin-bottom:9px}
.promo-row{display:flex;gap:8px;align-items:center}
/* Le champ prend la place restante : un code se tape en entier, le voir
   tronqué à six caractères donne l'impression qu'il n'est pas passé. */
.promo-row .input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.5px;
  font:700 15px/1 Montserrat,sans-serif}
.promo-row .btn{flex-shrink:0}
.promo-err{margin:10px 0 0;font-size:13px;color:#c62828;font-weight:600}

.promo-on{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.promo-ok{display:flex;flex-direction:column;gap:3px;min-width:0}
.promo-ok b{font:800 15px/1 Montserrat,sans-serif;color:var(--brand);letter-spacing:.5px}
.promo-ok span{font-size:13px;color:var(--ink-soft)}
.promo-rm{background:none;border:0;cursor:pointer;color:var(--ink-soft);
  font:600 13px/1 Raleway,sans-serif;text-decoration:underline;padding:6px}