*, *::before, *::after { box-sizing: border-box; }
    body { font-family: Arial, sans-serif; background: #f4f6f8; padding: 0; margin: 0; }

    .topbar {
      display: flex; justify-content: flex-end;
      padding: 10px 32px; background: #f4f6f8;
    }
    .topbar a { color: #2c3e50; font-size: .85rem; text-decoration: none; opacity: .7; }
    .topbar a:hover { opacity: 1; }

    /* Bannière */
    .banner-wrap {
      width: 100%; max-height: 300px; overflow: hidden;
      display: flex; justify-content: center; align-items: center;
      background: #e8ecf0;
    }
    .banner-wrap img {
      width: 100%; max-height: 300px; object-fit: cover; display: block;
    }

    .container { width: 720px; margin: 36px auto; padding: 0 20px; }
    h1 { text-align: center; color: #2c3e50; margin-bottom: 28px; font-size: 1.6rem; }

    table {
      width: 100%; border-collapse: collapse; background: #fff;
      border-radius: 8px; overflow: hidden; box-shadow: 0 1px 8px rgba(0,0,0,.09);
    }
    th, td { padding: 13px 18px; border-bottom: 1px solid #eee; text-align: center; }
    th { background: #2c3e50; color: #fff; font-weight: 600; font-size: .9rem; }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: #f0f4f8; }

    /* Podium */
    .rank-medal { font-size: 1.2rem; }
    .row-1 td { font-weight: 700; }
    .row-2 td { font-weight: 600; }
    .row-3 td { font-weight: 500; }

    .empty { color: #aaa; padding: 24px; font-size: .9rem; }
    .refresh { text-align: center; color: #aaa; font-size: .75rem; margin-top: 10px; }

    @media ( max-width: 800px ) {

.container 
{ width: 100%; margin: 20px auto; padding: 0 20px; }

   }

   @media ( max-width: 600px ) {

.container 
{ width: 100%; margin: 0px auto; padding: 0 0px; }
table {
      border-radius: 0px; overflow: hidden; box-shadow: 0 1px 8px rgba(0,0,0,.09);
    }
   }