/* Classement pickleball France : surcouches dédiées.
   Couleurs dérivées des tokens --bp-* (donc adaptation automatique au dark mode),
   police système héritée (--bp-font, aucune font-family ici), typographie
   volontairement large (lecture 50+), grilles mobile-first (1 colonne par défaut,
   colonnes ajoutées en min-width). */

.bp-classement-shell {
  padding-top: clamp(16px, 2vw, 28px);
}

.bp-classement-breadcrumb {
  font-size: 0.98rem;
  margin-bottom: 0.9rem;
}

.bp-classement-breadcrumb__current {
  color: var(--bp-text);
  font-weight: 800;
}

/* Badge de fraîcheur : famille de marque (ambre/brun), tokenisée pour le dark mode. */
.bp-classement-freshness {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  color: var(--bp-text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}

.bp-classement-freshness strong {
  color: var(--bp-text-body-soft);
}

.bp-classement-freshness__checked {
  display: block;
  font-size: 0.95rem;
  color: var(--bp-text-soft);
}

.bp-classement-owner-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bp-brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bp-brand) 20%, transparent);
  color: var(--bp-accent-text);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.bp-classement-page--shell,
.bp-classement-page--top50 {
  display: grid;
  gap: 0.8rem;
}

.bp-classement-page--shell .bp-container--narrow,
.bp-classement-page--top50 .bp-container--narrow {
  width: min(100%, 1120px);
  max-width: 1120px;
}

.bp-classement-page--shell .bp-classement-top50-header,
.bp-classement-top50-header,
.bp-classement-page--shell .bp-classement-top50-method-section,
.bp-classement-top50-method-section,
.bp-classement-page--shell .bp-classement-top50-results,
.bp-classement-top50-results {
  padding-block: 0;
}

.bp-classement-page--shell .bp-classement-top50-head,
.bp-classement-top50-head {
  display: grid;
  gap: 0.8rem;
}

.bp-classement-page--shell .bp-classement-top50-head__title,
.bp-classement-top50-head__title {
  margin: 0;
  max-width: 18ch;
  color: var(--bp-text);
  font-size: clamp(2.15rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.bp-classement-page--shell .bp-classement-top50-head__lead,
.bp-classement-page--shell .bp-classement-top50-head__note,
.bp-classement-top50-head__lead,
.bp-classement-top50-head__note {
  margin: 0;
  max-width: 70ch;
}

.bp-classement-page--shell .bp-classement-top50-head__lead,
.bp-classement-top50-head__lead {
  color: var(--bp-text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}

.bp-classement-page--shell .bp-classement-top50-head__note,
.bp-classement-top50-head__note {
  color: var(--bp-text-soft);
  font-size: 1rem;
  line-height: 1.5;
}

.bp-classement-top50-stack {
  display: grid;
  gap: 0.9rem;
}

.bp-classement-page .bp-classement-summary {
  max-width: 58rem;
}

.bp-classement-player-main {
  min-width: 0;
}

.bp-classement-player .bp-hero .bp-stack--lg {
  gap: 0.95rem;
}

/* Portrait joueur : optionnel, alimenté par une proposition vérifiée.
   Le wrapper .bp-media-card (site-wide-ui.css) gère déjà object-fit: cover. */
.bp-classement-player__portrait {
  width: min(190px, 62%);
  margin: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid color-mix(in srgb, var(--bp-brand) 22%, var(--bp-border-soft));
}

@media (min-width: 48rem) {
  .bp-classement-player__portrait {
    width: 200px;
  }
}

.bp-classement-player .bp-classement-summary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: none;
  padding: clamp(1.15rem, 3vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--bp-brand) 30%, var(--bp-border-soft));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bp-brand) 8%, var(--bp-surface)) 0%, var(--bp-surface) 58%),
    var(--bp-surface);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--bp-brand-dark) 12%, transparent);
}

.bp-classement-player .bp-classement-summary::after {
  position: absolute;
  z-index: -1;
  right: -4.5rem;
  bottom: -6.5rem;
  width: 15rem;
  height: 15rem;
  border: 1.25rem solid color-mix(in srgb, var(--bp-brand) 7%, transparent);
  border-radius: 50%;
  content: "";
}

.bp-classement-player-summary__brand,
.bp-classement-player-summary__head {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
}

.bp-classement-player-summary__brand {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--bp-brand) 18%, transparent);
}

.bp-classement-player-summary__brand-name {
  color: var(--bp-brand-dark);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.015em;
}

.bp-classement-player-summary__brand-type {
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bp-brand) 12%, var(--bp-surface));
  color: var(--bp-accent-text);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bp-classement-player-summary__head {
  align-items: baseline;
  margin-bottom: 0.8rem;
}

.bp-classement-player-summary__head p,
.bp-classement-player-data-date,
.bp-classement-player-comparison,
.bp-classement-player-share-url,
.bp-classement-player-results-date {
  margin: 0;
}

.bp-classement-player-data-date,
.bp-classement-player-results-date {
  color: var(--bp-text-secondary);
  font-size: 0.9rem;
}

.bp-classement-player-comparison {
  margin-top: 0.85rem;
  color: var(--bp-text-secondary);
  font-size: 0.88rem;
  line-height: 1.45;
}

