/* Pages de liste -------------------------------------------------------- */
.tlb-liste__entete { background: var(--tlb-surface); border-bottom: 1px solid var(--tlb-filet); padding: 1.75rem 0; }
.tlb-liste__titre { margin: 0; font-size: clamp(1.5rem, 3vw, 2.125rem); }
.tlb-liste__chapo { margin-top: .75rem; max-width: 70ch; color: var(--tlb-attenue); }

.tlb-liste { display: grid; gap: var(--tlb-gouttiere); grid-template-columns: 260px 1fr; padding: 1.5rem 0 3rem; }

/* Filtres : repliés sur mobile, colonne ouverte sur desktop. */
.tlb-filtres { background: var(--tlb-surface); border: 1px solid var(--tlb-filet); border-radius: var(--tlb-rayon-carte); }
.tlb-filtres__resume { padding: .75rem 1rem; font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.tlb-filtres__form { padding: 0 1rem 1rem; }
.tlb-filtres__groupe { border: 0; padding: 0; margin: 0 0 1.25rem; }
.tlb-filtres__groupe legend { font-weight: 600; font-size: .9375rem; padding: 0; margin-bottom: .5rem; }
.tlb-filtres__option { display: flex; align-items: center; gap: .5rem; min-height: 36px; font-size: .9375rem; }
.tlb-filtres__option b { margin-left: auto; color: var(--tlb-attenue); font-weight: 500; }
.tlb-filtres__option input[type="number"] { width: 100%; min-height: 44px; padding: .35rem .5rem; border: 1px solid var(--tlb-filet); border-radius: var(--tlb-rayon-bouton); font: inherit; }
.tlb-filtres__appliquer { width: 100%; }

.tlb-resultats { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tlb-resultats__nombre { margin: 0; color: var(--tlb-attenue); }
.tlb-resultats__tri { display: flex; align-items: center; gap: .5rem; }
.tlb-resultats__tri select { min-height: 44px; border: 1px solid var(--tlb-filet); border-radius: var(--tlb-rayon-bouton); padding: .35rem .5rem; font: inherit; }
.tlb-resultats__ok { background: var(--tlb-surface); border: 1px solid var(--tlb-filet); color: var(--tlb-encre); }

/* Rangée : vignette | date perforée | infos | achat */
.tlb-rangees { display: flex; flex-direction: column; gap: .75rem; }
.tlb-rangee { background: var(--tlb-surface); border-radius: var(--tlb-rayon-carte); box-shadow: var(--tlb-ombre-carte); overflow: hidden; }
.tlb-rangee__lien { display: flex; align-items: stretch; color: inherit; text-decoration: none; }
.tlb-rangee__visuel { flex: 0 0 110px; }
.tlb-rangee__visuel .tlb-vignette { height: 100%; }
.tlb-rangee__date { flex: 0 0 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--tlb-violet-50); border-right: 2px dashed var(--tlb-filet); }
.tlb-rangee__jour { font-size: 1.5rem; color: var(--tlb-violet-700); font-variant-numeric: tabular-nums; }
.tlb-rangee__mois { text-transform: uppercase; font-size: .75rem; color: var(--tlb-attenue); }
/* Heure : rendue seulement quand elle est réelle (le gabarit écarte « 00:00 »,
   qui vaut « billet daté à la journée »). Discrète sous le mois — la pastille
   reste lisible d'un coup d'œil comme un talon de billet. */
.tlb-rangee__heure { font-size: .6875rem; color: var(--tlb-attenue); margin-top: .1rem; }
.tlb-rangee__infos { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .25rem; padding: .875rem 1rem; }
.tlb-rangee__titre { font-weight: 600; }
.tlb-rangee__lieu { font-size: .875rem; color: var(--tlb-attenue); }
.tlb-rangee__achat { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: .5rem; padding: .875rem 1rem; border-left: 2px dashed var(--tlb-filet); }
.tlb-rangee__prix { text-align: right; line-height: 1.2; }
.tlb-rangee__prix b { display: block; font-size: 1.125rem; }
.tlb-rangee__prix span { font-size: .75rem; color: var(--tlb-attenue); }

.tlb-vide { background: var(--tlb-surface); border-radius: var(--tlb-rayon-carte); padding: 2rem; text-align: center; }
.tlb-vide__suggestions { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

.tlb-salles { display: grid; gap: var(--tlb-gouttiere); grid-template-columns: repeat(3, 1fr); padding: 1.5rem 0; }
.tlb-salle { background: var(--tlb-surface); border-radius: var(--tlb-rayon-carte); box-shadow: var(--tlb-ombre-carte); }
.tlb-salle__lien { display: block; padding: 1rem; color: inherit; text-decoration: none; }
.tlb-salle__titre { margin: 0 0 .35rem; font-size: 1.0625rem; }
.tlb-salle__adresse, .tlb-salle__compteur { margin: 0; font-size: .875rem; color: var(--tlb-attenue); }

.tlb-maillage { padding: 2rem 0 3rem; border-top: 1px solid var(--tlb-filet); }
.tlb-maillage__grille { display: grid; gap: var(--tlb-gouttiere); grid-template-columns: repeat(3, 1fr); }
.tlb-maillage__titre { font-size: 1rem; margin: 0 0 .5rem; }
.tlb-maillage ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }

/* Villes actives — ajouté le 2026-07-21.
   Le gabarit villes-actives.php émettait .tlb-villes-actives* depuis toujours,
   sans qu'aucune règle ne les définisse : la section sortait en <ul> nu, puces
   et liens soulignés (constat sur capture de production, page « ce soir »).
   Le composant avait visiblement été écrit sur le modèle de .tlb-maillage
   ci-dessus, avec de nouveaux noms de classes, sans que le CSS suive. */
.tlb-villes-actives { padding: 2rem 0 3rem; border-top: 1px solid var(--tlb-filet); }
.tlb-villes-actives__titre { font-size: 1rem; margin: 0 0 .75rem; }
.tlb-villes-actives__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tlb-villes-actives__liste a {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; padding: .35rem .75rem;
  border: 1px solid var(--tlb-filet); border-radius: var(--tlb-rayon-bouton);
  background: var(--tlb-surface); color: var(--tlb-texte); text-decoration: none;
  font-size: .9375rem;
}
.tlb-villes-actives__liste a:hover { border-color: var(--tlb-filet-fort); }
.tlb-villes-actives__liste b { color: var(--tlb-attenue); font-weight: 500; }

/* Pagination — ajouté le 2026-07-21.
   pagination.php passe 'class' => 'tlb-pagination' à the_posts_pagination(),
   mais AUCUNE règle ne ciblait cette classe : le balisage sortait tel que
   WordPress le produit, d'où les puces et les liens soulignés vus en production
   (§31 l'avait relevé sur /salles sans en tenir la cause).
   Les deux sélecteurs de conteneur sont volontaires : selon la version,
   the_posts_pagination() enveloppe les numéros dans .nav-links ou dans un <ul>.
   Cibler les deux évite de dépendre d'un détail de version de WordPress.
   Pas de font-variant-numeric ici : sans effet, les polices du thème ne portent
   pas « tnum » (§33) — et chaque numéro est déjà centré dans sa propre boîte. */
.tlb-pagination { margin-top: 2rem; }
.tlb-pagination .nav-links,
.tlb-pagination ul {
  display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center;
  list-style: none; margin: 0; padding: 0;
}
.tlb-pagination li { list-style: none; }
/* ⚠️ Ne JAMAIS cibler « .page-numbers » seul : avec type=list, paginate_links()
   pose cette classe sur le <ul> CONTENEUR autant que sur les liens. La règle
   pastille s'y appliquait, et comme elle est plus spécifique que
   « .tlb-pagination ul » elle écrasait le display:flex — le conteneur devenait
   une grille bordée à une colonne, d'où les numéros empilés verticalement sur
   ce-soir et ce-week-end (constat du 2026-07-21).
   D'où le ciblage par enfant direct, qui couvre les deux balisages sans jamais
   atteindre un conteneur : .nav-links > a|span (the_posts_pagination, archives)
   et li > a|span (paginate_links type=list, pages dynamiques). */
.tlb-pagination .nav-links > .page-numbers,
.tlb-pagination li > .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 44px; min-height: 44px; padding: 0 .6rem;
  border: 1px solid var(--tlb-filet); border-radius: var(--tlb-rayon-bouton);
  background: var(--tlb-surface); color: var(--tlb-attenue);
  text-decoration: none; font-weight: 700; font-size: .875rem;
}
.tlb-pagination .nav-links > a.page-numbers:hover,
.tlb-pagination li > a.page-numbers:hover { border-color: var(--tlb-filet-fort); color: var(--tlb-texte); }
/* Page courante : violet-500 sur blanc = 5,7:1, conforme AA (maquette C). */
.tlb-pagination .nav-links > .page-numbers.current,
.tlb-pagination li > .page-numbers.current {
  background: var(--tlb-violet-500); border-color: var(--tlb-violet-500); color: var(--tlb-surface);
}
.tlb-pagination .nav-links > .page-numbers.dots,
.tlb-pagination li > .page-numbers.dots { border-color: transparent; background: transparent; }

