/*
 * 2025 02 MEDIA
 */
@media (min-width: 600px) and (min-height: 480px) {
    :root {
        --glo-max-width: calc(25% - var(--glo-space-x))
    }

    .tooltip,
    .infobulleBtn {
        cursor: help
    }

    .team-item {
        min-width: 12%;
        margin: 0 auto
    }

    .navSheet > .select {
        width: min(calc(33.333% - (var(--glo-space-x) * 2)), 100%)
    }

    .rota fieldset + fieldset {
        margin-left: .5em
    }

    .rota,
    .pos fieldset {
        flex-direction: unset
    }

    .rota {
        min-width: 66.666%
    }

    .pos {
        min-width: 33.333%
    }

    .pos img {
        max-width: unset
    }


}

@media (min-width: 768px) and (min-height: 480px) {
    .container > nav {
        max-width: 430px
    }

    :root {
        --auto-zero: 0;
        --block-none: none;
        --none-block: block;
        --none-flex: flex
    }

    header,
    header > nav {
        align-items: center;
        justify-content: space-between;
        flex-direction: row
    }

    header > a {
        z-index: 3
    }

    header > a,
    header.active > a {
        margin: 0
    }

    header > nav {
        margin-right: 1.5em;
        width: auto;
    }

    header > nav > a {
        font-size: 75%;
        padding: 0;
        margin: 0 clamp(1em, 2vw, 2em) 0 0;
    }

    .active > form > .search-field,
    .search-field {
        pointer-events: unset
    }

    .search-field,
    .search-submit {
        left: auto;
        right: 0;
        z-index: 2
    }

    .lead > .sort {
        padding-top: 0
    }

    .navSheet,
    .sort {
        flex-direction: row
    }

    .sort {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 1280px
    }

    .active.scroll,
    .scroll {
        pointer-events: none
    }

    .active.scroll > img,
    .scroll > img {
        border: 0;
        width: 100%;
        max-width: 1440px
    }

    .avis-compare {
        flex-direction: row
    }

    .art-item > h2,
    .art-item > h3 {
        font-size: 112.5%
    }

    .cards--page .container > *,
    .team-build--page .container > * {
        position: sticky;
        left: 0;
        top: var(--glo-menu-height);
        width: 100%;
        height: auto
    }

    .cards--page .container > nav,
    .team-build--page .container > nav {
        margin-right: 1em;
        top: calc(var(--glo-menu-height) / 4)
    }

    .container {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start
    }

    .cards_container {
        width: inherit
    }

    .cards_container fieldset {
        font-size: 16px;
        /* margin-top: calc(2em + 29px) */
    }

    .cards_container > .anchor {
        display: none
    }

    .team_container {
        width: max(calc(var(--glo-space-x) - var(--container-size)), min(744px, 100%))
    }

    .defi ol,
    .defi p {
        font-size: 100%
    }

    .infobulle::before {
        --size: .5em
    }

    .infobulle {
        min-width: unset
    }

    .infobulle > p {
        text-align: initial
    }

    .infobulle > p > b {
        display: initial
    }

    .max-21 ~ .thumb {
        --max: 132px;
        min-width: var(--max)
    }

}