.bp-classement-player-share-url {
  margin-top: 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid color-mix(in srgb, var(--bp-brand) 16%, transparent);
  color: var(--bp-accent-text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.bp-classement-player-share-actions {
  display: grid;
  justify-items: start;
  gap: 0.65rem;
}

/* Mobile-first : boutons empilés pleine largeur par défaut, mis en ligne à partir
   de 481px (doctrine min-width du module, cf. tests/css-architecture-contract). */
.bp-classement-player-share-buttons {
  display: grid;
  width: 100%;
  gap: 0.55rem;
}

.bp-classement-player-share-buttons .bp-btn {
  width: 100%;
  justify-content: center;
}

.bp-classement-player-share-button {
  cursor: pointer;
}

@media (min-width: 481px) {
  .bp-classement-player-share-buttons {
    display: flex;
    flex-wrap: wrap;
    width: auto;
  }

  .bp-classement-player-share-buttons .bp-btn {
    width: auto;
  }
}

.bp-classement-player-share-hint,
.bp-classement-player-share-status {
  max-width: 62ch;
  margin: 0;
  color: var(--bp-text-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
}

.bp-classement-player-share-status:not(:empty) {
  color: var(--bp-accent-text);
  font-weight: 800;
}


.bp-classement-player-results {
  display: grid;
  gap: 0;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--bp-border-soft);
}

.bp-classement-player-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--bp-border-soft);
}

.bp-classement-player-result__main,
.bp-classement-player-result__ranking {
  display: grid;
  gap: 0.2rem;
}

.bp-classement-player-result__category {
  color: var(--bp-brand-dark);
  line-height: 1.3;
}

.bp-classement-player-result__total {
  color: var(--bp-text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.bp-classement-player-result__ranking {
  justify-items: end;
  min-width: 3.7rem;
  text-align: right;
}

.bp-classement-player-result__rank {
  color: var(--bp-brand-dark);
  font-size: clamp(1.35rem, 6vw, 1.75rem);
  line-height: 1;
}

.bp-classement-player-result__movement {
  min-height: 1.35rem;
}

.bp-classement-player-results-date {
  margin: -0.25rem 0 0.9rem;
  line-height: 1.45;
}

.bp-classement-player-main .bp-box h2 {
  max-width: none;
}

.bp-classement-player .bp-summary-number {
  line-height: 1;
  font-size: clamp(1.55rem, 1.05rem + 1.4vw, 1.95rem);
}

.bp-classement-player .bp-summary-label {
  line-height: 1.28;
}

.bp-classement-player-movement {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.35rem;
}

/* Carte joueur mobile-first : rang et explication restent côte à côte sur les petits
   écrans pour produire une capture compacte. Seuls les en-têtes gagnent une disposition
   horizontale lorsque la largeur le permet. */
.bp-classement-player .bp-classement-summary .bp-summary-container--stacked .bp-summary-stat {
  grid-template-columns: minmax(4rem, 4.8rem) 1fr;
  text-align: left;
}

.bp-classement-player .bp-classement-summary .bp-summary-container--stacked .bp-summary-number {
  text-align: right;
}

.bp-classement-player .bp-classement-summary .bp-summary-container--stacked .bp-summary-label {
  text-align: left;
}

@media (min-width: 641px) {
  .bp-classement-player-summary__brand,
  .bp-classement-player-summary__head {
    align-items: center;
    flex-direction: row;
  }
}

@media print {
  .bp-classement-player [data-bp-player-share-card] {
    break-inside: avoid;
    box-shadow: none;
  }
}

.bp-classement-player-quote .bp-quote p {
  font-size: clamp(1.05rem, 2.8vw, 1.16rem);
  line-height: 1.55;
}

.bp-classement-player-facts ul {
  display: grid;
  gap: 0.55rem;
}

.bp-classement-player .bp-box ul {
  padding-left: 1.15rem;
}

.bp-classement-fact-list {
  list-style: none;
  padding-left: 0 !important;
}

.bp-classement-fact-list__item {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--bp-border-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bp-brand) 3%, var(--bp-surface));
}

.bp-classement-fact-list__text {
  color: var(--bp-text);
  line-height: 1.5;
}

.bp-classement-fact-list__source {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 0;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bp-brand) 9%, transparent);
  color: var(--bp-accent-text);
  border: 1px solid color-mix(in srgb, var(--bp-brand) 20%, transparent);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.25;
}

.bp-classement-fact-list__source:hover,
.bp-classement-fact-list__source:focus-visible {
  background: color-mix(in srgb, var(--bp-brand) 14%, transparent);
  color: var(--bp-accent-text);
}

/* Bio éditoriale : le gras léger (**…**) est mis en avant sur la couleur de marque. */
.bp-classement-player-bio p strong {
  font-weight: 800;
  color: var(--bp-brand-dark);
}

/* Bandeau de distinctions : pastilles scannables sous le nom (famille de marque). */
.bp-classement-player-honours {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.bp-classement-player-honour {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  padding: 0.34rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--bp-brand) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bp-brand) 10%, var(--bp-surface));
  color: var(--bp-accent-text);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.3;
}

.bp-classement-player-honour::before {
  content: none !important;
}

/* Club / région : bloc étiqueté plutôt qu'une phrase « Club : … • Région : … ». */
.bp-classement-player-identite {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}

