@charset "utf-8";
/* Police des icônes de marque (Facebook / Instagram / X du bloc de partage) :
   styles_ax ne déclare que Solid/Regular/Light, pas les brands — on l'ajoute ici. */
@font-face {
  font-family: "fontawesome brands";
  src: url('../../../fonts/fontawesome-brands.ttf') format('truetype'), url('../../../fonts/fontawesome-brands.woff') format('woff');
  font-weight: normal;
}
@font-face {
  font-family: "fontawesome brands";
  src: url('../../../fonts/fontawesome-brands.eot');
  font-weight: normal;
}
/* =====================================================================
   Member (profil pilote public) — dernière page de la famille timing.
   Atteinte en cliquant un pilote dans results.php / leaderboards.php.
   Carte du pilote (photo, âge/sexe/poids, barre de niveau) et dernière course
   (podium / graphique des tours) côte à côte, puis statistiques, records par
   piste, "Mes résultats" (tableau .ranking_table + graphique + détail séance).
   Top bar 70px + onglets famille 44px.
   ===================================================================== */
body > .body {
  padding-top: 140px;
  /* top bar 70px + onglets 44px + air */
}
/* styles_ax fige .ax-body à 356px sous 850px : pleine largeur pour les tableaux/cartes denses */
@media (max-width: 850px) {
  .ax-body {
    width: calc(100% - 20px);
  }
}
/* les panneaux suivent les 3 niveaux d'arrondi du thème (styles_ax est en tout-ou-rien 18px) */
.member_card,
.member_share,
.last_race_card,
.statistics_card,
.records_card,
.my_results_card,
.evolution_card,
.session_card,
.ax-block_content-message {
  border-radius: calc(18px * var(--border_radius_percent, 100) / 100);
}
/* =====================================================================
   Onglets enfants de la famille timing, fixés sous la top bar (70px).
   Copie locale — même bloc dans styles_results.less / styles_leaderboards.less, garder en phase.
   ===================================================================== */
