body {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #333;
  margin: 0;
  padding: 0;
}
.container {
  scrollbar-width: none;
}
.container::-webkit-scrollbar {
  display: none;
}
.table-compact {
  width: 100%;
  font-size: 14px;
}
.table-compact th,
.table-compact td {
  padding: 8px 10px;
  vertical-align: middle;
  text-align: center;
}
.team-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.last-games {
  display: flex;
  justify-content: center;
  gap: 5px;
}

/* Style pour les icônes de basket dans la colonne Last 5 */
.basketball-svg {
  vertical-align: middle;
  width: 16px; /* Taille par défaut */
  height: 16px;
}

/* Adaptation automatique selon la taille de l'écran */
@media (max-width: 576px) {
  .basketball-svg {
    width: 19px;
    height: 19px;
  }
}

@media (max-width: 480px) {
  .basketball-svg {
    width: 21px;
    height: 21px;
  }
}

@media (max-width: 375px) {
  .basketball-svg {
    width: 23px;
    height: 23px;
  }
}
tr {
  border-bottom: var(--thickness) solid var(--border);
  transition: background-color 0.2s;
}
tr:hover {
  background-color: #007bff33;
}
@media (max-width: 768px) {
  .table-compact {
    font-size: 12px;
  }
  .team-logo {
    width: 25px;
    height: 25px;
  }
  .table-compact th,
  .table-compact td {
    padding: 5px 8px;
  }
}
#team-graph {
  background-color: #19212e;
  
  border-radius: 10px;
  
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* Réduire le padding supérieur sur mobile mais garder suffisamment d'espace */
@media (max-width: 768px) {
  #team-graph {
    padding-top: 10px !important;
  }
  
  /* Ajuster le style des boutons pour mobile */
  .button-container {
    margin-top: 0;
    margin-bottom: 8px;
    padding: 0;
    width: 85%;
    justify-content: center;
    gap: 10px !important;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 0;
  }

  .controls-row {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .season-hidden {
    display: none !important;
  }
  
  /* Style des boutons pour mobile en respectant les préférences minimalistes */
  .styled-btn-small {
    border: 1px solid #00d6b4;
    border-radius: 4px;
    font-size: 11.5px;
    padding: 3px 8px;
    line-height: 1;
    min-height: 0;
    background-color: rgba(0, 214, 180, 0.08); /* Fond légèrement teinté */
    color: #00d6b4;
    text-transform: none;
    margin: 0;
    letter-spacing: 0;
    width: auto;
    min-width: 60px;
    max-width: 70px;
    display: inline-block;
    text-align: center;
  }
}

/* Masquer le logo et le nom de l'équipe sur mobile */
@media (max-width: 768px) {
  #team-info {
    display: none !important;
  }
}

/* Centrer les boutons en haut de la carte sur mobile */
@media (max-width: 768px) {
  .controls-row {
    justify-content: center !important;
    padding-top: 0;
    margin-top: 0;
  }
  
  /* Masquer le sélecteur de nombre de matchs sur mobile */
  #numMatches {
    display: none !important;
  }
}
.graph-container {
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
}
#graphCanvas {
  display: inline-block;
}
.slider-container {
  margin-top: 20px;
  text-align: center;
}
/* ================================
 Forcer le texte en gris et 
 MAJUSCULES pour les deux tableaux
 Est / Ouest uniquement
 ================================ */
.col-md-6 .players-table tbody td {
/* Texte des cellules en gris */
color: var(--text-gray) !important;
}


/* ===========================================
 Cercle transparent autour des logos équipe
 dans les tableaux Est / Ouest (taille augmentée)
 =========================================== */
.col-md-6 .team-cell .team-logo {
/* Fond très léger pour donner une impression “de nuit bleutée” */
background: rgba(255, 255, 255, 0.05);
/* Bord fin, légèrement visible sur fond sombre */
border: 0.0625rem solid rgba(255, 255, 255, 0.15); /* équivaut à 1px */
border-radius: 50%;
/* Padding autour du logo (0.25rem = 4px sur base 16px) */
padding: 0.25rem;
/* Nouvelle taille en rem pour le logo lui-même */
width: 2rem;   /* 24px si 1rem = 16px */
height: 2rem;
object-fit: contain;
}

/* Styles pour les onglets EAST/WEST - visibles uniquement sur mobile */
.conference-tabs {
  display: none; /* Par défaut, caché sur PC et grands écrans */
}

@media (max-width: 767px) {
  .conference-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* Afficher les deux tableaux côte à côte sur PC, mais l'un après l'autre sur mobile */
  #east-table, 
  #west-table {
    width: 100%;
    max-width: 100%;
  }
  
  /* Sur mobile, seul le tableau actif est visible */
  #east-table:not(.active),
  #west-table:not(.active) {
    display: none;
  }
}

.conference-tab {
  flex: 1;
  padding: 0.4rem 0;
  text-align: center;
  background-color: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
}

.conference-tab.active {
  background-color: transparent;
  color: #00d6b4;
  border-bottom: 1px solid #00d6b4;
}

/* Styles pour desktop et toutes les tailles d'écran */
.logo-and-name {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

/* Sur desktop, le logo et le nom sont sur la même ligne */
.logo-name-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Espacement entre le logo et le nom de l'équipe */
#team-logo-upper {
  margin-right: 15px;
}

/* Style pour le classement */
.ranking-large {
  font-size: 1.8rem;
  color: #00d6b4;
}

/* ——————————————————————————————————————————————————— 
   MEDIA QUERY POUR ÉCRANS ≤ 768px (MOBILE)
   ——————————————————————————————————————————————————— */
/* Styles pour mobile - teamstat */
@media screen and (max-width: 768px) {
  /* Style pour le logo et le nom de l'équipe en version mobile */
  .logo-and-name {
    justify-content: space-between; /* Force l'écart maximal entre les éléments */
  }
  
  /* Conteneur pour le logo et le nom uniquement sur mobile */
  .logo-name-container {
    display: flex;
    align-items: center;
    max-width: calc(100% - 85px); /* Espace réservé pour le classement */
    overflow: hidden;
  }
  
  /* Style pour le nom court de l'équipe avec troncature intelligente sur mobile */
  #team-short-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    font-size: 1.8rem;
    max-width: calc(100% - 70px); /* Espace réservé pour le logo */
    margin-right: 15px; /* Marge de sécurité entre le nom et le classement */
  }
  
  /* Style pour le classement sur mobile */
  .ranking-large {
    flex-shrink: 0; /* Empêche le classement de rétrécir */
    margin-left: auto; /* Pousse le classement à droite */
  }
}