.bp-classement-player-identite__row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.bp-classement-player-identite__label {
  flex-shrink: 0;
  min-width: 4.2rem;
  color: var(--bp-text-soft);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bp-classement-player-identite__value {
  margin: 0;
  color: var(--bp-text);
  font-size: 1rem;
  font-weight: 700;
}

/* Carte « À retenir » : catégorie + repères chiffrés sur la même ligne quand la
   largeur le permet (carte compacte pour capture), le texte passe à la ligne sinon.
   Le nom de catégorie reste visuellement détaché (couleur de marque) du repère chiffré
   (plus discret), sans forcer une seconde ligne. */
.bp-classement-player .bp-summary-label__lead {
  color: var(--bp-brand-dark);
  line-height: 1.3;
}

.bp-classement-player .bp-summary-label__meta {
  color: var(--bp-text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.35;
}

/* Palmarès : place explicite en pastille, reste de la ligne en texte courant. */
.bp-classement-player-palmares {
  display: grid;
  gap: 0.6rem;
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.bp-classement-player-palmares__item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 !important;
  color: var(--bp-text);
  line-height: 1.5;
}

.bp-classement-player-palmares__item::before {
  content: none !important;
}

.bp-classement-player-medal {
  flex-shrink: 0;
  padding: 0.2rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--bp-brand) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bp-brand) 16%, var(--bp-surface));
  color: var(--bp-accent-text);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Blocs de référence : pleine largeur sur mobile, 2 colonnes à partir de 60rem. */
.bp-classement-player-grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 60rem) {
  .bp-classement-player-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    align-items: start;
  }
}

.bp-classement-player-main p,
.bp-classement-player .bp-hero p {
  text-wrap: pretty;
}

.bp-classement-linklist ul {
  display: grid;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

/* Le thème (GeneratePress) garde les <li> en list-item avec puce et marge :
   on force block + reset pour que chaque lien soit une carte propre, sans puce. */
.bp-classement-linklist li {
  display: block;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.bp-classement-linklist li::before,
.bp-classement-linklist li::marker {
  content: none;
}

.bp-classement-linklist__link {
  display: block;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--bp-border-soft);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bp-surface) 0%, color-mix(in srgb, var(--bp-surface) 98%, var(--bp-surface-soft)) 100%);
  color: var(--bp-text);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.bp-classement-linklist__link:hover,
.bp-classement-linklist__link:focus-visible {
  border-color: color-mix(in srgb, var(--bp-brand) 35%, var(--bp-border-soft));
  box-shadow: 0 10px 20px -16px color-mix(in srgb, var(--bp-text) 28%, transparent);
  color: var(--bp-text);
  transform: translateY(-1px);
}

.bp-classement-page .bp-hero .text-lead {
  max-width: 60ch;
  margin-bottom: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.24rem);
  line-height: 1.55;
}

.bp-classement-page .bp-hero .page-meta {
  max-width: 64ch;
  margin-top: -0.15rem;
  font-size: 1rem;
  line-height: 1.5;
}

.bp-classement-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* .bp-section n'a plus de padding propre sur les pages classement (règle juste en dessous),
   donc sans ça chaque nouvelle section (et son chapeau text-accent) démarre collée au
   contenu de la précédente. On espace uniquement à partir de la 2e section : la toute
   première suit déjà l'en-tête de page, qui a sa propre marge. */
.bp-classement-page .bp-section + .bp-section .bp-classement-section-head {
  margin-top: 1.75rem;
}

.bp-classement-page .bp-section {
  padding-block: 0;
}

.bp-classement-page .text-accent {
  margin-bottom: 0.08rem;
}

.bp-classement-page h2 {
  margin-bottom: 0.1rem;
  font-size: clamp(1.75rem, 2.4vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.bp-classement-kpi-grid {
  gap: 0.8rem;
}

.bp-classement-kpi {
  border-top: 3px solid color-mix(in srgb, var(--bp-brand) 24%, var(--bp-border-soft));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--bp-text) 3%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--bp-text) 14%, transparent);
}

.bp-classement-kpi .bp-stat-number {
  margin-bottom: 0.12rem;
  color: var(--bp-text);
  line-height: 1;
}

.bp-classement-kpi .bp-classement-card__meta {
  font-size: 0.97rem;
}

.bp-classement-data-panel {
  display: grid;
  gap: 0.7rem;
  border-top: 3px solid color-mix(in srgb, var(--bp-brand) 24%, var(--bp-border-soft));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--bp-text) 3%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--bp-text) 14%, transparent);
}

.bp-classement-data-panel > h3,
.bp-classement-data-panel > p {
  margin: 0;
}

.bp-classement-finding {
  display: grid;
  gap: 0.4rem;
  padding: 0.95rem 1rem;
  border-left: 4px solid color-mix(in srgb, var(--bp-brand) 70%, var(--bp-border-soft));
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bp-brand) 4%, var(--bp-surface)) 0%, color-mix(in srgb, var(--bp-surface) 98%, var(--bp-surface-soft)) 100%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--bp-text) 3%, transparent), 0 12px 28px -18px color-mix(in srgb, var(--bp-text) 12%, transparent);
}

.bp-classement-finding p {
  margin: 0;
  color: var(--bp-text-secondary);
  font-size: 0.98rem;
  line-height: 1.5;
}

.bp-classement-finding strong {
  color: var(--bp-text);
}

/* --- Grilles de cartes : mobile-first, 1 colonne par défaut --- */
.bp-classement-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

.bp-classement-grid--top,
.bp-classement-grid--compact {
  gap: 0.7rem;
}

.bp-classement-card__eyebrow {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 0.4rem;
  padding: 0.24rem 0.58rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bp-brand) 9%, transparent);
  color: var(--bp-brand-dark);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
}

.bp-classement-card h3 {
  margin: 0;
  font-size: clamp(1.18rem, 2vw, 1.34rem);
  line-height: 1.22;
}

.bp-classement-card h2 a,
.bp-classement-card h3 a,
.bp-classement-card--link {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--bp-text) 24%, transparent);
}

/* Héritage ancien : certains rendus internes gardent encore des titres liés. */
.bp-classement-card h2 a::after,
.bp-classement-card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* Alignement maquette : titres de sections ET de cartes en couleur texte (dark) au lieu
   d'orange, et SANS soulignement. L'orange reste reserve aux eyebrows, a l'onglet actif et
   aux boutons (fin de la "soupe orange", comme le modele). */