.ax-top_bar_tabs {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  z-index: 999999;
  /* juste sous la .ax-top_bar */
  display: flex;
  gap: 5px;
  height: 44px;
  padding: 0 15px;
  background-color: var(--bkcolor_brightness_2);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.09);
  overflow-x: auto;
  scrollbar-width: none;
}
.ax-top_bar_tabs::-webkit-scrollbar {
  display: none;
}
.ax-top_bar_tabs a {
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-bottom: 3px solid transparent;
  color: var(--color_brightness);
  font-size: 14rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.ax-top_bar_tabs a:hover {
  color: var(--bkcolor_main);
}
.ax-top_bar_tabs a.active {
  color: var(--bkcolor_main);
  border-bottom-color: var(--bkcolor_main);
}
/* ---- Bloc retour + sélecteur des profils de la famille (include tools/family_profiles.php,
   même css dans styles_no_results.less / styles_member_not_share.less, garder en phase) ---- */
.ax-block_return {
  flex-wrap: wrap;
  /* très petit écran : le sélecteur passe sous le bouton retour */
  gap: 10px;
}
.family_profiles {
  margin-left: auto;
  /* reste à droite même sans bouton retour */
  max-width: 100%;
}
.family_profiles .ax-selected_value::before {
  /* icône pilote devant le pseudo */
  font-family: 'fontawesome bold';
  content: '\f007';
  margin-right: 10px;
}
.family_profiles .ax-selected_value span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* =====================================================================
   Tableau de classement (.ranking_table) : détail d'une séance et
   "Mes résultats". Copie locale — même bloc dans styles_results.less,
   garder en phase (les colonnes propres au membre sont plus bas).
   Ce qui diffère volontairement de results.php, parce que le tableau est
   ici dans une carte et va d'un bord à l'autre : bandes alternées au lieu
   des filets, et le temps n'est pas coloré (il ne porte pas le classement).
   ===================================================================== */
:root {
  --ranking_border: color-mix(in srgb, var(--color_brightness) 12%, transparent);
  /* Or / argent / bronze — mêmes teintes que le mini leaderboards */
  --ranking_gold: #fbb610;
  --ranking_silver: #a4aeba;
  --ranking_bronze: #e9a35b;
}
.ranking_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14rem;
}
.ranking_table th {
  padding: 6px 8px;
  font-size: 11rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  /* toutes les colonnes centrées, sauf le pseudo / piste / course */
  opacity: 0.55;
}
.ranking_table th.pseudo,
.ranking_table th.track,
.ranking_table th.race {
  text-align: left;
}
.ranking_table td {
  padding: 9px 8px;
}
/* bandes alternées plutôt que des filets : elles vont d'un bord à l'autre de la carte */
.ranking_table tbody tr:nth-child(odd) {
  background-color: var(--bkcolor_brightness_2);
}
.my_results_card .ranking_table,
.session_card .ranking_table {
  width: calc(100% + var(--block_content_padding_left) + var(--block_content_padding_right));
  margin-left: calc(var(--block_content_padding_left) * -1);
}
.ranking_table .rank {
  padding-left: var(--block_content_padding_left);
}
.ranking_table .value {
  padding-right: var(--block_content_padding_right);
}
/* ---- Colonnes centrées (le pseudo / la course absorbent la largeur) ---- */
.ranking_table .rank,
.ranking_table .kart,
.ranking_table .date,
.ranking_table .sector,
.ranking_table .value {
  text-align: center;
}
.ranking_table .rank {
  width: 34px;
}
.ranking_table .pseudo {
  font-weight: 600;
  /* la colonne qui absorbe la largeur ; width 100% + max-width 0 = ellipsis en table auto */
  width: 100%;
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
/* l'ellipsis est sur le nom et pas sur la cellule : un nom long ne pousse pas le volant hors de vue */
.ranking_table .pseudo .name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.ranking_table .pseudo:has(.skill_wheel) .name {
  max-width: calc(100% - 26px);
  /* la place du volant du niveau : 18px + 8px de margin */
}
/* non-membre (pas de clic) : pseudo discret, comme l'ancienne page */
.ranking_table tbody tr:not([onclick]) .pseudo {
  font-weight: normal;
  opacity: 0.8;
}
.ranking_table .date {
  white-space: nowrap;
  font-size: 12rem;
}
.ranking_table .sector {
  white-space: nowrap;
  font-size: 12rem;
  font-variant-numeric: tabular-nums;
}
/* ---- Chip kart (colonne kart des lignes, chips des records, filtre du graphique) ---- */
.kart_chip {
  display: inline-block;
  max-width: 110px;
  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;
  vertical-align: middle;
}
/* ---- Volant du niveau du pilote (statuts 3/4/5), comme la page résultats ---- */
.ranking_table .pseudo .skill_wheel {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  padding: 2px;
  /* le dessin du volant remplit tout le png : sans marge il touche le bord de la pastille */
  margin-left: 8px;
  border-radius: 50%;
  background-color: #1d1d1d;
  /* pastille sombre : les volants jaunes ressortent sur les deux thèmes */
  vertical-align: text-top;
}
/* ---- Pagination sous le tableau (première page / -N / +N / dernière page) ---- */
.ranking_pagination {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.ranking_pagination [data-page] {
  width: 34px;
  height: 34px;
  padding: 0;
}
.ranking_pagination [data-page]::before {
  font-family: 'fontawesome bold';
  font-size: 12rem;
}
.ranking_pagination [data-page="first"]::before {
  content: "\f048";
}
.ranking_pagination [data-page="previous"]::before {
  content: "\f04a";
}
.ranking_pagination [data-page="next"]::before {
  content: "\f04e";
}
.ranking_pagination [data-page="last"]::before {
  content: "\f051";
}
.ranking_table .value {
  font-weight: 600;
  /* le temps est la valeur de la ligne, sans couleur en plus */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* classement de la séance : le temps ressort à la couleur du centre, comme results.php / leaderboards.php */
.session_card .ranking_table .value {
  color: var(--bkcolor_main);
  font-weight: 800;
}
/* Sur grand écran les colonnes chiffres respirent */
@media (min-width: 850px) {
  .ranking_table .date,
  .ranking_table .sector,
  .ranking_table .value {
    padding-left: 22px;
    padding-right: 22px;
  }
}
/* ---- Médaille du rang : pleine pour 1/2/3, numéro simple ensuite. ---- */
.ranking_table .rank span {
  display: inline-block;
  min-width: 24px;
  height: 24px;
  line-height: 24px;
  padding: 0 4px;
  border-radius: calc(12px * var(--border_radius_percent, 100) / 100);
  text-align: center;
  font-weight: bold;
}
/* mêmes médailles que l'ancienne page et que les chips des records, texte sombre comme les marches */
.ranking_table .rank_1 .rank span {
  background-color: var(--ranking_gold);
  color: #1d1d1d;
}
.ranking_table .rank_2 .rank span {
  background-color: var(--ranking_silver);
  color: #1d1d1d;
}
.ranking_table .rank_3 .rank span {
  background-color: var(--ranking_bronze);
  color: #1d1d1d;
}
/* ---- Survol d'une ligne cliquable et ligne active (posée par js) ---- */
.ranking_table tbody tr[onclick] {
  cursor: pointer;
}
.ranking_table tbody tr[onclick],
.ranking_table tbody tr.active {
  position: relative;
  z-index: 0;
  /* la pastille en z-index -1 reste devant le fond de la carte */
}
.ranking_table tbody tr[onclick] td:first-child::after,
.ranking_table tbody tr.active td:first-child::after {
  content: "";
  position: absolute;
  inset: 0 -6px;
  z-index: -1;
  /* derrière le texte de la ligne */
  border-radius: calc(10px * var(--border_radius_percent, 100) / 100);
  pointer-events: none;
}
.ranking_table tbody tr[onclick]:hover td:first-child::after {
  background-color: var(--ranking_border);
}
/* au survol le pseudo se teinte suivant le sexe (bleu homme / rose femme) */
.ranking_table tbody tr[data-sex="1"]:hover .pseudo {
  color: #4aa1da;
}
.ranking_table tbody tr[data-sex="2"]:hover .pseudo {
  color: #F756FF;
}
.ranking_table tbody tr.active td:first-child::after {
  border: 2px solid var(--bkcolor_main);
}
.ranking_table tbody tr.active .pseudo {
  color: var(--bkcolor_main);
}
/* ---- Colonnes secondaires masquées quand c'est étroit ---- */
@media (max-width: 768px) {
  .ranking_table .sector {
    display: none;
  }
}
@media (max-width: 560px) {
  .ranking_table .date {
    display: none;
  }
}
@media (max-width: 430px) {
  .ranking_table .kart {
    display: none;
  }
}
/* ---- Mobile : plein bord, la pastille de ligne ne déborde plus de la carte ---- */
@media (max-width: 850px) {
  .ranking_table tbody tr[onclick] td:first-child::after,
  .ranking_table tbody tr.active td:first-child::after {
    inset: 0;
  }
}
/* =====================================================================
   Colonnes propres à "Mes résultats" (piste, course + icône course/séance)
   ===================================================================== */
.ranking_table.member_results .track {
  white-space: nowrap;
  text-align: left;
}
.ranking_table.member_results .race {
  /* la course absorbe la largeur (comme le pseudo ailleurs) */
  width: 100%;
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 600;
}
.ranking_table.member_results .race .name {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.race_type {
  margin-right: 8px;
  opacity: 0.55;
}
.race_type::before {
  font-family: 'fontawesome bold';
  font-size: 14rem;
}
.race_type[data-type="race"]::before {
  content: "\f11e";
}
.race_type[data-type="session"]::before {
  content: "\f2f2";
}
/* Étroit : on garde le rang, la date et le temps (le kart, la piste et la course sautent) */
@media (max-width: 850px) {
  .ranking_table.member_results .kart,
  .ranking_table.member_results .track {
    display: none;
  }
}
/* La course reste jusqu'au bout : c'est elle qui dit de quelle séance vient la ligne
   (et ce qu'on ouvre en cliquant). C'est la date qui saute avec le masquage générique. */
/* =====================================================================
   Squelette d'une section (entête + bascule podium/graphique)
   ===================================================================== */
.member_section {
  margin-top: 30px;
}
.member_section_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}
.member_section_header h2 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member_section_title {
  margin: 0 0 15px;
}
/* Onglets d'une section (tableau / graphique), soulignés comme ceux de la top bar */
.member_tabs {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.member_tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--color_brightness);
  font-family: inherit;
  font-size: 14rem;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.5;
  /* onglet inactif estompé */
}
.member_tab:hover {
  opacity: 1;
}
.member_tab.active {
  opacity: 1;
  border-bottom-color: var(--bkcolor_main);
}
.member_tab::before {
  font-family: 'fontawesome bold';
  font-size: 14rem;
}
.member_tab.toggle_results::before {
  content: "\f0cb";
}
.member_tab.toggle_evolution::before {
  content: "\f201";
}
@media (max-width: 850px) {
  .member_tab span {
    display: none;
    /* l'icône suffit, le libellé reste dans le title */
  }
}
/* =====================================================================
   Carte du pilote + dernière course : 2 colonnes sur grand écran (la carte à
   gauche, le partage juste dessous), tout empilé en dessous où le partage
   passe en dernier pour garder la dernière course visible sans scroller.
   ===================================================================== */
.member_area {
  display: grid;
  grid-template-columns: 320px 1fr;
  /* de quoi tenir les 3 pastilles âge/sexe/poids sur une ligne */
  /* la 2e rangée absorbe la hauteur en trop de la dernière course : sans ça les
	   deux rangées se la partagent et le partage flotte loin sous la carte */
  grid-template-rows: auto 1fr;
  grid-template-areas: "card race" "share race";
  gap: 25px;
  align-items: start;
}
.member_card {
  grid-area: card;
}
.last_race {
  grid-area: race;
  margin-top: 0;
}
/* la grille gère l'espacement, pas le margin des sections */
.member_share {
  grid-area: share;
}
/* Sous 1250px l'.ax-body ne fait plus que 742px : la colonne de droite serait
   trop étroite pour le graphique, on empile et la carte reste à sa largeur, centrée. */
@media (max-width: 1250px) {
  .member_area {
    grid-template-columns: 1fr;
    grid-template-areas: "card" "race" "share";
  }
  .member_card,
  .member_share {
    width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* =====================================================================
   Carte du pilote : photo débordante, pseudo, âge/sexe/poids, niveau
   ===================================================================== */
.member_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* teintée à la couleur du centre : la carte se distingue des cartes de la colonne de droite */
  background-color: color-mix(in srgb, var(--bkcolor_main) 10%, var(--bkcolor_brightness_1));
  /* la photo dépasse en haut : la carte démarre au centre vertical de la photo */
  margin-top: 55px;
  text-align: center;
}
.member_photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-clip: padding-box;
  /* la photo ne déborde pas sous la bordure (sinon un filet apparaît) */
  background-color: var(--bkcolor_brightness_1);
  border: 4px solid var(--bkcolor_brightness_2);
  /* anneau clair pour détacher la photo de la carte */
  margin-top: calc(-55px - var(--block_content_padding_top));
  /* remontée de la moitié de sa hauteur */
}
/* Silhouette par défaut : le png a une marge grise en bas -> léger zoom + calage haut
   pour remplir le cercle. Une vraie photo garde cover/center (pas de recadrage du visage). */
.member_photo.default_avatar,
.result_photo.default_avatar {
  background-size: auto 114%;
  background-position: center top;
}
.member_name {
  margin: 0;
  font-size: 22rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  /* un pseudo très long passe à la ligne au lieu de déborder de la carte */
}
/* Age / sexe / poids en pastilles sur une ligne, l'icône à la place du libellé
   pour garder la carte courte (elles passent à la ligne si elles ne tiennent pas). */
.member_meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.member_meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: calc(13px * var(--border_radius_percent, 100) / 100);
  background-color: var(--bkcolor_brightness_2);
  /* la carte est teintée : la pastille ressort en clair dessus */
  font-size: 12rem;
  font-weight: 600;
  white-space: nowrap;
}
.member_meta span::before {
  font-family: 'fontawesome bold';
  font-weight: normal;
  opacity: 0.6;
}
.member_meta .age::before {
  content: "\f1fd";
}
.member_meta .sex::before {
  content: "\f007";
}
.member_meta .weight::before {
  content: "\f5cd";
}
/* ---- Niveau : barre des 99 points, un trait à chaque palier, le volant du
   niveau posé sur les points acquis avec son nom au-dessus ---- */
.member_skill {
  width: 100%;
  max-width: 420px;
  /* la carte prend toute la largeur en une colonne : la barre ne s'étire pas au delà */
  margin-top: 6px;
  padding-top: 32px;
  /* la place du volant (13px) et de son nom au-dessus */
  padding-bottom: 20px;
  /* la place des noms des niveaux, sous la barre */
}
.skill_bar {
  position: relative;
  height: 8px;
  border-radius: calc(4px * var(--border_radius_percent, 100) / 100);
  /* barre carrée ou pilule suivant le thème */
  background-color: var(--ranking_border);
}
.skill_bar::before {
  /* les points acquis */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--skill_percent, 0) * 1%);
  border-radius: inherit;
  /* en dur, comme les volants des niveaux qui sont des png : la couleur du centre peut
	   être claire et le remplissage disparaîtrait sur la barre */
  background-color: #00a6de;
}
/* Un palier = la portion de barre qu'ouvre son niveau : son trait à gauche, et son nom
   sous la barre au survol de cette portion. Un seul nom à la fois : ils ne se marchent
   jamais dessus, même dans les langues à noms longs. La zone de survol dépasse la barre
   en haut et en bas, sinon elle ne fait que 8px et devient impossible à viser. */
