/*
 * tsp-landing.css — The Sales Program · pages publiques (TN / EU / WW / Digital)
 * Feuille unique des templates landing.php, landing-intl.php et landing-digital.php.
 *
 * Chargée par tsp_landing_head_assets() (polices Google en <link> + cette feuille).
 *
 * Variantes : <body class="tsp-zone-eu">, "tsp-zone-ww", "tsp-zone-digital"
 */

/* ── Reset & Base ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --c-primary:#1a56db;
  --c-primary-dark:#1e429f;
  --c-accent:#f05252;
  --c-green:#057a55;
  --c-green-light:#def7ec;
  --c-bg:#f9fafb;
  --c-card:#ffffff;
  --c-border:#e5e7eb;
  --c-text:#111827;
  --c-muted:#6b7280;
  --c-cod:#f59e0b;
  --c-cod-dark:#b45309;
  --radius:12px;
  --shadow:0 4px 24px rgba(0,0,0,.08);
  --font-ar:'Noto Sans Arabic',Tahoma,Arial,sans-serif;
  --font-fr:'Inter',system-ui,sans-serif;
}
html{font-family:var(--font-fr);font-size:16px;background:var(--c-bg);color:var(--c-text)}
html.ar{font-family:var(--font-ar);direction:rtl}
body{min-height:100vh;padding-bottom:40px}
a{color:var(--c-primary);text-decoration:none}

/* ── Header ───────────────────────────────────────── */
.tsp-topbar{
  background:var(--c-primary);
  color:#fff;
  padding:12px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.tsp-topbar .brand{font-weight:700;font-size:1.1rem;letter-spacing:.5px}
.tsp-lang-toggle{
  display:flex;gap:6px
}
.tsp-lang-toggle button{
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
  padding:4px 12px;
  border-radius:20px;
  cursor:pointer;
  font-size:.8rem;
  transition:background .2s;
}
.tsp-lang-toggle button.active,
.tsp-lang-toggle button:hover{background:rgba(255,255,255,.4)}

/* ── Layout ───────────────────────────────────────── */
.tsp-wrap{max-width:960px;margin:0 auto;padding:24px 16px;display:grid;gap:24px}
@media(min-width:768px){.tsp-wrap{grid-template-columns:1fr 1fr;align-items:start}}

/* ── Product Card ─────────────────────────────────── */
.tsp-product-card{
  background:var(--c-card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.tsp-product-img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.tsp-product-img-placeholder{
  width:100%;
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#e0e7ff,#c7d2fe);
  display:flex;align-items:center;justify-content:center;
  font-size:4rem;
}
.tsp-product-info{padding:20px}
.tsp-product-name{font-size:1.4rem;font-weight:700;margin-bottom:8px;line-height:1.3}
.tsp-product-desc{color:var(--c-muted);font-size:.95rem;line-height:1.6;margin-bottom:16px}
.tsp-product-price{
  font-size:2rem;font-weight:700;color:var(--c-primary);
}
.tsp-product-price span{font-size:1rem;font-weight:400;color:var(--c-muted);margin-inline-start:4px}
.tsp-badge{
  display:inline-block;background:var(--c-green-light);color:var(--c-green);
  padding:3px 10px;border-radius:20px;font-size:.78rem;font-weight:600;margin-top:8px;
}

/* ── Form Card ────────────────────────────────────── */
.tsp-form-card{
  background:var(--c-card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}
.tsp-form-title{
  font-size:1.15rem;font-weight:700;margin-bottom:20px;
  padding-bottom:12px;border-bottom:2px solid var(--c-border);
  display:flex;align-items:center;gap:8px;
}
.tsp-field{margin-bottom:16px}
.tsp-label{
  display:block;font-size:.85rem;font-weight:600;
  color:var(--c-text);margin-bottom:5px;
}
.tsp-label .req{color:var(--c-accent)}
.tsp-input,.tsp-select{
  width:100%;
  padding:10px 14px;
  border:1.5px solid var(--c-border);
  border-radius:8px;
  font-size:.95rem;
  font-family:inherit;
  color:var(--c-text);
  background:#fff;
  transition:border-color .2s,box-shadow .2s;
  appearance:none;
}
.tsp-input:focus,.tsp-select:focus{
  outline:none;
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(26,86,219,.12);
}
.tsp-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.tsp-row{grid-template-columns:1fr}}

/* ── Quantity ─────────────────────────────────────── */
.tsp-qty-wrap{
  display:flex;align-items:center;gap:0;
  border:1.5px solid var(--c-border);border-radius:8px;overflow:hidden;
}
.tsp-qty-btn{
  width:42px;height:42px;background:var(--c-bg);border:none;
  font-size:1.3rem;cursor:pointer;color:var(--c-primary);font-weight:700;
  transition:background .15s;flex-shrink:0;
}
.tsp-qty-btn:hover{background:#dbeafe}
.tsp-qty-input{
  flex:1;text-align:center;border:none;font-size:1rem;font-weight:600;
  background:#fff;min-width:0;padding:0;
}
.tsp-qty-input:focus{outline:none}

/* ── Remise par quantité ──────────────────────────── */
.tsp-qty-info{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--c-primary)}
.tsp-qty-next{margin:6px 0 0;padding:8px 12px;border-radius:8px;background:#e8f6ed;border:1px solid #a8d8b8;color:#2d9c4e;font-size:13px;font-weight:600}
.tsp-qty-next[hidden],.tsp-discount-line[hidden]{display:none}
.tsp-discount-line{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:16px 0 -8px;padding:10px 16px;border-radius:10px;background:#e8f6ed;border:1px solid #a8d8b8;color:#2d9c4e;font-size:14px;font-weight:600}

/* ── Carrier radio cards ─────────────────────────── */
.tsp-carrier-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.tsp-carrier-card{
  display:block;cursor:pointer;
  border:2px solid var(--c-border);border-radius:10px;
  overflow:hidden;transition:border-color .15s,box-shadow .15s;
}
.tsp-carrier-card:hover{border-color:var(--c-primary);box-shadow:0 2px 10px rgba(0,100,200,.08)}
.tsp-carrier-card.selected,
.tsp-carrier-card:has(input:checked){border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(59,89,152,.13);background:#f0f4ff}
.tsp-carrier-card input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.tsp-carrier-card-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;gap:10px;
}
.tsp-carrier-name{font-size:14px;font-weight:600;color:var(--c-text)}
.tsp-carrier-price{
  font-size:14px;font-weight:800;color:var(--c-primary);
  white-space:nowrap;flex-shrink:0;
}
.tsp-carrier-price-loading{font-size:12px;color:#aaa;font-weight:400}
/* Indicateur radio visuel */
.tsp-carrier-card-inner::before{
  content:'';width:18px;height:18px;border-radius:50%;
  border:2px solid var(--c-border);flex-shrink:0;
  transition:border-color .15s,background .15s;
}
.tsp-carrier-card.selected .tsp-carrier-card-inner::before,
.tsp-carrier-card:has(input:checked) .tsp-carrier-card-inner::before{
  border-color:var(--c-primary);
  background:radial-gradient(circle,var(--c-primary) 40%,transparent 45%);
}

/* ── Total box ────────────────────────────────────── */
.tsp-total-box{
  background:linear-gradient(135deg,#eff6ff,#dbeafe);
  border:1.5px solid #bfdbfe;
  border-radius:10px;
  padding:16px;
  margin:16px 0;
  display:flex;justify-content:space-between;align-items:center;
}
.tsp-total-label{font-weight:600;font-size:1rem}
.tsp-total-amount{font-size:1.5rem;font-weight:700;color:var(--c-primary)}

/* ── Payment method ───────────────────────────────── */
.tsp-pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
/* masqué visuellement mais focusable au clavier (display:none le rendait inaccessible) */
.tsp-pay-option{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tsp-pay-methods>div{position:relative}
.tsp-pay-label{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:18px 12px;
  height:110px;                          /* hauteur fixe identique pour les 2 */
  border:2px solid var(--c-border);border-radius:12px;cursor:pointer;
  transition:all .2s;text-align:center;
  font-size:.95rem;font-weight:700;      /* texte plus lisible */
  color:#374151;
  background:#fff;
}
.tsp-pay-label:hover{
  border-color:var(--c-primary);
  background:#eff6ff;
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(26,86,219,.12);
}
.tsp-pay-option:checked + .tsp-pay-label{
  border-color:var(--c-primary);border-width:2.5px;
  background:#eff6ff;color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(26,86,219,.12);
  transform:translateY(-2px);
}
.tsp-pay-label .icon{font-size:2.2rem;line-height:1}
.tsp-pay-label .pay-title{font-size:1rem;font-weight:800}
.tsp-pay-label .pay-sub{font-size:.78rem;color:var(--c-muted);font-weight:500}

.tsp-pay-label.cod-label{border-color:var(--c-cod)}
.tsp-pay-option:checked + .tsp-pay-label.cod-label{
  border-color:var(--c-cod-dark);border-width:2.5px;
  background:#fffbeb;color:var(--c-cod-dark);
  box-shadow:0 0 0 3px rgba(245,158,11,.12);
  transform:translateY(-2px);
}

/* ── Bouton submit ──────────────────────────────── */
.tsp-btn{
  width:100%;padding:15px;border:none;border-radius:12px;
  font-size:1.05rem;font-weight:700;cursor:pointer;
  transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;
}
.tsp-btn-ctp{background:var(--c-primary);color:#fff}
.tsp-btn-ctp:hover:not(:disabled){background:var(--c-primary-dark);transform:translateY(-1px)}
.tsp-btn-cod{background:var(--c-cod);color:#fff}
.tsp-btn-cod:hover:not(:disabled){background:var(--c-cod-dark);transform:translateY(-1px)}

/* Bouton désactivé — pulse pour attirer l'attention */
.tsp-btn.btn-disabled{
  background:#9ca3af;color:#fff;
  cursor:pointer;
  animation:tspPulse 2.2s ease-in-out infinite;
  transform:none;
  pointer-events:auto !important; /* garantit que le click JS est reçu */
}
@keyframes tspPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(156,163,175,.5)}
  50%{box-shadow:0 0 0 8px rgba(156,163,175,0)}
}

/* Hint sous le bouton désactivé */
.tsp-pay-hint{
  display:none;
  margin-top:10px;
  padding:10px 14px;
  background:#fef3c7;
  border:1px solid #f59e0b;
  border-radius:8px;
  font-size:.85rem;
  font-weight:600;
  color:#92400e;
  text-align:center;
  animation:tspFadeIn .3s ease;
}
.tsp-pay-hint.show{display:flex;align-items:center;justify-content:center;gap:8px}
@keyframes tspFadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── Error / Alert ────────────────────────────────── */
.tsp-alert{
  padding:10px 14px;border-radius:8px;font-size:.85rem;margin-bottom:12px;
}
.tsp-alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

/* ── Trust badges ─────────────────────────────────── */
.tsp-trust{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--c-border);
}
.tsp-trust-item{
  display:flex;align-items:center;gap:5px;
  font-size:.78rem;color:var(--c-muted);
}

/* ── Loading spinner ──────────────────────────────── */
.tsp-spinner{
  display:inline-block;width:18px;height:18px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:tspSpin .7s linear infinite;
}
@keyframes tspSpin{to{transform:rotate(360deg)}}

/* ── RTL overrides ────────────────────────────────── */
/* direction:rtl est déjà hérité de html.ar — les 3 anciennes règles étaient redondantes */
html.ar .tsp-prod-slider{direction:ltr} /* le translateX du slider suppose LTR */

/* ── Product image slider ─────────────────────────── */
/* Couleurs et ombres : variables du thème des pages de vente (:root). Script : assets/tsp-slider.js */
.tsp-prod-slider{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--c-border);touch-action:pan-y;-webkit-user-select:none;user-select:none}
.tsp-prod-slider-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.4,0,.2,1);will-change:transform}
.tsp-prod-slider-track img{width:100%;height:100%;object-fit:cover;flex-shrink:0;-webkit-user-drag:none}
.tsp-prod-sld-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:var(--c-card);border:1px solid var(--c-border);border-radius:50%;color:var(--c-primary);font-size:24px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;line-height:1;padding:0 0 3px;box-shadow:var(--shadow);transition:background .15s,color .15s,opacity .2s}
.tsp-prod-sld-btn:hover{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.tsp-prod-sld-prev{left:12px}
.tsp-prod-sld-next{right:12px}
.tsp-prod-sld-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(17,24,39,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tsp-prod-sld-dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.6);border:none;cursor:pointer;padding:0;transition:background .2s,width .2s}
.tsp-prod-sld-dot:hover{background:#fff}
.tsp-prod-sld-dot.active{width:22px;background:#fff}
/* Souris : les flèches apparaissent au survol ou au clavier ; écran tactile : toujours visibles */
@media (hover:hover) and (pointer:fine){
  .tsp-prod-slider-ready .tsp-prod-sld-btn{opacity:0}
  .tsp-prod-slider-ready:hover .tsp-prod-sld-btn,.tsp-prod-slider-ready .tsp-prod-sld-btn:focus-visible{opacity:1}
}
@media (max-width:480px){
  .tsp-prod-sld-btn{width:34px;height:34px;font-size:20px}
  .tsp-prod-sld-prev{left:8px}.tsp-prod-sld-next{right:8px}
}
@media (prefers-reduced-motion:reduce){.tsp-prod-slider-track{transition:none}}

/* ── Variantes de zone ────────────────────────────── */
.tsp-zone-eu .tsp-lang-toggle,
.tsp-zone-ww .tsp-lang-toggle,
.tsp-zone-digital .tsp-lang-toggle{display:none}

/* ── Produit digital ──────────────────────────────── */
.tsp-digital-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:4px 12px;border-radius:20px;font-size:.78rem;font-weight:700;margin-bottom:10px}
.tsp-dig-steps{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.tsp-dig-step{display:flex;align-items:flex-start;gap:10px;font-size:.83rem;color:#374151;line-height:1.5}
.tsp-dig-step-num{width:22px;height:22px;background:#6366f1;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex-shrink:0;margin-top:1px}

/* ── Accessibilité ────────────────────────────────── */
.tsp-btn:focus-visible,.tsp-qty-btn:focus-visible,.tsp-lang-toggle button:focus-visible,
.tsp-prod-sld-btn:focus-visible,.tsp-prod-sld-dot:focus-visible,
.tsp-pay-option:focus-visible + .tsp-pay-label,
.tsp-carrier-card:has(input:focus-visible){outline:2px solid var(--c-primary);outline-offset:2px}
.tsp-input.is-invalid,.tsp-select.is-invalid{border-color:var(--c-accent)}
@media(max-width:360px){.tsp-pay-methods{grid-template-columns:1fr}.tsp-pay-label{height:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ── Utilitaires ──────────────────────────────────── */
[hidden]{display:none!important}
.tsp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}   /* champ piège anti-robots */
.tsp-price-note{font-size:.78rem;color:var(--c-muted);margin-top:4px;font-style:italic}
.tsp-section-label{margin-bottom:8px;font-size:.82rem;font-weight:700;color:var(--c-muted);text-transform:uppercase;letter-spacing:.5px}
.tsp-section-label .req{color:var(--c-accent)}
.tsp-label-hint{font-size:.75rem;font-weight:400;color:var(--c-muted)}
.tsp-carrier-na{font-size:.7rem;color:#b91c1c}
.tsp-cur{font-size:1rem;font-weight:500;opacity:.7}
.tsp-btn[disabled]{opacity:.7;cursor:progress}
.tsp-topbar-country{display:flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.85)}
.tsp-topbar-country .fi{width:20px;height:15px;border-radius:2px}

/* ── Europe / Monde : commande via WhatsApp ───────── */
.tsp-notice-delivery{background:#fff7ed;border:1px solid #fdba74;border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:.85rem}
.tsp-notice-title{font-weight:700;color:#c2410c;margin-bottom:4px}
.tsp-notice-body{color:#7c2d12;line-height:1.55}
.tsp-price-box{background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;padding:14px 16px;margin-bottom:16px}
.tsp-price-box-label{font-size:.75rem;color:#0369a1;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.tsp-price-box-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
/* Promotion : ancien prix barré + étiquette de remise, avant le nouveau prix */
.tsp-promo{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 4px}
.tsp-promo-old{font-size:1rem;font-weight:600;color:var(--c-muted);text-decoration:line-through;text-decoration-thickness:2px}
.tsp-promo-badge{display:inline-block;padding:2px 9px;border-radius:20px;background:#fef2f2;border:1px solid #fecaca;color:#cc0000;font-size:.8rem;font-weight:800}
.tsp-promo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tsp-price-box-amount{font-size:1.8rem;font-weight:800;color:#0c4a6e;line-height:1}
.tsp-price-box-note{font-size:.72rem;color:#0369a1;margin-top:4px;font-style:italic}
.tsp-country{text-align:center;line-height:1;flex-shrink:0}
.tsp-country-flag{width:48px;height:36px;display:inline-block;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.tsp-country-name{font-size:.72rem;color:var(--c-muted);margin-top:4px;font-weight:600}
.tsp-btn-wa{background:#25d366;color:#fff;text-decoration:none;margin-bottom:16px;gap:12px}
.tsp-btn-wa:hover{background:#16a34a}

/* ── Digital : blocs explicatif et total ──────────── */
.tsp-digital-badge-wrap{padding:12px 16px 0}
.tsp-dig-box{background:#f5f3ff;border:1px solid #c4b5fd;border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:.85rem}
.tsp-dig-box-title{font-weight:700;color:#5b21b6;margin-bottom:8px}
.tsp-dig-total{background:#f5f3ff;border:1px solid #c4b5fd;border-radius:10px;padding:12px 16px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
.tsp-dig-total-label{font-size:.75rem;color:#5b21b6;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.tsp-dig-total-amount{font-size:1.8rem;font-weight:800;color:#4c1d95}
.tsp-dig-total-icon{font-size:28px}
.tsp-fx-note{font-size:.78rem;color:var(--c-muted);line-height:1.5;margin:-6px 0 16px}
.tsp-fx-note strong{color:var(--c-text)}
.tsp-fx-rate{font-size:.8rem;color:var(--c-muted);line-height:1.5;text-align:center;margin:10px 0 0}
.tsp-fx-rate strong{color:var(--c-text)}

/* ── Validation en direct ─────────────────────────── */
.tsp-field-msg{font-size:.78rem;color:var(--c-accent);margin-top:4px;min-height:0;line-height:1.4}
.tsp-field-msg:empty{display:none}
.tsp-input.is-valid,.tsp-select.is-valid{border-color:#16a34a}
html.ar .tsp-field-msg{text-align:right}

/* ── Description du produit : contenu libre (HTML, vidéo, code) ── */
.tsp-product-desc{overflow-wrap:anywhere}
.tsp-product-desc :is(img,video,iframe,embed,object,table){max-width:100%}
.tsp-product-desc :is(img,video){height:auto}
/* Vidéos intégrées : pleine largeur, format 16:9 */
.tsp-product-desc iframe:is([src*="youtube"],[src*="youtu.be"],[src*="vimeo"],[src*="dailymotion"],[src*="facebook.com/plugins/video"]){width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:10px}
.tsp-product-desc video{width:100%;border-radius:10px}

/* ── Packs digitaux (page de vente) ── */
.tsp-pack-box{margin:16px 0 0;padding:14px 16px;border:1px solid #e4e8f0;border-radius:12px;background:#f5f6fa}
.tsp-pack-title{font-weight:800;font-size:14px;color:#1a2a5e;margin-bottom:8px}
.tsp-pack-items{list-style:none;margin:0;padding:0}
.tsp-pack-items li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid #e4e8f0;font-size:14px}
.tsp-pack-items li:first-child{border-top:0}
.tsp-pack-items a{color:#1a2a5e;font-weight:600;text-decoration:none}
.tsp-pack-items a:hover{text-decoration:underline}
.tsp-pack-items span{color:#6b7a9b;white-space:nowrap}
.tsp-pack-save{margin-top:10px;font-weight:700;font-size:14px;color:#2d9c4e}
.tsp-pack-link{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:#3b5998;text-decoration:none}
.tsp-pack-link:hover{text-decoration:underline}
.tsp-drm-sale-note{margin:10px 0 0;padding:10px 12px;border-radius:8px;background:#eff6ff;color:#1e429f;font-size:.85rem;line-height:1.5;text-align:center}