/* Contour minimaliste autour des stats de la première carte (mobile uniquement) */
@media (max-width: 767px) {
  .stats-and-record {
    border: 0.5px solid #00d6b4; /* Contour turquoise très fin à 100% d'opacité */
    border-radius: 4px;
    padding: 6px 8px;
    margin: 0;
    margin-right: 16px;
    background-color: #00d6b4; /* Fond turquoise à 100% d'opacité */
    color: #FFFFFF !important; /* Force le texte en blanc */
  }
  
  /* Force le blanc pour tous les sous-éléments */
  .stats-and-record *,
  .stats-first,
  .stats-first span,
  .record-first,
  .record-first span,
  .record-first.text-light,
  .stats-and-record span[data-tooltip],
  .stats-and-record .stats-first span,
  .stats-and-record .record-first,
  .stats-and-record .record-first span,
  #team-wins, 
  #team-losses {
    color: #FFFFFF !important; /* Blanc pour tous les textes et sous-éléments */
  }
  
  /* Ciblage ultra spécifique des W et L */
  .stats-and-record .record-first.text-light {
    color: #FFFFFF !important;
    text-shadow: none !important;
  }
  
  /* Ajustement de l'espacement interne pour un look encore plus minimaliste */
  .stats-first {
    font-size: 0.75rem; /* Taille réduite pour tenir sur une ligne */
    letter-spacing: 0;
  }
  
  .stats-first span {
    margin-right: 8px; /* Espacement réduit entre les stats */
  }
  
  /* Taille des valeurs des stats réduite aussi */
  .stats-first span,
  .record-first {
    font-size: 0.75rem;
    color: #FFFFFF !important; /* Texte en blanc avec !important pour surcharger la règle globale */
    font-weight: 600; /* Plus gras pour meilleure lisibilité */
  }
  
  /* Surcharge spécifique pour les textes dans stats-and-record sur mobile */
  .stats-and-record,
  .stats-and-record span {
    color: #FFFFFF !important; /* Force le blanc sur tous les textes */
  }
  
  /* Compacter la ligne des stats */
  .stats-and-record {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

/* Gestion des tableaux sur mobile */
@media (max-width: 767px) {
  /* Par défaut, les deux tableaux sont cachés */
  .conference-table {
    display: none;
  }
  
  /* Le tableau actif est visible */
  .conference-table.active {
    display: block;
  }
  
  /* Configuration pour afficher toutes les colonnes sans défilement */
  .players-table-wrapper {
    overflow-x: visible !important;
    position: relative;
    width: 100%;
    margin: 0;
  }
  
  /* Structure de table avec toutes les colonnes visibles */
  .players-table {
    width: 100% !important;
    table-layout: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  
  /* Ajustement des colonnes pour s'adapter à différentes tailles d'écran */
  /* Colonne de rang - petite et fixe */
  .players-table th:nth-child(1),
  .players-table td:nth-child(1) {
    width: 25px;
    min-width: 25px;
  }
  
  /* Colonne d'équipe - flexible mais avec un minimum */
  .players-table th:nth-child(2),
  .players-table td:nth-child(2) {
    min-width: 80px;
  }
  
  /* Colonne Player plus large pour accommoder photo + nom */
  @media (max-width: 768px) {
    .players-table th:nth-child(2),
    .players-table td:nth-child(2) {
      min-width: 120px !important;
      width: 120px !important;
    }
  }
  
  /* Media queries pour ajuster la troncature selon la taille de l'écran */
  @media (min-width: 480px) and (max-width: 767px) {
    .players-table .team-cell span {
      max-width: 120px;
    }
  }
  
  @media (min-width: 400px) and (max-width: 479px) {
    .players-table .team-cell span {
      max-width: 100px;
    }
  }
  
  @media (max-width: 399px) {
    .players-table .team-cell span {
      max-width: 80px;
    }
  }
  
  /* Colonnes GP, W, L - petites mais suffisantes pour les chiffres */
  .players-table th:nth-child(3),
  .players-table td:nth-child(3),
  .players-table th:nth-child(4),
  .players-table td:nth-child(4),
  .players-table th:nth-child(5),
  .players-table td:nth-child(5) {
    width: 30px;
    min-width: 30px;
    max-width: 35px;
  }
  
  /* Colonne Last 5 Games - s'adapte à l'espace restant */
  .players-table th:nth-child(6),
  .players-table td:nth-child(6) {
    min-width: 100px;
  }
  
  /* Ajustements pour les très petits écrans */
  @media (max-width: 360px) {
    .players-table .team-cell span {
      max-width: 70px;
    }
  }
  
  /* Ajustements pour les écrans moyens */
  @media (min-width: 361px) and (max-width: 480px) {
    .players-table .team-cell span {
      max-width: 100px;
    }
  }
  
  /* Ajustements pour les grands écrans mobiles */
  @media (min-width: 481px) and (max-width: 767px) {
    .players-table .team-cell span {
      max-width: 150px;
    }
  }
  
  /* Styles spécifiques pour garantir que les tableaux EAST et WEST sont identiques - uniquement sur mobile */
  @media (max-width: 767px) {
    #east-table .players-table,
    #west-table .players-table {
      width: 100% !important;
      table-layout: fixed !important;
      margin: 0 !important;
      max-width: none !important;
      min-width: 0 !important;
      border-collapse: collapse !important;
    }
    
    #east-table .players-table-wrapper,
    #west-table .players-table-wrapper {
      overflow-x: visible !important;
      overflow: visible !important;
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
    }
  }
  
  /* Assurer que les colonnes ont les mêmes dimensions dans les deux tableaux - uniquement sur mobile */
  @media (max-width: 767px) {
    #east-table .players-table th,
    #west-table .players-table th,
    #east-table .players-table td,
    #west-table .players-table td {
      padding: 8px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    /* Définir des largeurs fixes pour chaque colonne */
    #east-table .players-table th:nth-child(1),
    #west-table .players-table th:nth-child(1),
    #east-table .players-table td:nth-child(1),
    #west-table .players-table td:nth-child(1) {
      width: 10% !important;
    }
  }
  
  @media (max-width: 767px) {
    #east-table .players-table th:nth-child(2),
    #west-table .players-table th:nth-child(2),
    #east-table .players-table td:nth-child(2),
    #west-table .players-table td:nth-child(2) {
      width: auto !important;
      min-width: 100px !important;
      max-width: none !important;
    }
    
    #east-table .players-table th:nth-child(3),
    #west-table .players-table th:nth-child(3),
    #east-table .players-table td:nth-child(3),
    #east-table .players-table th:nth-child(4),
    #west-table .players-table th:nth-child(4),
    #east-table .players-table td:nth-child(4),
    #east-table .players-table th:nth-child(5),
    #west-table .players-table th:nth-child(5),
    #east-table .players-table td:nth-child(5),
    #west-table .players-table td:nth-child(3),
    #west-table .players-table td:nth-child(4),
    #west-table .players-table td:nth-child(5) {
      width: 10% !important;
    }
    
    #east-table .players-table th:nth-child(6),
    #west-table .players-table th:nth-child(6),
    #east-table .players-table td:nth-child(6),
    #west-table .players-table td:nth-child(6) {
      width: 20% !important;
    }
  }
  
  /* Style pour l'indicateur de défilement */
  .scroll-indicator {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #00d6b4;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px 0 0 4px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
    cursor: pointer;
  }

  /* Styles pour PC et grands écrans */