.article-content.bp-classement-page h2,
.bp-classement-page .bp-classement-card h2,
.bp-classement-page .bp-classement-card h3 {
  color: var(--bp-text);
}

.bp-classement-page .bp-classement-card h2 a,
.bp-classement-page .bp-classement-card h3 a,
.bp-classement-page .bp-classement-card--link {
  color: inherit;
  text-decoration: none;
}

.bp-classement-card__meta {
  margin: 0.15rem 0 0;
  color: var(--bp-text-muted);
  font-size: 1.03rem;
  line-height: 1.45;
}

.bp-classement-card {
  display: grid;
  gap: 0.28rem;
  align-content: start;
  position: relative;
  border: 1px solid var(--bp-border-soft);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--bp-surface) 0%, color-mix(in srgb, var(--bp-surface) 98%, var(--bp-surface-soft)) 100%);
  box-shadow: 0 10px 26px -18px color-mix(in srgb, var(--bp-text) 16%, transparent);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bp-classement-card--link {
  height: 100%;
}

/* Affordance visuelle de la carte entière cliquable sur l’accueil classement. */
.bp-classement-card--link:hover,
.bp-classement-card--link:focus-visible,
.bp-classement-card:has(a:hover) {
  border-color: color-mix(in srgb, var(--bp-brand) 35%, var(--bp-border-soft));
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--bp-text) 24%, transparent);
}

.bp-classement-grid > .bp-classement-card,
.bp-classement-grid--top > .bp-classement-card,
.bp-classement-grid--compact > .bp-classement-card {
  /* .bp-box (site-wide-ui.css) pose margin: var(--space-xl) 0, et l'aide de mise en
     page ".article-content .bp-box + .bp-box { margin-top: 0 }" ne remet à zéro que
     les cartes qui ONT un ".bp-box" précédent, donc jamais la toute première carte
     d'une grille. Résultat : dans une grille de 6 cartes, la 1re restait décalée de
     tout le var(--space-xl) sous ses 2 voisines de la même ligne (repéré par Carole
     le 2026-07-18 : "la première tab/carte s'affiche plus petite"). Le gap de la
     grille gère déjà tout l'espacement ; aucune carte n'a besoin de sa propre marge. */
  margin: 0;
  height: 100%;
}

.bp-classement-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  width: 100%;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0.25rem;
  border-radius: 14px;
  background: var(--bp-surface-soft);
}

.bp-classement-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 2.45rem;
  padding: 0.5rem 0.8rem;
  border-radius: 12px;
  font-size: 0.97rem;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

/* Ce nav réutilise .bp-debuter-nav comme classe de base (<nav class="bp-debuter-nav
   bp-classement-tabs">), qui pose déjà "color" sur ses propres liens à la même
   spécificité (0,1,1) que ".bp-classement-tabs a" seul, le gagnant dépendait alors
   de l'ordre de chargement des feuilles, pas de l'intention. Sélecteur composé des
   2 classes réellement présentes sur l'élément = (0,2,1), gagne sans ambiguïté,
   peu importe l'ordre (audit CSS du 2026-07-18). */
.bp-debuter-nav.bp-classement-tabs a {
  color: var(--bp-text-secondary);
}

.bp-classement-tabs a.bp-is-active,
.bp-classement-tabs a[aria-current="page"] {
  background: var(--bp-accent-text);
  /* !important nécessaire : la règle générique de couleur de lien de prose
     (".bp-section a:not([class*='button'])..." dans site-wide-ui.css) empile
     3 :not() et dépasse la spécificité de ce sélecteur, repassant le texte en
     --bp-brand-dark sur ce fond déjà orange (texte illisible, constat en ligne
     le 2026-07-17). */
  color: var(--bp-white) !important;
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--bp-navy) 60%, transparent);
}

.bp-classement-tabs a:not(.bp-is-active):not([aria-current="page"]):hover,
.bp-classement-tabs a:not(.bp-is-active):not([aria-current="page"]):focus-visible {
  background: color-mix(in srgb, var(--bp-white) 75%, transparent);
  color: var(--bp-text);
}

/* Filtre Tous/Hommes/Femmes du Top 50 DUPR fusionné : mêmes boutons que .bp-classement-tabs,
   mais de vrais <button> (bascule d'affichage en JS, pas une navigation vers une autre URL). */
.bp-classement-dupr-filter {
  margin-bottom: 0.9rem;
}

.bp-classement-dupr-filter button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 2.45rem;
  padding: 0.5rem 0.8rem;
  border-radius: 12px;
  font-size: 0.97rem;
  font-weight: 800;
  color: var(--bp-text-secondary);
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.bp-classement-dupr-filter button[aria-pressed="true"] {
  background: var(--bp-accent-text);
  color: var(--bp-white) !important;
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--bp-navy) 60%, transparent);
}

.bp-classement-dupr-filter button:not([aria-pressed="true"]):hover,
.bp-classement-dupr-filter button:not([aria-pressed="true"]):focus-visible {
  background: color-mix(in srgb, var(--bp-white) 75%, transparent);
  color: var(--bp-text);
}

/* Sans ce sélecteur dédié, .bp-classement-page--top50 .bp-classement-dense-list__item
   { display: grid } (spécificité 0,2,0, règle d'auteur) l'emporterait sur le [hidden] du
   navigateur et la ligne resterait visible malgré le filtre Hommes/Femmes/Tous du Top 50
   DUPR fusionné. .bp-classement-podium__item n'a pas ce problème (pas de display: posé
   dessus) mais le même sélecteur le couvre sans risque. */
