@media (max-width: 900px){
  .confrontation-page .h2hatthispoint{
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 900px){

  /* 2 colonnes: [P1][P2], puis Replays en dessous sur 2 colonnes */
  .confrontation-page .confrontation-layout{
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }

  /* plus de sticky sur mobile */
  .confrontation-page .side{
    position: static !important;
    top: auto !important;
  }

  /* placement: P1 à gauche, P2 à droite, Replays dessous */
  .confrontation-page .confrontation-layout > aside.side:first-of-type{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .confrontation-page .confrontation-layout > aside.side:last-of-type{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .confrontation-page .confrontation-layout > main.center{
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }

  /* sécurité anti-overflow dans les cartes */
  .confrontation-page .player-card,
  .confrontation-page .player-card *{
    min-width: 0;
  }

  /* avatars un poil plus petits pour tenir en 2 colonnes */
  .confrontation-page .player-card img.avatar{
    width: 64px !important;
    height: 64px !important;
  }

  /* éviter que les titres/links explosent la colonne */
  .confrontation-page .player-card .card-title,
  .confrontation-page .player-card .card-title a{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
}