@media (min-width: 768px) {
  /* Afficher les deux tableaux côte à côte sur PC */
  #east-table, 
  #west-table {
    display: block !important; /* Toujours visibles sur PC */
    width: 50%;
    float: left;
  }
  
  /* Assurer que les deux tableaux ont exactement les mêmes styles */
  #east-table .players-table,
  #west-table .players-table {
    width: 100%;
    table-layout: auto;
  }
}

  /* S'assurer que les cellules d'équipe ont le même comportement dans les deux tableaux */
  #east-table .team-cell span,
  #west-table .team-cell span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* Ajustements supplémentaires pour mobile */
  .card {
    border-radius: 0;
    border: none;
    margin-left: -15px;
    margin-right: -15px;
  }
  
  .players-table th {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
  }
  
  /* Réduire l'espace entre les onglets et le tableau */
  .conference-tabs + .conference-table {
    margin-top: 0;
  }
}

/* 1) Style de base pour tous les navigateurs */
input[type="range"].slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 50%;
height: 6px;
background: #373e4a;      /* Track gris foncé par défaut */
border-radius: 3px;
outline: none;
margin: 0;
}

/* 2) Track “non rempli” (WebKit) */
input[type="range"].slider::-webkit-slider-runnable-track {
height: 6px;
background: #373e4a;
border-radius: 3px;
border: none;
}

/* 3) Track “non rempli” (Firefox) */
input[type="range"].slider::-moz-range-track {
height: 6px;
background: #373e4a;
border-radius: 3px;
border: none;
}

/* 4) Track “rempli” (Firefox) */
input[type="range"].slider::-moz-range-progress {
background: #009e85;     /* vert sombre pour partie remplie */
height: 6px;
border-radius: 3px;
border: none;
}

/* 5) Pouce (thumb) turquoise vif */
input[type="range"].slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #00d6b4;     /* turquoise vif */
border: none;
border-radius: 50%;
cursor: pointer;
margin-top: -5px;         /* pour centrer verticalement sur track de 6px */
box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
input[type="range"].slider::-moz-range-thumb {
width: 16px;
height: 16px;
background: #00d6b4;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

/* 6) Fallback pour IE/Edge anciens */
input[type="range"].slider::-ms-track {
width: 100%;
height: 6px;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type="range"].slider::-ms-fill-lower {
background: #009e85;     /* vert sombre pour partie remplie */
border-radius: 3px;
}
input[type="range"].slider::-ms-fill-upper {
background: #373e4a;     /* gris foncé */
border-radius: 3px;
}
input[type="range"].slider::-ms-thumb {
width: 16px;
height: 16px;
background: #00d6b4;
border: none;
border-radius: 50%;
cursor: pointer;
}


.team-logos {
  text-align: center;
  margin-top: 20px;
}
.team-logos img {
  width: 50px;
  height: 50px;
  margin: 0 10px;
}
.player-photo {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Agrandir la photo dans les cartes best player */
.player-card .player-photo-block .player-photo {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain;
  border-radius: 8px;
}
.styled-select {
  background-color: #2c3e50;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 5px 8px;
  width: 150px;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  outline: none;
  transition: all 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.styled-select:hover {
  background-color: #34495e;
}
.styled-select:focus {
  border: 1px solid #00d6b4;
  box-shadow: 0 0 10px rgba(0, 214, 180, 0.6);
}
.select-label {
  font-size: 14px;
  color: white;
  margin-right: 10px;
}
.button-container {
margin-top: 0;
display: flex;
justify-content: flex-start;
gap: 6px;                /* espace réduit entre TOUS les éléments */
}

.styled-btn-small {
background: transparent !important;
border: 1px solid var(--accent) !important;
color: var(--accent) !important;
padding: 4px 10px !important;   /* moins de padding vertical et horizontal */
font-size: 0.75rem !important;  /* texte plus petit */
line-height: 1 !important;      /* hauteur de ligne compacte */
border-radius: 4px !important;  /* coins légèrement arrondis */
min-width: auto !important;     /* plus de largeur forcée */
transition: background 0.3s, color 0.3s;
}

.styled-btn-small:hover {
background: var(--accent) !important;
color: white !important;
}

#numMatches {
background: transparent !important;
border: 1px solid var(--accent) !important;
color: var(--accent) !important;
padding: 4px 10px !important;    /* match les padding des boutons */
font-size: 0.75rem !important;   /* même taille de texte compacte */
line-height: 1 !important;       /* hauteur de ligne compacte */
border-radius: 4px !important;   /* même arrondi */
min-width: auto !important;      /* largeur libre selon le contenu */
-webkit-appearance: none;        /* compatibilité WebKit */
-moz-appearance: none;           /* compatibilité Firefox */
appearance: none;                /* supprime la flèche native pour un rendu plus net */
transition: background 0.3s, color 0.3s;
}

/* Hover / focus identique aux boutons */
#numMatches:hover,
#numMatches:focus {
background: var(--accent) !important;
color: white !important;
 outline: none !important;
}
.controls-row label,
#team-graph .select-label {
color: #fff !important;
}
/* Le numMatches garde sa couleur var(--accent) définie plus haut */
#team-graph #team-name {
color: var(--text-gray) !important;
}

/* 5) Cercle transparent derrière le logo du bas */
#team-graph #team-logo {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 50%;
padding: 4px;
}

/* Si besoin, garantir qu’on voit bien le contour turquoise au hover de la select */
#numMatches option:checked {
background-color: rgba(0, 214, 180, 0.1); /* turquoise très light */
color: #ffffff;                            /* numéro en blanc */
}

.match-result-win {
color: #00d6b4 !important;
fill: #00d6b4 !important;
}
.match-result-loss {
color: #ff5b5b !important;
fill: #ff5b5b !important;
}

