/*
 * 2025 02 TEAMS > page team
 spot bouton groupés dans
 base au lieu de dispersés sur teams, tierlist
 */
/*
fieldset {
	Never use 'display: inline-flex' or apple big select issue
}
INUTILE
.sort > fieldset {
	padding: 0 0 0.25em;
}
*/
.sort {
    padding-bottom: .5em;
}

#teams.load {
    min-height: 40vh;
    padding-top: 0;
    padding-inline: .5em;

}

.teams {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.team + .info {
    padding: 0 0 1em;
}

.info > .btn {
    background: unset;
    border-radius: 4px;
    display: inline-block;
    margin: 0.25em 0.375em 0.75em;
    text-shadow: none;
    width: auto;
    color: mediumpurple;
    border-color: mediumpurple;
}

.info > .cateInfo {
    color: orangered;
    border: 1px solid orangered;
}

/* TEAMS > pages team + sheet */
.team_container {
    background-image: linear-gradient(180deg, var(--c-glo-bg-10), var(--c-0) 300px);
    border-radius: .375em;
    margin: 0;
    padding: 1em 0 0;

    --container-size: 50%;

    &.mission-variant {
        --container-size: 25%;
        padding: 1em;
        display: flex;
        flex-direction: column;

        h3 {
            padding-block-start: 1em;
            margin-block-end: .5em;
            flex-basis: 0;
        }

        p {
            font-size: var(--f-s);
            text-align: center;
            margin-block-start: 1em;
        }

        time {
            margin-top: auto;
            border-radius: 2em;

            padding: .25em .75em;
            font-size: var(--f-xs);
            border: 1px solid var(--c-glo-max);
            align-self: end;
        }
    }

    /* width: max(calc(var(--glo-space-x) - 50%), min(744px, 100%)); */
}

.missions {
    display: flex;
    justify-content: center;
    gap: 1em;
}

.team {
    /* align-items: flex-start; */
    align-items: baseline;
}

.team_container > h3 {
    margin-bottom: 1em;
}

.team-item {
    order: 2;
    width: min(33.333%, 20%);
    min-width: 64px;
    margin: 0;
}

.team-item:nth-child(1), .team-item:nth-child(7) {
    font-family: var(--font-2);
    order: 1;
    min-width: 50%;
    margin: inherit;
    max-width: 132px;
}

.team-item:nth-child(1)::before,
.team-item:nth-child(7)::before {
    color: var(--c-pui);
    content: "LEADER";
    font-size: 75%;
    font-weight: 600;
    top: -1.1em;
    letter-spacing: 1px;
}

.team-item:nth-child(7)::before {
    color: var(--c-agi);
    content: "FRIEND \/ GUEST";
}

[lang=fr] .team-item:nth-child(7)::before {
    content: "AMI \/ GUEST";
}

.team-item:nth-child(1) .thumb,
.team-item:nth-child(7) .thumb {
    filter: drop-shadow(0px 0px .2em var(--c-pui));
    font-size: 100%;
}

.team-item:nth-child(7) .thumb {
    filter: drop-shadow(0px 0px .2em var(--c-agi));
}

.team-item > a {
    --w: 100px;
}

.team-item > p {
    font-weight: 600;
    text-align: center;
    margin: .5em .125em 1em;
    line-height: normal;
    /* letter-spacing: 0; */
    word-spacing: 0;
    font-size: 75%;
    letter-spacing: 0.0125em;
}

.descr {
    display: flex;
    max-width: unset;
    padding: 0;
}

.rotations,
.rota,
.pos,
.rotations fieldset {
    display: flex
}

.rota, .pos fieldset {
    flex-direction: column;
    justify-content: space-evenly;
}

.rota {
    max-width: 64%;
    justify-content: space-between;
}

.pos {
    max-width: 26%;
}

.rota fieldset {
    color: var(--c-pui);
    /* margin-left: .5em; */
    background-color: var(--c-glo-bg-10);
    background-image: url(/img/assets/liens.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.rota fieldset + fieldset {
    color: var(--c-agi);
    /* margin-left: .5em; */
    margin-right: .5em;
}

.pos fieldset {
    color: var(--c-end);
    /* margin-right: .5em; */
    /*! cursor: help; */
}

.rotations legend {
    color: var(--c-glo);
    font-size: 75%;
    /*color: inherit;*/
}

.rotations fieldset {
    border-color: currentcolor;
    border-style: solid;
    background-color: var(--c-glo-bg-10);
    padding: .75em .25em;
}

.rotations fieldset > div {
    position: relative;
    max-width: 100px;
}

.rotations span {
    /* position: absolute; */
    /* border-radius: 2em; */
    /*! filter: drop-shadow(1px 2px 0px black); */
    left: 2px;
    /*! padding: .375em; */
    /*! height: 1.25em; */
    /*! width: 1.25em; */
    font-size: 75%;
    /*! font-family: var(--font-2); */
    /*! line-height: 0; */
    /*! text-align: center; */
    /*! color: var(--c-glo); */
    /*! padding: .125em .375em .25em; */
    top: 0;
    /*! background-color: var(--c-025); */
}

.rota span {
    /*! position: absolute; */
    /*! background-color: unset; */
    left: 0;
    right: 0;
    top: -1.25em;
    color: var(--c-glo);
    /*! font-size: 75%; */
}

.rota div:nth-child(4) > span {
    background-color: var(--c-025);
    color: var(--c-end);
    /*! position: relative; */
    top: calc((50% - 1.5ch));
    width: 8ch;
    left: calc(50% - 4ch);
}

.rota div:nth-child(3) {
    order: 2;
}

.pos span {
    background-color: var(--c-025);
    color: var(--c-end);
    /*! text-shadow: 0 1px 4px black; */
    outline: 2px solid var(--c-pui);
    outline-offset: 0;
    /* min-width: 1.25em; */
    /*! vertical-align: -1px; */
}

.pos span + span {
    /*! background-color: var(--c-agi); */
    top: 2em;
    outline: 2px solid var(--c-agi);
}

.rotations span > b {
    display: none;
    /* font-weight: 600; */
}

/*
.rotations span:first-child:hover b,
.rotations span + span:hover b
*/
.rota span:first-child b,
.pos div:hover b {
    display: inline;
    /*! line-height: 0; */
    /* top: 2px; */
}

.pos span {
    cursor: help;
}

.team-role {
    --role-color: var(--c-int);
    max-width: 1440px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: 2px var(--role-color) solid;
    border-radius: 9px;
    align-items: center;
    width: 100%;
    padding: .5em;
    border-inline-start-width: 6px;

    background-color: var(--c-glo-bg-10);
    margin-block-end: 1rem;
}

.team-role img {
    width: var(--w);
}

.team-role__header {
    margin: 1rem;
    width: max-content;
    max-width: none;
    display: flex;
    flex-grow: 0;
    flex-basis: 15ch;
    text-align: center;
    font-weight: bold;
}

.team-role__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    width: auto;
    max-width: none;
    margin-inline: 0;
    flex-grow: 1;

}

.team-role .item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .25em .5em;

    margin-inline: 0;
    align-items: center;
    width: max(0%, min(calc(95px + 1em), 33.333%));

}

.team-role .card {
    --w: 90px;
    --h: 80px;
}

.team-role [class^="note-"] i {
    font-size: 65%;
}