/* =============================================================================
   challenge-2027.css - Les pages de lecture du Challenge de la communaute.
   -----------------------------------------------------------------------------
   Concerne challenge-palmares.php, challenge-journee.php et
   challenge-historique.php. La page de jeu challenge.php garde son propre
   habillage, elle n'est pas touchee ici.

   Meme parti que assets/css/landing.css : les variables --tbz-ag-* du systeme
   2027 (assets/css/agent.css) sont reprises telles quelles, avec une valeur de
   repli en dur pour que la page reste juste meme si agent.css n'est pas charge.
   Classes prefixees, mobile-first, aucune dependance.

   Prefixes utilises, aucun ne croise Bootstrap ni le CSS global :
     .tbz-cp-*    l'ossature commune aux trois pages, et le fil de navigation
     .tbz-pal-*   le palmares
     .tbz-jour-*  la journee
     .tbz-histo-* l'historique des saisons

   Contraste : les valeurs du systeme sont conservees partout ou elles passent
   AA. Deux durcissements, mesures, comme sur la landing :
     --cp-mut-aa #55637a remplace #64748b sous 12 px pose sur fond teinte
     --cp-mut2   #475569 remplace #94a3b8, qui ne donne que 2,6:1 sur blanc

   @author Claude (Cowork mode, 2026-08-01)
   @version 1.0.0
   ========================================================================== */