.basketball-svg {
display: inline-block;
vertical-align: middle;
}

/* Ensure the SVG path inherits the color */
.basketball-svg path {
fill: currentColor !important;
}

/* --- NOUVEAU CSS POUR LA PREMIÈRE CARD --- */
.team-card {
  background-color: #19212e;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  position: relative;
  color: #fff;
  padding: 20px;
  min-height: 160px;
  display: flex;
flex-direction: column;
}
/* on passe d’abord les joueurs, puis les stats */
.stats-and-record { order: 2; }
.star-players-first { order: 1; }
.card-first-row {
width: 100%;
display: flex;
align-items: center;
justify-content: center;    /* 1) centre le flex container */
}


.logo-and-name {
display: flex;
align-items: center;
gap: 1.5rem;
margin-right: auto;         /* 2) pousse le logo+nom à l’extrême gauche */
}
.team-logo-first {
width: 100px;
height: 100px;
padding: 0.5rem;                         /* espace autour du logo */
background: rgba(255,255,255,0.1);       /* fond semi-transparent */
border-radius: 50%;                      /* forme circulaire */
backdrop-filter: blur(8px);              /* flou sur l’arrière-plan */
-webkit-backdrop-filter: blur(8px);      /* support Safari */
/* facultatif : une très fine bordure */
border: 1px solid rgba(255,255,255,0.2);
object-fit: contain;
}


.team-name-first {
color: var(--text-gray) !important;
display: inline-block;        /* nécessaire pour scale si vous voulez garder le transform */
font-size: 32px;              /* passe de 22px à 32px pour plus de présence */
/*font-weight: 900;             /* ultra bold */
line-height: 1;               /* pour coller les deux lignes */
margin-left: 1rem;
/*text-transform: uppercase;    /* déjà en majuscules */
letter-spacing: 1px;          /* un peu d’air entre les lettres */
/* si vous ne voulez plus du transform scale : */
transform: none;              
}


.stats-first {
  gap: 15px;
  font-size: 16px;
  /*font-weight: bold;*/
}
.ranking {
  font-size: 20px;
  color: #00d6b4;
}
.record-first {
  color: var(--text-gray) !important;
  font-size: 14px;
  /*font-weight: bold;*/
}
.star-players-first {
display: flex;
align-items: center;
gap: 20px;
font-size: 16px;
font-weight: bold;
margin: 0;                   /* 3) annule tout décalage latéral */
}

/* transforme chaque container de joueur en colonne : photo au-dessus, nom en dessous */
.star-players-first > div {
display: flex;
flex-direction: column;
align-items: center;
}
/* petit espace et style pour le nom */
.star-players-first > div span {
margin-top: 6px;
font-size: 14px;
text-transform: uppercase !important;
color: var(--text-gray) !important;
}

.last-games-icons-first {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}
.last-games-icons-first i {
  font-size: 18px;
}

/* --- Ajustements responsives pour petits écrans --- */
@media (max-width: 768px) {
  .card-first-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    
  }
  .logo-and-name {
display: flex;
align-items: center;
gap: 1.5rem;   /* passe de 10px (~0.6rem) à 1.5rem pour plus d’air */
}
  .stats-first {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 8px;
  }
  .record-first {
    color: var(--text-gray) !important;
    position: static;
    margin-top: 5px;
  }
  .team-logo-first {
    width: 60px;
    height: 60px;
  }
  .team-name-first {
margin-left: 1rem;  /* décale le nom vers la droite */
}
  .stats-first span {
    font-size: 14px;
  }
  /* Masquer la section des joueurs sur mobile */
  .star-players-first {
    display: none;
  }
  .last-games-icons-first {
    justify-content: center;
  }
}
.player-stats-card {
  background-color: #19212e;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  margin-top: 20px;
}
.table-title {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 16px;
}
.table-wrapper {
  overflow-x: auto;
}
.stats-table {
  width: 100%;
  border-collapse: collapse;
}
.stats-table thead th {
  padding: 12px 8px;
  color: #fff;
  font-weight: 400;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  text-align: center;
}
.stats-table tbody td {
  padding: 12px 8px;
  color: var(--text-gray) !important;
  text-align: center;
  vertical-align: middle;
}
.player-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.player-avatar {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}
.stats-table tbody tr {
  border-bottom: 2px solid #00d6b4;
}
.stats-table tbody tr:hover {
  background-color: rgba(255,255,255,0.05);
}
@media (max-width: 768px) {
  .player-avatar { width: 30px; height: 30px; }
  .stats-table thead th,
  .stats-table tbody td {
    padding: 8px 6px;
    font-size: 12px;
  }
}
:root {
--text-gray: #A0A0A0;
--bg-page: #1e1e1e;
--bg-panel: #1b2530;
--bg-header: #22303f;
--bg-row: #19212b;
--bg-hover: #263447;
--accent: #00d6b4;
--text-main: #e0e0e0;
--border: #2c3a4a;
--radius: 4px;
--thickness: 1px;
}

/* wrapper scroll + fond panel */
.players-table-wrapper {
  border: none;
  border-radius: 0;
  background: var(--bg-panel);
}

/* Limitation de hauteur et scroll interne UNIQUEMENT sur desktop */
@media (min-width: 768px) {
  .players-table-wrapper {
    max-height: 50vh;
    overflow-y: auto;
  }
}

/* Style pour le bloc W/L (ajout d'une marge à droite) */
.record-first {
  margin-right: 15px !important;
}

/* Marges pour le logo et les boutons qui sont collés aux bords */
#team-info {
  padding-left: 15px !important;
}

.button-container {
  margin-left: 15px !important;
}

