/**
 * Sahl Compta — Pricing cards redesign (21st.dev inspired)
 * Applique à:
 *  - Landing .pts-card (section tarifs)
 *  - /pricing .plan-card
 *
 * Zero modification des textes/données/logique — skin CSS uniquement.
 */

/* ═══════════════════════════════════════════════════════════
   CARD COMMUNE — gradient frame 3px + contenu centré
   ═══════════════════════════════════════════════════════════ */

.pts-card,
.plan-card {
  position: relative !important;
  background: linear-gradient(to bottom, var(--tone-wash, #fafafa) 0%, #ffffff 55%) !important;
  border: 3px solid transparent !important;
  border-radius: 24px !important;
  padding: 56px 26px 28px !important; /* plus d'espace en haut pour l'emoji */
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04) !important;
  overflow: visible !important;
  transition: transform .2s, box-shadow .2s !important;
}
.pts-card:hover,
.plan-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 12px rgba(0,0,0,.06), 0 20px 40px rgba(0,0,0,.08) !important;
}

.pts-card::before,
.plan-card::before {
  content: '' !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 24px !important;
  padding: 3px !important;
  background: linear-gradient(to bottom, var(--tone-a, #d4d4d8), var(--tone-b, #71717a)) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Tous les contenus au-dessus du frame */
.pts-card > *,
.plan-card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Emoji icon avant le titre du plan */
.pts-card::after,
.plan-card::after {
  content: var(--tone-emoji, '');
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 60px;
  background: #fff;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  border: 1.5px solid #e4e4e7;
  z-index: 2;
}

/* Titre centré */
.pts-card .pts-plan,
.plan-card .plan-name {
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  color: #18181b !important;
  margin: 0 0 14px !important;
  text-align: center !important;
  background: none !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  letter-spacing: -.3px !important;
}

/* Sous-titre — texte centré italique simple (fini les pills qui wrappent) */
.pts-card .pts-desc,
.plan-card .plan-desc,
.plan-card .plan-for {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #71717a !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
  text-align: center !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
}

/* Prix XL centré — bloc avec respiration */
.pts-card .pts-price,
.plan-card .plan-price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 20px 0 !important;
  padding: 10px 0 !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 52px !important;
  line-height: 1 !important;
  color: var(--tone-accent, #18181b) !important;
  letter-spacing: -1.5px !important;
}
.pts-card .pts-price > span,
.plan-card .plan-price .currency,
.plan-card .plan-price .period {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  letter-spacing: .2px !important;
  margin-left: 2px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  text-transform: lowercase !important;
}
.plan-card .plan-price .amount {
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 52px !important;
  line-height: 1 !important;
  color: var(--tone-accent, #18181b) !important;
}

/* Features list — pills check + text 14px */
.pts-card .pts-feats,
.plan-card .plan-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  text-align: left !important;
}
.pts-card .pts-feats li,
.plan-card .plan-features li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 13.5px !important;
  color: #3f3f46 !important;
  padding: 0 !important;
  background: none !important;
  line-height: 1.5 !important;
}
section.lsec .pts-card .pts-feats li::before,
.pts-card .pts-feats li::before,
.plan-card .plan-features li::before,
body .pts-card .pts-feats li::before {
  content: '' !important;
  position: static !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: inline-block !important;
  vertical-align: top !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: var(--tone-check-bg, #f4f4f5) !important;
  box-shadow: inset 0 0 0 1px var(--tone-check-ring, #e4e4e7) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2371717a'%3E%3Cpath d='M16.7 6.3a1 1 0 0 0-1.4-1.4L8 12.2 4.7 8.9a1 1 0 1 0-1.4 1.4L7.3 14a1 1 0 0 0 1.4 0l8-8Z'/%3E%3C/svg%3E") !important;
  background-size: 14px 14px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: 1px 0 0 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Compenser le padding-left éventuel des li */
.pts-card .pts-feats li,
.plan-card .plan-features li {
  padding-left: 0 !important;
}

/* Hide legacy décorations remplacées par notre gradient frame + emoji */
body .pts-card .pts-badge,
.pts-grid .pts-card .pts-badge,
body .pts-card .pts-sep,
.pts-grid .pts-card .pts-sep,
.plan-card .plan-sep,
.plan-card .plan-badge {
  display: none !important;
}

/* Supprime bordure inline de la card Essentiel */
.pts-card[style*="border"] {
  border: 3px solid transparent !important;
}

/* CTA button — pill full-width tone-coloré */
.pts-card .pts-btn,
.plan-card .plan-btn {
  margin-top: auto !important;
  width: 100% !important;
  padding: 14px 22px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: none !important;
  background: var(--tone-btn-bg, #18181b) !important;
  color: var(--tone-btn-fg, #fafafa) !important;
  transition: background .15s, transform .15s, box-shadow .15s !important;
  box-shadow: 0 4px 12px var(--tone-btn-shadow, rgba(0,0,0,.15)) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pts-card .pts-btn:hover,
.plan-card .plan-btn:hover {
  transform: translateY(-1px) !important;
  background: var(--tone-btn-hover, #000) !important;
}

/* ═══════════════════════════════════════════════════════════
   TONES par nth-child — 6 plans
   Ordre: Découverte · Solo AE · Essentiel · Business · Cabinet · Cabinet Plus
   ═══════════════════════════════════════════════════════════ */

/* 1 — Découverte : zinc */
.pts-grid > .pts-card:nth-child(1),
.plans-grid > .plan-card:nth-child(1) {
  --tone-a: #d4d4d8;
  --tone-b: #71717a;
  --tone-accent: #27272a;
  --tone-emoji: '🎁';
  --tone-check-bg: #f4f4f5;
  --tone-check-ring: #d4d4d8;
  --tone-btn-bg: #27272a;
  --tone-btn-fg: #fafafa;
  --tone-btn-hover: #000;
  --tone-btn-shadow: rgba(39,39,42,.2);
  --tone-wash: #fafafa;
}

/* 2 — Solo AE : emerald */
.pts-grid > .pts-card:nth-child(2),
.plans-grid > .plan-card:nth-child(2) {
  --tone-a: #34d399;
  --tone-b: #059669;
  --tone-accent: #059669;
  --tone-emoji: '🚀';
  --tone-check-bg: #ecfdf5;
  --tone-check-ring: #a7f3d0;
  --tone-btn-bg: #059669;
  --tone-btn-fg: #fff;
  --tone-btn-hover: #047857;
  --tone-btn-shadow: rgba(5,150,105,.25);
  --tone-wash: #f0fdf4;
}

/* 3 — Essentiel : blue */
.pts-grid > .pts-card:nth-child(3),
.plans-grid > .plan-card:nth-child(3) {
  --tone-a: #60a5fa;
  --tone-b: #2563eb;
  --tone-accent: #2563eb;
  --tone-emoji: '⚡';
  --tone-check-bg: #eff6ff;
  --tone-check-ring: #bfdbfe;
  --tone-btn-bg: #2563eb;
  --tone-btn-fg: #fff;
  --tone-btn-hover: #1e40af;
  --tone-btn-shadow: rgba(37,99,235,.25);
  --tone-wash: #eff6ff;
}

/* 4 — Business : amber HIGHLIGHTED (scale 1.05 + badge) */
.pts-grid > .pts-card:nth-child(4),
.plans-grid > .plan-card:nth-child(4) {
  --tone-a: #fbbf24;
  --tone-b: #d97706;
  --tone-accent: #b45309;
  --tone-emoji: '💼';
  --tone-check-bg: #fffbeb;
  --tone-check-ring: #fde68a;
  --tone-btn-bg: #d97706;
  --tone-btn-fg: #fff;
  --tone-btn-hover: #b45309;
  --tone-btn-shadow: rgba(217,119,6,.3);
  --tone-wash: #fffbeb;
  transform: scale(1.04) !important;
  z-index: 2 !important;
  box-shadow: 0 16px 40px rgba(217,119,6,.18) !important;
}
.pts-grid > .pts-card:nth-child(4)::after,
.plans-grid > .plan-card:nth-child(4)::after {
  box-shadow: 0 6px 20px rgba(217,119,6,.25) !important;
}
/* Badge "Plus populaire" */
.pts-grid > .pts-card:nth-child(4) > *:first-child,
.plans-grid > .plan-card:nth-child(4) > *:first-child {
  position: relative;
}
.pts-grid > .pts-card:nth-child(4)::before {
  /* Already set to gradient frame */
}
.pts-grid > .pts-card:nth-child(4),
.plans-grid > .plan-card:nth-child(4) {
  margin-top: 12px !important;
}
/* Business — emoji bubble en gold doré */
.pts-grid > .pts-card:nth-child(4)::after,
.plans-grid > .plan-card:nth-child(4)::after {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 8px 20px rgba(217,119,6,.28), 0 0 0 3px rgba(251,191,36,.2) !important;
}

/* Badge "PLUS POPULAIRE" — block au-dessus du titre (pas de chevauchement) */
.pts-grid > .pts-card:nth-child(4) .pts-plan::before,
.plans-grid > .plan-card:nth-child(4) .plan-name::before {
  content: '⭐ PLUS POPULAIRE';
  display: block;
  margin: 0 auto 10px;
  width: fit-content;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .6px;
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(217,119,6,.35);
  white-space: nowrap;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* 5 — Cabinet : pink */
.pts-grid > .pts-card:nth-child(5),
.plans-grid > .plan-card:nth-child(5) {
  --tone-a: #f472b6;
  --tone-b: #db2777;
  --tone-accent: #be185d;
  --tone-emoji: '🏢';
  --tone-check-bg: #fdf2f8;
  --tone-check-ring: #fbcfe8;
  --tone-btn-bg: #db2777;
  --tone-btn-fg: #fff;
  --tone-btn-hover: #9d174d;
  --tone-btn-shadow: rgba(219,39,119,.25);
  --tone-wash: #fdf2f8;
}

/* 6 — Cabinet Plus : purple */
.pts-grid > .pts-card:nth-child(6),
.plans-grid > .plan-card:nth-child(6) {
  --tone-a: #a78bfa;
  --tone-b: #7c3aed;
  --tone-accent: #6d28d9;
  --tone-emoji: '👑';
  --tone-check-bg: #faf5ff;
  --tone-check-ring: #ddd6fe;
  --tone-btn-bg: #7c3aed;
  --tone-btn-fg: #fff;
  --tone-btn-hover: #5b21b6;
  --tone-btn-shadow: rgba(124,58,237,.25);
  --tone-wash: #faf5ff;
}

/* ═══════════════════════════════════════════════════════════
   GRID CONTAINER ajustements
   ═══════════════════════════════════════════════════════════ */

.pts-grid,
.plans-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
  padding-top: 20px !important; /* espace pour emoji qui dépasse */
}

/* Responsive mobile — carousel horizontal avec peek de la card suivante */
@media (max-width: 860px) {
  .pts-grid,
  .plans-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding: 16px !important;
    gap: 16px !important;
    padding: 28px 16px !important; /* marge latérale pour centrer la 1ère card */
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; /* Firefox */
  }
  .pts-grid::-webkit-scrollbar,
  .plans-grid::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
  }
  .pts-card,
  .plan-card {
    flex: 0 0 85% !important; /* 85% = 15% peek sur la card suivante */
    scroll-snap-align: center !important;
    padding: 36px 24px 24px !important;
    min-width: 0 !important;
  }
  .pts-grid > .pts-card:nth-child(4),
  .plans-grid > .plan-card:nth-child(4) {
    transform: none !important; /* pas de scale sur mobile */
  }
  .pts-grid > .pts-card:nth-child(4)::after,
  .plans-grid > .plan-card:nth-child(4)::after {
    box-shadow: 0 4px 14px rgba(217,119,6,.2) !important;
  }
}

/* Neutralise l'ancien highlight border sur Essentiel (style inline dans HTML) */
.pts-card[style*="border"] {
  border-color: transparent !important;
}