/* Pages villes (/musiciens, /musiciens/:ville, /musiciens/:ville/:instrument)
   + le baromètre local, partagé avec la Sélection. Mobile d'abord. */

/* ─── Baromètre ─────────────────────────────────────────────────────────── */
.baro {
  display: grid;
  gap: var(--s-3);
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, var(--vu-soft), transparent 70%),
    var(--surface);
}
.baro__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.15rem, 1rem + 1.2vw, 1.6rem);
  line-height: 1.1;
  max-width: 40rem;
}
.baro__scroll {
  overflow-x: auto;
}
.baro__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.baro__table th,
.baro__table td {
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: middle;
}
.baro__table thead th {
  font-size: 0.875rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  line-height: 1.25;
}
.baro__table th:first-child {
  text-align: left;
}
.baro__table tbody th {
  font-weight: 700;
}
.baro__table td {
  font-family: var(--font-display);
  font-size: 1.05rem;
  width: 6.5rem;
}
.baro__emoji {
  display: inline-block;
  width: 1.6rem;
}
.baro__table tr.is-scarce td:last-child {
  /* Chiffre en taille texte (≈ 17 px), aussi sur la ligne surlignée : l'orange « texte » passe AA partout. */
  color: var(--accent-text);
}
.baro__table tr.is-current {
  background: var(--accent-soft);
}
.baro__table .badge {
  margin-left: 0.3rem;
}
@media (max-width: 420px) {
  .baro__table .badge {
    display: none;
  }
}

/* ─── Pages villes ──────────────────────────────────────────────────────── */
.city > * + * {
  margin-top: var(--s-6);
}
.city-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  color: var(--text-muted);
  padding-top: var(--s-2);
}
.city-crumbs a {
  color: var(--text-muted);
}
.city-crumbs [aria-current] {
  color: var(--text);
  font-weight: 700;
}

.city-hero {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-4) var(--s-2);
}
.city-hero__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 1rem + 5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--accent-strong);
  overflow-wrap: break-word;
}
.city-hero__lead {
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 44rem;
  line-height: 1.5;
}
.city-hero .btn-row {
  align-items: center;
}

.city-section__head {
  display: grid;
  gap: var(--s-1);
  margin-bottom: var(--s-4);
}
.city-section__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-lg);
  line-height: 1.1;
}
.city-section > .city-section__title {
  margin-bottom: var(--s-4);
}

/* ─── Page ville (§0.10) : en-tête court ────────────────────────────────── */
.city-head {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-2);
}
.city-head__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.55rem, 1.05rem + 2.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent-strong);
  overflow-wrap: break-word;
}
.city-head__lead {
  color: var(--text-muted);
  max-width: 46rem;
  line-height: 1.5;
}
.city-head__lead a {
  font-weight: 700;
  color: var(--accent-text);
}
.city > .city-head + .city-hub {
  margin-top: var(--s-4);
}

