/*
 * tsp-cart.css — panier des produits digitaux : fenêtre du panier (au centre de l'écran), bouton
 * flottant, message après un ajout.
 *
 * Design de référence (The_Style.css — TT Radmin v4) : fenêtre à en-tête bleu nuit #1a2a5e, fond
 * voilé bleu nuit, bouton de fermeture rouge au survol, boutons bleus #3b5998 arrondis à 8 px,
 * champs à bordure #d0d6e8 et halo bleu au focus, polices Inter (texte) et Cairo (titres).
 * Tailles proches du design de référence : texte 13–14 px, champs de 42 px (16 px sur téléphone,
 * pour éviter le zoom automatique), bouton de paiement de 46 px.
 */
.tsp-cart {
  --tsp-navy: #1a2a5e;
  --tsp-blue: #3b5998;
  --tsp-blue2: #2d4a8a;
  --tsp-blue-soft: #eaeefc;
  --tsp-blue-line: #c8d2ee;
  --tsp-green: #2d9c4e;
  --tsp-green-bg: #e8f6ed;
  --tsp-green-bd: #a8d8b8;
  --tsp-red: #cc0000;
  --tsp-rose-bg: #fff0f0;
  --tsp-rose-bd: #f5b8b8;
  --tsp-bg: #f5f6fa;
  --tsp-surface: #ffffff;
  --tsp-border: #e4e8f0;
  --tsp-border2: #d0d6e8;
  --tsp-text: #1a2a5e;
  --tsp-muted: #6b7a9b;
  --tsp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tsp-font-head: 'Cairo', 'Inter', system-ui, sans-serif;
  font-family: var(--tsp-font); font-size: 14px; line-height: 1.45; color: var(--tsp-text);
}
.tsp-cart *, .tsp-cart *::before, .tsp-cart *::after { box-sizing: border-box; }
.tsp-cart [hidden] { display: none !important; }
html.tsp-cart-lock { overflow: hidden; }