.skill_step {
  position: absolute;
  top: -8px;
  bottom: -20px;
  margin-left: -1.5px;
  /* le trait est centré sur le palier */
}
.skill_step::before {
  /* le trait qui ouvre la portion, sur la hauteur de la barre */
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  /* sans lui le trait se centrerait dans la portion (text-align de la carte) */
  height: 8px;
  width: 3px;
  background-color: var(--bkcolor_brightness_2);
}
.skill_step:first-child::before {
  display: none;
  /* le 1er niveau démarre la barre : pas de trait devant lui */
}
/* La portion survolée est soulignée : on voit d'un coup où elle commence et où elle
   finit. Sous la barre, donc jamais recouvert par le volant, qui masque le trait du
   palier sur lequel il se trouve. */
.skill_step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 19px;
  /* 3px sous la barre */
  height: 2px;
  background-color: currentColor;
  opacity: 0;
}
.skill_step_name {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* centré sous sa portion : le nom dit de quelle portion il parle */
  font-size: 11rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.skill_step:hover::after {
  opacity: 0.3;
}
.skill_step:hover .skill_step_name {
  opacity: 0.7;
}
.skill_cursor {
  position: absolute;
  top: 50%;
  left: calc(var(--skill_percent, 0) * 1%);
  transform: translate(-50%, -50%);
}
/* Le nom suit le volant sans jamais sortir de la barre, quelle que soit sa
   longueur (traductions) : il glisse de sa propre largeur au fil de la barre —
   collé à gauche à 0 point, centré au milieu, collé à droite à 99 points. */
.skill_name {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(calc(var(--skill_percent, 0) * -1%));
  font-size: 13rem;
  font-weight: bold;
  white-space: nowrap;
}
.skill_points {
  /* les points acquis, en retrait derrière le nom du niveau */
  margin-left: 5px;
  font-weight: normal;
  opacity: 0.55;
}
/* scopé : le même .skill_wheel sert en inline dans la colonne pseudo des tableaux */
.member_skill .skill_wheel {
  display: block;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  padding: 3px;
  /* le dessin du volant remplit tout le png : sans marge il touche le bord de la pastille */
  border-radius: 50%;
  background-color: #1d1d1d;
  /* pastille sombre : les volants clairs comme les jaunes ressortent sur les deux thèmes */
}
/* Carte resserrée sur mobile : la dernière course doit rester visible sans scroller */
@media (max-width: 850px) {
  .member_card,
  .member_share {
    width: auto;
    /* pleine largeur, comme la dernière course en dessous */
    margin-left: 0;
    /* les marges auto de la règle du dessus centreraient un bloc à la largeur de son contenu */
    margin-right: 0;
  }
  .member_card {
    gap: 8px;
    margin-top: 45px;
  }
  .member_photo {
    width: 90px;
    height: 90px;
    margin-top: calc(-45px - var(--block_content_padding_top));
  }
  .member_name {
    font-size: 20rem;
  }
  .member_skill {
    margin-top: 2px;
  }
}
/* =====================================================================
   Partage (mon profil) — boutons Facebook / Instagram / X / email
   ===================================================================== */
.member_share {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  background-color: var(--bkcolor_brightness_2);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.09);
}
.member_share_label {
  font-weight: bold;
}
.member_share_buttons {
  display: flex;
  gap: 6px;
}
.share_button {
  flex: 0 1 40px;
  /* les icônes se resserrent plutôt que de passer à la ligne dans la colonne */
  height: 40px;
  padding: 0;
}
.share_button::before {
  font-family: 'fontawesome bold';
  /* email (icône Solid) */
  font-size: 17rem;
}
/* Facebook / X / WhatsApp / Telegram : icônes de marque (police brands) */
.share_button[data-network="facebook"]::before,
.share_button[data-network="x"]::before,
.share_button[data-network="whatsapp"]::before,
.share_button[data-network="telegram"]::before {
  font-family: 'fontawesome brands';
}
.share_button[data-network="facebook"]::before {
  content: "\f39e";
}
.share_button[data-network="x"]::before {
  content: "\e61b";
}
.share_button[data-network="whatsapp"]::before {
  content: "\f232";
}
.share_button[data-network="telegram"]::before {
  content: "\f2c6";
}
.share_button[data-network="email"]::before {
  content: "\f0e0";
}
.share_button[data-network="native"]::before {
  content: "\f1e0";
}
/* =====================================================================
   Dernière course : un seul bloc — les chiffres de la course, le graphique
   des tours et le podium, tout visible en même temps (plus de bascule).
   ===================================================================== */
