/* ========== Player (en-tête + slider) ========== */

/* Conteneur de l’en-tête du joueur (hauteur selon présence des photos) */
.player-header {
    border-bottom: 1px solid lightgrey;
    margin-bottom: 20px;
    width: 700px;
  }
  
  /* Variante quand il y a des photos/captions */
  .player-header--with-photos {
    height: 280px;
  }
  
  /* Variante quand il n’y a PAS de photos/captions */
  .player-header--no-photos {
    height: 130px;
  }
  
  /* Colonne gauche : infos du joueur */
  .player-info {
    float: left;
    width: 425px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  
  .player-info__block {
    margin-bottom: 10px;
  }
  
  .player-info h1 {
    margin: 0 0 6px 0;
    font-weight: normal;
    font-size: 36px;
  }
  
  .player-info h3 {
    display: inline;
    margin: 0;
    font-weight: normal;
    font-size: 24px;
  }

  .details{
    font-size: 18px;
  }
  
  /* Ligne pour la légende (texte sous les photos) */
  .player-caption-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .player-caption-spacer {
    width: 50px;
  }
  
  /* Légende photo */
  .photo-caption {
    font-size: 13px;
    padding: 15px;
    text-align: justify;
    font-style: italic;
  }
  
  /* Colonne droite : slider Slick (taille fixe comme avant) */
  .photo-slider {
    width: 250px;
    height: 280px;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Slide container interne (pour respecter les max-* inline d’avant) */
  .photo-slide {
    max-width: 250px;
    max-height: 280px;
  }
  
  /* Lien autour de l’image */
  .photo-slide__link {
    height: 300px;
    width: 300px;
    display: inline-block;
  }
  
  /* Image */
  .photo-slide__img {
    max-width: 250px;
    max-height: 275px;
    display: block;
    margin: 0 auto;
  }
  
  /* ========== Bar d’actions / filtres sous l’en-tête ========== */
  
  .player-toolbar {
    display: flex;
    justify-content: space-between;
    width: 700px;
  }
  
  /* Zone d’onglets (view) : fond gris pâle comme avant */
  .view {
    background-color: #fafafa;
  }
  
  /* ========== Grille d’onglets (table générée dynamiquement) ========== */
  
  table.grid {
    border-collapse: collapse;
    width: auto; /* on laisse le contenu définir la largeur */
  }
  
  table.grid tr td {
    /* les paddings étaient calculés en JS via `padx` — on garde le contrôle JS */
    background-color: #fafafa;
    border-bottom: 3px solid #fafafa;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
  }
  
  /* Style “actif” appliqué par JS (garder ces couleurs) */
  .grid__cell--active {
    color: #008035 !important;
    border-bottom: 3px solid #28a745 !important;
    background-color: #f2f2f2 !important;
  }
  
  /* ========== Divers / utilitaires ========== */
  
  /* Conteneur maximum du main */
  .container--narrow {
    max-width: 720px;
  }
  
  /* Clearfix si nécessaire après les floats */
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Optionnel : petits ajustements responsive basiques */
  @media (max-width: 768px) {
    .player-header,
    .player-toolbar {
      width: 100%;
    }
    .player-info {
      width: 100%;
      float: none;
      max-height: none;
    }
    .photo-slider {
      float: none;
      margin-top: 12px;
      width: 100%;
      height: auto;
    }
    .photo-slide,
    .photo-slide__img {
      max-width: 100%;
      max-height: none;
    }
  }