/* === FULL WIDTH MOBILE POUR TOUTES LES CARTES ET CONTENEURS === */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
    max-width: 100%;
  }
  
  .row,
  .container,
  .col-12,
  .col-md-6,
  .col-md-3,
  .card,
  .team-card,
  #team-graph,
  .graph-container,
  .player-card,
  .player-stats-card,
  .slider-container,
  .rank-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box;
    position: relative;
  }
  
  /* === FIX POUR LE TABLEAU DES JOUEURS AVEC SCROLL HORIZONTAL === */
  /* Conteneur avec scroll horizontal */
  .players-table-wrapper {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    -webkit-overflow-scrolling: touch; /* Scroll fluide sur iOS */
  }
  
  /* Tableau avec largeur fixe minimale pour forcer le scroll */
  .players-table-wrapper table {
    width: 100% !important;
    min-width: 800px; /* Force le scroll horizontal quand l'écran est plus petit */
    table-layout: fixed;
  }
  
  /* Taille des cellules adaptée */
  .players-table-wrapper th,
  .players-table-wrapper td {
    padding: 5px 8px !important;
    font-size: 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Styles spécifiques pour le tableau des joueurs en bas */
  .player-stats-table {
    table-layout: fixed !important;
  }
  
  /* Éviter la troncature pour le tableau des joueurs */
  .player-stats-table td,
  .player-stats-table th {
    white-space: normal !important;
    text-overflow: clip !important;
    text-align: center !important;
    padding: 5px 5px !important;
  }
  
  /* Largeur uniforme pour les colonnes statistiques - toutes les colonnes après Position et Player */
  .player-stats-table th:not(:first-child):not(:nth-child(2)),
  .player-stats-table td:not(:first-child):not(:nth-child(2)) {
    width: 40px !important;
    min-width: 40px !important;
  }
  
  /* Colonne Player plus large */
  .player-stats-table th:nth-child(2),
  .player-stats-table td:nth-child(2) {
    width: 120px !important;
    min-width: 120px !important;
  }
}
/* table générale */
.players-table {
width: 100%;
border-collapse: collapse;
background: transparent;
color: var(--text-gray) !important;
}

/* en-têtes collants */
.players-table thead th {
position: sticky;
top: 0;
background: var(--bg-header);
color: var(--accent);
font-weight: 400;
border-bottom: var(--thickness) solid var(--border);
padding: 0.75rem;
text-align: center;
}

/* cellule photo si besoin */
.players-table tbody td:nth-child(2) .player-photo {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: var(--radius);
}

/* lignes et hover */
.players-table tbody tr {
border-bottom: var(--thickness) solid var(--border);
transition: background-color 0.2s;
}
.players-table tbody tr:nth-child(odd) {
background: var(--bg-row);
}
.players-table tbody tr:hover {
background: var(--bg-hover);
}

/* padding générique pour toutes les cellules */
.players-table td {
padding: 0.6rem 0.75rem;
text-align: center;
vertical-align: middle;
color: var(--text-gray) !important;
}

/* Met en gras et centre la colonne Position du tableau joueurs, texte gris uniforme */
.stats-table td.player-position,
.players-table td.player-position {
font-weight: bold;
text-align: center;
color: var(--text-gray) !important;
}


/* scrollbar custom */
.players-table-wrapper::-webkit-scrollbar {
width: 8px;
}
.players-table-wrapper::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: var(--radius);
}
.players-table-wrapper::-webkit-scrollbar-track {
background: var(--bg-panel);
}
.player-name {
display: block;          /* nécessaire pour text-overflow */
white-space: nowrap;     /* pas de retour à la ligne automatique */
overflow: hidden;        /* coupe le texte qui dépasse */
text-overflow: ellipsis; /* ajoute “…” en fin de mot si ça déborde */
max-width: 100%;         /* limite à la largeur du parent */
}
.player-name img {
display: block;   /* ou inline-block */
width: 40px;      /* comme tu veux */
height: 40px;
border-radius: 50%;
}
.card {
border: none;
}

.col-md-6 > .card {
background: var(--bg-panel);
border: var(--thickness) solid var(--border);
border-radius: var(--radius);
overflow: hidden;        /* pour que la table ne déborde pas du radius */
box-shadow: 0 0 10px rgba(0,0,0,0.2); /* même ombre que tes autres cards */
padding: 0;              /* tu peux ajuster ou supprimer si tu préfères */
}

/* Container des deux lignes du nom */
.team-name-2lines {
display: flex;
flex-direction: column;
/* Espace entre la ligne du haut et celle du bas */
gap: 0.3rem; /* ajuste cette valeur à ton goût */
}

/* Optionnel : si tu préfères cibler le second <span> */
.team-name-2lines span + span {
margin-top: 0.25em;
}

/* 1) On force chaque span à être un block verticalement empilé */
.team-name-2lines span {
display: block;
margin: 0;
padding: 0;
}

/* 2) On conserve le gap “modern” (pour Chrome, Edge, Safari…) */
.team-name-2lines {
display: flex;
flex-direction: column;
gap: 0.3rem;       /* votre espacement désiré */
row-gap: 0.3rem;   /* fallback explicite pour Firefox */
}

/* 3) Fallback de secours si jamais gap/row-gap ne suffisent : marge haute sur le 2ᵉ span */
.team-name-2lines span + span {
margin-top: 0.3rem; /* même valeur que votre gap */
}


/* Conteneur similaire à player-photo-container */

/* Agrandit les images dans les cartes de paris */
.bet-card .player-photo,
.bet-card .team-logo {
  width: 120px;
  height: 120px;
}

.star-player-photo-container {
position: relative;
width: 90px;    /* ajustez selon l’espace dispo */
height: 90px;
display: flex;
align-items: center;
justify-content: center;

overflow: hidden;
margin-bottom: 4px;  /* espace vers le nom */
}
.star-player-photo-container img {
width: 100%;
height: 100%;
object-fit: contain;

}

/* Nom sous la photo */
.star-players-first > div {
display: flex;
flex-direction: column;
align-items: center;
}
.star-players-first > div span {
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
}
/* 1) Forcer la cellule “Player” à limiter sa largeur - Responsive */
.player-stats-table td.player-name {
max-width: 150px;        /* largeur de base pour petits écrans */
white-space: nowrap;     /* pas de retour à la ligne automatique */
overflow: hidden;        /* masquer ce qui dépasse */
text-overflow: ellipsis; /* afficher "…" en fin de ligne */
display: inline-block;   /* nécessaire pour que text-overflow fonctionne */
}

/* Media queries pour augmenter progressivement la largeur des noms sur grands écrans */
@media (min-width: 992px) {
.player-stats-table td.player-name {
  max-width: 200px;      /* plus large sur écrans moyens */
}
}

@media (min-width: 1200px) {
.player-stats-table td.player-name {
  max-width: 250px;      /* encore plus large sur grands écrans */
}
}

@media (min-width: 1400px) {
.player-stats-table td.player-name {
  max-width: 300px;      /* largeur maximale sur très grands écrans */
}
}

/* 2) Si vous voulez que l’image du joueur reste fixe à gauche */
.player-stats-table td.player-name img {
flex-shrink: 0;          /* l’image ne rétrécit pas */
margin-right: 8px;       /* petit espace avant le nom */
}

/* 3) (Optionnel) Si votre cellule “Player” est déjà en flex, on s’assure que le texte peut rétrécir */
.player-stats-card {
margin-top: 0; /* suppression de la marge négative */
}