/* ── Bouton « Ajouter au panier » des cartes [tsp_product cart="yes"] hors boutique ── */
.tsp-sc .tsp-sc-btn.tsp-cart-add { margin-top: 8px; background: #3b5998; color: #fff; border: 2px solid #3b5998; cursor: pointer; font-family: inherit; }
.tsp-sc .tsp-sc-btn.tsp-cart-add:hover { background: #2d4a8a; border-color: #2d4a8a; color: #fff; opacity: 1; }
.tsp-sc .tsp-sc-btn.tsp-cart-add.is-in-cart { background: #e8f6ed; border-color: #a8d8b8; color: #2d9c4e; }
.tsp-sc .tsp-sc-btn.tsp-cart-add.is-in-pack { background: #f5f6fa; border-color: #d0d6e8; color: #6b7a9b; cursor: default; }
.tsp-cart-sub { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--tsp-muted); }

/* ── Bouton flottant ── */
.tsp-cart-fab {
  position: fixed; right: 20px; bottom: var(--tsp-cart-fab-bottom, 20px); z-index: 99990;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  background: var(--tsp-blue); color: #fff; border: none; border-radius: 26px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; box-shadow: 0 8px 24px rgba(26, 42, 94, .28);
  transition: background-color .12s, transform .12s;
}
.tsp-cart-fab:hover { background: var(--tsp-blue2); transform: translateY(-1px); }
.tsp-cart-fab-icon { font-size: 16px; line-height: 1; }
.tsp-cart-count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: #fff; color: var(--tsp-blue);
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
/* Panier vide : pas de bouton flottant (les boutons « Mon panier » de la page restent visibles) */
.tsp-cart-fab:not(.has-items) { display: none; }
.tsp-cart-bump { animation: tspCartBump .35s ease; }
@keyframes tspCartBump { 40% { transform: scale(1.1); } }
.tsp-cart.is-open .tsp-cart-fab { visibility: hidden; }

/* ── Fenêtre du panier (au centre) ── */
.tsp-cart-overlay {
  position: fixed; inset: 0; z-index: 99991; background: rgba(26, 42, 94, .65);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.tsp-cart-panel {
  position: fixed; top: 50%; left: 50%; z-index: 99992; width: min(860px, calc(100% - 32px)); max-height: min(90vh, 900px);
  display: flex; flex-direction: column; overflow: hidden; outline: none;
  background: var(--tsp-surface); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  transform: translate(-50%, -50%) scale(.95); opacity: 0; visibility: hidden;
  transition: transform .2s ease, opacity .2s ease, visibility .2s;
}
.tsp-cart.is-open .tsp-cart-overlay { opacity: 1; visibility: visible; }
.tsp-cart.is-open .tsp-cart-panel { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
.tsp-cart-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0;
  padding: 13px 20px; background: var(--tsp-navy); color: #fff;
}
.tsp-cart-title { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--tsp-font-head); font-size: 16px; font-weight: 800; color: #fff; }
.tsp-cart-close {
  width: 32px; height: 32px; flex-shrink: 0; padding: 0 0 2px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .15); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; transition: background-color .12s;
}
.tsp-cart-close:hover { background: var(--tsp-red); }
.tsp-cart-body { flex: 1 1 auto; overflow-y: auto; padding: 20px; transition: opacity .15s; }
.tsp-cart.is-loading .tsp-cart-body { opacity: .6; }

/* Panier vide */
.tsp-cart-empty-box { padding: 28px 10px; text-align: center; }
.tsp-cart-empty { margin: 0 0 16px; font-size: 15px; color: var(--tsp-muted); }

/* Deux colonnes : livres et total à gauche, coordonnées et paiement à droite */
.tsp-cart-filled { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.tsp-cart-col-form { padding-left: 26px; border-left: 1px solid var(--tsp-border); }

/* ── Livres ── */
.tsp-cart-items { list-style: none; margin: 0; padding: 0; }
.tsp-cart-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--tsp-border); }
.tsp-cart-item:first-child { padding-top: 0; }
.tsp-cart-thumb {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 8px; object-fit: cover; background: var(--tsp-bg);
  border: 1px solid var(--tsp-border); display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.tsp-cart-info { flex: 1 1 auto; min-width: 0; }
.tsp-cart-name { font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--tsp-navy); }
.tsp-cart-price { margin-top: 2px; font-weight: 800; font-size: 14px; color: var(--tsp-blue); }
.tsp-cart-old { margin-left: 4px; font-weight: 600; font-size: 12px; color: var(--tsp-muted); }
.tsp-cart-remove {
  width: 30px; height: 30px; flex-shrink: 0; padding: 0 0 2px; border: 1px solid var(--tsp-rose-bd); border-radius: 8px;
  background: var(--tsp-rose-bg); color: var(--tsp-red); font-size: 17px; line-height: 1; cursor: pointer; transition: background-color .12s;
}
.tsp-cart-remove:hover { background: #ffd8d8; }
.tsp-cart-hint {
  margin: 14px 0 0; padding: 11px 14px; border-radius: 9px; border: 1px solid var(--tsp-blue-line);
  background: var(--tsp-blue-soft); color: var(--tsp-blue); font-size: 13px; font-weight: 600;
}

/* ── Code promo ── */
.tsp-cart-promo { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.tsp-cart-promo .tsp-cart-input { flex: 1 1 170px; text-transform: uppercase; }
.tsp-cart-promo .tsp-cart-field-msg { flex: 1 0 100%; }

/* ── Totaux ── */
.tsp-cart-totals { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--tsp-border); border-radius: 12px; background: var(--tsp-bg); }
.tsp-cart-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; }
.tsp-cart-line dt { margin: 0; font-size: 13px; color: var(--tsp-muted); }
.tsp-cart-line dd { margin: 0; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--tsp-navy); }
.tsp-cart-line-discount dt, .tsp-cart-line-discount dd { color: var(--tsp-green); font-weight: 700; }
.tsp-cart-line-total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--tsp-border2); }
.tsp-cart-line-total dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tsp-navy); }
.tsp-cart-line-total dd { font-size: 22px; font-weight: 800; color: var(--tsp-navy); }
.tsp-cart-note { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--tsp-muted); }