.bp-classement-page--top50 [data-bp-dupr-row-gender][hidden] {
  display: none;
}

/* Même souci de spécificité pour le podium lui-même : le filtre Hommes/Femmes peut vider
   entièrement les 3 premières places (classement DUPR unique, pas garanti mixte) — le JS
   pose alors [hidden] sur .bp-classement-podium, qui doit gagner sur son propre
   display: grid. */
.bp-classement-page--top50 .bp-classement-podium[hidden] {
  display: none;
}

/* Accordeon Methodologie du hub (details depliable) : carte cliquable comme la maquette,
   au lieu d'un <details> nu. Le contenu explicatif reste replie par defaut (mobile-first). */
.bp-classement-method {
  border: 1px solid var(--bp-border-soft);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--bp-surface) 0%, color-mix(in srgb, var(--bp-surface) 98%, var(--bp-surface-soft)) 100%);
  box-shadow: 0 10px 26px -18px color-mix(in srgb, var(--bp-text) 16%, transparent);
  padding: 0.9rem 0.95rem;
}

.bp-classement-method > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.3rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--bp-text);
}

.bp-classement-method > summary::-webkit-details-marker {
  display: none;
}

.bp-classement-method__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bp-brand) 8%, transparent);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--bp-accent-text);
}

.bp-classement-method__body {
  margin-top: 0.95rem;
  padding-top: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--bp-text) 8%, transparent);
  display: grid;
  gap: 0.7rem;
}

/* Les blocs repliables successifs du hub classement ont besoin d'un vrai
   intervalle visuel après les coupes éditoriales du haut de page. */
.bp-classement-page #bp-classement-faq,
.bp-classement-page #bp-classement-sources {
  margin-top: 1rem;
}

.bp-classement-card--compact {
  padding: 0.82rem 0.9rem;
  border-radius: 16px;
}

.bp-classement-card--compact .page-meta {
  margin-top: 0.35rem;
  padding-top: 0.58rem;
  border-top: 1px solid var(--bp-border-soft);
  font-size: 0.96rem;
  line-height: 1.45;
}

.bp-classement-box--compact {
  padding: 0.9rem 0.95rem;
  border-radius: 16px;
}

.bp-classement-box--compact h2 {
  margin-bottom: 0.55rem;
}

.bp-classement-box--compact p + p {
  margin-top: 0.5rem;
}

.bp-classement-empty h2 {
  margin-top: 0.2rem;
  font-size: clamp(1.24rem, 2.2vw, 1.58rem);
}

/* --- Podium (aperçus top 3/5) --- */
.bp-classement-podium {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

.bp-classement-podium__item {
  margin: 0;
  list-style: none !important;
}

.bp-classement-podium__item::marker {
  content: "";
}

.bp-classement-podium__card {
  position: relative;
  display: grid;
  gap: 0.35rem;
  min-height: 100%;
  padding: 0.85rem 0.85rem 0.8rem;
  border: 1px solid var(--bp-border-soft);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--bp-surface) 0%, var(--bp-surface-soft) 100%);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--bp-text) 6%, transparent);
}

.bp-classement-podium__rank {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  color: var(--bp-accent-text);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
}

.bp-classement-podium__eyebrow {
  display: inline-flex;
  width: fit-content;
  margin: 0;
  padding: 0.26rem 0.62rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bp-brand) 10%, transparent);
  color: var(--bp-brand-dark);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bp-classement-page--top50 .bp-classement-podium {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

.bp-classement-page--top50 .bp-classement-podium__item {
  margin: 0;
}

.bp-classement-page--top50 .bp-classement-podium__card {
  position: relative;
  display: grid;
  gap: 0.5rem;
  min-height: 100%;
  padding: 1.1rem;
  border: 1px solid var(--bp-border-soft);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--bp-surface) 0%, var(--bp-surface-soft) 100%);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--bp-text) 6%, transparent);
}

.bp-classement-page--top50 .bp-classement-podium__rank {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  color: var(--bp-accent-text);
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
}

.bp-classement-page--top50 .bp-classement-podium__eyebrow {
  display: inline-flex;
  width: fit-content;
  margin: 0;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bp-brand) 10%, transparent);
  color: var(--bp-accent-text);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bp-classement-podium__tie,
.bp-classement-dense-list__tie {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.32rem 0.6rem;
  /* Rayon modéré (pas la capsule 999px partagée par les autres badges de la carte) :
     ce badge peut passer sur 2 lignes selon la traduction, et un rayon plein mangerait
     le texte dès le retour à la ligne. */
  border-radius: 12px;
  background: color-mix(in srgb, var(--bp-brand) 10%, transparent);
  color: var(--bp-brand-dark);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

/* Ce badge porte le lien « Ex æquo, pourquoi ? » vers la méthodologie : on le souligne
   pour qu'il soit repérable comme cliquable sans dépendre de la couleur seule.
   (La distinction Championnats de France a sa propre présentation : .*__honour.) */
.bp-classement-podium__tie a,
.bp-classement-dense-list__tie a {
  display: block;
  margin: -0.32rem -0.6rem;
  padding: 0.32rem 0.6rem;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.bp-classement-movement {
  display: inline-flex;
  width: fit-content;
  margin: 0.22rem 0 0;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.15;
}

.bp-classement-podium__rank + .bp-classement-movement {
  margin-top: 0.4rem;
}

.bp-classement-movement--new {
  background: color-mix(in srgb, var(--bp-brand) 12%, transparent);
  color: var(--bp-brand-dark);
}

.bp-classement-movement--same {
  background: color-mix(in srgb, var(--bp-text) 8%, transparent);
  color: var(--bp-text-secondary);
}

.bp-classement-movement--up {
  background: var(--bp-success-bg);
  color: var(--bp-success);
}

.bp-classement-movement--down {
  background: var(--bp-error-bg);
  color: var(--bp-error);
}

.bp-classement-dense-list__tie {
  margin-top: 0.22rem;
}

.bp-classement-podium__name {
  margin: 0;
  padding-right: 1.85rem;
  font-size: clamp(1.02rem, 2.2vw, 1.34rem);
  line-height: 1.14;
}

.bp-classement-page--top50 .bp-classement-podium__name {
  margin: 0;
  padding-right: 1.85rem;
  font-size: clamp(1.02rem, 2.2vw, 1.3rem);
  line-height: 1.14;
}

.bp-classement-podium__name a,
.bp-classement-dense-list__name a {
  position: relative;
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--bp-text) 24%, transparent);
}

