/* Correctif V28 — classement HYROX mobile compact.
   Conserve le tableau semantique, sa pagination PHP et les details JS.
   Desktop inchange : seules les largeurs <= 820px utilisent le layout en ligne. */
.hyrox-row-points {display:none;}
@media (max-width:820px) {
  .hyrox-table-wrap {
    overflow:hidden;
    border-radius:17px;
    border:1px solid rgba(10,15,19,.12);
    background:#fff;
    box-shadow:0 16px 40px rgba(0,0,0,.06);
  }
  .hyrox-ranking-table,
  .hyrox-ranking-table tbody {
    display:block;
    width:100%;
    min-width:0;
  }
  .hyrox-ranking-table thead {display:none;}
  .hyrox-ranking-table tbody tr {
    display:grid;
    grid-template-columns:38px minmax(0,1fr) max-content 38px;
    grid-template-rows:auto auto;
    grid-template-areas:
      "rank name time action"
      "rank category time action";
    align-items:center;
    column-gap:12px;
    row-gap:3px;
    box-sizing:border-box;
    width:100%;
    min-width:0;
    margin:0;
    padding:13px 14px;
    border:0;
    border-bottom:1px solid #e9eae7;
    border-radius:0;
    background:#fff;
    box-shadow:none;
    transition:background .2s ease;
  }
  .hyrox-ranking-table tbody tr:nth-child(even) {background:#fafaf8;}
  .hyrox-ranking-table tbody tr:last-child {border-bottom:0;}
  .hyrox-ranking-table tbody tr:hover {background:#fffbe4;}
  .hyrox-ranking-table tbody td {
    display:block;
    box-sizing:border-box;
    min-width:0;
    width:auto;
    margin:0;
    padding:0;
    border:0;
    color:#222;
    font-size:.78rem;
    line-height:1.35;
    text-align:left;
  }
  .hyrox-ranking-table tbody td::before {content:none!important;display:none!important;}
  .hyrox-ranking-table tbody td:nth-child(1) {grid-area:rank;}
  .hyrox-ranking-table tbody td:nth-child(2) {grid-area:name;min-width:0;}
  .hyrox-ranking-table tbody td:nth-child(3) {
    grid-area:category;
    color:#626764;
    font-size:.68rem;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hyrox-ranking-table tbody td:nth-child(4) {grid-area:time;text-align:right;white-space:nowrap;}
  .hyrox-ranking-table tbody td:nth-child(5) {display:none;}
  .hyrox-ranking-table tbody td:nth-child(6) {grid-area:action;text-align:right;}
  .hyrox-ranking-table tbody td:nth-child(2) strong {
    display:block;
    min-width:0;
    color:#151515;
    font-weight:800;
    font-size:.84rem;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hyrox-ranking-table tbody td:nth-child(2) small {display:none;}
  .hyrox-ranking-table .hyrox-rank {
    display:grid;
    place-items:center;
    min-width:38px;
    width:38px;
    min-height:34px;
    height:34px;
    padding:0 3px;
    box-sizing:border-box;
    font-size:.76rem;
    font-weight:900;
    border-radius:10px;
  }
  .hyrox-ranking-table .hyrox-row-chrono {
    display:block;
    color:#131514;
    font:900 .85rem/1.3 'Space Grotesk',sans-serif;
    letter-spacing:-.02em;
  }
  .hyrox-ranking-table .hyrox-row-points {
    display:block;
    margin-top:2px;
    color:#6c716c;
    font:700 .67rem/1.25 'Space Grotesk',sans-serif;
  }
  /* V29: plus de grille avec 2 enfants (libelle et icone),
     ce qui decalait l'icone notamment sous iOS Safari. */
  .hyrox-ranking-table .hyrox-detail-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0;
    box-sizing:border-box;
    width:38px;
    height:38px;
    min-height:38px;
    margin:0;
    padding:0;
    border:1px solid #dfcd00;
    border-radius:50%;
    background:#ffed00;
    color:#151515;
    font-size:0;
    line-height:1;
    text-align:center;
    box-shadow:none;
    vertical-align:middle;
    touch-action:manipulation;
  }
  .hyrox-ranking-table .hyrox-detail-button > .hyrox-detail-label {
    display:none;
  }
  .hyrox-ranking-table .hyrox-detail-button > i {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 16px;
    box-sizing:border-box;
    width:16px;
    height:16px;
    min-width:16px;
    min-height:16px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#151515;
    font-size:14px;
    line-height:1;
    text-align:center;
    transform:none;
  }
  .hyrox-ranking-table .hyrox-detail-button > i::before {
    display:block;
    width:auto;
    margin:0;
    padding:0;
    line-height:1;
  }
  .hyrox-ranking-table .hyrox-detail-button:hover {background:#f5dc00;box-shadow:none;transform:none;}
  .hyrox-ranking-table .hyrox-detail-button:focus-visible {outline:3px solid #131513;outline-offset:3px;}
  .hyrox-ranking-table tbody tr.hyrox-empty-row {
    display:block;
    padding:0;
  }
  .hyrox-ranking-table tbody tr.hyrox-empty-row td {
    display:block;
    padding:26px 14px;
    text-align:center;
    white-space:normal;
  }
}
@media (max-width:380px) {
  .hyrox-ranking-table tbody tr {
    grid-template-columns:35px minmax(0,1fr) max-content 36px;
    column-gap:8px;
    padding:11px 9px;
  }
  .hyrox-ranking-table .hyrox-rank {min-width:35px;width:35px;font-size:.72rem;}
  .hyrox-ranking-table .hyrox-detail-button {width:36px;height:36px;min-height:36px;}
  .hyrox-ranking-table tbody td:nth-child(2) strong {font-size:.8rem;}
  .hyrox-ranking-table tbody td:nth-child(3) {font-size:.64rem;}
}
@media (prefers-reduced-motion:reduce) {
  .hyrox-ranking-table tbody tr,
  .hyrox-ranking-table .hyrox-detail-button {transition:none!important;}
}