/* ── Formulaire ── */
.tsp-cart-subtitle { margin: 0 0 12px; font-family: var(--tsp-font-head); font-size: 15px; font-weight: 800; color: var(--tsp-navy); }
.tsp-cart-row { display: flex; gap: 12px; }
.tsp-cart-row .tsp-cart-field { flex: 1 1 0; min-width: 0; }
.tsp-cart-field { margin-bottom: 12px; }
.tsp-cart-field label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; color: var(--tsp-navy); }
.tsp-cart-input {
  width: 100%; height: 42px; padding: 0 12px; border: 1.5px solid var(--tsp-border2); border-radius: 8px;
  background: var(--tsp-surface); color: var(--tsp-text); font: inherit; font-size: 14px;
  transition: border-color .13s, box-shadow .13s;
}
.tsp-cart-input:focus { outline: none; border-color: var(--tsp-blue); box-shadow: 0 0 0 3px rgba(59, 89, 152, .12); }
.tsp-cart-input.is-invalid { border-color: var(--tsp-red); }
.tsp-cart-field-hint { margin: 4px 0 0; font-size: 11px; color: var(--tsp-muted); }
.tsp-cart-field-msg { margin: 4px 0 0; font-size: 12px; color: var(--tsp-red); }
.tsp-cart-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tsp-cart-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tsp-cart-error {
  margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--tsp-rose-bd); border-radius: 9px;
  background: var(--tsp-rose-bg); color: var(--tsp-red); font-size: 13px;
}