.last_race_card {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
/* ---- Les chiffres d'un bloc : carte claire à colonnes libellé + valeur,
   partagée par la dernière course et les statistiques ---- */
.stat_row {
  display: flex;
  gap: 15px;
  padding: 18px 20px;
  border-radius: calc(14px * var(--border_radius_percent, 100) / 100);
  background-color: var(--bkcolor_brightness_2);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.09);
}
.stat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.stat_label {
  font-size: 15rem;
  text-align: center;
  opacity: 0.75;
}
.stat_value {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 19rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}
.stat_value::before {
  font-family: 'fontawesome bold';
  font-size: 16rem;
}
.stat.laps .stat_value::before {
  content: "\f01e";
}
.stat.rank .stat_value::before {
  content: "\e561";
}
.stat.best_time .stat_value::before {
  content: "\f005";
}
.stat.distance .stat_value::before {
  content: "\f018";
}
/* ---- Podium : le 1er au milieu, chacun sur une marche à la hauteur de son
   rang. Les marches sont posées sur la même ligne, donc ce qui est au-dessus
   (photo de la dernière course, nombre de podiums des stats) monte avec le rang. ---- */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.podium > li {
  flex: 1;
  /* les marches se partagent la largeur : le socle des stats est juste dessous */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
/* Dernière course : marches bornées, sinon une séance à 1 ou 2 pilotes les étire
   sur toute la carte (les podiums des stats, eux, doivent suivre leur socle) */
.last_race .podium > li {
  max-width: 220px;
}
/* scopé au podium : les chips des records portent les mêmes classes de rang et sont
   elles aussi dans un conteneur flex, elles se rangeraient en ordre de podium */
.podium .rank_1 {
  order: 2;
}
/* 2e - 1er - 3e, comme un vrai podium */
.podium .rank_2 {
  order: 1;
}
.podium .rank_3 {
  order: 3;
}
/* la marche : hauteur suivant le rang, le rang écrit en bas */
.podium_step {
  width: 100%;
  margin-top: 4px;
  padding-bottom: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* posée au sol : seuls les coins du haut sont arrondis */
  border-radius: calc(8px * var(--border_radius_percent, 100) / 100) calc(8px * var(--border_radius_percent, 100) / 100) 0 0;
  color: #1d1d1d;
  /* les 3 couleurs de marche restent claires sur les deux thèmes */
  font-size: 17rem;
  font-weight: bold;
}
.rank_1 .podium_step {
  height: 100px;
  background-color: var(--ranking_gold);
}
.rank_2 .podium_step {
  height: 68px;
  background-color: var(--ranking_silver);
}
.rank_3 .podium_step {
  height: 46px;
  background-color: var(--ranking_bronze);
}
.result_photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-clip: padding-box;
  /* comme .member_photo : pas de filet sous la bordure */
  background-color: var(--bkcolor_brightness_1);
  border: 3px solid var(--bkcolor_brightness_2);
}
.result_name {
  max-width: 100%;
  font-size: 16rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result_name[onclick] {
  cursor: pointer;
}
/* au survol le pseudo se teinte suivant le sexe, comme les lignes des tableaux */
.result_name[onclick]:hover {
  color: var(--bkcolor_main);
}
.result[data-sex="1"] .result_name[onclick]:hover {
  color: #4aa1da;
}
.result[data-sex="2"] .result_name[onclick]:hover {
  color: #F756FF;
}
.result.current .result_name {
  /* le membre consulté ressort, en dur comme la courbe : son nom
	                             ne doit pas disparaître quand la couleur du centre est claire */
  color: #00a6de;
}
.result_value {
  font-size: 15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}
/* Mobile : faute de place pour 3 colonnes, les chiffres s'empilent en lignes
   libellé + valeur, et ceux de la dernière course passent sous le podium
   (graphique et podium d'abord). */
@media (max-width: 850px) {
  .stat_row {
    flex-direction: column;
    gap: 12px;
  }
  .last_race .stat_row {
    order: 1;
    /* dernier enfant du bloc */
  }
  .stat {
    align-items: flex-start;
    gap: 2px;
  }
  .stat_label {
    text-align: left;
  }
  .result_photo {
    width: 52px;
    height: 52px;
  }
  .result_name {
    font-size: 15rem;
  }
  .rank_1 .podium_step {
    height: 80px;
  }
  .rank_2 .podium_step {
    height: 56px;
  }
  .rank_3 .podium_step {
    height: 38px;
  }
}
/* ---- Graphique des tours (flot). Les légendes sont des libellés au-dessus /
   en dessous du tracé (pas par-dessus ses bords). ---- */
.last_race_graph {
  display: flex;
  flex-direction: column;
  position: relative;
  /* ancre la bulle + le n° de tour */
  /* les 2 couleurs du tracé sont lues ici par le js (flot ne sait pas lire une var css, et
	   une couleur calculée est sûre : la var brute peut être un token non substitué) */
  color: #00a6de;
  /* la courbe, en dur comme l'ancienne page : la couleur du centre peut être claire et la courbe disparaîtrait sur la carte */
  border-color: var(--bkcolor_brightness_2);
  /* le remplissage des points (bordure de largeur 0 : invisible) */
}
.last_race_graph .graph_plot {
  width: 100%;
  height: 220px;
}
@media (max-width: 850px) {
  .last_race_graph .graph_plot {
    height: 160px;
    /* tracé plus court : le podium reste visible sans scroller */
  }
}
/* Commun aux 2 bulles : le js pose left/top au point survolé / choisi, chaque
   graphique met ensuite sa présentation (fond, arrondi, décalage au-dessus du point). */
.graph_bubble {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: calc(13px * var(--border_radius_percent, 100) / 100);
  background-color: var(--bkcolor_brightness_2);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.14);
  color: var(--color_brightness);
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
/* Bulle remontée de 25px, comme le n° de tour est descendu de 25px : le temps et le n°
   restent lisibles de part et d'autre du curseur, ou d'un doigt sur mobile. */
.last_race_graph .graph_bubble {
  transform: translateY(calc(-100% - 25px));
  padding: 5px 12px;
}
/* n° de tour en dessous du point (le js pose left/top) */
.last_race_graph .graph_lap {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, 25px);
  color: var(--color_brightness);
  font-size: 12rem;
  font-weight: bold;
  opacity: 0.7;
  pointer-events: none;
}
/* Légendes des 2 graphiques : elles ne prennent pas la couleur de la courbe
   portée par le conteneur */