.tbz-cp {
  --cp-bg:      var(--tbz-ag-bg, #f8fafc);
  --cp-soft:    var(--tbz-ag-bg-soft, #f1f5f9);
  --cp-card:    var(--tbz-ag-card, #fff);
  --cp-card2:   var(--tbz-ag-card-2, #fbfcfd);
  --cp-bd:      var(--tbz-ag-border, #e5e7eb);
  --cp-bd-soft: var(--tbz-ag-border-soft, #eef0f3);
  --cp-ink:     var(--tbz-ag-text, #0f172a);
  --cp-ink2:    var(--tbz-ag-text-2, #1e293b);
  --cp-mut:     var(--tbz-ag-muted, #64748b);
  --cp-mut-aa:  #55637a;
  --cp-mut2:    #475569;
  --cp-acc:     var(--tbz-ag-accent, #0a7c91);
  --cp-acc-d:   var(--tbz-ag-accent-d, #075d6e);
  --cp-acc-l:   var(--tbz-ag-accent-l, #e0f2f6);
  --cp-acc-l2:  var(--tbz-ag-accent-l2, #ecf7fa);
  --cp-grad:    var(--tbz-ag-accent-grad, linear-gradient(135deg, #0a7c91 0%, #0891b2 60%, #06b6d4 100%));
  --cp-ok:      #047857;
  --cp-ok-bg:   var(--tbz-ag-success-bg, #ecfdf5);
  --cp-ok-bd:   var(--tbz-ag-success-bd, #a7f3d0);
  --cp-warn:    var(--tbz-ag-warn, #b45309);
  --cp-warn-bg: var(--tbz-ag-warn-bg, #fffbeb);
  --cp-warn-bd: var(--tbz-ag-warn-bd, #fde68a);
  --cp-or:      #a16207;   /* #FFD700 sur blanc = 1,3:1, illisible en texte */
  --cp-argent:  #64748b;
  --cp-bronze:  #9a5b23;
  --cp-r-xs:    var(--tbz-ag-r-xs, 6px);
  --cp-r-sm:    var(--tbz-ag-r-sm, 10px);
  --cp-r-md:    var(--tbz-ag-r-md, 14px);
  --cp-r-lg:    var(--tbz-ag-r-lg, 18px);
  --cp-pill:    var(--tbz-ag-r-pill, 999px);
  --cp-sh-xs:   var(--tbz-ag-sh-xs, 0 1px 2px 0 rgba(15,23,42,.04));
  --cp-sh-sm:   var(--tbz-ag-sh-sm, 0 1px 3px 0 rgba(15,23,42,.06), 0 1px 2px -1px rgba(15,23,42,.04));
  --cp-sh-md:   var(--tbz-ag-sh-md, 0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.05));
  --cp-sh-lg:   var(--tbz-ag-sh-lg, 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.05));
  --cp-ease:    var(--tbz-ag-ease-out, cubic-bezier(.16, 1, .3, 1));
  --cp-font:    var(--tbz-ag-font, 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);

  background: var(--cp-bg);
  color: var(--cp-ink);
  font-family: var(--cp-font);
  letter-spacing: -.005em;
  padding: 0 0 44px;
}
.tbz-cp *, .tbz-cp *::before, .tbz-cp *::after { box-sizing: border-box; }
.tbz-cp [hidden] { display: none; }
.tbz-cp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }

/* ── Le fil de navigation, identique sur les trois pages ───────────────────
   C'est la reponse a « s'y retrouver en un clic » : quatre destinations,
   toujours au meme endroit, celle qu'on regarde etant marquee. Il colle sous
   l'en-tete du site au defilement. */
.tbz-cp-fil {
  position: sticky; top: var(--tbz-hd-collant, 0px); z-index: 20;
  background: rgba(248, 250, 252, .92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--cp-bd-soft);
  margin: 0 0 18px;
}
.tbz-cp-fil-in {
  max-width: 1240px; margin: 0 auto; padding: 9px 16px;
  display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tbz-cp-fil-in::-webkit-scrollbar { display: none; }
.tbz-cp-fil a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; min-height: 38px;
  border: 1px solid var(--cp-bd); border-radius: var(--cp-pill);
  background: var(--cp-card); color: var(--cp-ink2);
  font-size: 13px; font-weight: 650; text-decoration: none; white-space: nowrap;
  transition: background .16s var(--cp-ease), border-color .16s, color .16s;
}
.tbz-cp-fil a i { font-size: 12px; opacity: .8; }
.tbz-cp-fil a:hover { background: var(--cp-acc-l2); border-color: var(--cp-acc); color: var(--cp-acc-d); }
.tbz-cp-fil a:focus-visible { outline: 2px solid var(--cp-acc); outline-offset: 2px; }
.tbz-cp-fil a[aria-current="page"] {
  background: var(--cp-acc); border-color: var(--cp-acc); color: #fff;
}
.tbz-cp-fil a[aria-current="page"] i { opacity: 1; }

/* ── En-tete de page ───────────────────────────────────────────────────────
   Plus de grand bloc de couleur pleine : un titre net sur le fond de la page,
   comme la landing. La couleur sert aux chiffres, pas au decor. */
.tbz-cp-hero { padding: 6px 0 16px; border-bottom: 1px solid var(--cp-bd-soft); margin: 0 0 20px; }
.tbz-cp-hero h1 {
  margin: 0 0 7px; font-size: 25px; font-weight: 780;
  letter-spacing: -.03em; line-height: 1.18; color: var(--cp-ink);
}
.tbz-cp-lead { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cp-ink2); max-width: 860px; }
.tbz-cp-lead b { font-weight: 650; color: var(--cp-ink); }
.tbz-cp-lead a { color: var(--cp-acc); font-weight: 600; text-decoration: none; }
.tbz-cp-lead a:hover { text-decoration: underline; }
@media (min-width: 768px) { .tbz-cp-hero h1 { font-size: 31px; } }

/* Bandeau de chiffres cles */
.tbz-cp-kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0 0; }
@media (min-width: 640px) { .tbz-cp-kpi { grid-template-columns: repeat(4, 1fr); } }
.tbz-cp-kpi > div {
  background: var(--cp-card); border: 1px solid var(--cp-bd); border-radius: var(--cp-r-md);
  padding: 12px 14px; box-shadow: var(--cp-sh-xs);
}
.tbz-cp-kpi b {
  display: block; font-size: 22px; font-weight: 760; line-height: 1.1;
  letter-spacing: -.03em; color: var(--cp-acc-d); font-variant-numeric: tabular-nums;
}
.tbz-cp-kpi span {
  display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--cp-mut2);
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.tbz-cp-sec { margin: 26px 0 0; }
.tbz-cp-sec > h2 {
  margin: 0 0 12px; font-size: 18.5px; font-weight: 730; letter-spacing: -.02em;
  color: var(--cp-ink); display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.tbz-cp-sec > h2 .tbz-cp-pill {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cp-acc-d); background: var(--cp-acc-l2); border: 1px solid #cbe8ee;
  border-radius: var(--cp-pill); padding: 3px 9px;
}
.tbz-cp-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--cp-mut-aa); }
.tbz-cp-note + .tbz-cp-tabs { margin-top: 20px; }
.tbz-cp-note i { color: var(--cp-mut2); }
.tbz-cp-carte {
  background: var(--cp-card); border: 1px solid var(--cp-bd); border-radius: var(--cp-r-lg);
  box-shadow: var(--cp-sh-sm); padding: 16px;
}
@media (min-width: 768px) { .tbz-cp-carte { padding: 20px 22px; } }

/* ── Tableaux ─────────────────────────────────────────────────────────────── */
.tbz-cp-scroll {
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  /* Le defilement horizontal doit rester DANS la carte : pas de marge negative,
     elle debordait de 16 px sur mobile. */
  scrollbar-color: var(--cp-bd-strong, #d1d5db) transparent;
}
.tbz-cp-scroll::-webkit-scrollbar { height: 8px; }
.tbz-cp-scroll::-webkit-scrollbar-thumb { background: var(--cp-bd-strong, #d1d5db); border-radius: 99px; }
.tbz-cp-scroll::-webkit-scrollbar-track { background: transparent; }
/* width:100% seul laissait le navigateur ecraser les colonnes riches (la grille
   de huit chevaux, les pastilles de badge) au profit des colonnes de texte : les
   pastilles finissaient tronquees et la grille se repliait sur cinq lignes. Les
   min-width ci-dessous sont des planchers ; quand leur somme depasse la largeur
   disponible, le tableau grandit et .tbz-cp-scroll prend le relais. */
.tbz-cp-tab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
/* La derniere colonne absorbe l'espace restant : sans cela, un tableau de trois
   colonnes etalait ses chiffres sur toute la largeur. */
.tbz-cp-tab.tbz-cp-tab-souple td:last-child,
.tbz-cp-tab.tbz-cp-tab-souple th:last-child { width: 100%; }
.tbz-cp-tab th, .tbz-cp-tab td {
  padding: 10px 10px; text-align: left; border-bottom: 1px solid var(--cp-bd-soft);
  white-space: nowrap; vertical-align: middle;
}
.tbz-cp-tab thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--cp-soft); color: var(--cp-mut2);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--cp-bd);
}
.tbz-cp-tab tbody tr:hover td { background: var(--cp-card2); }
.tbz-cp-tab tbody tr:last-child td { border-bottom: 0; }
.tbz-cp-tab td.num, .tbz-cp-tab th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbz-cp-tab .pseudo { font-weight: 650; color: var(--cp-ink); white-space: normal; min-width: 132px; }
.tbz-cp-tab .libre { white-space: normal; }
/* Colonnes de la page journee */
.tbz-cp-tab .col-res    { white-space: normal; min-width: 190px; max-width: 300px; color: var(--cp-ink2); }
.tbz-cp-tab .col-grille { min-width: 248px; }
.tbz-cp-tab .col-badges { white-space: normal; min-width: 300px; }
.tbz-cp-tab .col-collec { white-space: normal; min-width: 340px; }
.tbz-cp-tab tr.is-me td { background: var(--cp-acc-l2); }
.tbz-cp-tab tr.is-me:hover td { background: var(--cp-acc-l); }
.tbz-cp-tab tr.is-me .pseudo::after {
  content: 'vous'; margin-left: 7px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: var(--cp-acc); border-radius: var(--cp-pill); padding: 2px 7px;
  vertical-align: middle;
}
.tbz-cp-tab tr.is-virtual .pseudo { color: var(--cp-mut2); font-weight: 600; }

.tbz-cp-rang { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cp-mut2); }
.tbz-cp-rang.or { color: var(--cp-or); } .tbz-cp-rang.argent { color: var(--cp-argent); } .tbz-cp-rang.bronze { color: var(--cp-bronze); }

/* ── Onglets ──────────────────────────────────────────────────────────────── */
/* Rythme vertical : .tbz-cp-note n'a qu'une marge haute, le paragraphe qui
   precede la barre d'onglets n'avait donc aucune marge basse et les pastilles
   se collaient au texte. La barre porte sa propre respiration, au-dessus comme
   en dessous, et le champ de recherche qui la suit garde la sienne. */
.tbz-cp-tabs { display: flex; gap: 7px; margin: 22px 0 18px; overflow-x: auto; scrollbar-width: none; }
.tbz-cp-panel[hidden] { display: none; }
.tbz-cp-sec > h2 + .tbz-cp-tabs { margin-top: 4px; }
.tbz-cp-tabs::-webkit-scrollbar { display: none; }
.tbz-cp-tab-bt {
  flex: 0 0 auto; border: 1px solid var(--cp-bd); background: var(--cp-card);
  color: var(--cp-ink2); font-weight: 650; font-size: 13px;
  border-radius: var(--cp-pill); padding: 8px 15px; min-height: 38px; cursor: pointer;
  white-space: nowrap; transition: background .16s var(--cp-ease), border-color .16s, color .16s;
}
.tbz-cp-tab-bt:hover { background: var(--cp-acc-l2); border-color: var(--cp-acc); color: var(--cp-acc-d); }
.tbz-cp-tab-bt:focus-visible { outline: 2px solid var(--cp-acc); outline-offset: 2px; }
.tbz-cp-tab-bt[aria-selected="true"] { background: var(--cp-acc); border-color: var(--cp-acc); color: #fff; }
.tbz-cp-tab-bt .tbz-cp-cnt { opacity: .75; font-weight: 600; }

/* ── Boutons et champs ────────────────────────────────────────────────────── */
.tbz-cp-bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 10px 18px; border: 0; border-radius: var(--cp-r-sm);
  background: var(--cp-acc); color: #fff !important; text-decoration: none !important;
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: background .16s var(--cp-ease), transform .16s var(--cp-ease);
}
.tbz-cp-bt:hover { background: var(--cp-acc-d); transform: translateY(-1px); }
.tbz-cp-bt:focus-visible { outline: 2px solid var(--cp-acc); outline-offset: 3px; }
.tbz-cp-rech {
  flex: 1 1 240px; min-width: 190px; min-height: 42px; padding: 10px 14px;
  border: 1px solid var(--cp-bd); border-radius: var(--cp-r-sm);
  font-size: 13.5px; font-family: inherit; color: var(--cp-ink); background: var(--cp-card);
}
.tbz-cp-rech:focus { outline: 0; border-color: var(--cp-acc); box-shadow: var(--tbz-ag-sh-glow, 0 0 0 4px rgba(10,124,145,.12)); }
.tbz-cp-outils { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.tbz-cp-outils .tbz-cp-rech { max-width: 340px; }
.tbz-cp-rien { margin: 14px 0 0; font-size: 13px; color: var(--cp-mut-aa); }
.tbz-cp-cnt { font-size: 12px; color: var(--cp-mut-aa); font-variant-numeric: tabular-nums; }

/* ── Etat vide ────────────────────────────────────────────────────────────── */
.tbz-cp-vide {
  background: var(--cp-card); border: 1px dashed var(--cp-bd-strong, #d1d5db);
  border-radius: var(--cp-r-lg); padding: 44px 22px; text-align: center; color: var(--cp-mut-aa);
}
.tbz-cp-vide h2 { margin: 0 0 8px; font-size: 19px; font-weight: 730; color: var(--cp-ink); letter-spacing: -.02em; }
.tbz-cp-vide p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; }

/* ── Le bandeau « moi » ───────────────────────────────────────────────────── */
.tbz-pal-moi {
  background: var(--cp-acc-l2); border: 1px solid #cbe8ee; border-radius: var(--cp-r-md);
  padding: 14px 16px; margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--cp-ink2);
}
.tbz-pal-moi strong { color: var(--cp-acc-d); font-weight: 700; }
.tbz-pal-moi a { color: var(--cp-acc-d); font-weight: 650; }

/* ── Le mur des records ───────────────────────────────────────────────────── */
.tbz-pal-records { display: grid; grid-template-columns: 1fr; gap: 11px; }
@media (min-width: 560px) { .tbz-pal-records { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tbz-pal-records { grid-template-columns: repeat(3, 1fr); } }
.tbz-pal-record {
  background: var(--cp-card); border: 1px solid var(--cp-bd); border-radius: var(--cp-r-md);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
  box-shadow: var(--cp-sh-xs); transition: border-color .18s var(--cp-ease), box-shadow .18s var(--cp-ease);
}
.tbz-pal-record:hover { border-color: var(--cp-acc); box-shadow: var(--cp-sh-md); }
.tbz-pal-record .lib {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cp-mut2);
}
.tbz-pal-record .val {
  font-size: 27px; font-weight: 780; letter-spacing: -.03em; line-height: 1.1;
  color: var(--cp-acc-d); font-variant-numeric: tabular-nums;
}
.tbz-pal-record .val .unite {
  font-size: 12px; font-weight: 650; letter-spacing: 0; color: var(--cp-mut2);
}
.tbz-pal-record .who { font-weight: 700; font-size: 14px; color: var(--cp-ink); }
.tbz-pal-record .sub { font-size: 11.5px; color: var(--cp-mut-aa); }

/* ── Pastilles de badge ───────────────────────────────────────────────────── */
.tbz-pal-badge {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--cp-bd); border-radius: var(--cp-pill);
  padding: 3px 9px; font-size: 11.5px; font-weight: 650;
  background: var(--cp-card); margin: 2px 3px 2px 0; white-space: nowrap;
}
.tbz-pal-niveau { font-weight: 800; opacity: .8; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }

/* ── Journee : l'arrivee ──────────────────────────────────────────────────── */
.tbz-jour-arrivee { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.tbz-jour-groupe { display: flex; flex-direction: column; gap: 6px; }
.tbz-jour-groupe-t {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cp-mut2);
}
.tbz-jour-groupe-n { display: flex; gap: 6px; flex-wrap: wrap; }
.tbz-jour-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 9px; border-radius: var(--cp-r-sm);
  background: var(--cp-ink2); color: #fff; font-weight: 780; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.tbz-jour-num.rang1 { background: #a16207; }
.tbz-jour-num.rang2 { background: #64748b; }
.tbz-jour-num.rang3 { background: #9a5b23; }
.tbz-jour-num.hors  { background: var(--cp-soft); color: var(--cp-mut2); font-weight: 700; }
.tbz-jour-fleche { color: var(--cp-bd-strong, #d1d5db); font-weight: 700; }
.tbz-jour-stats { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
.tbz-jour-stat {
  background: var(--cp-soft); border: 1px solid var(--cp-bd-soft); border-radius: var(--cp-pill);
  padding: 6px 12px; font-size: 12px; font-weight: 650; color: var(--cp-ink2);
}
.tbz-jour-grille { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center; }
.tbz-jour-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--cp-r-xs);
  background: var(--cp-soft); color: var(--cp-mut2); font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tbz-jour-chip.trouve { background: var(--cp-ok-bg); color: var(--cp-ok); border: 1px solid var(--cp-ok-bd); }
.tbz-jour-chip.comp   { background: var(--cp-card); border: 1px dashed var(--cp-bd-strong, #d1d5db); color: var(--cp-mut2); }
/* Le selecteur de journee, dans le fil de navigation */
.tbz-jour-nav { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin: 14px 0 0; }
.tbz-jour-nav a, .tbz-jour-nav span.vide, .tbz-jour-nav select {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 14px;
  border: 1px solid var(--cp-bd); border-radius: var(--cp-pill);
  background: var(--cp-card); color: var(--cp-ink2); text-decoration: none;
  font-size: 13px; font-weight: 650; font-family: inherit;
}
.tbz-jour-nav a:hover { background: var(--cp-acc-l2); border-color: var(--cp-acc); color: var(--cp-acc-d); }
.tbz-jour-nav span.vide { opacity: .45; }
.tbz-jour-nav select { padding-right: 30px; }

/* ── Historique des saisons ───────────────────────────────────────────────── */
.tbz-histo-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) { .tbz-histo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tbz-histo-grid { grid-template-columns: repeat(3, 1fr); } }
.tbz-histo-card {
  background: var(--cp-card); border: 1px solid var(--cp-bd); border-radius: var(--cp-r-lg);
  box-shadow: var(--cp-sh-sm); padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .18s var(--cp-ease), box-shadow .18s var(--cp-ease), transform .18s var(--cp-ease);
}
.tbz-histo-card:hover { border-color: var(--cp-acc); box-shadow: var(--cp-sh-lg); transform: translateY(-2px); }
.tbz-histo-card h3 { margin: 0; font-size: 16.5px; font-weight: 730; letter-spacing: -.02em; color: var(--cp-ink); }
.tbz-histo-card .period { font-size: 12px; color: var(--cp-mut-aa); }
.tbz-histo-card .stats { display: flex; gap: 7px; margin: 4px 0 6px; flex-wrap: wrap; }
.tbz-histo-card .stat {
  background: var(--cp-soft); border: 1px solid var(--cp-bd-soft); border-radius: var(--cp-pill);
  padding: 5px 11px; font-size: 11.5px; font-weight: 650; color: var(--cp-ink2);
}
.tbz-histo-podium { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tbz-histo-podium-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px;
  border-radius: var(--cp-r-sm); background: var(--cp-card2); border: 1px solid var(--cp-bd-soft);
}
.tbz-histo-podium-1 { background: #fffbeb; border-color: #fde68a; }
.tbz-histo-podium-2 { background: var(--cp-soft); border-color: var(--cp-bd); }
.tbz-histo-podium-3 { background: #fdf6f0; border-color: #ecd9c6; }
.tbz-histo-medal { font-size: 1.05rem; line-height: 1; flex: 0 0 auto; }
.tbz-histo-podium-name {
  font-weight: 700; font-size: 13.5px; color: var(--cp-ink); flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tbz-histo-podium-pts {
  font-weight: 750; font-size: 13px; color: var(--cp-acc-d);
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto;
}
.tbz-histo-card details { border-top: 1px solid var(--cp-bd-soft); padding-top: 9px; margin-top: 2px; }
/* Le marqueur natif d'un <summary> se pose HORS du flux, colle contre le bord
   gauche de la carte, desaligne de tout le reste du contenu. On le supprime et
   on dessine notre propre chevron, qui pivote a l'ouverture. */
.tbz-histo-card details summary {
  cursor: pointer; color: var(--cp-acc-d); font-weight: 650; font-size: 13px;
  padding: 6px 0; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.tbz-histo-card details summary::-webkit-details-marker { display: none; }
.tbz-histo-card details summary::marker { content: ''; }
.tbz-histo-card details summary::before {
  content: ''; flex: 0 0 auto; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); margin-left: 2px; margin-top: -2px;
  transition: transform .18s var(--cp-ease);
}
.tbz-histo-card details[open] summary::before { transform: rotate(45deg); margin-top: -4px; }
.tbz-histo-card details summary:hover { color: var(--cp-acc); }
.tbz-histo-card details summary:focus-visible { outline: 2px solid var(--cp-acc); outline-offset: 2px; border-radius: var(--cp-r-xs); }
.tbz-histo-card details ol { margin: 9px 0 0; padding-left: 21px; font-size: 13px; }
.tbz-histo-card details ol li { padding: 3px 0; color: var(--cp-ink2); }
.tbz-histo-badges-note { font-size: 11.5px; color: var(--cp-mut-aa); margin: 6px 0; line-height: 1.5; }
.tbz-histo-badges-liste { margin: 8px 0 0; padding-left: 20px; font-size: 13px; }
.tbz-histo-badges-liste li { padding: 7px 0; border-bottom: 1px dashed var(--cp-bd-soft); }
.tbz-histo-badges-liste li:last-child { border-bottom: 0; }
.tbz-histo-badges-n {
  display: inline-block; min-width: 22px; text-align: center;
  background: var(--cp-acc); color: #fff; border-radius: var(--cp-pill);
  font-size: 10.5px; font-weight: 800; padding: 2px 8px; margin-left: 6px;
  font-variant-numeric: tabular-nums;
}
.tbz-histo-badges-chips { display: block; margin-top: 5px; }
.tbz-histo-badges-x { font-size: 10.5px; color: var(--cp-mut2); font-weight: 700; margin-right: 4px; }
.tbz-histo-pagination { text-align: center; margin-top: 24px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.tbz-histo-pagination a, .tbz-histo-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 8px 13px;
  border: 1px solid var(--cp-bd); border-radius: var(--cp-r-sm);
  background: var(--cp-card); color: var(--cp-ink2);
  text-decoration: none; font-size: 13px; font-weight: 650;
}
.tbz-histo-pagination a:hover { background: var(--cp-acc-l2); border-color: var(--cp-acc); color: var(--cp-acc-d); }
.tbz-histo-pagination .current { background: var(--cp-acc); border-color: var(--cp-acc); color: #fff; }

/* ── Maillage interne de bas de page ──────────────────────────────────────── */
.tbz-cp-liens { margin-top: 34px; }
.tbz-cp-liens h2 { margin: 0 0 13px; font-size: 16px; font-weight: 730; letter-spacing: -.02em; color: var(--cp-ink); }
.tbz-cp-liens-grid { display: grid; grid-template-columns: 1fr; gap: 11px; }
@media (min-width: 600px) { .tbz-cp-liens-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tbz-cp-liens-grid { grid-template-columns: repeat(4, 1fr); } }
.tbz-cp-lien {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--cp-card); border: 1px solid var(--cp-bd); border-radius: var(--cp-r-md);
  padding: 15px; text-decoration: none; color: inherit; box-shadow: var(--cp-sh-xs);
  transition: border-color .18s var(--cp-ease), box-shadow .18s var(--cp-ease), transform .18s var(--cp-ease);
}
.tbz-cp-lien:hover { border-color: var(--cp-acc); box-shadow: var(--cp-sh-md); transform: translateY(-2px); color: inherit; }
.tbz-cp-lien-ico { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.tbz-cp-lien-txt { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; line-height: 1.5; color: var(--cp-mut-aa); }
.tbz-cp-lien-txt strong { color: var(--cp-ink); font-size: 14px; font-weight: 700; letter-spacing: -.01em; }

.tbz-cp-sec > details > summary {
  cursor: pointer; color: var(--cp-acc-d); font-weight: 700; font-size: 13.5px;
  padding: 8px 0; list-style: none; display: flex; align-items: center; gap: 8px;
}
.tbz-cp-sec > details > summary::-webkit-details-marker { display: none; }
.tbz-cp-sec > details > summary::marker { content: ''; }
.tbz-cp-sec > details > summary::before {
  content: ''; flex: 0 0 auto; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); margin-top: -2px;
  transition: transform .18s var(--cp-ease);
}
.tbz-cp-sec > details[open] > summary::before { transform: rotate(45deg); margin-top: -4px; }
.tbz-cp-sec > details > summary:focus-visible { outline: 2px solid var(--cp-acc); outline-offset: 2px; border-radius: var(--cp-r-xs); }

/* Respect de la preference systeme : aucune animation imposee. */
@media (prefers-reduced-motion: reduce) {
  .tbz-cp *, .tbz-cp *::before, .tbz-cp *::after { transition: none !important; animation: none !important; }
  .tbz-histo-card:hover, .tbz-cp-lien:hover, .tbz-cp-bt:hover { transform: none; }
}

/* Puce « IA » accolee au pseudo d'un participant virtuel. */
.tbz-cp-ia {
  display: inline-block; margin-left: 6px; padding: 1px 6px; vertical-align: middle;
  background: var(--cp-mut2); color: #fff; border-radius: var(--cp-r-xs);
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
}
.tbz-cp-plus { margin-top: 14px; text-align: center; }

.tbz-cp-muted { color: var(--cp-mut2); }

/* ── Deux retouches vues au rendu ──────────────────────────────────────────
   1. Le « x2 » qui suit une pastille flottait en haut de ligne : les pastilles
      sont en inline-flex et s'alignaient sur la base, pas le compteur.
   2. Dans une carte de saison, large de 340 px, une pastille par ligne donnait
      onze lignes pour onze badges. Reduites, elles passent a deux par ligne. */
.tbz-pal-badge { vertical-align: middle; }
.tbz-cp-tab .col-collec .tbz-cp-cnt {
  vertical-align: middle; font-size: 10.5px; font-weight: 700;
  color: var(--cp-mut2); margin: 0 7px 0 1px;
}
.tbz-histo-badges-chips .tbz-pal-badge { font-size: 10.5px; padding: 2px 7px; gap: 4px; }
.tbz-histo-badges-chips .tbz-pal-niveau { font-size: 9px; }