/* Zone tactile réelle sous var(--touch-target) (23-29px mesuré selon le contexte) :
   le nom est le seul élément cliquable de toute la carte/ligne. Pseudo-élément
   invisible qui étend la cible au minimum recommandé sans toucher au texte visible
   ni au layout autour (marge fixe, pas de % qui se résoudrait contre le mauvais bloc
   conteneur sur un lien en hauteur auto). */
.bp-classement-podium__name a::after,
.bp-classement-dense-list__name a::after {
  content: "";
  position: absolute;
  top: -11px;
  bottom: -11px;
  left: 0;
  right: 0;
}

.bp-classement-podium__club,
.bp-classement-podium__summary {
  margin: 0;
  color: var(--bp-text-muted);
  font-size: 0.96rem;
  line-height: 1.4;
}

.bp-classement-podium__club {
  font-weight: 700;
  color: var(--bp-text-secondary);
}

.bp-classement-page--top50 .bp-classement-podium__club,
.bp-classement-page--top50 .bp-classement-podium__summary {
  margin: 0;
  color: var(--bp-text-muted);
  font-size: 0.96rem;
  line-height: 1.4;
}

.bp-classement-page--top50 .bp-classement-podium__club {
  font-weight: 700;
  color: var(--bp-text-secondary);
}

/* --- Liste dense (aperçu simple messieurs / dames) --- */
.bp-classement-dense-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bp-border-soft);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--bp-surface) 0%, color-mix(in srgb, var(--bp-surface) 98%, var(--bp-surface-soft)) 100%);
  box-shadow: 0 10px 26px -18px color-mix(in srgb, var(--bp-text) 16%, transparent);
  overflow: hidden;
}

.bp-classement-page--top50 .bp-classement-dense-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bp-border-soft);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--bp-surface) 0%, var(--bp-surface-soft) 100%);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--bp-text) 5%, transparent);
  overflow: hidden;
}

.bp-classement-dense-list__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.12rem 0.5rem;
  align-items: center;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--bp-text) 10%, transparent);
}

.bp-classement-page--top50 .bp-classement-dense-list__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.12rem 0.5rem;
  align-items: center;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--bp-text) 10%, transparent);
}

.bp-classement-dense-list__rankline {
  display: grid;
  gap: 0.2rem;
  align-content: start;
}

.bp-classement-dense-list__item:last-child {
  border-bottom: 0;
}

.bp-classement-page--top50 .bp-classement-dense-list__item:last-child {
  border-bottom: 0;
}

.bp-classement-dense-list__rank {
  width: fit-content;
  color: var(--bp-text-soft);
  font-size: 0.98rem;
  font-weight: 800;
}

.bp-classement-page--top50 .bp-classement-dense-list__rank {
  width: fit-content;
  color: var(--bp-text-soft);
  font-size: 0.98rem;
  font-weight: 800;
}

.bp-classement-dense-list__signals {
  display: flex;
  align-items: flex-start;
  align-self: start;
  gap: 0.26rem;
  flex-wrap: wrap;
  min-width: 0;
  row-gap: 0.2rem;
}

.bp-classement-dense-list__main,
.bp-classement-dense-list__detail {
  min-width: 0;
}

.bp-classement-page--top50 .bp-classement-dense-list__main,
.bp-classement-page--top50 .bp-classement-dense-list__detail {
  min-width: 0;
}

.bp-classement-dense-list__name {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  word-break: normal;
  overflow-wrap: normal;
}

.bp-classement-page--top50 .bp-classement-dense-list__name {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  word-break: normal;
  overflow-wrap: normal;
}

.bp-classement-dense-list__name a {
  word-break: normal;
  overflow-wrap: normal;
}

