*{
    box-sizing: border-box;
}
html{
    --bg-color-dark: #0B1220;
    --bg-color-light: white;
    --bg-body-light: #F1F5F9;
    --text-color: #101C30;
    --card-color-dark: #f3eed8;

    --bg-color: var(--bg-color-light);
    --text-color: var(--text-color);
    --card-color: var(--bg-color-light);
    --bg-body: var(--bg-body-light);
}

body{
    margin: 0;
    font-family: 'Barlow', sans-serif;
    color: #101C30;
    background: var(--bg-body);
}

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

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

.header-title{
    padding: 20px;
}

.header-title span, .footer-title span, h1 span{
    color: #39BDE0;
}

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

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

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

i{
    margin-right: 10px;
}

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

a:hover, a[aria-current="page"]{
    color: #39BDE0;
}

a:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible{
    outline: 3px solid #087DA0;
    outline-offset: 4px;
}

main{
    max-width: 1280px;
    margin: auto;
    padding: 40px 32px;
}

h1{
    margin: 16px 0;
    font-size: 52px;
    text-align: center;
    color: var(--text-color);
}

.matches-intro > p:not(.eyebrow){
    color: #D7E4F1;
    line-height: 1.6;
}

.matches-summary{
    margin: 0 0 32px;
    text-align: center;
    color: var(--text-color);
}

.matches-filters{
    display: grid;
    grid-template-columns: 1fr 1.5fr auto;
    align-items: end;
    gap: 20px;
    margin: 28px 0;
    padding: 24px;
    background: var(--card-color);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}

.matches-filters > div{
    min-width: 0;
}

label{
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

input, select, button{
    min-height: 46px;
    padding: 12px;
    font: inherit;
    color: #101C30;
    background: #F1F5F9;
    border: 1px solid #CCD8E5;
    border-radius: 8px;
}

input, select{
    width: 100%;
    min-width: 0;
}

button{
    cursor: pointer;
    background: #39BDE0;
    border-color: #39BDE0;
    font-weight: 600;
}

button:hover{
    background: #7CDDF5;
}

#matches-count{
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color);
}

.matches-note, .matches-source{
    color: var(--text-color);
}

.match-day{
    margin-top: 32px;
}

.match-day h2{
    padding-left: 12px;
    border-left: 4px solid #39BDE0;
    font-size: 22px;
    color: var(--text-color);
}

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

.match-card{
    padding: 24px;
    background: var(--card-color);
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgb(16 28 48 / 6%);
}

.match-top, .match-bottom{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #52647C;
    font-size: 13px;
}

.match-top{
    margin-bottom: 20px;
}

.match-top span{
    color: #52647C;
    font-weight: 600;
}

.match-status{
    padding: 6px 10px;
    color: #07516A;
    background: #E7F6FB;
    border-radius: 6px;
    font-weight: 600;
}

.match-team{
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

.team-code-ANA{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/ANA.png');
    background-size: cover;
}

.team-code-BOS{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/BOS.png');
    background-size: cover;
}
.team-code-BUF{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/BUF.png');
    background-size: cover;
}
.team-code-CBJ{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/CBJ.png');
    background-size: cover;
}
.team-code-CAR{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/CAR.png');
    background-size: cover;
}
.team-code-CHI{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/CHI.png');
    background-size: cover;
}
.team-code-COL{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/COL.png');
    background-size: cover;
}
.team-code-CBJ{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/CBJ.png');
    background-size: cover;
}

.team-code-CGY{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/CGY.png');
    background-size: cover;
}
.team-code-DAL{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/DAL.png');
    background-size: cover;
}
.team-code-DET{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/DET.png');
    background-size: cover;
}
.team-code-EDM{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/EDM.png');
    background-size: cover;
}
.team-code-FLA{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/FLA.png');
    background-size: cover;
}
.team-code-LAK{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/LAK.png');
    background-size: cover;
}
.team-code-MIN{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/MIN.png');
    background-size: cover;
}
.team-code-MTL{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/MTL.png');
    background-size: cover;
}
.team-code-NJD{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/NJD.png');
    background-size: cover;
}
.team-code-NSH{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/NSH.png');
    background-size: cover;
}
.team-code-NYI{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/NYI.png');
    background-size: cover;
}
.team-code-NYR{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/NYR.png');
    background-size: cover;
}
.team-code-OTT{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/OTT.png');
    background-size: cover;
}
.team-code-PHI{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/PHI.png');
    background-size: cover;
}
.team-code-PIT{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/PIT.png');
    background-size: cover;
}

.team-code-SEA{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/SEA.png');
    background-size: cover;
}
.team-code-SJS{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/SJS.png');
    background-size: cover;
}
.team-code-STL{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/STL.png');
    background-size: cover;
}
.team-code-TBL{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/TBL.png');
    background-size: cover;
}
.team-code-TOR{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/TOR.png');
    background-size: cover;
}

.team-code-UTA{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/UTA.png');
    background-size: cover;
}
.team-code-VAN{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/VAN.png');
    background-size: cover;
}
.team-code-VGK{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/VGK.png');
    background-size: cover;
}

.team-code-WPG{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/WPG.png');
    background-size: cover;
}
.team-code-WSH{
    display: grid;
    place-items: center;
    height: 48px;
    color: white;
    border-radius: 8px;
    font-weight: 800;
    background-image: url('../images/logos/WSH.png');
    background-size: cover;
}

.match-team a{
    font-size: 18px;
    font-weight: 600;
}

.match-team small{
    display: block;
    margin-top: 4px;
    color: #52647C;
}

.match-score{
    font-size: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.winner-badge{
    display: inline-block;

    margin-left: 6px;
    padding: 3px 8px;

    color: #07516A;
    font-size: 12px;
    font-weight: 700;

    background: #E7F6FB;
    border-radius: 6px;
}

.winner .match-score{
    color: #087DA0;
}

.match-bottom{
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #E2E8F0;
}

.match-bottom span{
    color: #52647C;
    font-weight: 600;
    font-style: italic;
}

.match-bottom a, .matches-source a{
    color: #087DA0;
    font-weight: 600;
}

.matches-empty{
    padding: 32px;
    text-align: center;
    background: white;
    border-radius: 12px;
}

.matches-source{
    margin-top: 40px;
}

footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 40px;
    color: white;
    background: #101C30;
}

.footer-menu{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
}

[hidden]{
    display: none !important;
}

@media (max-width: 900px){
    .matches-grid{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px){
    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;
    }

    main{
        padding: 24px 16px;
    }

    .matches-intro{
        padding: 24px;
    }

    .matches-filters{
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .match-card{
        padding: 18px;
    }

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

    .footer-menu{
        justify-content: center;
    }
}

/* Sélecteurs de mode (Dark/Light) */

.dark-mode{
    color: black;
    --bg-color: var(--bg-color-dark);
    --description-text: var(--color-text);
    --text-color: var(--bg-color-light);
    --card-color: var(--card-color-dark);
    --bg-body: var(--bg-color-dark);
}