* {
    box-sizing: border-box;
}

main {
    max-width: 1280px;
    margin-inline: auto;
    padding: 32px;
    color: var(--text-color);
}

html {
    --bg-color-dark: #0B1220;
    --bg-color-light: white;
    --bg-body-light: #F1F5F9;
    --text-color: #101C30;
    --card-color-dark: #f3eed8;
    --bg-body: var(--bg-body-light);
    --card-color: var(--bg-color-light);
    --muted-text: #52647C;
    --table-row: #F8FAFC;
    scroll-padding-top: 120px;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Barlow', sans-serif;
    background-color: var(--bg-body);
}

header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    background-color: #101C30;
    border-bottom: 2px solid #39BDE0;
}

footer {
    display: flex;
    justify-content: space-between;
    padding: 50px;
    background-color: #101C30;
}

h1 {
    padding: 20px;
}

a {
    text-decoration: none;
    color: white;
}

a:visited {
    color: white;
}

a:hover {
    color: #39BDE0;
}

.header-title {
    padding: 20px;
    color: white;
    font-weight: bolder;
    text-transform: uppercase;
    font-size: 40px;
}

.header-title span {
    color: #39BDE0;
    font-weight: bold;
    text-transform: uppercase;
}

.selectors-mode {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.selectors-mode p {
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.selectors-mode i,
.header-menu i {
    margin-right: 10px;
}

.header-menu {
    display: flex;
    gap: 30px;
    padding: 20px;
    color: white;
    font-weight: bold;
}

.header-home:hover {
    color: #39BDE0;
    transition: 0.3s;
}

.header-teams:hover {
    color: #39BDE0;
    transition: 0.3s;
}

.header-matches:hover {
    color: #39BDE0;
    transition: 0.3s;
}

.header-rankings:hover {
    color: #39BDE0;
    transition: 0.3s;
}

.team-container {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-areas: "logo presentation";
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding: 32px;
    color: white;
    border-radius: 12px;
}

.team-container.tor-team {
    background: linear-gradient(120deg, #101C30, #064493);
}

.team-container.edm-team {
    background: linear-gradient(120deg, #101C30, #173D68);
    border-bottom: 3px solid #FF4C00;
}

.team-container.col-team {
    background: linear-gradient(120deg, #101C30, #6C263D);
}

.team-container.ana-team {
    background: linear-gradient(120deg, #101C30, #F47A38);
}

.team-container.uta-team {
    background: linear-gradient(120deg, #101C30, #69B3E7);
}

.team-container.dal-team {
    background: linear-gradient(120deg, #101C30, #006847);
}

.team-container.nsh-team {
    background: linear-gradient(120deg, #101C30, #FDBB30);
}

.team-container.sjs-team {
    background: linear-gradient(120deg, #101C30, #006D75);
}

.team-container.bos-team {
    background: linear-gradient(120deg, #101C30, #FFB81C);
}

.team-container.buf-team {
    background: linear-gradient(120deg, #101C30, #003087);
}

.team-container.det-team {
    background: linear-gradient(120deg, #101C30, #CE1126);
}

.team-container.fla-team {
    background: linear-gradient(120deg, #101C30, #C8102E);
}

.team-container.mtl-team {
    background: linear-gradient(120deg, #101C30, #AF1E2D);
}

.team-container.ott-team {
    background: linear-gradient(120deg, #101C30, #C52032);
}

.team-container.tbl-team {
    background: linear-gradient(120deg, #101C30, #002868);
}

.team-container.car-team {
    background: linear-gradient(120deg, #101C30, #CC0000);
}

.team-container.cbj-team {
    background: linear-gradient(120deg, #101C30, #002654);
}

.team-container.pit-team {
    background: linear-gradient(120deg, #101C30, #FCB514);
}

.team-container.nyi-team {
    background: linear-gradient(120deg, #101C30, #00539B);
}

.team-container.njd-team {
    background: linear-gradient(120deg, #101C30, #CE1126);
}

.team-container.phi-team {
    background: linear-gradient(120deg, #101C30, #F74902);
}

.team-container.wsh-team {
    background: linear-gradient(120deg, #101C30, #C8102E);
}

.team-container.nyr-team {
    background: linear-gradient(120deg, #101C30, #0038A8);
}

.team-container.chi-team {
    background: linear-gradient(120deg, #101C30, #CF0A2C);
}

.team-container.stl-team {
    background: linear-gradient(120deg, #101C30, #002F87);
}

.team-container.min-team {
    background: linear-gradient(120deg, #101C30, #154734);
}

.team-container.wpg-team {
    background: linear-gradient(120deg, #101C30, #041E42);
}

.team-container.cgy-team {
    background: linear-gradient(120deg, #101C30, #C8102E);
}

.team-container.lak-team {
    background: linear-gradient(120deg, #101C30, #111111);
}

.team-container.vgk-team {
    background: linear-gradient(120deg, #101C30, #B4975A);
}

.team-container.van-team {
    background: linear-gradient(120deg, #101C30, #00205B);
}

.team-container.sea-team {
    background: linear-gradient(120deg, #101C30, #001628);
}

.color-container {
    grid-area: logo;
    display: grid;
    place-items: center;
    min-height: 240px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgb(0 0 0 / 18%);
}

.color-container p {
    margin: 0;
    font-size: 64px;
    font-weight: 700;
}

.color-container p {
    text-align: center;
}

.tor-team .color-container {
    background-image: url("../images/logos/TOR.png");
}

.col-team .color-container {
    background-image: url("../images/logos/COL.png");
}

.edm-team .color-container {
    background-image: url("../images/logos/EDM.png");
}

.ana-team .color-container {
    background-image: url("../images/logos/ANA.png");
}

.uta-team .color-container {
    background-image: url("../images/logos/UTA.png");
}

.dal-team .color-container {
    background-image: url("../images/logos/DAL.png");
}

.nsh-team .color-container {
    background-image: url("../images/logos/NSH.png");
}

.sjs-team .color-container {
    background-image: url("../images/logos/SJS.png");
}

.bos-team .color-container {
    background-image: url("../images/logos/BOS.png");
}

.buf-team .color-container {
    background-image: url("../images/logos/BUF.png");
}

.det-team .color-container {
    background-image: url("../images/logos/DET.png");
}

.fla-team .color-container {
    background-image: url("../images/logos/FLA.png");
}

.mtl-team .color-container {
    background-image: url("../images/logos/MTL.png");
}

.ott-team .color-container {
    background-image: url("../images/logos/OTT.png");
}

.tbl-team .color-container {
    background-image: url("../images/logos/TBL.png");
}

.car-team .color-container {
    background-image: url("../images/logos/CAR.png");
}

.cbj-team .color-container {
    background-image: url("../images/logos/CBJ.png");
}

.pit-team .color-container {
    background-image: url("../images/logos/PIT.png");
}

.nyi-team .color-container {
    background-image: url("../images/logos/NYI.png");
}

.njd-team .color-container {
    background-image: url("../images/logos/NJD.png");
}

.phi-team .color-container {
    background-image: url("../images/logos/PHI.png");
}

.wsh-team .color-container {
    background-image: url("../images/logos/WSH.png");
}

.nyr-team .color-container {
    background-image: url("../images/logos/NYR.png");
}

.chi-team .color-container {
    background-image: url("../images/logos/CHI.png");
}

.stl-team .color-container {
    background-image: url("../images/logos/STL.png");
}

.min-team .color-container {
    background-image: url("../images/logos/MIN.png");
}

.wpg-team .color-container {
    background-image: url("../images/logos/WPG.png");
}

.cgy-team .color-container {
    background-image: url("../images/logos/CGY.png");
}

.lak-team .color-container {
    background-image: url("../images/logos/LAK.png");
}

.vgk-team .color-container {
    background-image: url("../images/logos/VGK.png");
}

.van-team .color-container {
    background-image: url("../images/logos/VAN.png");
}

.sea-team .color-container {
    background-image: url("../images/logos/SEA.png");
}

.team-presentation-container {
    grid-area: presentation;
    display: grid;
    gap: 14px;
    min-width: 0;
}

.team-presentation-container .conference,
.team-presentation-container .equipe-nom,
.team-presentation-container .equipe-ville {
    grid-area: auto;
    margin: 0;
    padding: 0;
}

.conference {
    color: #B8C7DC;
    font-size: 16px;
    font-style: normal;
}

.conference p {
    margin: 0;
    padding: 0;
}

.equipe-nom {
    font-size: 40px;
    line-height: 1.1;
}

.equipe-ville {
    color: #B8C7DC;
    font-size: 18px;
    font-style: normal;
}

.equipe-actions {
    grid-area: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 0 0;
}

.equipe-actions .bouton {
    margin: 0;
    padding: 12px 20px;
    color: white;
    text-decoration: none;
    border-radius: 8px;
}

.tor-team .bouton {
    background-color: #064493;
}

.edm-team .bouton {
    background-color: #041E42;
    border: 1px solid #FF4C00;
}

.col-team .bouton {
    background-color: #6C263D;
}

.ana-team .bouton {
    background-color: #F47A38;
}

.dal-team .bouton {
    background-color: #006847;
}

.nsh-team .bouton {
    background-color: #101C30;
}

.uta-team .bouton {
    background-color: #101C30;
}

.sjs-team .bouton {
    background-color: #006D75;
}

.bos-team .bouton {
    background-color: #000000;
}

.buf-team .bouton {
    background-color: #003087;
}

.det-team .bouton {
    background-color: #CE1126;
}

.fla-team .bouton {
    background-color: #C8102E;
}

.mtl-team .bouton {
    background-color: #AF1E2D;
}

.ott-team .bouton {
    background-color: #C52032;
}

.tbl-team .bouton {
    background-color: #002868;
}

.car-team .bouton {
    background-color: #CC0000;
}

.cbj-team .bouton {
    background-color: #002654;
}

.pit-team .bouton {
    background-color: #000000;
}

.nyi-team .bouton {
    background-color: #00539B;
}

.njd-team .bouton {
    background-color: #CE1126;
}

.phi-team .bouton {
    background-color: #F74902;
}

.wsh-team .bouton {
    background-color: #C8102E;
}

.nyr-team .bouton {
    background-color: #0038A8;
}

.chi-team .bouton {
    background-color: #CF0A2C;
}

.stl-team .bouton {
    background-color: #002F87;
}

.min-team .bouton {
    background-color: #154734;
}

.wpg-team .bouton {
    background-color: #041E42;
}

.cgy-team .bouton {
    background-color: #C8102E;
}

.lak-team .bouton {
    background-color: #111111;
}

.vgk-team .bouton {
    background-color: #333F42;
}

.van-team .bouton {
    background-color: #00205B;
}

.sea-team .bouton {
    background-color: #001628;
}

.team-container.sjs-team .bouton:hover {
    color: #006D75;
    background-color: #fff;
}

.team-container.uta-team .bouton:hover {
    color: #101C30;
    background-color: #fff;
}

.team-container.col-team .bouton:hover {
    color: #6C263D;
    background-color: #fff;
}

.team-container.tor-team .bouton:hover {
    color: #064493;
    background-color: #fff;
}

.team-container.edm-team .bouton:hover {
    color: #FF4C00;
    background-color: #fff;
}

.team-container.ana-team .bouton:hover {
    color: #F47A38;
    background-color: #fff;
}

.team-container.dal-team .bouton:hover {
    color: #006847;
    background-color: #fff;
}

.team-container.nsh-team .bouton:hover {
    color: #101C30;
    background-color: #fff;
}

.team-container.bos-team .bouton:hover {
    color: #000000;
    background-color: #fff;
}

.team-container.buf-team .bouton:hover {
    color: #003087;
    background-color: #fff;
}

.team-container.det-team .bouton:hover {
    color: #CE1126;
    background-color: #fff;
}

.team-container.fla-team .bouton:hover {
    color: #C8102E;
    background-color: #fff;
}

.team-container.mtl-team .bouton:hover {
    color: #AF1E2D;
    background-color: #fff;
}

.team-container.ott-team .bouton:hover {
    color: #C52032;
    background-color: #fff;
}

.team-container.tbl-team .bouton:hover {
    color: #002868;
    background-color: #fff;
}

.team-container.car-team .bouton:hover {
    color: #CC0000;
    background-color: #fff;
}

.team-container.cbj-team .bouton:hover {
    color: #002654;
    background-color: #fff;
}

.team-container.pit-team .bouton:hover {
    color: #000000;
    background-color: #fff;
}

.team-container.nyi-team .bouton:hover {
    color: #00539B;
    background-color: #fff;
}

.team-container.njd-team .bouton:hover {
    color: #CE1126;
    background-color: #fff;
}

.team-container.phi-team .bouton:hover {
    color: #F74902;
    background-color: #fff;
}

.team-container.wsh-team .bouton:hover {
    color: #C8102E;
    background-color: #fff;
}

.team-container.nyr-team .bouton:hover {
    color: #0038A8;
    background-color: #fff;
}

.team-container.chi-team .bouton:hover {
    color: #CF0A2C;
    background-color: #fff;
}

.team-container.stl-team .bouton:hover {
    color: #002F87;
    background-color: #fff;
}

.team-container.min-team .bouton:hover {
    color: #154734;
    background-color: #fff;
}

.team-container.wpg-team .bouton:hover {
    color: #041E42;
    background-color: #fff;
}

.team-container.cgy-team .bouton:hover {
    color: #C8102E;
    background-color: #fff;
}

.team-container.lak-team .bouton:hover {
    color: #111111;
    background-color: #fff;
}

.team-container.vgk-team .bouton:hover {
    color: #333F42;
    background-color: #fff;
}

.team-container.van-team .bouton:hover {
    color: #00205B;
    background-color: #fff;
}

.team-container.sea-team .bouton:hover {
    color: #001628;
    background-color: #fff;
}

.team-stats-note {
    margin: -8px 0 28px;
    color: var(--muted-text);
    font-size: 14px;
    line-height: 1.6;
}

.team-stats-note a {
    color: #087DA0;
    text-decoration: underline;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 28px 0;
}

.matchs,
.wins,
.losses,
.points {
    min-width: 0;
    padding: 20px;
    text-align: center;
    background: var(--card-color);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    color: #101C30;
}

.stats-container p {
    margin: 0 0 8px;
    color: #52647C;
}

.stats-container p:last-child {
    margin: 0;
    color: #101C30;
    font-size: 32px;
    font-weight: 700;
}

.matchs:hover,
.wins:hover,
.losses:hover,
.points:hover {
    transform: translateY(-3px);
}

.stats-container.tor-team .matchs:hover,
.tor-team .wins:hover,
.tor-team .losses:hover,
.tor-team .points:hover {
    box-shadow: 0px 10px 20px rgba(0, 123, 255, 0.5);
}

.stats-container.edm-team .matchs:hover,
.edm-team .wins:hover,
.edm-team .losses:hover,
.edm-team .points:hover {
    box-shadow: 0px 10px 20px rgba(255, 145, 0, 0.5);
}

.stats-container.col-team .matchs:hover,
.col-team .wins:hover,
.col-team .losses:hover,
.col-team .points:hover {
    box-shadow: 0px 10px 20px rgba(108, 38, 61, 0.5);
}

.stats-container.ana-team .matchs:hover,
.ana-team .wins:hover,
.ana-team .losses:hover,
.ana-team .points:hover {
    box-shadow: 0px 10px 20px rgba(244, 122, 56, 0.5);
}

.stats-container.uta-team .matchs:hover,
.uta-team .wins:hover,
.uta-team .losses:hover,
.uta-team .points:hover {
    box-shadow: 0px 10px 20px rgba(133, 208, 231, 0.5);
}

.stats-container.dal-team .matchs:hover,
.dal-team .wins:hover,
.dal-team .losses:hover,
.dal-team .points:hover {
    box-shadow: 0px 10px 20px rgba(0, 104, 71, 0.5);
}

.stats-container.nsh-team .matchs:hover,
.nsh-team .wins:hover,
.nsh-team .losses:hover,
.nsh-team .points:hover {
    box-shadow: 0px 10px 20px rgba(16, 28, 48, 0.5);
}

.stats-container.sjs-team .matchs:hover,
.sjs-team .wins:hover,
.sjs-team .losses:hover,
.sjs-team .points:hover {
    box-shadow: 0px 10px 20px rgba(0, 109, 117, 0.5);
}

.stats-container.bos-team .matchs:hover,
.bos-team .wins:hover,
.bos-team .losses:hover,
.bos-team .points:hover {
    box-shadow: 0px 10px 20px rgba(255, 184, 28, 0.5);
}

.stats-container.buf-team .matchs:hover,
.buf-team .wins:hover,
.buf-team .losses:hover,
.buf-team .points:hover {
    box-shadow: 0px 10px 20px rgba(0, 48, 135, 0.5);
}

.stats-container.det-team .matchs:hover,
.det-team .wins:hover,
.det-team .losses:hover,
.det-team .points:hover {
    box-shadow: 0px 10px 20px rgba(206, 17, 38, 0.5);
}

.stats-container.fla-team .matchs:hover,
.fla-team .wins:hover,
.fla-team .losses:hover,
.fla-team .points:hover {
    box-shadow: 0px 10px 20px rgba(200, 16, 46, 0.5);
}

.stats-container.mtl-team .matchs:hover,
.mtl-team .wins:hover,
.mtl-team .losses:hover,
.mtl-team .points:hover {
    box-shadow: 0px 10px 20px rgba(175, 30, 45, 0.5);
}

.stats-container.ott-team .matchs:hover,
.ott-team .wins:hover,
.ott-team .losses:hover,
.ott-team .points:hover {
    box-shadow: 0px 10px 20px rgba(197, 32, 50, 0.5);
}

.stats-container.tbl-team .matchs:hover,
.tbl-team .wins:hover,
.tbl-team .losses:hover,
.tbl-team .points:hover {
    box-shadow: 0px 10px 20px rgba(0, 40, 104, 0.5);
}

.stats-container.car-team .matchs:hover,
.car-team .wins:hover,
.car-team .losses:hover,
.car-team .points:hover {
    box-shadow: 0px 10px 20px rgba(204, 0, 0, 0.5);
}

.stats-container.cbj-team .matchs:hover,
.cbj-team .wins:hover,
.cbj-team .losses:hover,
.cbj-team .points:hover {
    box-shadow: 0px 10px 20px rgba(0, 38, 84, 0.5);
}

.stats-container.pit-team .matchs:hover,
.pit-team .wins:hover,
.pit-team .losses:hover,
.pit-team .points:hover {
    box-shadow: 0px 10px 20px rgba(252, 181, 20, 0.5);
}

.stats-container.nyi-team .matchs:hover,
.nyi-team .wins:hover,
.nyi-team .losses:hover,
.nyi-team .points:hover {
    box-shadow: 0px 10px 20px rgba(0, 83, 155, 0.5);
}

.stats-container.njd-team .matchs:hover,
.njd-team .wins:hover,
.njd-team .losses:hover,
.njd-team .points:hover {
    box-shadow: 0px 10px 20px rgba(206, 17, 38, 0.5);
}

.stats-container.phi-team .matchs:hover,
.phi-team .wins:hover,
.phi-team .losses:hover,
.phi-team .points:hover {
    box-shadow: 0px 10px 20px rgba(247, 73, 2, 0.5);
}

.stats-container.wsh-team .matchs:hover,
.wsh-team .wins:hover,
.wsh-team .losses:hover,
.wsh-team .points:hover {
    box-shadow: 0px 10px 20px rgba(200, 16, 46, 0.5);
}

.stats-container.nyr-team .matchs:hover,
.nyr-team .wins:hover,
.nyr-team .losses:hover,
.nyr-team .points:hover {
    box-shadow: 0px 10px 20px rgba(0, 56, 168, 0.5);
}

.stats-container.chi-team .matchs:hover,
.chi-team .wins:hover,
.chi-team .losses:hover,
.chi-team .points:hover {
    box-shadow: 0px 10px 20px rgba(207, 10, 44, 0.5);
}

.stats-container.stl-team .matchs:hover,
.stl-team .wins:hover,
.stl-team .losses:hover,
.stl-team .points:hover {
    box-shadow: 0px 10px 20px rgba(0, 47, 135, 0.5);
}

.stats-container.min-team .matchs:hover,
.min-team .wins:hover,
.min-team .losses:hover,
.min-team .points:hover {
    box-shadow: 0px 10px 20px rgba(21, 71, 52, 0.5);
}

.stats-container.wpg-team .matchs:hover,
.wpg-team .wins:hover,
.wpg-team .losses:hover,
.wpg-team .points:hover {
    box-shadow: 0px 10px 20px rgba(4, 30, 66, 0.5);
}

.stats-container.cgy-team .matchs:hover,
.cgy-team .wins:hover,
.cgy-team .losses:hover,
.cgy-team .points:hover {
    box-shadow: 0px 10px 20px rgba(200, 16, 46, 0.5);
}

.stats-container.lak-team .matchs:hover,
.lak-team .wins:hover,
.lak-team .losses:hover,
.lak-team .points:hover {
    box-shadow: 0px 10px 20px rgba(17, 17, 17, 0.5);
}

.stats-container.vgk-team .matchs:hover,
.vgk-team .wins:hover,
.vgk-team .losses:hover,
.vgk-team .points:hover {
    box-shadow: 0px 10px 20px rgba(180, 151, 90, 0.5);
}

.stats-container.van-team .matchs:hover,
.van-team .wins:hover,
.van-team .losses:hover,
.van-team .points:hover {
    box-shadow: 0px 10px 20px rgba(0, 32, 91, 0.5);
}

.stats-container.sea-team .matchs:hover,
.sea-team .wins:hover,
.sea-team .losses:hover,
.sea-team .points:hover {
    box-shadow: 0px 10px 20px rgba(0, 22, 40, 0.5);
}

.miscelleanous-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin: 32px 0;
    align-items: start;
}

.palmares {
    grid-row: span 2;
    min-width: 0;
    padding: 24px;
    background: var(--card-color);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    color: #101C30;
}

.palmares:hover,
.color-club:hover,
.minimap-container:hover {
    transform: translateY(-3px);
}

.miscelleanous-container.tor-team .palmares:hover,
.tor-team .color-club:hover,
.tor-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(0, 123, 255, 0.5);
}

.miscelleanous-container.edm-team .palmares:hover,
.edm-team .color-club:hover,
.edm-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(255, 145, 0, 0.5);
}

.miscelleanous-container.col-team .palmares:hover,
.col-team .color-club:hover,
.col-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(108, 38, 61, 0.5);
}

.miscelleanous-container.ana-team .palmares:hover,
.ana-team .color-club:hover,
.ana-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(244, 122, 56, 0.5);
}

.miscelleanous-container.uta-team .palmares:hover,
.uta-team .color-club:hover,
.uta-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(133, 208, 231, 0.5);
}

.miscelleanous-container.dal-team .palmares:hover,
.dal-team .color-club:hover,
.dal-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(0, 104, 71, 0.5);
}

.miscelleanous-container.nsh-team .palmares:hover,
.nsh-team .color-club:hover,
.nsh-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(16, 28, 48, 0.5);
}

.miscelleanous-container.sjs-team .palmares:hover,
.sjs-team .color-club:hover,
.sjs-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(0, 109, 117, 0.5);
}

.miscelleanous-container.bos-team .palmares:hover,
.bos-team .color-club:hover,
.bos-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(255, 184, 28, 0.5);
}

.miscelleanous-container.buf-team .palmares:hover,
.buf-team .color-club:hover,
.buf-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(0, 48, 135, 0.5);
}

.miscelleanous-container.det-team .palmares:hover,
.det-team .color-club:hover,
.det-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(206, 17, 38, 0.5);
}

.miscelleanous-container.fla-team .palmares:hover,
.fla-team .color-club:hover,
.fla-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(200, 16, 46, 0.5);
}

.miscelleanous-container.mtl-team .palmares:hover,
.mtl-team .color-club:hover,
.mtl-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(175, 30, 45, 0.5);
}

.miscelleanous-container.ott-team .palmares:hover,
.ott-team .color-club:hover,
.ott-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(197, 32, 50, 0.5);
}

.miscelleanous-container.tbl-team .palmares:hover,
.tbl-team .color-club:hover,
.tbl-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(0, 40, 104, 0.5);
}

.miscelleanous-container.car-team .palmares:hover,
.car-team .color-club:hover,
.car-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(204, 0, 0, 0.5);
}

.miscelleanous-container.cbj-team .palmares:hover,
.cbj-team .color-club:hover,
.cbj-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(0, 38, 84, 0.5);
}

.miscelleanous-container.pit-team .palmares:hover,
.pit-team .color-club:hover,
.pit-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(252, 181, 20, 0.5);
}

.miscelleanous-container.nyi-team .palmares:hover,
.nyi-team .color-club:hover,
.nyi-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(0, 83, 155, 0.5);
}

.miscelleanous-container.njd-team .palmares:hover,
.njd-team .color-club:hover,
.njd-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(206, 17, 38, 0.5);
}

.miscelleanous-container.phi-team .palmares:hover,
.phi-team .color-club:hover,
.phi-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(247, 73, 2, 0.5);
}

.miscelleanous-container.wsh-team .palmares:hover,
.wsh-team .color-club:hover,
.wsh-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(200, 16, 46, 0.5);
}

.miscelleanous-container.nyr-team .palmares:hover,
.nyr-team .color-club:hover,
.nyr-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(0, 56, 168, 0.5);
}

.miscelleanous-container.chi-team .palmares:hover,
.chi-team .color-club:hover,
.chi-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(207, 10, 44, 0.5);
}

.miscelleanous-container.stl-team .palmares:hover,
.stl-team .color-club:hover,
.stl-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(0, 47, 135, 0.5);
}

.miscelleanous-container.min-team .palmares:hover,
.min-team .color-club:hover,
.min-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(21, 71, 52, 0.5);
}

.miscelleanous-container.wpg-team .palmares:hover,
.wpg-team .color-club:hover,
.wpg-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(4, 30, 66, 0.5);
}

.miscelleanous-container.cgy-team .palmares:hover,
.cgy-team .color-club:hover,
.cgy-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(200, 16, 46, 0.5);
}

.miscelleanous-container.lak-team .palmares:hover,
.lak-team .color-club:hover,
.lak-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(17, 17, 17, 0.5);
}

.miscelleanous-container.vgk-team .palmares:hover,
.vgk-team .color-club:hover,
.vgk-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(180, 151, 90, 0.5);
}

.miscelleanous-container.van-team .palmares:hover,
.van-team .color-club:hover,
.van-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(0, 32, 91, 0.5);
}

.miscelleanous-container.sea-team .palmares:hover,
.sea-team .color-club:hover,
.sea-team .minimap-container:hover {
    box-shadow: 0px 10px 20px rgba(0, 22, 40, 0.5);
}

.palmares h2 {
    margin: 0 0 20px;
}

.honour {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 6px 12px;
    margin: 24px 0 0;
}

.honour-count {
    font-size: 36px;
    color: #39BDE0;
}

.honour-label {
    font-weight: 600;
}

.honour-years {
    grid-column: 1 / -1;
    font-size: 14px;
    line-height: 1.8;
    color: #52647C;
}

.minimap-container {
    min-width: 0;
    padding: 20px;
    background: var(--card-color);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    color: #101C30;
}

.minimap-container h2 {
    margin: 0;
    font-size: 20px;
}

.minimap-container p {
    margin: 12px 0;
    color: #52647C;
}

.minimap-container img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.color-club {
    min-width: 0;
    padding: 20px;
    background: var(--card-color);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    text-align: center;
    color: #101C30;
}

.color-club h2 {
    margin: 0 0 16px;
    font-size: 20px;
}

.colors {
    display: flex;
    justify-content: center;
    margin: 10px;
}

.first-color,
.second-color {
    width: 100px;
    padding: 30px;
    border: 1px solid black;
}

.miscelleanous-container.tor-team .first-color {
    background-color: #064493;
}

.miscelleanous-container.tor-team .second-color {
    background-color: #fff;
}

.miscelleanous-container.edm-team .first-color {
    background-color: #041E42;
}

.miscelleanous-container.edm-team .second-color {
    background-color: #ff4c00;
}

.miscelleanous-container.col-team .first-color {
    background-color: #6C263D;
}

.miscelleanous-container.dal-team .first-color {
    background-color: #006847;
}

.miscelleanous-container.dal-team .second-color {
    background-color: #101C30;
}

.miscelleanous-container.uta-team .first-color {
    background-color: #101C30;
}

.miscelleanous-container.uta-team .second-color {
    background-color: #69B3E7;
}

.miscelleanous-container.ana-team .first-color {
    background-color: #F47A38;
}

.miscelleanous-container.ana-team .second-color {
    background-color: #101C30;
}

.miscelleanous-container.col-team .second-color {
    background-color: #101C30;
}

.miscelleanous-container.nsh-team .first-color {
    background-color: #101C30;
}

.miscelleanous-container.nsh-team .second-color {
    background-color: #FDBB30;
}

.miscelleanous-container.sjs-team .first-color {
    background-color: #101C30;
}

.miscelleanous-container.sjs-team .second-color {
    background-color: #006D75;
}

.miscelleanous-container.bos-team .first-color {
    background-color: #FFB81C;
}

.miscelleanous-container.bos-team .second-color {
    background-color: #000000;
}

.miscelleanous-container.buf-team .first-color {
    background-color: #003087;
}

.miscelleanous-container.buf-team .second-color {
    background-color: #FFB81C;
}

.miscelleanous-container.det-team .first-color {
    background-color: #CE1126;
}

.miscelleanous-container.det-team .second-color {
    background-color: #FFFFFF;
}

.miscelleanous-container.fla-team .first-color {
    background-color: #C8102E;
}

.miscelleanous-container.fla-team .second-color {
    background-color: #041E42;
}

.miscelleanous-container.mtl-team .first-color {
    background-color: #AF1E2D;
}

.miscelleanous-container.mtl-team .second-color {
    background-color: #192168;
}

.miscelleanous-container.ott-team .first-color {
    background-color: #C52032;
}

.miscelleanous-container.ott-team .second-color {
    background-color: #000000;
}

.miscelleanous-container.tbl-team .first-color {
    background-color: #002868;
}

.miscelleanous-container.tbl-team .second-color {
    background-color: #FFFFFF;
}

.miscelleanous-container.car-team .first-color {
    background-color: #CC0000;
}

.miscelleanous-container.car-team .second-color {
    background-color: #000000;
}

.miscelleanous-container.cbj-team .first-color {
    background-color: #002654;
}

.miscelleanous-container.cbj-team .second-color {
    background-color: #CE1126;
}

.miscelleanous-container.pit-team .first-color {
    background-color: #FCB514;
}

.miscelleanous-container.pit-team .second-color {
    background-color: #000000;
}

.miscelleanous-container.nyi-team .first-color {
    background-color: #00539B;
}

.miscelleanous-container.nyi-team .second-color {
    background-color: #F47D30;
}

.miscelleanous-container.njd-team .first-color {
    background-color: #CE1126;
}

.miscelleanous-container.njd-team .second-color {
    background-color: #000000;
}

.miscelleanous-container.phi-team .first-color {
    background-color: #F74902;
}

.miscelleanous-container.phi-team .second-color {
    background-color: #000000;
}

.miscelleanous-container.wsh-team .first-color {
    background-color: #C8102E;
}

.miscelleanous-container.wsh-team .second-color {
    background-color: #041E42;
}

.miscelleanous-container.nyr-team .first-color {
    background-color: #0038A8;
}

.miscelleanous-container.nyr-team .second-color {
    background-color: #CE1126;
}

.miscelleanous-container.chi-team .first-color {
    background-color: #CF0A2C;
}

.miscelleanous-container.chi-team .second-color {
    background-color: #000000;
}

.miscelleanous-container.stl-team .first-color {
    background-color: #002F87;
}

.miscelleanous-container.stl-team .second-color {
    background-color: #FCB514;
}

.miscelleanous-container.min-team .first-color {
    background-color: #154734;
}

.miscelleanous-container.min-team .second-color {
    background-color: #A6192E;
}

.miscelleanous-container.wpg-team .first-color {
    background-color: #041E42;
}

.miscelleanous-container.wpg-team .second-color {
    background-color: #004C97;
}

.miscelleanous-container.cgy-team .first-color {
    background-color: #C8102E;
}

.miscelleanous-container.cgy-team .second-color {
    background-color: #F1BE48;
}

.miscelleanous-container.lak-team .first-color {
    background-color: #111111;
}

.miscelleanous-container.lak-team .second-color {
    background-color: #A2AAAD;
}

.miscelleanous-container.vgk-team .first-color {
    background-color: #B4975A;
}

.miscelleanous-container.vgk-team .second-color {
    background-color: #333F42;
}

.miscelleanous-container.van-team .first-color {
    background-color: #00205B;
}

.miscelleanous-container.van-team .second-color {
    background-color: #00843D;
}

.miscelleanous-container.sea-team .first-color {
    background-color: #001628;
}

.miscelleanous-container.sea-team .second-color {
    background-color: #99D9D9;
}

.section-title {
    margin: 40px 0 24px;
    padding-left: 12px;
    border-left: 4px solid #39BDE0;
}

.squad {
    display: grid;
    gap: 32px;
    margin: 0;
}

.roster-title {
    margin: 0 0 16px;
    font-size: 20px;
    color: var(--muted-text);
}

.roster-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.shirt-container {
    position: relative;
    background: #E8EEF5;
}

.shirt-container img {
    width: 200px;
}

.shirt-container p {
    position: absolute;
    top: 60px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    font-family: "Graduate", serif;
    font-size: 44px;
    font-weight: 700;
    color: white;
}

.squad.tor-team .shirt-container {
    border: 2px ridge #064493;
}

.squad.edm-team .shirt-container {
    border: 2px ridge #FF4C00;
}

.squad.col-team .shirt-container {
    border: 2px ridge #6C263D;
}

.squad.ana-team .shirt-container {
    border: 2px ridge #F47A38;
}

.squad.uta-team .shirt-container {
    border: 2px ridge #69B3E7;
}

.squad.dal-team .shirt-container {
    border: 2px ridge #006847;
}

.squad.nsh-team .shirt-container {
    border: 2px ridge #101C30;
}

.squad.sjs-team .shirt-container {
    border: 2px ridge #101C30;
}

.squad.bos-team .shirt-container {
    border: 2px ridge #FFB81C;
}

.squad.buf-team .shirt-container {
    border: 2px ridge #003087;
}

.squad.det-team .shirt-container {
    border: 2px ridge #CE1126;
}

.squad.fla-team .shirt-container {
    border: 2px ridge #C8102E;
}

.squad.mtl-team .shirt-container {
    border: 2px ridge #AF1E2D;
}

.squad.ott-team .shirt-container {
    border: 2px ridge #C52032;
}

.squad.tbl-team .shirt-container {
    border: 2px ridge #002868;
}

.squad.car-team .shirt-container {
    border: 2px ridge #CC0000;
}

.squad.cbj-team .shirt-container {
    border: 2px ridge #002654;
}

.squad.pit-team .shirt-container {
    border: 2px ridge #FCB514;
}

.squad.nyi-team .shirt-container {
    border: 2px ridge #00539B;
}

.squad.njd-team .shirt-container {
    border: 2px ridge #CE1126;
}

.squad.phi-team .shirt-container {
    border: 2px ridge #F74902;
}

.squad.wsh-team .shirt-container {
    border: 2px ridge #C8102E;
}

.squad.nyr-team .shirt-container {
    border: 2px ridge #0038A8;
}

.squad.chi-team .shirt-container {
    border: 2px ridge #CF0A2C;
}

.squad.stl-team .shirt-container {
    border: 2px ridge #002F87;
}

.squad.min-team .shirt-container {
    border: 2px ridge #154734;
}

.squad.wpg-team .shirt-container {
    border: 2px ridge #041E42;
}

.squad.cgy-team .shirt-container {
    border: 2px ridge #C8102E;
}

.squad.lak-team .shirt-container {
    border: 2px ridge #111111;
}

.squad.vgk-team .shirt-container {
    border: 2px ridge #B4975A;
}

.squad.van-team .shirt-container {
    border: 2px ridge #00205B;
}

.squad.sea-team .shirt-container {
    border: 2px ridge #001628;
}

.player-container {
    padding: 20px;
    background-color: var(--card-color);
}

.player-container h4 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
}

.player-container p {
    margin: 0;
    font-size: 14px;
    color: #52647C;
}

.player {
    min-width: 0;
    text-align: center;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-color);
    color: #101C30;
}