.bp-classement-dense-list__meta,
.bp-classement-dense-list__detail {
  margin: 0;
  color: var(--bp-text-muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

.bp-classement-page--top50 .bp-classement-dense-list__meta,
.bp-classement-page--top50 .bp-classement-dense-list__detail {
  margin: 0;
  color: var(--bp-text-muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

.bp-classement-dense-list__detail {
  margin-top: 0;
}

.bp-classement-page--top50 .bp-classement-dense-list__detail {
  margin-top: 0;
}

.bp-classement-dense-list__detail a {
  color: var(--bp-link);
  text-decoration: none;
  font-weight: 700;
}

.bp-classement-page--top50 .bp-classement-dense-list__detail a {
  color: var(--bp-link);
  text-decoration: none;
  font-weight: 700;
}

.bp-classement-dense-list__detail a:hover,
.bp-classement-dense-list__detail a:focus-visible {
  color: var(--bp-link-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bp-classement-page--top50 .bp-classement-dense-list__detail a:hover,
.bp-classement-page--top50 .bp-classement-dense-list__detail a:focus-visible {
  color: var(--bp-link-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Distinction aux Championnats de France : placée sous le nom + le club (ordre
   nom → club → distinction), rendue en tag discret — texte de marque + pastille
   ronde — plutôt qu'en bandeau plein, pour ne pas passer avant le nom ni casser
   le rythme vertical de la liste. Pas de fond : rien à surcharger en dark. */
.bp-classement-dense-list__honour,
.bp-classement-podium__honour {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.25rem 0 0;
  color: var(--bp-brand-dark);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
}

.bp-classement-dense-list__honour::before,
.bp-classement-podium__honour::before {
  content: "";
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.4em;
  border-radius: 999px;
  background: var(--bp-brand);
}

.bp-classement-dense-list--preview .bp-classement-dense-list__item {
  padding-block: 0.58rem;
}

.bp-classement-dense-list--group .bp-classement-dense-list__detail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
}

/* La densité (padding/gap/font-size/line-height) est désormais la même partout
   (cf. .bp-classement-dense-list__item et consorts plus haut, alignés sur cette
   vue FFT paginée qui servait de référence) : il ne reste ici que ce qui reste
   vraiment spécifique à /joueurs/, /joueuses/, etc. */
.bp-classement-dense-list--group .bp-classement-dense-list__detail a {
  font-weight: 600;
}

.bp-classement-podium--clubs .bp-classement-podium__name {
  padding-right: 2.4rem;
}

.bp-classement-pagination {
  justify-content: center;
  margin-top: 0.2rem;
}

.bp-classement-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
}

.bp-classement-pagination .page-numbers.dots {
  min-width: auto;
  padding-inline: 0.2rem;
}

.bp-classement-pagination a.page-numbers:hover,
.bp-classement-pagination a.page-numbers:focus-visible {
  background: color-mix(in srgb, var(--bp-brand) 10%, transparent);
}

.bp-classement-pagination .page-numbers.current {
  font-weight: 800;
  background: color-mix(in srgb, var(--bp-brand) 14%, transparent);
}

/* --- Accordéon méthodologie --- */
.bp-classement-page--top50 .bp-classement-method {
  border: 1px solid var(--bp-border-soft);
  border-top: 3px solid color-mix(in srgb, var(--bp-brand) 24%, var(--bp-border-soft));
  border-radius: 22px;
  background: linear-gradient(180deg, var(--bp-surface) 0%, color-mix(in srgb, var(--bp-surface) 98%, var(--bp-surface-soft)) 100%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--bp-text) 3%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--bp-text) 14%, transparent);
  padding: 1rem 1.15rem;
}

.bp-classement-page--top50 .bp-classement-method summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0.3rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--bp-accent-text);
}

.bp-classement-page--top50 .bp-classement-method summary::-webkit-details-marker {
  display: none;
}

.bp-classement-page--top50 .bp-classement-method__label {
  display: inline-flex;
  align-items: center;
}

.bp-classement-page--top50 .bp-classement-method__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--bp-accent-text);
  transition: transform 0.16s ease;
}

.bp-classement-page--top50 .bp-classement-method__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bp-classement-page--top50 .bp-classement-method[open] .bp-classement-method__icon {
  transform: rotate(180deg);
}

.bp-classement-page--top50 .bp-classement-method__body {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.9rem;
  margin-top: 0.85rem;
  border-top: 1px solid var(--bp-border-soft);
  color: var(--bp-text);
  font-size: 0.97rem;
  line-height: 1.45;
}

.bp-classement-page--top50 .bp-classement-method__body p {
  margin: 0;
}

.bp-classement-page--top50 .bp-classement-note {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--bp-brand) 14%, var(--bp-border-soft));
  border-top: 3px solid color-mix(in srgb, var(--bp-brand) 24%, var(--bp-border-soft));
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bp-brand) 4%, var(--bp-surface)) 0%, color-mix(in srgb, var(--bp-surface) 98%, var(--bp-surface-soft)) 100%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--bp-text) 3%, transparent), 0 12px 28px -18px color-mix(in srgb, var(--bp-text) 12%, transparent);
}

.bp-classement-page--top50 .bp-classement-note h2,
.bp-classement-page--top50 .bp-classement-note p {
  margin: 0;
}

.bp-classement-page--top50 .bp-classement-note h2 {
  color: var(--bp-accent-text);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.bp-classement-page--top50 .bp-classement-note p {
  color: var(--bp-text-secondary);
  font-size: 0.97rem;
  line-height: 1.45;
}

.bp-classement-page #bp-classement-sources .bp-box,
.bp-classement-page #bp-classement-faq .bp-box {
  display: grid;
  gap: 0.7rem;
  border-top: 3px solid color-mix(in srgb, var(--bp-brand) 24%, var(--bp-border-soft));
  background: linear-gradient(180deg, var(--bp-surface) 0%, color-mix(in srgb, var(--bp-surface) 98%, var(--bp-surface-soft)) 100%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--bp-text) 3%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--bp-text) 14%, transparent);
}

.bp-classement-page #bp-classement-sources .bp-box {
  gap: 0.55rem;
  border-top-width: 1px;
  box-shadow: none;
}

.bp-classement-page #bp-classement-sources .bp-box > h2,
.bp-classement-page #bp-classement-faq .bp-box > h2 {
  margin-bottom: 0.1rem;
}

.bp-classement-page #bp-classement-sources .bp-box > h2 {
  font-size: clamp(1.18rem, 2vw, 1.36rem);
}