.player-stats-table td.player-name {
display: flex;
align-items: center;
}
.player-stats-table td.player-name span {
flex-shrink: 1;
min-width: 0;            /* autorise le texte à rétrécir correctement */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* (1) On rend le parent relatif pour l'absolute positioning */
.team-card .card-first-row {
position: relative;
}

/* (2) On centre absolument la zone des stars */
.team-card .star-players-first {
display: none !important;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* Grossit et met en avant le classement à côté du nom */
.ranking-large {
display: inline-block;      /* pour gérer sa largeur/padding */
font-size: clamp(1.5rem, 8vw, 5rem);
/*font-weight: 900;   */        
line-height: 1;             /* sans espacement vertical */
color: #00d6b4;
margin-left: 1.5rem;        /* espace entre le nom et le # */
vertical-align: middle;     /* pour centrer sur la ligne */
}
.stats-and-record,
.stats-and-record span {
color: var(--text-gray) !important;
}
.ppg-chart-container {
width: 120px;
height: 120px;
position: relative;
}
.ppg-chart-container canvas {
width: 100% !important;
height: 100% !important;
}
.ppg-chart-container {
position: relative;
width: 120px;
height: 120px;
}

/* positionne la diff à gauche, décollée du donut */
.donut-with-diff .diff-branch {
position: absolute;
top: 50%;
left: -140px;           /* augmente ou diminue pour espacer plus ou moins */
transform: translateY(-50%);
font-size: 14px;
color: var(--text-gray);
white-space: nowrap;
}
/* rend la différence en gras */
#ppg-diff-label {
font-weight: bold;
font-size: 1.2em;     /* 1.2× la taille du parent */
}
/* === Joueurs (Points/Assists/Rebounds) === */

.player-highlight-cards .col-md-3 {
margin-bottom: 6px;
}

/* carte générique */
.player-card {
background-color: var(--bg-panel);
border-radius: 10px;
width: 100%;     /* <-- occupe toute la largeur de son col */
height: 120px;   /* <-- hauteur réduite */
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.star-players-first > div:first-child {
  margin-left: 2rem;
}
/* Écrans moyens (≤1199px) */
@media (max-width: 1199px) {
.star-players-first {
  gap: 16px;
}
.star-players-first > div {
  width: 70px;
}
.star-players-first > div .star-player-photo-container {
  width: 70px;
  height: 70px;
}
.star-players-first > div span {
  font-size: 12px;
}
}

/* Écrans plus petits (≤991px) */
@media (max-width: 991px) {
.star-players-first {
  gap: 12px;
}
.star-players-first > div {
  width: 60px;
}
.star-players-first > div .star-player-photo-container {
  width: 60px;
  height: 60px;
}
.star-players-first > div span {
  font-size: 11px;
}
}

/* Mobile strict (≤767px) : on masque complètement */
@media (max-width: 767px) {
.star-players-first {
  display: none !important;
}
}

/* corps de la carte */
.player-card-body {
padding: 8px 15px; /* padding vertical réduit */
}

/* bloc photo + nom */
.player-photo-block {
flex: 1;        /* prend tout l’espace disponible, mais peut shrink */
min-width: 0;   /* permet au flex-item de rétrécir correctement */
}
.player-photo {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 0;         /* plus de coins arrondis */
}
.player-name {
margin-top: 4px; 

color: var(--text-gray);

font-size: 0.9rem;
}

/* bloc statistique */
.player-stat-block {
display: flex;
align-items: center;      /* tout sur la même ligne */
justify-content: flex-end;/* aligné à droite */
gap: 0.5rem;              /* petit espace valeur ↔ label */
padding-right: 1rem;
}
.stat-value {
font-size: 2rem !important;
/*font-weight: 900 !important;*/
line-height: 1;
/*text-transform: uppercase;*/
color: var(--text-gray);
}
.stat-label {
font-size: 1.2rem !important;
font-weight: 900 !important;
text-transform: uppercase;
color: var(--text-gray);
}


.player-card-body.d-flex {
gap: 2rem;                   /* espace plus large pour aérer */
}

/* carte OFF/DEFF (même base que player-card) */
.rank-card {
  background-color: var(--bg-panel);
  border-radius: 10px;
  width: 100%;
  height: 120px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Styles spécifiques à rank-card si nécessaire */
}
.rank-card .player-card-body {
display: flex;
align-items: center;
justify-content: space-evenly;
gap: 1rem;
}
.rank-card .player-stat-block {
display: flex;
align-items: center;
gap: 0.5rem;
}


/* responsive */
@media (max-width: 768px) {
.player-photo { width: 40px; height: 40px; }
.stat-value { font-size: 2rem; }
}

/* 1) Masquer la section "joueurs stars" sur écrans < 1024px */
@media (max-width: 1024px) {
.star-players-first {
  display: none !important;
}
}

/* === Styles pour mobile (écrans ≤ 768px) === */
@media (max-width: 768px) {
/* ─── Menu hamburger ───────────────────────────────────────────── */
.menu-toggle {
  display: block;
}

/* ─── Sidebar : toujours fermé par défaut, s’ouvre avec .active ─── */
.sidebar {
  top: 60px;
  width: 60px; /* toujours fermé */
  max-height: calc(100vh - 60px);
  transition: width 0.3s ease;
}
.sidebar.active {
  width: max-content;
}
.sidebar a .link-text {
  display: inline-block;
}

/* ─── Contenu principal ─────────────────────────────────────────── */
.content {
  margin-left: 0;
  width: 100%;
  padding-top: 80px;
}

/* ─── Tableaux, logos, etc. ─────────────────────────────────────── */
.table-compact {
  font-size: 12px;
}
.team-logo {
  width: 25px;
  height: 25px;
}
.table-compact th,
.table-compact td {
  padding: 5px 8px;
}

/* ─── Player photo / stat cards : disposition en ligne et hauteur réduite ────────────────────────────────── */
.player-card {
  display: flex !important;
  flex-direction: row !important;      /* photo à gauche, stats à droite */
  align-items: center !important;      /* centre verticalement */
  justify-content: space-between !important;
  padding: 8px 12px !important;        /* moins de padding vertical pour réduire la hauteur */
  height: auto !important;             /* pas de hauteur fixe */
  min-height: unset !important;        /* supprimer tout min-height imposé */
  background-color: var(--bg-panel) !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;       /* réduction de l’espacement entre les cartes */
}
.player-card .player-card-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
  padding: 0 !important;               /* on gère le padding au niveau parent */
}
.player-photo-block {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
.player-photo {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
  border-radius: 0 !important;
}
.player-name {
  font-size: 0.85rem !important;       /* texte plus petit */
  font-weight: 400 !important;
  color: var(--text-gray) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: none !important;
}
.player-stat-block {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
}
.stat-value {
  font-size: 1.5rem !important;        /* plus petit que sur desktop */
  font-weight: 900 !important;
  line-height: 1 !important;
  color: var(--text-gray) !important;
}
.stat-label {
  font-size: 1rem !important;
  /*font-weight: 900 !important;*/
  color: var(--text-gray) !important;
}

/* ─── Carte OFF/DEFF Rank : mêmes dimensions que les autres ────────────────────────────────── */
.rank-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  height: auto !important;
  min-height: unset !important;
  background-color: var(--bg-panel) !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;       /* réduction de l’espacement ici aussi */
}
.rank-card .player-card-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
  padding: 0 !important;
}
.rank-card .player-stat-block {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
}
.rank-card .stat-value {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
}
.rank-card .stat-label {
  font-size: 1rem !important;
  font-weight: 900 !important;
}

/* ─── Joueurs stars : toujours cachés sur ≤ 1024px ─────────────── */
.star-players-first {
  display: none !important;
}

/* ─── PPG / OPPG Donut + différence : masquer ─────────────────── */
.ppg-chart-container {
  display: none !important;
}
.diff-branch {
  display: none !important;
}
.ppg-chart-container canvas {
  width: 80px !important;
  height: 80px !important;
}

/* ─── Card équipe : ajustements sur mobile ──────────────────────── */
.team-card {
  position: relative;      /* pour le positionnement absolu du classement */
  padding-top: 12px;       /* réduire l’espace au-dessus */
  padding-bottom: 12px;    /* réduire l’espace en-dessous */
  min-height: unset;       /* supprimer le min-height pour avoir une carte “fine” */
}
.card-first-row {
  display: flex !important;
  flex-direction: row !important;   /* Garder logo et ranking sur la même ligne */
  align-items: center;              /* Centrer verticalement */
  justify-content: flex-start;      /* Logo à gauche */
  position: relative;               /* Nécessaire pour position:absolute du ranking */
  padding-bottom: 8px;              /* réduire l’espace sous la ligne du logo/nom */
}
.team-logo-first {
  width: 60px;
  height: 60px;
  margin-left: 10px; /* Petit décalage depuis le bord */
}
.team-name-2lines {
  display: none !important;
}
#team-short-name {
  display: block;
  font-size: 20px;
  font-weight: 900;
  color: var(--text-gray);
  margin-left: 1rem;
  text-transform: uppercase;
}
.ranking-large {
  position: absolute;
  right: 10px;               /* Collé à droite */
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  font-weight: 900;
  color: #00d6b4;
  margin-left: 0;
}
.stats-and-record {
  margin-left: 10px;
  margin-top: 6px;           /* réduire l’espace au-dessus */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;       /* réduire l’espace en-dessous */
}
.stats-first {
  font-size: 14px;
  gap: 8px;
  display: flex;
  align-items: center;
}
.record-first {
  font-size: 14px;
  margin-top: 0;
}
.stats-first span:nth-child(3),
.stats-first span:nth-child(4) {
  display: none;
}

