/* ==========================================================================
   JURISDICTION MATRIX — comparateur filtrable (hub /comparisons)
   Tableau une-ligne-par-juridiction, tri par colonne + filtre par régime.
   Réutilise les tokens de variables.css ; s'inscrit sous .section existante.
   ========================================================================== */

.jmatrix__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-6);
}
.jmatrix__filter {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-primary);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: var(--transition-fast);
}
.jmatrix__filter:hover { border-color: var(--color-accent-primary); color: var(--color-accent-primary); }
.jmatrix__filter[aria-pressed="true"] {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

.jmatrix__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.jmatrix {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--color-bg-secondary);
  font-size: var(--text-sm);
}
.jmatrix thead th {
  position: sticky;
  top: 0;
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  font-family: var(--font-subheading);
  font-weight: var(--weight-semibold);
  text-align: left;
  padding: var(--space-4);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.jmatrix thead th:first-child { position: sticky; left: 0; z-index: 2; }
.jmatrix thead th[aria-sort] .jmatrix__arrow { opacity: 1; }
.jmatrix__arrow { display: inline-block; margin-left: var(--space-1); opacity: 0.35; font-size: var(--text-xs); transition: var(--transition-fast); }
.jmatrix th[aria-sort="descending"] .jmatrix__arrow { transform: rotate(180deg); }

.jmatrix tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-secondary);
  color: var(--color-text-primary);
  white-space: nowrap;
}
.jmatrix tbody td:first-child {
  position: sticky;
  left: 0;
  background: var(--color-bg-secondary);
  font-weight: var(--weight-semibold);
  z-index: 1;
}
.jmatrix tbody tr:hover td { background: var(--color-bg-accent); }
.jmatrix tbody tr:hover td:first-child { background: var(--color-bg-accent); }

.jmatrix__country { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; }
.jmatrix__country:hover { color: var(--color-accent-primary); }
.jmatrix__country .flag { width: 22px; height: 16px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--color-border-secondary); }

.jmatrix tr[data-ref="1"] td { background: var(--color-lettonie-light); }
.jmatrix tr[data-ref="1"] td:first-child { background: var(--color-lettonie-light); }
.jmatrix tr[data-ref="1"]:hover td,
.jmatrix tr[data-ref="1"]:hover td:first-child { background: #cfe0fd; }
.jmatrix__ref-badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
  font-size: 0.68rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  vertical-align: middle;
}

.jmatrix__val--good { color: var(--color-success); font-weight: var(--weight-semibold); }
.jmatrix__val--bad { color: var(--color-france); }
.jmatrix__val--na { color: var(--color-text-tertiary); }

.jmatrix__regime { display: inline-flex; gap: var(--space-1); flex-wrap: wrap; }
.jmatrix__tag {
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}
.jmatrix__tag--eu { background: var(--color-accent-primary-light); color: var(--color-accent-primary-hover); }
.jmatrix__tag--euro { background: var(--color-accent-secondary-light); color: var(--color-accent-secondary-hover); }
.jmatrix__tag--noneu { background: var(--color-warning-light); color: #92600b; }

.jmatrix__empty { text-align: center; padding: var(--space-8); color: var(--color-text-secondary); font-size: var(--text-base); }
.jmatrix__note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-tertiary); text-align: center; }
.jmatrix__cta { text-align: center; margin-top: var(--space-8); }

@media (max-width: 640px) {
  .jmatrix { font-size: var(--text-xs); }
  .jmatrix thead th, .jmatrix tbody td { padding: var(--space-3); }
}