.bp-classement-page #bp-classement-sources .bp-box p + .page-meta,
.bp-classement-page #bp-classement-sources .bp-box .page-meta + .page-meta {
  margin-top: 0.25rem;
}

/* --- Note de source (fin de page) ---
   Volontairement plus plat que les accordéons Méthodologie et FAQ qui la
   précèdent : c'est une note de provenance, pas une section de contenu de même
   rang. Sans ombre ni dégradé, elle ferme la page au lieu de rivaliser avec ce
   qui est au-dessus. Même idiome que .bp-classement-card--flat. */
.bp-classement-source-note {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--bp-border-soft);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bp-brand) 3%, var(--bp-surface));
}

.bp-classement-source-note > h2 {
  margin-top: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
}

.bp-classement-source-note > p:last-child {
  margin-bottom: 0;
}

.bp-classement-carole-quote .bp-quote-text__quote {
  font-style: italic;
}

/* --- Filtre de recherche dans une catégorie --- */
.bp-classement-filter {
  display: grid;
  gap: 0.4rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--bp-border-soft);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bp-brand) 3%, var(--bp-surface));
}

/* Le bloc est servi avec [hidden] et révélé par le script une fois l'index lu :
   sans cette règle, `display: grid` l'emporterait sur le hidden du navigateur
   et un champ inerte s'afficherait quand JavaScript est indisponible. */
.bp-classement-filter[hidden] {
  display: none;
}

.bp-classement-filter__label {
  font-weight: 600;
  color: var(--bp-text);
}

.bp-classement-filter__hint {
  margin: -0.05rem 0 0;
  color: var(--bp-text-secondary);
  font-size: 0.96rem;
}

.bp-classement-filter__input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--bp-border-soft);
  border-radius: 12px;
  background: var(--bp-surface);
  color: var(--bp-text);
  font: inherit;
}

.bp-classement-filter__input:focus-visible {
  outline: 2px solid var(--bp-brand);
  outline-offset: 1px;
}

.bp-classement-filter__status:empty {
  display: none;
}

.bp-classement-filter__status {
  margin: 0;
  color: var(--bp-text-secondary);
  font-size: 0.96rem;
}

.bp-classement-filter__results:empty {
  display: none;
}

.bp-classement-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.bp-classement-search-results__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--bp-border-soft);
  border-radius: 14px;
  background: var(--bp-surface);
}

.bp-classement-search-results__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--bp-brand) 12%, var(--bp-surface));
  color: var(--bp-brand);
}

.bp-classement-search-results__type--club {
  background: color-mix(in srgb, var(--bp-text) 8%, var(--bp-surface));
  color: var(--bp-text);
}

.bp-classement-search-results__type--ranking {
  background: color-mix(in srgb, var(--bp-brand-soft) 18%, var(--bp-surface));
  color: var(--bp-brand-strong, var(--bp-brand));
}

.bp-classement-search-results__main {
  min-width: 0;
}

.bp-classement-search-results__name,
.bp-classement-search-results__meta,
.bp-classement-search-results__context {
  margin: 0;
}

.bp-classement-search-results__name {
  font-size: 1rem;
  line-height: 1.35;
}

.bp-classement-search-results__name a {
  color: var(--bp-text);
  text-decoration: none;
}

.bp-classement-search-results__name a:hover,
.bp-classement-search-results__name a:focus-visible {
  color: var(--bp-brand);
}

.bp-classement-search-results__meta,
.bp-classement-search-results__context {
  font-size: 0.94rem;
  color: var(--bp-text-secondary);
}

.bp-classement-search-results__context {
  margin-top: 0.18rem;
}

/* --- Montée en colonnes (mobile-first : min-width) --- */
@media (min-width: 640px) {
  .bp-classement-grid,
  .bp-classement-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bp-classement-grid--top {
    grid-template-columns: 1fr;
  }

  .bp-classement-dense-list__item,
  .bp-classement-page--top50 .bp-classement-dense-list__item {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px) {
  .bp-classement-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bp-classement-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bp-classement-podium,
  .bp-classement-page--top50 .bp-classement-podium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
  }

  .bp-classement-dense-list__item,
  .bp-classement-page--top50 .bp-classement-dense-list__item {
    grid-template-columns: 1fr;
  }

  .bp-classement-dense-list--preview .bp-classement-dense-list__item {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .bp-classement-dense-list--preview .bp-classement-dense-list__detail {
    grid-column: 2;
    text-align: left;
  }

  .bp-classement-player-main .bp-box h2 {
    max-width: 18ch;
  }
}

/* Section "Top 50 DUPR France" du hub : le paragraphe d'intro sous le h2 réutilisait la
   classe __meta pensée pour l'intérieur d'une carte compacte, donc collé sans respiration.
   On l'espace, et on ajoute une marge avant la section Méthodologie qui suit. Les cartes
   elles-mêmes restent compactes, inchangées. */
#bp-classement-dupr {
  margin-bottom: 1.6rem;
}

#bp-classement-dupr .bp-classement-section-head > div > p.bp-classement-card__meta {
  margin-top: 0.6rem;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Accordéon Méthodologie (hub) : chaque entrée est un <strong> (mini-titre) suivi d'un
   <p class="bp-classement-card__meta"> réutilisé tel quel (pensé pour l'intérieur d'une
   carte compacte), donc collé sans respiration entre le titre et le texte. On détache le
   titre sur sa propre ligne, on l'agrandit un peu, et on donne au texte une taille et un
   interligne de lecture normale au lieu du style resserré des cartes. */
.bp-classement-method__body strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.12rem;
}

.bp-classement-method__body p.bp-classement-card__meta {
  margin-top: 0;
  font-size: 1.03rem;
  line-height: 1.55;
}