/* ── Boutons ── */
.tsp-cart-pay {
  width: 100%; min-height: 46px; padding: 10px 16px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--tsp-green); color: #fff; font: inherit; font-size: 15px; font-weight: 800;
  transition: background-color .12s, box-shadow .12s, transform .08s;
}
.tsp-cart-pay:hover:not(:disabled) { background: #24803e; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.tsp-cart-pay:disabled { opacity: .5; cursor: not-allowed; }
.tsp-cart-pay.is-busy { color: transparent; position: relative; }
.tsp-cart-pay.is-busy::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 3px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: tspCartSpin .7s linear infinite;
}
@keyframes tspCartSpin { to { transform: rotate(360deg); } }
.tsp-cart-btn-light {
  min-height: 42px; padding: 0 16px; border: 1.5px solid var(--tsp-border2); border-radius: 8px; background: var(--tsp-surface);
  color: var(--tsp-blue); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .12s;
}
.tsp-cart-btn-light:hover { background: var(--tsp-blue-soft); }
.tsp-cart-link { margin: 14px 0 0; padding: 6px 0; border: none; background: none; color: var(--tsp-blue); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tsp-cart-link:hover { text-decoration: underline; }
.tsp-cart-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 14px 0 0; }
.tsp-cart-actions .tsp-cart-link { margin: 0; }
.tsp-cart-clear {
  min-height: 34px; padding: 6px 12px; border: 1px solid var(--tsp-rose-bd); border-radius: 8px; background: var(--tsp-surface);
  color: var(--tsp-red); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .12s, color .12s;
}
.tsp-cart-clear:hover { background: var(--tsp-rose-bg); }
.tsp-cart-clear.is-confirm, .tsp-cart-clear.is-confirm:hover { background: var(--tsp-red); border-color: var(--tsp-red); color: #fff; }
.tsp-cart-clear:focus-visible { outline: 3px solid var(--tsp-navy); outline-offset: 2px; }
.tsp-cart-secure { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--tsp-muted); }
.tsp-cart-fab:focus-visible, .tsp-cart-close:focus-visible, .tsp-cart-remove:focus-visible, .tsp-cart-pay:focus-visible,
.tsp-cart-btn-light:focus-visible, .tsp-cart-link:focus-visible, .tsp-cart-toast-btn:focus-visible { outline: 3px solid var(--tsp-navy); outline-offset: 2px; }
.tsp-cart-close:focus-visible { outline-color: #fff; }

/* ── Panier physique : quantités, livraison, paiement ── */
.tsp-cart-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.tsp-cart-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--tsp-border2); border-radius: 8px; overflow: hidden; background: var(--tsp-surface); }
.tsp-cart-qty-btn {
  width: 34px; height: 34px; padding: 0; border: none; background: var(--tsp-bg); color: var(--tsp-navy);
  font: inherit; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color .12s;
}
.tsp-cart-qty-btn:hover:not(:disabled) { background: var(--tsp-blue-soft); color: var(--tsp-blue); }
.tsp-cart-qty-btn:disabled { color: var(--tsp-border2); cursor: not-allowed; }
.tsp-cart-qty-val { min-width: 36px; text-align: center; font-weight: 800; font-size: 14px; color: var(--tsp-navy); }
.tsp-cart-item-total { font-weight: 800; font-size: 14px; color: var(--tsp-navy); white-space: nowrap; }
.tsp-cart--physical .tsp-cart-item { align-items: flex-start; }
.tsp-cart--physical .tsp-cart-price { font-size: 13px; font-weight: 700; }
.tsp-cart-choice { margin: 4px 0 14px; padding: 0; border: 0; min-width: 0; }
.tsp-cart-choice-title { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--tsp-navy); }
.tsp-cart-options { display: grid; gap: 8px; }
.tsp-cart-options--pay { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tsp-cart-option {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 9px 12px;
  border: 1.5px solid var(--tsp-border2); border-radius: 8px; background: var(--tsp-surface); cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.tsp-cart-option:hover { border-color: var(--tsp-blue-line); background: var(--tsp-blue-soft); }
.tsp-cart-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tsp-cart-option.is-checked, .tsp-cart-option:has(input:checked) { border-color: var(--tsp-blue); background: var(--tsp-blue-soft); box-shadow: inset 0 0 0 1px var(--tsp-blue); }
.tsp-cart-option:focus-within { outline: 3px solid var(--tsp-navy); outline-offset: 2px; }
.tsp-cart-option-ico { font-size: 18px; line-height: 1; flex-shrink: 0; }
.tsp-cart-option-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.tsp-cart-option-txt strong { font-size: 13px; font-weight: 700; color: var(--tsp-navy); }
.tsp-cart-option-txt small { font-size: 11px; color: var(--tsp-muted); }
.tsp-cart-option-price { flex-shrink: 0; font-weight: 800; font-size: 13px; color: var(--tsp-blue); white-space: nowrap; }
.tsp-cart-qty-btn:focus-visible { outline: 3px solid var(--tsp-navy); outline-offset: -3px; }

/* ── Message après un ajout ── */
.tsp-cart-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 99995; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px);
  padding: 12px 14px 12px 18px; border-radius: 12px; background: var(--tsp-navy); color: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
  font-size: 14px; font-weight: 600; transform: translate(-50%, 140%); opacity: 0; transition: transform .25s ease, opacity .25s ease;
}
.tsp-cart-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.tsp-cart-toast-btn {
  flex-shrink: 0; min-height: 36px; padding: 0 12px; border: none; border-radius: 8px; background: #fff; color: var(--tsp-navy);
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.tsp-cart-toast-btn:hover { background: var(--tsp-blue-soft); }

/* ── Tablette et téléphone ── */
@media (max-width: 820px) {
  .tsp-cart-filled { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tsp-cart-col-form { padding: 22px 0 0; margin-top: 22px; border-left: 0; border-top: 1px solid var(--tsp-border); }
}
@media (max-width: 560px) {
  /* Plein écran sur téléphone */
  .tsp-cart-panel { top: 0; left: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; transform: translateY(16px); }
  .tsp-cart.is-open .tsp-cart-panel { transform: none; }
  .tsp-cart-head { padding: 14px 16px; }
  .tsp-cart-body { padding: 16px; }
  .tsp-cart-row { flex-direction: column; gap: 0; }
  .tsp-cart-input { height: 44px; font-size: 16px; }   /* 16 px sur téléphone : pas de zoom automatique à la saisie */
  .tsp-cart-qty-btn { width: 40px; height: 40px; }
  .tsp-cart-fab { right: 12px; padding: 10px 16px; }
  .tsp-cart-fab-label { display: none; }
  .tsp-cart-toast { bottom: 12px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .tsp-cart-panel, .tsp-cart-overlay, .tsp-cart-fab, .tsp-cart-toast { transition: none; }
  .tsp-cart-bump { animation: none; }
}