/* ============================================================
   TERRITOIRES : blocs du bas des pages ville et arrondissement
   (19/10/2026, etape 6 du chantier sur la valeur du contenu).

   Chargee par auto-ecoles/index.php (gabarit ville) et
   auto-ecoles/arrondissement.php, apres socle.css et listing.css.
   Habille les fonctions de includes/stats-blocs.php :
   bdBlocComparatifEcoles, bdBlocChiffres, bdBlocConstats.
   Toutes les classes commencent par tr-. Les variables rf-
   viennent de socle.css (elles vivent sur main.rf).

   Rappel : un texte de commentaire ne doit jamais contenir
   la suite etoile puis barre, sauf pour fermer le commentaire.
   ============================================================ */

/* Sections : un espace modeste entre deux blocs empiles */

.tr-section {
  padding-bottom: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);
}

.tr-entete {
  margin-bottom: 24px;
}

.tr-entete .rf-texte {
  margin-bottom: 0;
}

/* Repères de haut de page : 2 ou 1 colonne quand un repère est retiré */

.tr-reperes--2 .rf-reperes__rangee {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tr-reperes--1 .rf-reperes__rangee {
  grid-template-columns: minmax(0, 1fr);
}

/* Tableau comparatif : défile dans son cadre, jamais la page */

.tr-comparatif {
  max-width: 100%;
}

.tr-comparatif:focus-visible {
  outline: 2px solid var(--rf-accent);
  outline-offset: 3px;
}

.tr-comparatif .table {
  min-width: 940px;
  font-size: var(--rf-t-petit);
}

.tr-comparatif .table th,
.tr-comparatif .table td {
  padding: 12px 14px;
  vertical-align: middle;
}

.tr-comparatif .table th {
  white-space: normal;
}

.tr-comparatif .table td {
  white-space: nowrap;
}

.tr-comparatif .table tbody th {
  font-size: var(--rf-t-petit);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--rf-encre);
  background: var(--rf-blanc);
  border-bottom: 1px solid #F1F5F9;
}

.tr-comparatif .table tbody tr:last-child th {
  border-bottom: none;
}

.tr-comparatif .table tbody th a {
  color: var(--rf-lien);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* La colonne des écoles reste visible pendant le défilement */

.tr-comparatif .table thead th:first-child,
.tr-comparatif .table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 190px;
  max-width: 260px;
  box-shadow: 1px 0 0 var(--rf-ligne);
}

.tr-comparatif .table thead th:first-child {
  background: #FAFBFC;
}

.tr-forfait__libelle {
  display: block;
  color: var(--rf-gris);
}

.tr-forfait__prix {
  display: block;
  font-weight: 700;
  color: var(--rf-encre);
  font-variant-numeric: tabular-nums;
}

.tr-nombre {
  font-variant-numeric: tabular-nums;
}

.tr-centre {
  text-align: center;
}

.tr-comparatif .table thead th:nth-child(n + 6) {
  text-align: center;
}

.tr-oui {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--rf-accent-doux);
  color: var(--rf-lien);
  font-weight: 600;
}

.tr-note__valeur {
  font-weight: 700;
}

.tr-note__avis {
  color: var(--rf-gris-clair);
}

.tr-legende {
  margin: 16px 0 0;
  max-width: 78ch;
}

/* « En chiffres » : une grille de chiffres, sans carte décorative */

.tr-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0 0 40px;
  padding: 0;
}

.tr-chiffre {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--rf-ligne);
  border-radius: var(--rf-rayon);
  background: var(--rf-blanc);
}

.tr-chiffre__nom {
  margin: 0 0 10px;
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-gris-clair);
}

.tr-chiffre__valeur {
  margin: 0;
  font-size: var(--rf-t-titre);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.tr-chiffre__detail {
  margin: 10px 0 0;
  font-size: var(--rf-t-petit);
  color: var(--rf-gris);
}

.tr-chiffre__detail--fort {
  font-weight: 600;
  color: var(--rf-lien);
}

.tr-chiffre__detail--fort + .tr-chiffre__detail {
  margin-top: 4px;
}

/* Nombre d'auto-écoles par option */

.tr-options {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 32px;
  max-width: 880px;
}

.tr-option {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--rf-ligne);
}

.tr-option__nombre {
  flex: none;
  min-width: 4.5ch;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tr-option__nom {
  color: var(--rf-gris);
}

/* « Avant de choisir » : des phrases, un point d'accent devant chacune */

.tr-constats {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 68ch;
}

.tr-constats li {
  position: relative;
  padding-left: 24px;
  text-wrap: pretty;
}

.tr-constats li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rf-accent);
}

/* Téléphone : repères sur une colonne, chiffres moins serrés */

@media (max-width: 640px) {
  .tr-reperes--2 .rf-reperes__rangee,
  .tr-reperes--1 .rf-reperes__rangee {
    grid-template-columns: minmax(0, 1fr);
  }

  .tr-chiffre {
    padding: 18px 18px;
  }

  .tr-comparatif .table thead th:first-child,
  .tr-comparatif .table tbody th {
    min-width: 150px;
    max-width: 170px;
  }
}