/*
 * 2025 02 SHEET
 */
.z-2 {
    z-index: 2
}

.z-3 {
    z-index: 3
}

:where(.dokkan-stats-link , .froggy) > img {
    filter: drop-shadow(0px 2px 1px #000);
    margin-bottom: 10%;
    width: max(180px, min(50vw, 240px));
}

:where(.froggy, .dokkan-stats-link):hover > img {
    filter: drop-shadow(0px 0px 4px var(--c-agi))
}

:where(.froggy, .dokkan-stats-link) {
    margin-inline: 3%;
}

/* PERSO MEME NOM + PERSO LINK */
.cardBanner {
    align-items: flex-start;
    width: 1440px;
}

.cardBanner > .item {
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    width: max(0%, min(calc(132px + 1.5em), 33.333%));
    position: relative
}

/* LEAD */
.lead {
    align-content: flex-start;
    background-position: 0 0, 50% 0;
    background-repeat: no-repeat;
    min-height: 300px
}

.lead:not(.no) .sort {
    padding-top: 100px
}

.banner.lead::before {
    background-color: var(--c-glo-bg);
    filter: opacity(.5)
}

.lead > h2.show-200 b:first-child,
.lead > h2:not(.show-200) b:last-child {
    display: none
}

.lead fieldset {
    filter: drop-shadow(0px 0px .5em var(--c-glo-bg));
}

#leaderBuddies > .item {
    width: max(0%, min(calc(100px + .75em), 25%));
}

/* LINKS */
.slider {
    display: flex;
    align-items: center;
}

.slider > label {
    flex-grow: 1;
}

.slideThree {
    width: 6em;
    height: 2.1em;
    background-color: var(--c-040);
    border-radius: 1.2em;
    box-shadow: inset 0 0.1em 0.1em #000;
    padding-left: 1em;
    margin-right: .75em;
    margin-left: auto;
}

.slideThree::after {
    color: yellow;
    text-shadow: 1px 1px 0 orange;
    filter: drop-shadow(0px 0px 6px orange);
    content: '10';
    right: .75em;
}

.slideThree::before {
    color: var(--c-100);
    content: '1';
    left: .75em;
}

.slideThree::after,
.slideThree::before {
    font-size: 125%;
    line-height: 1.75em;
}

.slideThree > [type=checkbox]:checked + label {
    left: 3.6em
}

.slideThree > label {
    width: 2em;
    height: 1.4em;
    top: .35em;
    left: .45em;
    z-index: 1;
    background-color: var(--c-glo-bg-select);
    border-radius: 1em;
    box-shadow: 0 0.1em 0.1em #000;
}

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

#best-leader-category {
    &:not(:has(.btn.show-all)) .linkCardBanner > .item:nth-child(n + 25) {
        display: none;
    }

    .btn {
        display: none;
    }

    &:has(.item:nth-child(26)) .btn:not(.show-all) {
        display: unset;
    }
}

.linkCardBanner > .item > a {
    margin-bottom: .5em;
}

.item > .link10 {
    color: var(--c-glo-max);
    filter: var(--link10-01);
    text-shadow: var(--link10-02);
}

.item > .link1,
.item > .link10 {
    font-weight: 600;
    text-align: center;
}


.banner:first-of-type {
    min-height: unset
}

.hero > a {
    --w: 132px;
    --h: 116px
}

a.active::after {
    content: '';
    bottom: -.75em;
    height: .25em;
    width: 52%;
    background-color: var(--c-100);
    border-radius: .375em
}

a.active > img {
    filter: drop-shadow(0 0 .2em currentcolor)
}

/*
sous 3 icones > taille normale
ex : aralé end (2) boss event (1)
*/
.icons > span.tooltip {
    width: max(calc(var(--max) - (var(--marge) * 3)), min(calc(86px + (var(--marge) * 3)), 50%));
}

.icons > span.tooltip:nth-last-child(n+2),
.icons > span.tooltip:nth-last-child(n+2) ~ span {
    --max: 50%
}

.icons > span.tooltip:nth-last-child(n+3),
.icons > span.tooltip:nth-last-child(n+3) ~ span {
    --max: 33.333%
}

.icons {
    margin-top: -1em;
}

.icons {
    padding: 0;
    margin-top: -1.25em
}

.icons + nav {
    padding-top: 1em
}

.tooltip {
    --marge: .125em;
    --max: 100%
}


/* AJOUT 2024 / 11 */
/* MEMO : VÉRIFIER ET VIRER LES CSS CONTENANT .Z-2 OU .Z-3 */
.zero-pl {
    z-index: auto
}

.zero-pl > h2,
.zero-pl > .linkCardBanner > .item {
    padding-left: 1em
}

.card-thumb + .infobulle > p > b {
    display: initial
}

.lead .item > span,
.infobulleBtn > span {
    box-shadow: 2px 3px 0 var(--c-glo-shadow)
}

/* FIN AJOUT */


.hero > a.card {
    --w: 132px;
    --h: 116px
}

.icons {
    margin-top: -1em
}

.tooltip {
    --marge: .125em;
    --max: 100%;
    max-width: calc(172px);
    min-width: calc(86px)
}

/*
sous 3 icones > taille normale
ex : aralé end (2) boss event (1)
*/
.icons > span.tooltip {
    width: max(calc(var(--max) - (var(--marge) * 3)), min(calc(86px + (var(--marge) * 3)), 50%))
}

.icons > span.tooltip:nth-last-child(n+2),
.icons > span.tooltip:nth-last-child(n+2) ~ span {
    --max: 50%
}

.icons > span.tooltip:nth-last-child(n+3),
.icons > span.tooltip:nth-last-child(n+3) ~ span {
    --max: 33.333%
}

/* MEDIA */
@media (min-width: 960px) {
    .hero > a.card {
        --w: 164px;
        --h: 144px
    }

    .icons {
        margin-top: -1.25em
    }

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

.fixed-menu {
    display: none;
    position: fixed;
    box-shadow: .25rem .25rem 1rem hsl(0deg 0 0 / 70%);
    bottom: 0;
    right: 0;
    width: auto;
    margin: 1rem;
    border-radius: 2em;
    background-color: var(--c-glo-bg);
    border: .2em solid var(--c-glo-bg-alt);
    z-index: 999;
    padding: 0;

}

.fixed-menu:hover {
    border-radius: 1em;
}

.fixed-menu:hover i {
    display: none;
}

.fixed-menu:hover menu {
    display: flex;
}

.fixed-menu i {
    height: 3em;
    width: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixed-menu i::before,
.fixed-menu i::after {
    content: '';
    width: 1.25em;
    height: 4px;
    border-radius: 2em;
    background-color: var(--c-glo-bg-alt);
}

.fixed-menu i::before {
    translate: 0 -0.5em;
}

.fixed-menu i:after {
    filter: drop-shadow(0 0.5em var(--c-glo-bg-alt));
}

.fixed-menu menu {
    display: none;
    flex-direction: column;
    padding: .5em 1em .5em .5em;
    align-items: start;
    gap: 0.2em;
    margin: .5em;
    list-style-position: inside;
}

.fixed-menu menu a::before {
    display: none;
}

/* amélioration du rendu pour les gens qui ont un navigateur récent, ne change rien pour les autres */
@supports (backdrop-filter : blur()) {
    .fixed-menu {
        background-color: var(--c-glo-bg-08);
        backdrop-filter: blur(10px);
    }
}

.fixed-menu {
    menu {
        opacity: 1;
        scale: 1;
        transition: opacity .3s, scale 0.3s;

        @starting-style {
            opacity: 0;
            scale: 0;
        }
    }
}