/* ============================================================
   PAPA PV — Page Tarifs
   ============================================================ */

.page-main,
.page-main > .container {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.page-main {
  padding-top: var(--sp-8);
}

/* ── Hero ─────────────────────────────────────────────────── */
.pricing-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
}

.pricing-hero h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.pricing-hero .hero-subtitle {
  font-size: var(--text-h4);
  font-weight: var(--fw-medium);
  opacity: 0.95;
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}

.pricing-hero .hero-reassurance {
  font-size: var(--text-body);
  opacity: 0.85;
  text-wrap: balance;
}

/* ── Route Switcher ───────────────────────────────────────── */
.pricing-route-switcher {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: 0;
  padding: 0;
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.pricing-route-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  background: var(--color-white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-normal);
  box-shadow: var(--shadow-sm);
  width: 100%;
  min-width: 0;
}

.pricing-route-btn:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pricing-route-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
}

.pricing-route-btn .route-arrow {
  font-size: 1.5rem;
}

/* ── Route Summary ────────────────────────────────────────── */
.pricing-summary {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
  margin-top: var(--sp-8);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.pricing-summary-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.pricing-summary-header h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin: 0;
}

.pricing-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
}

.pricing-badge.danger {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.pricing-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  min-width: 0;
}

.pricing-summary-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--text-body);
  color: var(--gray-700);
  min-width: 0;
}

.pricing-summary-item i {
  color: var(--color-secondary);
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.pricing-summary-item a {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.pricing-summary-item span,
.pricing-summary-item a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pricing-summary-item a:hover {
  text-decoration: underline;
}

/* ── Filters ──────────────────────────────────────────────── */
.pricing-filters {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: var(--sp-8) 0 var(--sp-6);
  max-width: 100%;
  min-width: 0;
}

.pricing-search {
  position: relative;
  max-width: 100%;
  min-width: 0;
}

.pricing-search input {
  width: 100%;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 2.5rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--t-fast);
}

.pricing-search input:focus {
  outline: none;
  border-color: var(--color-secondary);
}

.pricing-search i {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

.pricing-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  max-width: 100%;
  min-width: 0;
}

.pricing-filter-tag {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--t-fast);
}

.pricing-filter-tag:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}

.pricing-filter-tag.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ── Pricing Grid ─────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  max-width: 100%;
  min-width: 0;
}

.pricing-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  overflow: hidden;
  transition: transform var(--t-normal), box-shadow var(--t-normal);
  min-width: 0;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pricing-card-header {
  background: var(--gray-50);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--gray-100);
}

.pricing-card-header h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin: 0 0 var(--sp-2);
  line-height: var(--lh-snug);
}

.pricing-card-header .pricing-card-desc {
  font-size: var(--text-small);
  color: var(--gray-600);
  margin: 0;
  line-height: var(--lh-normal);
}

.pricing-card-body {
  padding: var(--sp-5) var(--sp-6);
}

.pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
  min-width: 0;
}

.pricing-card-price .price-main {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  color: var(--color-danger);
}

.pricing-card-price .price-alt {
  font-size: var(--text-body);
  color: var(--gray-500);
  font-weight: var(--fw-medium);
}

.pricing-card-price .price-unit {
  font-size: var(--text-small);
  color: var(--gray-500);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.pricing-examples {
  margin: var(--sp-4) 0 0;
}

.pricing-examples-title {
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  color: var(--gray-700);
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pricing-examples-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-examples-list li {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: var(--text-small);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
}

.pricing-phytosanitary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--status-success-bg);
  color: var(--status-success-text);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  margin-top: var(--sp-3);
}

/* ── Weight Tier Cards ────────────────────────────────────── */
.pricing-tier-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  transition: all var(--t-fast);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.pricing-tier-card:hover {
  border-color: var(--color-secondary);
  background: var(--color-primary-light);
}

.pricing-tier-card .tier-range {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-size: var(--text-body);
  min-width: 0;
  overflow-wrap: anywhere;
}

.pricing-tier-card .tier-price {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
  gap: 2px;
  font-weight: var(--fw-bold);
  color: var(--color-danger);
  line-height: var(--lh-tight);
  text-align: right;
  max-width: 100%;
  min-width: 0;
}

.pricing-tier-card .tier-price-main {
  font-size: var(--text-h4);
  white-space: nowrap;
}

