/* INTERACTION (NON CRITIQUE) */

/* GLOBAL MENU */
.close-menu > .line + .line,
.active > .menu > .line:nth-child(4) {
    filter: opacity(1);
    transform: scale(.9) rotate(-225deg)
}

.close-menu > .line,
.active > .menu > .line:nth-child(2) {
    transform: scale(.9) rotate(225deg);
}

.active > .menu::after {
    content: '';
    cursor: pointer;
    pointer-events: unset;
    left: 0;
    top: 0;
    height: 100vh;
    width: 200vw;
    /* background-color: transparent; */
    transform: translate(-150vw);
    -webkit-backdrop-filter: saturate(.25);
    backdrop-filter: saturate(.25);
}

.search-field:focus {
    background-color: var(--c-glo-bg);
    color: currentcolor;
    cursor: auto;
    /* width: 100%; */
    right: 0;
    bottom: 0;
    left: 0;
    width: calc(100% - -1em);
    margin: 0 0;
    outline: 0 none;
    text-align: center;
    filter: opacity(1);
    transition: filter .2s;
    opacity: 1;
}

.search-field:focus + .search-submit,
.search-field:not(:focus) + .search-submit:focus {
    pointer-events: unset
}

/* GLOBAL */
a[href^=Car-].active:hover > img {
    filter: brightness(1.125) drop-shadow(0 0 .2em currentcolor);
}

#header a[aria-current],
a:hover {
    text-shadow: 0 0 1px var(--c-glo);
}

a:hover > img {
    filter: brightness(1.123) drop-shadow(1px 2px 0 var(--c-0)) saturate(1.123)
}

/* CARDS + TEAM + TIERLIST + SHEET + COMPARE */

/* INDEX + SHEET + COMPARE */
.hero > a:hover:not(.active) {
    --color: var(--c-100);
    filter: brightness(1.125) drop-shadow(0 0 .2em var(--color)) opacity(1)
}

/* INDEX */
.hero > a.agi:hover {
    --color: var(--c-agi)
}

.hero > a.pui:hover {
    --color: var(--c-pui)
}

.hero > a.end:hover {
    --color: var(--c-end)
}

.hero > a.int:hover {
    --color: var(--c-int)
}

.hero > a.tec:hover {
    --color: var(--c-tec)
}

/*
	SHEET
*/

/* S H E E T */

/*
h2 a[href^='#']::before {
	content: "#";
	margin-left: -0.9em;
	text-decoration: none;
	visibility: hidden;
	opacity: 0.8;
}
*/

a[href^='#']:hover::before {
    content: "#";
    margin-left: -1em
}


/*
	SHEET +
	COMPARE +
	HOWTO
*/
.active.scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 calc(0em + var(--glo-space-x));
    margin-bottom: 1em;
}

.active.scroll > img {
    width: 960px;
    height: auto;
    transition: width .3s cubic-bezier(.1, .9, .45, 1.1);
    will-change: transition;
}

/*
	SHEET +
	TEAM
*/
.team-item:nth-child(1) > a:hover > img {
    filter: brightness(1.125) drop-shadow(0px 0px .2em var(--c-pui));
}

.team-item:nth-child(7) > a:hover > img {
    filter: brightness(1.125) drop-shadow(0px 0px .2em var(--c-agi));
}

/*
	CARDS > FILTRES
*/
#boxCompare.on {
    margin: .5em 0;
    min-height: 84px;
}

#boxCompare > img {
    display: inline-block;
    max-width: 96px;
}

.iconCheckbox + img,
.eventCheckbox + .event-figure {
    transform: translate(0px, 0px);
    transition: .125s;
}

.classe:checked + img,
.rarete:checked + img,
.type:checked + img,
.iconCheckbox:checked + .icon-figure,
.eventCheckbox:checked + .event-figure {
    filter: unset;
    transform: translate(1px, 1px);
}

.popup > .close:first-child {
    font-size: inherit;
}

/*
	CARDS > AUTRES
*/
label.inactive {
    cursor: not-allowed;
    filter: opacity(.5);
    pointer-events: none;
}