/* ─── Espacement entre les deux tableaux Est et Ouest ──────────── */
.col-md-6.container {
  margin-bottom: 1rem; /* espacement vertical entre les deux cartes */
}
.col-md-6.container:last-of-type {
  margin-bottom: 0;
}

/* ─── GRAPHIQUE : aligner l’axe Y avec le bouton “Average PPG” ─── */
#team-graph {
  /* On supprime le padding universel de 20px et on le remplace par 12px à gauche/droite */

  padding-right: 12px;
  padding-top: 20px;     /* on conserve 20px en haut si nécessaire */
  padding-bottom: 20px;  /* on conserve 20px en bas si nécessaire */
}
/* 1) Positionner #team-info en haut à gauche en mode « ligne » */
#team-info {
  position: static !important;
  display: flex;
  flex-direction: row;         /* logo à gauche, nom à droite */
  align-items: center;
  justify-content: flex-start; /* coller à gauche */
  padding: 0;
  margin-bottom: 10px;         /* espace sous le bloc */
}

/* 2) Réduire la taille du logo */
#team-info img {
  width: 40px;
  height: 40px;
  margin-right: 8px; /* un petit espacement entre logo et nom */
}

/* 3) Réduire la taille du texte du nom */
#team-info span {
  font-size: 18px;
  font-weight: 700;
  color: #e0e0e0; /* ou la couleur souhaitée */
  margin: 0;
}

/* 4) Pour éviter tout chevauchement avec la ligne de boutons */
.controls-row {
  margin-top: 8px;  /* décale la ligne de boutons vers le bas */
}


}

/* === Styles pour tablettes (entre 769px et 1024px) === */
@media (min-width: 769px) and (max-width: 1024px) {
/* ─── Menu hamburger ───────────────────────────────────────────── */
.menu-toggle {
  display: block;
}

/* ─── Sidebar : toujours fermé par défaut, s’ouvre avec .active ─── */
.sidebar {
  top: 60px;
  width: 60px; /* toujours fermé */
  max-height: calc(100vh - 60px);
  transition: width 0.3s ease;
}
.sidebar.active {
  width: max-content;
}
.sidebar a .link-text {
  display: inline-block;
}

/* ─── Contenu principal ─────────────────────────────────────────── */
.content {
  margin-left: 0;
  width: 100%;
  padding-top: 80px;
}

/* ─── Tableaux, logos, etc. ─────────────────────────────────────── */
.table-compact {
  font-size: 12px;
}
.team-logo {
  width: 25px;
  height: 25px;
}
.table-compact th,
.table-compact td {
  padding: 5px 8px;
}

/* ─── Player photo / stat cards : disposition en ligne et hauteur réduite ────────────────────────────────── */
.player-card {
  display: flex !important;
  flex-direction: row !important;      /* photo à gauche, stats à droite */
  align-items: center !important;      /* centre verticalement */
  justify-content: space-between !important;
  padding: 8px 12px !important;        /* moins de padding vertical pour réduire la hauteur */
  height: auto !important;             /* pas de hauteur fixe */
  min-height: unset !important;        /* supprimer tout min-height imposé */
  background-color: var(--bg-panel) !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;       /* réduction de l’espacement entre les cartes */
}
.player-card .player-card-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
  padding: 0 !important;               /* on gère le padding au niveau parent */
}
.player-photo-block {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
.player-photo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 0;
}
.player-name {
  font-size: 0.85rem !important;       /* texte plus petit */
  color: var(--text-gray) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}
.player-stat-block {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
}
.stat-value {
  font-size: 1.5rem !important;        /* plus petit que sur desktop */
  font-weight: 900 !important;
  line-height: 1 !important;
  color: var(--text-gray) !important;
}
.stat-label {
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: var(--text-gray) !important;
}

