/*
 * Pricing section + pricing cards — shared by the homepage teaser and the
 * Tarifs page (both render the same template-parts/pricing-section.php).
 * Overrides the simpler base rules in style.css with the refined design.
 */
.pricing-section {
  background: #f3f3f8;
  padding: clamp(4rem, 8vw, 6.5rem) 1.5rem clamp(5rem, 10vw, 8rem);
  position: relative;
}
.pricing-wrap { max-width: 1260px; margin: 0 auto; text-align: center; }
.pricing-eyebrow {
  font-size: 0.67rem; font-weight: 800;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--red); margin-bottom: 0.75rem;
}
.pricing-title {
  font-size: clamp(1.85rem, 3.2vw, 2.65rem); font-weight: 900;
  letter-spacing: -0.048em; color: var(--dark); margin-bottom: 0.85rem;
}
.pricing-sub { font-size: 0.95rem; color: var(--muted); margin-bottom: 3rem; }
.pricing-urgency-wrap { margin-bottom: 2rem; }
.pricing-urgency {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.9rem;
  background: rgba(229,9,20,0.06); border: 1px solid rgba(229,9,20,0.18);
  border-radius: 999px; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--red);
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,9,20,0.5); }
  60%       { box-shadow: 0 0 0 5px rgba(229,9,20,0); }
}
.urgency-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); flex-shrink: 0;
  animation: pulseDot 1.6s ease-in-out infinite;
}

.screen-toggle {
  display: inline-flex; background: #fff;
  border: 1.5px solid #dddde8; border-radius: 50px;
  padding: 4px; gap: 3px; margin-bottom: 3.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.screen-btn {
  padding: 0.55rem 1.6rem; font-size: 0.8rem; font-weight: 600;
  color: #888; background: transparent; border: none;
  border-radius: 50px; cursor: pointer; font-family: inherit;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.screen-btn:hover { color: var(--dark); background: #f0f0f8; }
.screen-btn.active { background: var(--red); color: #fff; box-shadow: 0 3px 16px rgba(229,9,20,0.35); }

.pricing-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem; align-items: start;
  padding-top: 44px;
}
@media (max-width: 1024px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; padding-top: 0; } }
@media (max-width: 560px)  { .pricing-grid { grid-template-columns: 1fr; } }

.p-card {
  background: #fff; border: 1.5px solid #e2e2ee;
  border-radius: 16px; overflow: hidden;
  text-align: left;
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
  transition: transform 0.26s var(--ease), box-shadow 0.26s var(--ease), border-color 0.22s;
}
.p-card:hover { transform: translateY(-6px); box-shadow: 0 18px 52px rgba(0,0,0,0.1); border-color: #c8c8dc; }
.p-card--featured {
  border: 2px solid var(--red);
  box-shadow: 0 6px 36px rgba(229,9,20,0.14);
  margin-top: -44px;
}
.p-card--featured:hover { transform: translateY(-7px); box-shadow: 0 22px 60px rgba(229,9,20,0.2); }
@media (max-width: 1024px) { .p-card--featured { margin-top: 0; } }

.p-badge {
  display: block; width: 100%;
  background: var(--red); color: #fff;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center;
  height: 44px; line-height: 44px;
  position: static; transform: none;
  border-radius: 0;
}
.p-card-body { padding: 1.65rem 1.65rem 1.8rem; }
.p-plan-name { font-size: 1.1rem; font-weight: 800; color: var(--dark); margin-bottom: 0.4rem; letter-spacing: -0.02em; }
.p-subtitle { font-size: 0.83rem; color: var(--muted); line-height: 1.55; margin-bottom: 1.3rem; }

.p-old-price-row { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.3rem; }
.p-old-price { font-size: 0.9rem; color: #adadc0; text-decoration: line-through; font-weight: 500; }
.p-save {
  display: inline-flex; align-items: center; gap: 0.22rem;
  font-size: 0.67rem; font-weight: 700;
  padding: 0.17rem 0.6rem; border-radius: 20px;
  background: rgba(34,197,94,0.1); color: #16a34a;
  border: 1px solid rgba(34,197,94,0.2);
}
.p-card--featured .p-save { background: rgba(229,9,20,0.1); color: var(--red); border-color: rgba(229,9,20,0.25); }

.p-price { display: flex; align-items: flex-end; gap: 2px; line-height: 1; margin-bottom: 0.3rem; }
.p-price sup { font-size: 1.25rem; font-weight: 800; color: var(--dark); padding-bottom: 0.5rem; }
.p-value { font-size: 3.4rem; font-weight: 900; letter-spacing: -0.06em; color: var(--dark); transition: opacity 0.13s; }
.p-value.fade { opacity: 0; }
.p-card--featured .p-value { color: var(--dark); }
.p-per { font-size: 0.76rem; color: #adadc0; margin-bottom: 1.35rem; min-height: 1.1rem; line-height: 1.5; transition: opacity 0.13s; }
.p-per.fade { opacity: 0; }

.p-btn {
  display: block; width: 100%; text-align: center;
  padding: 0.9rem 1rem; border-radius: 10px;
  font-size: 0.88rem; font-weight: 700; letter-spacing: 0.01em;
  border: 1.5px solid #d4d4e4; color: var(--red);
  background: #fff; font-family: inherit; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.18s, box-shadow 0.2s, transform 0.15s;
}
.p-btn:hover { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 6px 24px rgba(229,9,20,0.3); transform: translateY(-1px); }
.p-btn--featured { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 4px 22px rgba(229,9,20,0.4); }
.p-btn--featured:hover { background: var(--red-dark); border-color: var(--red-dark); box-shadow: 0 8px 36px rgba(229,9,20,0.55); transform: translateY(-2px); }

.p-guarantee { display: flex; align-items: center; justify-content: center; gap: 0.3rem; margin-top: 0.8rem; font-size: 0.69rem; color: #b0b0c4; }
.p-divider { height: 1px; background: #eaeaf2; margin: 1.4rem 0 1.3rem; }
.p-features { display: flex; flex-direction: column; gap: 0.72rem; list-style: none; }
.p-features li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.84rem; color: #4a4a68; line-height: 1.3; }
.feat-icon { width: 18px; height: 18px; flex-shrink: 0; color: #9090b0; }

.pricing-trust {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin-top: 2.75rem; padding-top: 2rem;
  border-top: 1px solid #e2e2ee;
  font-size: 0.76rem; color: var(--muted);
}
.pricing-trust > span { display: flex; align-items: center; gap: 0.3rem; }
.trust-sep { color: #d0d0de; }

.pricing-payments { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.1rem; }
.pricing-payments-label { font-size: 0.65rem; color: var(--muted); letter-spacing: 0.07em; text-transform: uppercase; margin-right: 0.15rem; }
.pay-badge { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 10px; background: #fff; border-radius: 5px; border: 1px solid #e2e2ec; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.pay-badge--dark { background: #1e1e2e; padding: 0 8px; }

@media (max-width: 480px) {
  .screen-toggle { display: flex; width: 100%; }
  .screen-btn { flex: 1; padding: 0.55rem 0.3rem; font-size: 0.75rem; }
  .p-card-body { padding: 1.35rem 1.25rem 1.5rem; }
  .p-value { font-size: 2.9rem; }
}