.infobulleBtn:hover,
.btn:active,
.btn.btn-active,
.checkboxCompare:checked ~ .labelCompare,
a[href^=Compare]:active {
    background-image: linear-gradient(180deg,
    var(--c-020) 50%,
    var(--c-030) 60%,
    var(--c-030));
    color: var(--c-end);
}

.checkboxCompare:checked ~ label,
a[href^=Compare]:focus {
    margin-top: calc(1em + 1px);
    margin-bottom: calc(1em - 1px);
    box-shadow: none;
}

.popup.active + .btn,
.popup.active + .liste-note + .btn,
.checkboxCompare:checked ~ label,
input:checked ~ .btn.btn-check,
#inverse:checked ~ label {
    box-shadow: 0 0 .375em currentcolor;
    color: var(--c-end);
}

select:not(fieldset select):focus {
    box-shadow: inset 0 0.1em 0.1em #000;
}

select:not(fieldset select):hover,
.navSheet > button:hover {
    box-shadow: inset 0 0.1em 0.1em #000;
    filter: unset;
}

.navSheet.active > button:hover {
    box-shadow: inset 0.1em 0 0.1em #000;
}

.active > nav > a:active {
    box-shadow: 0 0 0 .1em currentcolor;
    border-radius: .375em;
}

.menu:hover > .line,
footer > button:hover {
    background-color: var(--c-glo-max);
}

#cardSearch:hover ~ svg,
.search-field:hover + .search-submit > svg,
.theme:hover > svg,
.clear:hover,
a:not(.btn, a[href^=Compare]):hover,
#header a[aria-current],
input:hover,
option:hover,
select:hover {
    color: var(--c-glo-max);
    fill: currentcolor;
}

.select:hover::after {
    border-top-color: currentcolor;
}

div.sort .select:hover,
.navSheet .select:hover,
div.sort select:hover,
.navSheet select:hover {
    color: var(--c-glo-shadow);
}

.select > label {
    color: var(--c-glo);
}

/* bug moz
fieldset select:active,
fieldset select:focus {
	text-shadow: 0px 0px 0.25em var(--c-end);
}
*/
select:not(fieldset select):active,
select:not(fieldset select):focus {
    filter: drop-shadow(0px 0px .375em var(--c-end));
    outline: 0 none;
}

a:active.art-item,
a:active > img,
a:active > svg,
.slideThree > label:active {
    transform: scale(.9)
}

/*
header a {
	border-radius: 0.05em
}
header a:focus-visible {
	outline-offset: 0.5rem
}
*/
a:focus-visible {
    /* border-radius: .375em; */
    /* box-shadow: 0 0 1em .5em hsl(195 67% 60%/1); */
}

a:focus-visible {
    border-radius: .375em;
    outline-offset: 0.25em;
    filter: drop-shadow(0px 0px .375em var(--c-end));
    outline: 0 none;
}

#etcat:checked ~ label,
#inverse:checked ~ label {
    box-shadow: 0 0 .25em currentcolor;
    color: var(--c-end);
}

#cardCat:focus,
#cardSearch:focus {
    outline: 0 none;
}

.tooltip::after {
    background-image: linear-gradient(180deg, var(--c-glo-bg-08-alt), var(--c-glo-bg-alt));
}

.tooltip::after,
.infobulle {
    border-radius: .375em;
    color: var(--c-glo-alt);
    padding: .5em;
}

.tooltip:hover::before,
.infobulle::before {
    border-style: solid;
    border-color: var(--c-glo-bg-alt) var(--c-0);
    content: '';
}

span.tooltip:hover > img,
span.tooltip:hover > .icon-figure {
    filter: unset;
}

.tooltip:hover::before {
    border-width: .5em .5em 0 .5em;
    z-index: 99;
    left: calc(50% - .5em);
    bottom: 100%;
}

.tooltip:hover::after {
    content: attr(data-title);
    z-index: 98;
    left: 0;
    right: 0;
    bottom: calc(100% + .4em);
}

.infobulle::before {
    --size: .375em;
    border-width: 0 var(--size) var(--size) var(--size);
    z-index: 100;
    top: calc(.05em - var(--size));
    left: calc(50% - var(--size));
}

