@charset "utf-8";
/* =====================================================================
   Mini leaderboards — widget embarqué en iframe (mini_leaderboards.php).
   Le top 3 de chaque classement, un slide par classement. Carrousel en
   scroll-snap natif : swipe au doigt, flèches gérées par le js.
   Pas de top bar, fond transparent pour se fondre dans le site du
   centre. Doit rester lisible dès ~250px de large.
   ===================================================================== */
:root {
  --ml-border: color-mix(in srgb, var(--color_brightness) 12%, transparent);
  --ml-radius-row: calc(12px * var(--border_radius_percent, 100) / 100);
  /* Or / argent / bronze — mêmes teintes que l'ancien top ranking */
  --ml-gold: #fbb610;
  --ml-silver: #a4aeba;
  --ml-bronze: #e9a35b;
  /* Bleu homme / rose femme — mêmes teintes que les tableaux de résultats */
  --ml-man: #4aa1da;
  --ml-woman: #F756FF;
}
html,
body {
  margin: 0;
}
html.in_iframe,
html.in_iframe body {
  background-color: transparent;
}
/* ---- Le widget qui remplit l'iframe ----
   Pas de carte (ni fond, ni ombre, ni arrondi) : le widget est intégré
   directement dans la forme du site du centre. */
.widget {
  position: relative;
  overflow: hidden;
  color: var(--color_brightness);
}
/* ---- Carrousel : un slide plein écran par classement ---- */
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar {
  display: none;
}
.slide {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 10px 10px 12px;
}
/* ---- Titre du classement + chip kart, sur une seule ligne ---- */
.slide_header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-left: 36px;
  padding-right: 36px;
  margin-bottom: 8px;
}
.slide_title {
  min-width: 0;
  font-size: 15rem;
  margin: 0;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slide_title[onclick] {
  cursor: pointer;
}
.slide_title[onclick]:hover {
  color: var(--bkcolor_main);
}
.kart_chip {
  flex-shrink: 0;
  max-width: 50%;
  box-sizing: border-box;
  padding: 2px 10px;
  /* demi-hauteur de la chip x % du thème -> carré / arrondi / pilule bien distincts */
  border-radius: calc(11px * var(--border_radius_percent, 100) / 100);
  font-size: 11rem;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ---- Les 3 résultats ---- */
.results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-row);
  background-color: var(--bkcolor_brightness_1);
}
/* photo ronde cerclée de la couleur du rang, numéro en médaille dans le coin */
.result_photo {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 2px solid var(--ml-border);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}
.result_rank {
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: var(--color_brightness);
  color: #fff;
  font-size: 11rem;
  font-weight: bold;
  line-height: 17px;
  text-align: center;
}
.rank_1 .result_photo {
  border-color: var(--ml-gold);
  background-color: var(--ml-gold);
}
.rank_1 .result_rank {
  background-color: var(--ml-gold);
}
.rank_2 .result_photo {
  border-color: var(--ml-silver);
  background-color: var(--ml-silver);
}
.rank_2 .result_rank {
  background-color: var(--ml-silver);
}
.rank_3 .result_photo {
  border-color: var(--ml-bronze);
  background-color: var(--ml-bronze);
}
.rank_3 .result_rank {
  background-color: var(--ml-bronze);
}
.result_name {
  flex: 1;
  min-width: 0;
  font-size: 16rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* pseudo teinté suivant le sexe, comme sur les tableaux de résultats */
.result[data-sex="1"] .result_name {
  color: var(--ml-man);
}
.result[data-sex="2"] .result_name {
  color: var(--ml-woman);
}
.result_name[onclick] {
  cursor: pointer;
}
.result_name[onclick]:hover {
  color: var(--bkcolor_main);
}
.result_value {
  flex-shrink: 0;
  font-size: 16rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}
/* ---- Flèches (par dessus la ligne de titre) ----
   Des ax-button-3 : couleurs, hover et focus viennent du thème — ici juste
   la taille mini, le placement, et le fondu en bout de carrousel. */
.arrow {
  position: absolute;
  top: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.arrow.hidden {
  opacity: 0;
  visibility: hidden;
}
.arrow::before {
  font-family: 'fontawesome bold';
  font-size: 12rem;
}
.arrow_left {
  left: 10px;
}
.arrow_left::before {
  content: "\f053";
}
.arrow_right {
  right: 10px;
}
.arrow_right::before {
  content: "\f054";
}