/* Historique des saisons */

.last-container {
    margin: 40px 0;
}

.history-container {
    overflow-x: auto;
    background: var(--card-color);
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    color: #101C30;
}

.season-history {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.season-history caption {
    padding: 24px;
    text-align: left;
    font-size: 24px;
    font-weight: 700;
}

.season-history th,
.season-history td {
    padding: 18px 24px;
    border-bottom: 1px solid #E2E8F0;
}

.season-history thead {
    background: #101C30;
    color: white;
}

.season-history tbody tr:nth-child(even) {
    background: var(--table-row);
}

.playoff-badge {
    display: inline-block;
    padding: 6px 10px;
    background: #E7F6FB;
    color: #07516A;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

.footer-title {
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 40px;
}

.footer-title span {
    color: #39BDE0;
    font-weight: bold;
}

.footer-menu {
    display: flex;
    gap: 30px;
    color: white;
    font-weight: bold;
}

/* Adaptation des images */

img {
    max-width: 100%;
    height: auto;
}

/* Tablettes et mobiles */

@media (max-width: 1000px) {
    .roster-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 768px) {
    main {
        padding: 24px 16px;
    }

    header {
        position: static;
        flex-direction: column;
        align-items: center;
    }

    .header-title,
    .footer-title {
        font-size: 30px;
    }

    .header-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 18px;
        padding: 0 16px 16px;
    }

    .team-container {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "logo" "presentation";
        padding: 24px;
        gap: 24px;
    }

    .color-container {
        width: 100%;
        max-width: 280px;
        justify-self: center;
    }

    .equipe-nom {
        font-size: 32px;
        overflow-wrap: anywhere;
    }

    .equipe-actions {
        flex-wrap: wrap;
    }

    .stats-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .miscelleanous-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .roster-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    footer {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 28px 16px;
        text-align: center;
    }

    .footer-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 16px;
    }

}

@media (max-width: 480px) {
    .roster-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}

/* Sélecteurs de mode (Dark/Light) */
body.dark-mode {
    --bg-body: var(--bg-color-dark);
    --text-color: var(--bg-color-light);
    --card-color: var(--card-color-dark);
    --muted-text: #B8C7DC;
    --table-row: #EAE4CC;
}

@media (min-width: 769px) and (max-width: 1100px) {
    header {
        flex-wrap: wrap;
    }

    .header-menu {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .season-history {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .season-history th,
    .season-history td {
        padding: 10px 6px;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .season-history caption {
        padding: 16px;
        font-size: 20px;
    }

    .playoff-badge {
        max-width: 100%;
        padding: 4px 6px;
        font-size: 12px;
        white-space: normal;
    }
}