/* ============================================================
   WP-03 — Tarifs
   ============================================================ */

/* Réutilise .page-hero de WP-02 via wp-global ou redéfinit si absent */
.page-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, #163e9e 100%);
  color: var(--color-white);
  padding: var(--sp-10) 0 var(--sp-8);
}
.page-hero .breadcrumb { margin-bottom: var(--sp-4); }
.page-hero .breadcrumb a { color: rgba(255,255,255,.7); font-size: var(--text-small); }
.page-hero .breadcrumb a:hover { color: var(--color-white); }
.page-hero .breadcrumb span { color: rgba(255,255,255,.5); margin: 0 var(--sp-2); font-size: var(--text-small); }
.page-hero .breadcrumb [aria-current] { color: rgba(255,255,255,.9); font-size: var(--text-small); }
.page-hero-title { color: var(--color-white); font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: var(--sp-3); }
.page-hero-sub   { opacity: .85; max-width: 560px; font-size: clamp(var(--text-body), 2vw, 1.0625rem); line-height: var(--lh-relaxed); }

/* ── Tableau tarifaire ───────────────────────────────────────── */
.tarif-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.tarif-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  font-size: var(--text-small);
}

.tarif-table thead {
  background: var(--color-primary);
  color: var(--color-white);
}

.tarif-table thead th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.tarif-table tbody tr {
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--t-fast);
}
.tarif-table tbody tr:hover { background: var(--gray-50); }
.tarif-table tbody tr:last-child { border-bottom: none; }

.tarif-table td {
  padding: var(--sp-3) var(--sp-4);
  color: var(--gray-700);
}

.tarif-price {
  font-weight: var(--fw-bold);
  color: var(--color-primary) !important;
  white-space: nowrap;
}

/* ── Section express + notes ─────────────────────────────────── */
.tarif-express-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}

@media (max-width: 768px) { .tarif-express-wrap { grid-template-columns: 1fr; } }

.tarif-express-card {
  background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
}
.tarif-express-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(255,255,255,.15);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-4);
}
.tarif-express-card h2 { color: var(--color-white); margin-bottom: var(--sp-3); font-size: var(--text-h3); }
.tarif-express-card p  { opacity: .88; line-height: var(--lh-relaxed); margin-bottom: var(--sp-3); }
.tarif-express-note    { font-size: var(--text-caption); opacity: .7; }
.tarif-express-card .btn { margin-top: var(--sp-4); }

.tarif-notes {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.tarif-notes h3  { font-family: var(--font-heading); font-size: var(--text-h4); margin-bottom: var(--sp-4); }
.tarif-notes ul  { display: flex; flex-direction: column; gap: var(--sp-3); padding-left: var(--sp-4); }
.tarif-notes li  { font-size: var(--text-small); color: var(--gray-600); line-height: var(--lh-relaxed); }
.tarif-notes li::marker { color: var(--color-accent); }

/* ── btn-white (réutilisé) ───────────────────────────────────── */
.btn-white {
  background: var(--color-white);
  color: var(--color-accent-dark);
  border: 2px solid var(--color-white);
}
.btn-white:hover { background: transparent; color: var(--color-white); }