.pricing-tier-card .tier-unit,
.pricing-tier-card .tier-price-alt {
  color: var(--gray-500);
  font-size: var(--text-small);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

/* ── Flat Rate Cards ──────────────────────────────────────── */
.pricing-flat-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.pricing-flat-card .flat-icon {
  width: 44px;
  height: 44px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.pricing-flat-card .flat-info {
  flex: 1;
  min-width: 0;
}

.pricing-flat-card .flat-name {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}

.pricing-flat-card .flat-price {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-danger);
  font-size: var(--text-h4);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Section titles ───────────────────────────────────────── */
.pricing-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin: var(--sp-10) 0 var(--sp-5);
}

/* ── Contact Section ──────────────────────────────────────── */
.pricing-contact {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6);
  margin-top: var(--sp-10);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.pricing-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

.pricing-contact-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-xs);
  min-width: 0;
}

.pricing-contact-card h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.pricing-contact-card p,
.pricing-contact-card a {
  font-size: var(--text-body);
  color: var(--gray-700);
  line-height: var(--lh-relaxed);
  margin: 0;
  overflow-wrap: anywhere;
}

.pricing-contact-card a {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.pricing-contact-card a:hover {
  text-decoration: underline;
}

/* ── CTA Section ──────────────────────────────────────────── */
.pricing-cta {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  margin-top: var(--sp-10);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  max-width: 100%;
  overflow: hidden;
}

.pricing-cta h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-3);
}

.pricing-cta p {
  font-size: var(--text-body);
  opacity: 0.9;
  margin-bottom: var(--sp-6);
}

.pricing-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

.pricing-cta .btn-white {
  background: var(--color-white);
  color: var(--color-primary);
}

.pricing-cta .btn-white:hover {
  background: var(--gray-100);
}

.pricing-cta .btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: var(--color-white);
}

.pricing-cta .btn-outline-light:hover {
  background: rgba(255,255,255,0.15);
}

/* ── Helper Note ──────────────────────────────────────────── */
.pricing-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--status-info-bg);
  border: 1px solid var(--status-info-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-6);
  color: var(--status-info-text);
  font-size: var(--text-small);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pricing-note i {
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── Hidden state for JS filtering ────────────────────────── */
.pricing-card.is-hidden,
.pricing-tier-card.is-hidden,
.pricing-flat-card.is-hidden {
  display: none !important;
}

.pricing-route-panel {
  display: none;
}

.pricing-route-panel.is-active {
  display: block;
  animation: fadeIn var(--t-normal) ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (min-width: 640px) {
  .pricing-route-switcher {
    grid-template-columns: 1fr 1fr;
    padding: 0 var(--sp-6);
  }

  .pricing-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pricing-contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pricing-hero {
    padding: var(--sp-16) var(--sp-6);
  }

  .pricing-hero h1 {
    font-size: 3rem;
  }

  .pricing-filters {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .pricing-search {
    flex: 1;
    max-width: 400px;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-contact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .page-main {
    padding-top: var(--sp-5);
  }

  .pricing-hero {
    padding: var(--sp-8) var(--sp-4) var(--sp-10);
  }

  .pricing-hero h1 {
    font-size: 2.15rem;
    max-width: 9ch;
    margin-inline: auto;
  }

  .pricing-hero .hero-subtitle {
    font-size: 1.05rem;
    line-height: var(--lh-snug);
    max-width: 18rem;
    margin-inline: auto;
  }

  .pricing-hero .hero-reassurance {
    font-size: 0.95rem;
    line-height: var(--lh-relaxed);
    max-width: 19rem;
    margin-inline: auto;
  }

  .pricing-route-switcher {
    margin-top: 0;
    gap: var(--sp-3);
  }

  .pricing-route-btn {
    gap: var(--sp-2);
    padding: var(--sp-4);
    font-size: 1.05rem;
    min-height: 64px;
    border-radius: var(--radius-md);
  }

  .pricing-route-btn .route-arrow {
    font-size: 1.15rem;
  }

  .pricing-summary,
  .pricing-contact,
  .pricing-cta {
    border-radius: var(--radius-md);
    padding: var(--sp-5);
  }

  .pricing-summary {
    margin-top: var(--sp-5);
  }

  .pricing-summary-header {
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
  }

  .pricing-summary-header h2,
  .pricing-section-title {
    font-size: 1.35rem;
  }

  .pricing-summary-grid {
    gap: var(--sp-3);
  }

  .pricing-summary-item {
    font-size: 0.95rem;
    line-height: var(--lh-snug);
  }

  .pricing-grid {
    gap: var(--sp-4);
  }

  .pricing-card-header,
  .pricing-card-body,
  .pricing-tier-card,
  .pricing-flat-card,
  .pricing-note {
    padding: var(--sp-4);
  }

  .pricing-flat-card {
    gap: var(--sp-3);
  }

  .pricing-flat-card .flat-icon {
    width: 40px;
    height: 40px;
  }

  .pricing-flat-card .flat-price {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .pricing-tier-card {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .pricing-tier-card .tier-price {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .pricing-card-price .price-main,
  .pricing-tier-card .tier-price-main {
    font-size: 1.15rem;
  }
}