.graph_legend_y,
.graph_legend_x {
  color: var(--color_brightness);
  font-size: 12rem;
  opacity: 0.55;
}
.graph_legend_y {
  order: -1;
  /* au-dessus du tracé, du côté de l'axe des temps */
  margin-bottom: 3px;
}
.graph_legend_x {
  text-align: right;
  margin-top: 3px;
}
/* =====================================================================
   Statistiques : les totaux (distance / tours) puis un podium par type,
   le nombre de fois 1er / 2e / 3e au-dessus des marches et le total en socle.
   ===================================================================== */
.statistics_card {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.stats_ranks {
  display: flex;
  flex-direction: column;
  /* les marches posées sur leur socle */
}
.stats_count {
  font-size: 24rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}
/* la coupe à côté du nombre, à la couleur de la marche */
.stats_count::after {
  content: "\f091";
  margin-left: 7px;
  font-family: 'fontawesome bold';
  font-size: 16rem;
}
.rank_1 .stats_count::after {
  color: var(--ranking_gold);
}
.rank_2 .stats_count::after {
  color: var(--ranking_silver);
}
.rank_3 .stats_count::after {
  color: var(--ranking_bronze);
}
/* le socle du podium : le nombre total de séances / de courses */
.stats_total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 15px;
  /* les marches sont posées dessus : le haut reste net, seuls les coins du bas sont arrondis */
  border-radius: 0 0 calc(8px * var(--border_radius_percent, 100) / 100) calc(8px * var(--border_radius_percent, 100) / 100);
  background-color: #4a4a4a;
  /* socle sombre sur les deux thèmes, comme la pastille du volant */
  color: #fff;
  font-size: 14rem;
  font-weight: bold;
  text-transform: uppercase;
}
.stats_total::before {
  font-family: 'fontawesome bold';
}
.stats_total.sessions::before {
  content: "\f2f2";
}
.stats_total.races::before {
  content: "\f11e";
}
/* =====================================================================
   Mes records : par piste, chips (rang + temps + kart) cliquables
   ===================================================================== */
