/* worksheet-v1/_core/_css/pricing-cards.css
   Silver/Gold upgrade cards (lib/pricing-cards-render.php) + the popup that
   wraps them (window.openPricingPopup()) — shared by platform.php (Mon
   compte → Facturation tab + popup) and index.php (popup only, for a
   logged-out visitor). Extracted from platform.css (30/08/2026) once the
   popup needed to exist on BOTH pages: keeping one copy here means the two
   pages' cards can never visually drift apart. */
.tier-upgrade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:16px;}
.tier-up-card{border-radius:16px;padding:20px 18px;text-align:center;box-shadow:var(--shadow);}
.tier-up-card.tier-silver{background:linear-gradient(165deg,#eef1f4,#dbe0e6);border:1px solid #c7cdd6;}
.tier-up-card.tier-gold{background:linear-gradient(165deg,#fdf2d8,#f6e0a8);border:1px solid #e8c96e;}
.tuc-promo-img{display:block;width:calc(100% + 36px);margin:-20px -18px 12px;
  aspect-ratio:16/9;object-fit:cover;border-radius:16px 16px 0 0;}
.tuc-ic{font-size:2.2rem;}
.tuc-label{font-weight:800;font-size:1rem;margin-top:2px;color:var(--ink);}
.tuc-price{font-size:1.25rem;font-weight:800;margin-top:6px;color:var(--ink);}
.tuc-price small{font-size:.68rem;font-weight:700;color:var(--ink-soft);}
.tuc-price-strike{font-size:.9rem;font-weight:700;color:var(--ink-faint);text-decoration:line-through;}
.tuc-features{list-style:none;margin:12px 0 0;padding:0;text-align:start;display:flex;flex-direction:column;gap:5px;}
.tuc-features li{font-size:.78rem;color:var(--ink-soft);line-height:1.4;padding-inline-start:18px;position:relative;}
.tuc-features li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800;}
[dir="rtl"] .tuc-features li::before{left:auto;right:0;}
.tuc-cta{display:block;margin-top:12px;background:var(--red);color:#fff;text-decoration:none;font-weight:800;
  padding:10px;border-radius:11px;font-size:.86rem;border:none;width:100%;cursor:pointer;font-family:inherit;}
.tuc-cta:hover{filter:brightness(1.05);}
.tuc-cta-pending{background:#fef3c7;color:#92400e;box-shadow:none;}
.tuc-cta-pending:hover{filter:none;background:#fde8a3;}
.tier-up-card.is-pending{position:relative;border:2px solid #d69a3c;
  box-shadow:0 0 0 4px rgba(214,154,60,.25), var(--shadow);
  animation:pending-card-glow 2.2s ease-in-out infinite;}
@keyframes pending-card-glow{0%,100%{box-shadow:0 0 0 4px rgba(214,154,60,.25), var(--shadow);}
  50%{box-shadow:0 0 0 8px rgba(214,154,60,.08), var(--shadow);}}
.tuc-pending-ribbon{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:#d69a3c;color:#fff;font-weight:800;font-size:.68rem;padding:4px 12px;border-radius:999px;
  box-shadow:0 4px 10px -3px rgba(214,154,60,.6);white-space:nowrap;}
@media (prefers-reduced-motion: reduce){ .tier-up-card.is-pending{animation:none;} }
.tier-up-card.is-unsent{position:relative;border:2px dashed #94a3b8;}
.tuc-unsent-ribbon{background:#64748b;box-shadow:0 4px 10px -3px rgba(100,116,139,.5);}
.promo-banner{margin-top:16px;background:linear-gradient(120deg,var(--red),#d98a4c);color:#fff;
  border-radius:14px;padding:12px 18px;font-weight:800;font-size:.9rem;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  animation:promoPulse 1.8s ease-in-out infinite;}
@keyframes promoPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(201,79,79,.35);} 50%{box-shadow:0 0 0 8px rgba(201,79,79,0);} }
.promo-countdown-txt{font-family:ui-monospace,Consolas,monospace;font-weight:800;background:rgba(255,255,255,.2);
  padding:2px 10px;border-radius:999px;font-size:.82rem;}

/* Popup wrapper */
/* z-index:150, not 90 (30/08/2026 fix) — index.php's own sticky <header>
   sits at z-index:100, so at 90 the popup rendered BEHIND the header at
   some scroll positions/viewport sizes (only visible at "certain
   resolutions" because that's when the header's own height/stickiness
   happened to overlap the popup's top edge). 150 clears every modal
   currently defined on either page (index.php's header:100,
   platform.php's .upgrade-modal/.about-modal/.wa-desktop-popup:110) with
   margin, while staying below the mobile sidebar drawer (190) and the
   splash screen (1000), which should always win over everything. */
/* overflow was on BOTH the backdrop and the modal — the wide plain browser
   scrollbar in the 30/08/2026 screenshot was the backdrop's own (spanning
   the full viewport height, past the modal's edges). It was always
   redundant: the modal caps itself at 92vh and scrolls internally, so it
   can never actually exceed the viewport for the backdrop to need its own
   scroll. Backdrop no longer scrolls; only the modal does, with a slim
   themed scrollbar instead of the OS-default one. */
.pricing-popup-backdrop{position:fixed;inset:0;background:rgba(59,47,34,.55);display:none;
  align-items:center;justify-content:center;padding:20px;z-index:150;overflow:hidden;}
.pricing-popup-backdrop.show{display:flex;}
.pricing-popup-modal{position:relative;background:var(--paper);border-radius:20px;padding:34px 22px 24px;
  max-width:640px;width:100%;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);max-height:92vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
.pricing-popup-modal::-webkit-scrollbar{width:7px;}
.pricing-popup-modal::-webkit-scrollbar-track{background:transparent;}
.pricing-popup-modal::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;}
.pricing-popup-modal::-webkit-scrollbar-thumb:hover{background:var(--ink-faint);}
.pricing-popup-close{position:absolute;top:12px;inset-inline-end:12px;width:34px;height:34px;border-radius:50%;
  border:none;background:#fff;color:var(--ink-soft);font-size:1.1rem;font-weight:800;cursor:pointer;
  box-shadow:0 4px 10px -3px rgba(0,0,0,.25);z-index:2;}
.pricing-popup-close:hover{color:var(--red);}
.pricing-popup-modal .tier-upgrade-grid{margin-top:0;}