@media (min-width: 960px) {
    :root {
        --glo-max-width: calc(20% - var(--glo-space-x));
        --glo-font-size: clamp(100%, 1vw, 125%)
    }

    header > nav > a {
        font-size: 100%;
        padding: 0 clamp(.5em, 1vw, .75em);
        margin: 0 clamp(.5em, 1vw, .75em) 0 0;
    }

    .team-item:nth-child(1),
    .team-item:nth-child(7) {
        min-width: unset;
        order: 2;
        align-items: center
    }

    .team-item {
        max-width: 12%
    }

    .sheet--page .hero > a.card {
        --w: 164px;
        --h: 144px
    }

    .sheet--page .icons {
        margin-top: -1.25em
    }

    .sheet--page .tooltip {
        --marge: .25em;
        --max: 100%
    }

    .tier {
        display: flex
    }

    .leaders {
        min-width: 380px
    }

    .leaders > h3 {
        top: calc(100% - 2.25em);
        left: calc(190px - .25em);
        position: absolute
    }

    .tier > .cardBanner {
        width: 100%;
        text-align: left;
        align-items: center;
        justify-content: unset
    }

    .leaders + .cardBanner > .item {
        width: max(0%, min(calc(132px + 3em), 33.333%))
    }

    .tier:nth-of-type(6) .cardBanner > .item {
        width: max(0%, min(calc(100px + .5em), 33.333%))
    }

    .tier:nth-of-type(6) .item > a {
        --w: 100px;
        --h: 88px
    }

    .max-28 ~ .thumb {
        --max: 132px
    }

    .event-grade-radio:checked ~ label:hover,
    .event-grade-radio:not(:checked) + label:hover ~ label {
        --note-contrast: 0%
    }

    .event-grade-radio:not(:checked) ~ label:hover {
        --note-contrast: 50% !important
    }

    .container > nav {
        font-size: 16px;
        min-height: 100vh
    }

    .tooltip {
        margin-bottom: 1em;
        --marge: calc(3.333% / 2);
        width: 30%
    }

    .events .tooltip {
        --marge: calc(.5% / 2);
        width: 24%
    }

    .fixed-menu {
        display: flex;
    }

}

@media (min-width: 1280px) {
    :root {
        --glo-max-width: calc(16.666% - var(--glo-space-x))
    }

    .defi > ol > li {
        width: 15%
    }

    .defi > ol {
        max-width: 640px
    }

    .compare--page h1 > b {
        display: inline-block;
        margin: 0 .25em;
        font-size: 150%;
        vertical-align: middle
    }

    .navSheet,
    .sort {
        max-width: 1440px;
        justify-content: space-around
    }

    .scroll {
        display: inline-flex;
        width: calc(50vw - 1em);
        max-width: calc(1280px - 1em);
        padding: 0 .375em 1em
    }

    .navSheet.active ~ .scroll {
        display: inline-flex;
        width: calc(100vw - 2em);
        max-width: calc(1440px + 1.5em);
        padding: 0 .375em 1em
    }

    .navSheet > button {
        color: var(--c-glo-select);
        display: block;
        border-radius: 2em;
        background-color: var(--c-glo-bg-select);
        width: 1.75em;
        height: 1.75em;
        text-transform: uppercase;
        font-size: 119%;
        font-weight: 1000;
        transform: rotate(0);
        box-shadow: 0 .1em .1em #000;
        transition: transform .3s
    }

    .navSheet.active > button {
        transform: rotate(90deg);
        box-shadow: .1em 0 .1em #000;
        padding: 0 0 .1em .1em
    }

    .linkCardBanner > .item {
        width: max(16.666%, min(calc(132px + 3em), 50%))
    }

    .team_container {
        width: calc(var(--container-size) - var(--glo-space-x));
    }

    .team-item > p {
        margin: .5em 0 1em;
        word-spacing: 0;
        letter-spacing: 0
    }

    .max-42 ~ .thumb {
        --max: 132px
    }

    .max-21 ~ .thumb,
    .max-28 ~ .thumb {
        --max: 164px
    }

    .max-21 ~ .thumb > a.card,
    .max-28 ~ .thumb > a.card {
        --w: 164px;
        --h: 144px
    }

}

@media (min-width: 1440px) {
    :root {
        --glo-max-width: calc(12.5% - var(--glo-space-x))
    }

    .max-49 ~ .thumb {
        --max: 132px
    }
}

@media (min-width: 1920px) {
    .max-60 ~ .thumb {
        --max: 132px
    }

    .max-21 ~ .thumb,
    .max-28 ~ .thumb,
    .max-42 ~ .thumb {
        --max: 164px
    }

    .max-21 ~ .thumb > a.card,
    .max-28 ~ .thumb > a.card,
    .max-42 ~ .thumb > a.card {
        --w: 164px;
        --h: 144px
    }
}