.records_card {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.record_track_name {
  margin-bottom: 10px;
  font-size: 16rem;
}
/* les lignes se rangent côte à côte tant qu'elles tiennent, et se partagent la
   largeur restante : une rangée va toujours d'un bord à l'autre, sans trou au bout */
.record_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 15px;
}
.record_chip {
  flex: 1 1 300px;
  /* 300px = largeur de confort, elle décide du nombre de lignes par rangée */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: calc(10px * var(--border_radius_percent, 100) / 100);
  background-color: var(--bkcolor_brightness_2);
  text-decoration: none;
  color: inherit;
}
.record_chip:hover {
  box-shadow: inset 0 0 0 2px var(--bkcolor_main);
}
.record_rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: calc(6px * var(--border_radius_percent, 100) / 100);
  background-color: #1d1d1d;
  /* hors podium : pastille sombre sur les deux thèmes */
  color: #fff;
  font-size: 13rem;
  font-weight: bold;
}
/* podium : les couleurs des médailles, texte sombre comme les marches */
.record_chip.rank_1 .record_rank {
  background-color: var(--ranking_gold);
  color: #1d1d1d;
}
.record_chip.rank_2 .record_rank {
  background-color: var(--ranking_silver);
  color: #1d1d1d;
}
.record_chip.rank_3 .record_rank {
  background-color: var(--ranking_bronze);
  color: #1d1d1d;
}
.record_time {
  margin-left: auto;
  /* le temps reste aligné à droite de la ligne */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Mobile : une seule colonne, les lignes prennent toute la largeur de la carte
   en alternance claire, comme les tableaux, pour scanner la liste d'un coup d'œil */
@media (max-width: 850px) {
  .record_chips {
    display: block;
    /* les lignes reprennent toute la largeur, collées les unes aux autres */
  }
  .record_chip {
    width: calc(100% + var(--block_content_padding_left) + var(--block_content_padding_right));
    margin-left: calc(var(--block_content_padding_left) * -1);
    padding-left: var(--block_content_padding_left);
    padding-right: var(--block_content_padding_right);
    border-radius: 0;
    background-color: transparent;
  }
  .record_chip:nth-child(odd) {
    background-color: var(--bkcolor_brightness_2);
  }
}
/* =====================================================================
   Mes résultats / évolution / détail séance : cartes + loaders
   ===================================================================== */
.my_results_card,
.evolution_card,
.session_card {
  position: relative;
  /* ancre le .ax-loader */
  padding-top: 15px;
  padding-bottom: 15px;
}
/* pendant un chargement ajax : contenu estompé + loader visible (comme results.php) */
.my_results_card[data-loading] .my_results_table,
.evolution_card[data-loading] .evolution_graphic,
.session_card[data-loading] .session_table {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.my_results_card[data-loading] > .ax-loader,
.evolution_card[data-loading] > .ax-loader,
.session_card[data-loading] > .ax-loader {
  display: block;
}
/* le loader (60px) doit tenir dans la carte, encore vide au premier chargement */
.my_results_card[data-loading],
.evolution_card[data-loading],
.session_card[data-loading] {
  min-height: 90px;
}
.member_session {
  margin-top: 25px;
}
.member_session_title {
  margin: 0 0 15px;
}
/* ---- Graphique d'évolution : filtres ax-select (piste + karts) + tracé ---- */
.evolution_filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-bottom: 15px;
}
.evolution_filters .ax-select {
  min-width: 170px;
  /* le sélecteur de piste */
}
/* Les karts à tracer : le ax-choice donne déjà la pastille et son point, on ne
   fait que le teinter de la couleur de la courbe du kart */
.evolution_karts > div[data-value] {
  border-color: var(--ranking_border);
  /* kart non tracé : bordure discrète */
  font-size: 14rem;
}
.evolution_karts > div[data-value][data-active]:not([data-active="0"]) {
  border-color: var(--kart_color, var(--bkcolor_main));
}
.evolution_karts > div[data-value][data-active]:not([data-active="0"])::after {
  border-color: var(--kart_color, var(--bkcolor_main));
}
.evolution_plot_container {
  position: relative;
  display: flex;
  flex-direction: column;
  /* les 2 couleurs du tracé lues par le js, comme la dernière course */
  color: var(--bkcolor_main);
  /* couleur par défaut d'une courbe */
  border-color: var(--bkcolor_brightness_2);
  /* remplissage des points (bordure de largeur 0) */
}
.evolution_plot {
  width: 100%;
  height: 300px;
}
/* la carte du point choisi, affichée en flex par le js qui pose left/top au point :
   bandeau sombre (course + rang) sur une ligne, puis le temps et la date */
.evolution_plot_container .graph_bubble {
  transform: translateY(calc(-100% - 14px));
  width: max-content;
  /* la carte prend la largeur de son bandeau, qui tient sur une ligne */
  max-width: 180px;
  /* carte étroite : un nom de course trop long finit en « … » plutôt que d'étaler la carte */
  flex-wrap: wrap;
  text-align: center;
  line-height: 1.3;
}
/* Le chevron pointe le point du tracé, dans le dégagement laissé par le js sous la carte
   (le js pose --bubble_arrow_left : la carte se décale près des bords, le chevron non) */
.evolution_plot_container .graph_bubble::after {
  content: "\f0d7";
  position: absolute;
  top: 100%;
  left: clamp(14px, var(--bubble_arrow_left, 50%), calc(100% - 14px));
  transform: translate(-50%, -55%);
  color: var(--bkcolor_brightness_2);
  /* le fond de la carte */
  font-family: 'fontawesome bold';
  font-size: 26rem;
}
.evolution_plot_container .graph_bubble_race,
.evolution_plot_container .graph_bubble_rank {
  padding: 5px 6px;
  /* le bandeau prend les couleurs du kart de la courbe (posées par le js) : il dit de
	   quel kart vient le temps. Sombre par défaut, sur les deux thèmes. */
  background-color: var(--kart_color, #1d1d1d);
  color: var(--kart_text_color, #fff);
  font-size: 12rem;
  text-transform: uppercase;
  white-space: nowrap;
}
.evolution_plot_container .graph_bubble_race {
  flex: 1;
  min-width: 0;
  /* le nom se laisse réduire jusqu'à l'ellipse au lieu d'élargir la carte */
  padding-left: 12px;
  border-top-left-radius: inherit;
  /* le bandeau suit l'arrondi de la carte (pas d'overflow: hidden, il mangerait le chevron) */
  overflow: hidden;
  text-overflow: ellipsis;
}
.evolution_plot_container .graph_bubble_rank {
  padding-right: 12px;
  border-top-right-radius: inherit;
}
.evolution_plot_container .graph_bubble_rank::before {
  content: "\f0cb";
  margin-right: 5px;
  font-family: 'fontawesome bold';
}
.evolution_plot_container .graph_bubble_time {
  flex-basis: 100%;
  padding: 8px 12px 0;
  font-size: 22rem;
}
.evolution_plot_container .graph_bubble_date {
  flex-basis: 100%;
  padding: 0 12px 8px;
  font-size: 12rem;
  font-weight: normal;
  opacity: 0.55;
}