/* 202402*/
.infobulle {
    background-image: linear-gradient(0deg, var(--c-glo-bg-08-alt), var(--c-glo-bg-alt));
    top: calc(100% + .5em);
    min-width: calc(100% + 1em);
    width: auto;
}

.infobulle > p {
    text-align: center;
}

.btn:active,
button:active,
.labelCompare:active,
.infobulleBtn:hover,
a[href^=Compare]:hover {
    box-shadow: 0 0 0 0 rgb(0 0 0);
}

.link-buddy-counter:hover .infobulle,
.infobulle-hover:hover ~ .infobulle,
.infobulleBtn:hover + .infobulle,
.infobulleBtn:hover ~ .infobulle /*.infobulle-hover:is(:hover) ~ .infobulle,
    .link-buddy-counter:is(:hover) .infobulle,
    .infobulleBtn:is(:hover) + .infobulle,
    .infobulleBtn:is(:hover) ~ .infobulle*/
{
    filter: opacity(1);
    transition: filter .3s;
    pointer-events: unset;
    z-index: 99;
}

.infobulle-hover:not(:hover) ~ .infobulle,
.link-buddy-counter:not(:hover) .infobulle,
.infobulleBtn:not(:hover) + .infobulle,
.infobulleBtn:not(:hover) ~ .infobulle {
    filter: opacity(0);
    pointer-events: none;
    z-index: -1;
}

/*
.tier div.item .infobulle-hover:hover + .infobulle {
	min-width: 30ch;
}
*/
.clear {
    color: var(--c-glo-bg-mute);
    font-family: sans-serif;
    font-size: 1.5em;
    line-height: .75em;
    text-align: center;
    top: .125em;
    right: 0.25em;
    width: 1.25em;
    height: 1.25em;
    padding: 0.25em;
    font-weight: 1000;
}

.close > .clear {
    top: -.125em;
}

.popup > div:first-of-type {
    padding-top: 2.125em;
}


/* MEMO : a mettre dans defer le moment venu */
.lead .item > span:hover,
.infobulleBtn:hover > span {
    box-shadow: 0 0 0 0 rgb(0 0 0);
    color: #fff;
    cursor: help;
}


@media (pointer: fine) {
    .search-field,
    .close-menu,
    .menu,
    .clear,
    button,
    input,
    label,
    select {
        cursor: pointer
    }

    .btn:hover,
    button:hover,
    .labelCompare:hover {
        box-shadow: 0 0 0 0 rgb(0 0 0)
    }

    .classe-type:hover > img {
        filter: brightness(1) saturate(1) drop-shadow(2px 2px 0px #000)
    }
}

@media (pointer: coarse) {
    label.tooltip::after,
    label.tooltip::before {
        opacity: 0
    }

    .infobulle::after {
        content: '×';
        top: -2em;
        right: 0;
        border-radius: 100%;
        background-color: var(--c-glo);
        color: var(--c-glo-bg);
        font-family: sans-serif;
        font-size: .75em;
        font-weight: 1000;
        line-height: .75em;
        width: 1.25em;
        height: 1.25em;
        padding: 0.25em;
        outline: 1px solid currentColor;
    }

    /* SHEET */
    .item > .infobulle-hover + a {
        margin-bottom: 1.5em
    }

    .infobulle-hover + .infobulle {
        /* pour avoir un plus large infobulle */
        width: unset
    }

    .infobulle-hover ~ .infobulle {
        top: calc(100% - 0.375em)
    }

    .infobulle-hover ~ .infobulle::after {
        top: -0.5em;
        outline: .175em solid currentColor
    }

    /* TIERLISTS > LEADER */
    .infobulle-hover ~ .infobulle {
        top: calc(100% - 0.375em)
    }

    .infobulle-hover + .infobulle {
        /* pour avoir un plus large infobulle */
        width: unset
    }

    .item > .infobulle-hover + a {
        margin-bottom: 1.5em
    }

    .infobulle-hover ~ .infobulle::after {
        top: -0.5em;
        outline: .175em solid currentColor
    }
}