/* ─── Carte OFF/DEFF Rank : mêmes dimensions que les autres ────────────────────────────────── */
.rank-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  height: auto !important;
  min-height: unset !important;
  background-color: var(--bg-panel) !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;       /* réduction de l’espacement ici aussi */
}
.rank-card .player-card-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
  padding: 0 !important;
}
.rank-card .player-stat-block {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
}
.rank-card .stat-value {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
}
.rank-card .stat-label {
  font-size: 1rem !important;
  font-weight: 900 !important;
}

/* ─── Joueurs stars : toujours cachés sur ≤ 1024px ─────────────── */
.star-players-first {
  display: none !important;
}

/* ─── PPG / OPPG Donut + différence : masquer ─────────────────── */
.ppg-chart-container {
  display: none !important;
}
.diff-branch {
  display: none !important;
}
.ppg-chart-container canvas {
  width: 80px !important;
  height: 80px !important;
}

/* ─── Card équipe : ajustements sur mobile ──────────────────────── */
.team-card {
  position: relative;      /* pour le positionnement absolu du classement */
  padding-top: 12px;       /* réduire l’espace au-dessus */
  padding-bottom: 12px;    /* réduire l’espace en-dessous */
  min-height: unset;       /* supprimer le min-height pour avoir une carte “fine” */
}
.card-first-row {
  display: flex !important;
  flex-direction: row !important;   /* Garder logo et ranking sur la même ligne */
  align-items: center;              /* Centrer verticalement */
  justify-content: flex-start;      /* Logo à gauche */
  position: relative;               /* Nécessaire pour position:absolute du ranking */
  padding-bottom: 8px;              /* réduire l’espace sous la ligne du logo/nom */
}
.team-logo-first {
  width: 60px;
  height: 60px;
  margin-left: 10px; /* Petit décalage depuis le bord */
}
.team-name-2lines {
  display: none !important;
}
#team-short-name {
  display: block !important;
  font-size: 20px;
  font-weight: 900;
  color: var(--text-gray);
  margin-left: 1rem;
  text-transform: uppercase;
}
.ranking-large {
  position: absolute;
  right: 10px;               /* Collé à droite */
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  font-weight: 900;
  color: #00d6b4;
  margin-left: 0;
}
.stats-and-record {
  margin-left: 10px;
  margin-top: 6px;           /* réduire l’espace au-dessus */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;       /* réduire l’espace en-dessous */
}
.stats-first {
  font-size: 14px;
  gap: 8px;
  display: flex;
  align-items: center;
}
.record-first {
  font-size: 14px;
  margin-top: 0;
}
.stats-first span:nth-child(3),
.stats-first span:nth-child(4) {
  display: none;
}

/* ─── Espacement entre les deux tableaux Est et Ouest ──────────── */
.col-md-6.container {
  margin-bottom: 1rem; /* espacement vertical entre les deux cartes */
}
.col-md-6.container:last-of-type {
  margin-bottom: 0;
}

/* ─── GRAPHIQUE : aligner l’axe Y avec le bouton “Average PPG” ─── */
#team-graph {
  /* On supprime le padding universel de 20px et on le remplace par 12px à gauche/droite */
  padding-right: 12px;
  padding-top: 20px;     /* on conserve 20px en haut si nécessaire */
  padding-bottom: 20px;  /* on conserve 20px en bas si nécessaire */
}
/* 1) Positionner #team-info en haut à gauche en mode « ligne » */
#team-info {
  position: static !important;
  display: flex;
  flex-direction: row;         /* logo à gauche, nom à droite */
  align-items: center;
  justify-content: flex-start; /* coller à gauche */
  padding: 0;
  margin-bottom: 10px;         /* espace sous le bloc */
}

/* 2) Réduire la taille du logo */
#team-info img {
  width: 40px;
  height: 40px;
  margin-right: 8px; /* un petit espacement entre logo et nom */
}

/* 3) Réduire la taille du texte du nom */
#team-info span {
  font-size: 18px;
  font-weight: 700;
  color: #e0e0e0; /* ou la couleur souhaitée */
  margin: 0;
}

/* 4) Pour éviter tout chevauchement avec la ligne de boutons */
.controls-row {
  margin-top: 8px;  /* décale la ligne de boutons vers le bas */
  appearance: none; /* ajout de la propriété standard 'appearance' pour la compatibilité */
}

}
/* ==== SPACING FIREFOX FIX ==== */
/* 1) On s’assure que le container reste en colonne */


/* 2) Chaque ligne est un block (pour que margin-top fonctionne) */
.team-name-2lines .team-name-first {
display: block !important;
}

/* 3) On force l’espacement si gap/row-gap ne sont pas appliqués */
.team-name-2lines .team-name-first + .team-name-first {
margin-top: 0.3rem !important;
}
/* 1) On neutralise toute marge négative sur la première ligne */
#playerFirstName,
.team-name-2lines .team-name-first {
margin-bottom: 0 !important;
}

/* 2) On s’assure que la deuxième ligne est un block */
/*    pour que margin-top fonctionne parfaitement */
#playerLastName,
.team-name-2lines .team-name-first + .team-name-first {
display: block !important;
margin-top: 0.3rem !important;  /* ajustez ici l’espacement que vous voulez */
}

/* hover-tooltip for player-card */
.player-card {
position: relative; /* ensure pseudo-element is positioned correctly */
}
.player-card[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
top: -1.8rem;                /* position above the card */
left: 50%;
transform: translateX(-50%);
background: #fff;            /* white background */
color: #666;                 /* gray text */
padding: 4px 8px;
border: 1px solid #ccc;
border-radius: 4px;
white-space: nowrap;
font-size: 0.75rem;
pointer-events: none;
z-index: 1000;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* hover‐tooltips on the stats row */
.stats-first span[data-tooltip] {
position: relative;
cursor: help;
}
.stats-first span[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
top: -1.8rem;
left: 50%;
transform: translateX(-50%);
background: #fff;
color: #666;
padding: 4px 8px;
border: 1px solid #ccc;
border-radius: 4px;
white-space: nowrap;
font-size: 0.75rem;
font-weight: normal;             /* ← ici */
pointer-events: none;
z-index: 1000;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* en tête ou juste après vos variables : */
@supports (-moz-appearance: meterbar) {
@media (max-width: 768px) {
  /* cache le nom complet */
  .team-name-2lines {
    display: none !important;
  }
  /* force l’affichage du short name */
  #team-short-name {
    display: block !important;
  }
}
}