/* ─── Les trois onglets par intention, avec leur compteur ───────────────── */
.city-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.city-tab {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: var(--s-2);
  min-width: 0;
  padding: 0.75rem 0.85rem 0.7rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.city-tab:hover {
  border-color: var(--line-strong);
  color: var(--text);
}
.city-tab:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.city-tab[aria-current='page'] {
  border-color: var(--accent);
  background:
    linear-gradient(var(--accent-soft), var(--accent-soft)),
    var(--surface);
  color: var(--text);
  box-shadow: inset 0 -4px 0 var(--accent);
}
.city-tab__label {
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.city-tab__short {
  display: none;
}
/* Ce que montre l'onglet, en clair (« des groupes qui cherchent quelqu'un »). */
.city-tab__sub {
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--text-muted);
}
.city-tab[aria-current='page'] .city-tab__sub {
  color: var(--text);
}
/* Mobile : la ligne de l'onglet courant, sous les onglets (dans l'onglet, elle ne tient pas). */
.city-tabs__hint {
  display: none;
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.city-tab__count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.35rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.city-tab__count strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text);
}
.city-tab[aria-current='page'] .city-tab__count strong {
  color: var(--accent-text);
}
/* Mobile : libellés courts (« Groupes qui recrutent » · « Musicien·nes » · « Bœufs »), le chiffre seul. */
@media (max-width: 599px) {
  .city-tabs {
    gap: 0.4rem;
  }
  .city-tab {
    padding: 0.55rem 0.5rem 0.5rem;
    gap: 0.3rem;
  }
  .city-tab__long,
  .city-tab__noun {
    display: none;
  }
  .city-tab__short {
    display: inline;
  }
  /* L'explication reste lue par les lecteurs d'écran (dans l'onglet) ; à l'œil, elle passe sous les onglets. */
  .city-tab__sub {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .city-tabs__hint {
    display: block;
  }
  .city-tab__label {
    font-size: 0.9rem;
  }
  .city-tab__count strong {
    font-size: 1.15rem;
  }
}
/* 320-360 px : « Musicien·nes » tient sur une ligne. */
@media (max-width: 359px) {
  .city-tab {
    padding-inline: 0.4rem;
  }
  .city-tab__label {
    font-size: 0.875rem;
    overflow-wrap: anywhere;
  }
}

/* Bœufs : les tickets, sur deux colonnes en grand écran */
.city-jams {
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 1100px) {
  .city-jams {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Après la liste : prendre contact (une ligne, pas un bandeau) */
.city-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.city-cta p {
  flex: 1 1 18rem;
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ─── Le baromètre en une ligne (« Ça manque à Paris : batterie, basse »), le détail replié ─── */
.city-baro {
  display: grid;
  gap: var(--s-2);
}
.city-baro__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  font-size: 0.95rem;
}
.city-baro__label {
  font-weight: 750;
  color: var(--text);
}
.city-baro__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.city-baro__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-btn);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}
.city-baro__chip:hover {
  background: var(--accent);
  color: var(--on-accent);
}
.city-baro__more > summary {
  display: inline-block;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.city-baro__more[open] > summary {
  margin-bottom: var(--s-3);
}

/* ─── Tout en bas, discrets : studios & lieux, maillage, FAQ ───────────── */
.city-more {
  display: grid;
  gap: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.city-more__title {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-muted);
}
.city-faq > .city-more__title {
  margin-bottom: var(--s-3);
}
.city-venues-line {
  color: var(--text-muted);
  line-height: 1.7;
}
.city-venues-line a {
  color: var(--text-muted);
}
.city-venues-line a:hover {
  color: var(--text);
}
.city-more .city-links {
  padding-top: 0;
  border-top: 0;
}
.city-more .city-links__list a {
  padding: 0.25rem 0.6rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.city-more .city-links__list a:hover {
  color: var(--text);
}

/* Dernier appel */
.city-final {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 70% 90% at 0% 100%, rgb(255 107 31 / 0.22), transparent 70%),
    var(--surface-2);
  border: 1px solid var(--line);
}
.city-final__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-2xl);
  line-height: 1;
  max-width: 36rem;
}
.city-final p {
  color: var(--text-muted);
  max-width: 40rem;
}

/* Maillage interne */
.city-links {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.city-links__group {
  display: grid;
  gap: var(--s-2);
}
.city-links__label {
  font-size: 0.875rem;
  font-weight: 750;
  color: var(--text-muted);
}
.city-links__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.city-links__list a {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  text-decoration: none;
}
.city-links__list a:hover {
  border-color: var(--line-strong);
}
.city-instruments {
  display: grid;
  gap: var(--s-4);
}

/* /musiciens : la grille des villes */
.city-grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-2);
  /* Mobile : deux villes par ligne dès 320 px (une seule, c'est 40 tuiles à faire défiler). */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.75rem), 1fr));
}
@media (min-width: 600px) {
  .city-grid {
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  }
}
.city-tile {
  display: grid;
  gap: 0.2rem;
  height: 100%;
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s var(--ease);
}
.city-tile:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.city-tile__name {
  font-weight: 820;
}
.city-tile__meta {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.city-tile__meta strong {
  color: var(--accent-text);
}