@media (min-width: 981px) {
  /* Sur desktop, les filtres sont une colonne toujours ouverte : on masque le
     résumé et on révèle le contenu même <details> fermé.
     ⚠️ La version précédente posait « display: block » sur .tlb-filtres__form
     d'un <details> fermé. Sans effet : un navigateur ne rend pas le contenu
     d'un <details> fermé, quel que soit le display posé sur l'enfant — le
     masquage relève du modèle de rendu de l'élément, pas d'une règle héritable.
     Résultat en production : résumé masqué + contenu inaccessible = colonne
     vide sur toutes les pages de liste (constat visuel du 2026-07-20, §32).
     ::details-content est le seul moyen d'atteindre ce contenu en CSS. */
  .tlb-filtres { position: sticky; top: 1rem; }
  .tlb-filtres__resume { display: none; }
  .tlb-filtres::details-content { content-visibility: visible; }
  .tlb-filtres__form { padding-top: 1rem; }
}

/* Repli pour les navigateurs sans ::details-content (Chrome/Edge < 131,
   Safari < 18.4, Firefox < 143 — ~17 % mondial, mais la règle ci-dessus ne
   sert QUE sur desktop, soit ~30 % du trafic ici). Sans cette garde, ils
   retomberaient exactement dans le bug corrigé : panneau invisible.
   Avec elle, le « Filtrer » redevient cliquable — dégradé mais fonctionnel. */
@supports not selector(::details-content) {
  @media (min-width: 981px) {
    .tlb-filtres__resume { display: flex; }
  }
}
@media (max-width: 980px) {
  .tlb-liste { grid-template-columns: 1fr; }
  .tlb-salles, .tlb-maillage__grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tlb-rangee__lien { flex-wrap: wrap; }
  .tlb-rangee__visuel { flex: 0 0 100%; }
  .tlb-rangee__achat { border-left: 0; border-top: 2px dashed var(--tlb-filet); width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
  .tlb-salles, .tlb-maillage__grille { grid-template-columns: 1fr; }
}