.collectionHeaderActions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex:0 0 auto;
}
.collectionFilterToggle {
    position:relative;
    display:grid;
    place-items:center;
    width:29px;
    height:29px;
    margin:0;
    padding:0;
    border:1px solid rgba(169,213,239,.34);
    border-radius:8px;
    background:rgba(14,65,96,.58);
    color:#dff5ff;
    font-size:12px;
    cursor:pointer;
    touch-action:manipulation;
}
.collectionFilterToggle:hover,
.collectionFilterToggle:focus-visible,
.collectionFilterToggle.has-active-filters {
    outline:0;
    border-color:rgba(255,224,128,.72);
    background:rgba(25,85,119,.82);
    color:#fff2b7;
}
.collectionFilterBadge {
    position:absolute;
    top:-6px;
    right:-6px;
    display:grid;
    place-items:center;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border:1px solid rgba(255,255,255,.85);
    border-radius:999px;
    background:#b87813;
    color:#fff;
    box-shadow:0 2px 5px rgba(0,0,0,.45);
    font:900 8px/1 "Poppins",sans-serif;
}
.collectionFilterBadge[hidden] { display:none !important; }
.collectionFilterPanel {
    margin:5px 0 4px;
    padding:7px;
    border:1px solid rgba(180,219,241,.18);
    border-radius:9px;
    background:linear-gradient(180deg,rgba(8,43,70,.92),rgba(5,29,50,.94));
    box-shadow:0 6px 14px rgba(0,0,0,.2);
}
.collectionFilterPanel[hidden] { display:none !important; }
.collectionFilterTop {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px;
    align-items:center;
}
.collectionFilterSearchWrap {
    position:relative;
    display:flex;
    align-items:center;
    min-width:0;
}
.collectionFilterSearchWrap i {
    position:absolute;
    left:9px;
    color:#8fb1c8;
    font-size:9px;
    pointer-events:none;
}
.collectionFilterSearch {
    width:100%;
    min-width:0;
    height:29px;
    margin:0;
    padding:5px 8px 5px 26px;
    border:1px solid rgba(169,213,239,.28);
    border-radius:8px;
    background:rgba(1,20,36,.62);
    color:#eefaff;
    font:700 9px "Poppins",sans-serif;
    outline:none;
}
.collectionFilterSearch::placeholder { color:#799bb2; }
.collectionFilterSearch:focus { border-color:rgba(136,213,255,.72); box-shadow:0 0 0 2px rgba(76,174,226,.10); }
.collectionFilterReset {
    height:29px;
    margin:0;
    padding:4px 8px;
    border:1px solid rgba(169,213,239,.24);
    border-radius:8px;
    background:rgba(255,255,255,.045);
    color:#cde3f0;
    font:800 8px "Poppins",sans-serif;
    cursor:pointer;
    touch-action:manipulation;
}
.collectionFilterReset:disabled { opacity:.38; cursor:default; }
.collectionFilterReset:not(:disabled):hover,
.collectionFilterReset:not(:disabled):focus-visible { outline:0; border-color:rgba(255,224,128,.56); color:#fff1b3; }
.collectionFilterGroup {
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:6px;
    align-items:center;
    margin-top:6px;
}
.collectionFilterLabel {
    color:#94b6ca;
    font:800 8px "Poppins",sans-serif;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.collectionFilterOptions { display:flex; flex-wrap:wrap; gap:4px; min-width:0; }
/* Les 6 éléments ont une géométrie fixe : une grille évite leur compression
   en boutons très étroits sur les viewports mobiles. */
.collectionFilterElements {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:4px;
    width:100%;
    min-width:0;
}
.collectionFilterChip {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-height:26px;
    margin:0;
    padding:3px 7px;
    border:1px solid rgba(169,213,239,.22);
    border-radius:7px;
    background:rgba(255,255,255,.035);
    color:#d5e8f3;
    font:700 10px "Poppins",sans-serif;
    cursor:pointer;
    touch-action:manipulation;
}
.collectionFilterChip:hover,
.collectionFilterChip:focus-visible { outline:0; border-color:rgba(143,211,248,.58); background:rgba(78,155,196,.14); }
.collectionFilterChip.is-active {
    border-color:rgba(255,222,109,.72);
    background:linear-gradient(180deg,rgba(184,120,19,.45),rgba(118,72,7,.42));
    color:#fff4c7;
    box-shadow:inset 0 0 0 1px rgba(255,232,158,.08);
}
.collectionFilterElement {
    width:100%;
    min-width:0;
    padding-inline:4px;
}
.collectionFilterElement:disabled {
    cursor:default;
    opacity:.34;
    filter:saturate(.45);
}
.collectionFilterElement:disabled.is-active {
    opacity:1;
    filter:none;
    border-color:rgba(255,222,109,.78);
    background:linear-gradient(180deg,rgba(184,120,19,.52),rgba(118,72,7,.48));
}
.collectionFilterElement img { width:15px; height:15px; object-fit:contain; flex:0 0 auto; }
.collectionFilterElement span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.collectionFilterRanks .collectionFilterChip { min-width:35px; }
.collectionFilterTeam .collectionFilterChip { min-width:62px; }
.collectionFilterSort .collectionFilterChip { min-width:68px; }

/* Le drawer mobile reste en mise en page libellé + contrôles jusqu'à 520 px.
   L'ancien seuil 390/391 faisait basculer les téléphones 393-430 px sur la
   grille desktop et rendait notamment les éléments instables. */
@media (max-width:520px) {
    .drawerCollectionHeader { align-items:center; }
    .drawerCollectionHeader small { max-width:215px; }
    .collectionFilterPanel { padding:6px; }
    .collectionFilterGroup { grid-template-columns:42px minmax(0,1fr); gap:4px; }

    .collectionFilterElements { gap:4px; }
    .collectionFilterElement {
        min-height:32px;
        padding:2px;
        border-radius:8px;
    }
    .collectionFilterElement img { width:18px; height:18px; }
    .collectionFilterElement span { display:none; }

    .collectionFilterRanks,
    .collectionFilterSort,
    .collectionFilterTeam {
        flex-wrap:nowrap;
        width:100%;
    }
    .collectionFilterRanks .collectionFilterChip,
    .collectionFilterSort .collectionFilterChip,
    .collectionFilterTeam .collectionFilterChip {
        flex:1 1 0;
        min-width:0;
        padding-inline:4px;
    }
}

@media (max-width:390px) {
    .collectionFilterElements { gap:3px; }
    .collectionFilterElement { min-height:30px; }
    .collectionFilterElement img { width:17px; height:17px; }
}


/* Affichage groupé : badge de quantité purement visuel. Le niveau reste en
   bas à droite dans le médaillon ; la quantité se place en haut à droite. */
.collectionCreatureCountBadge {
    position:absolute;
    top:8px;
    right:1px;
    z-index:13;
    display:grid;
    place-items:center;
    min-width:18px;
    height:18px;
    box-sizing:border-box;
    padding:0 5px;
    border:1px solid rgba(255,255,255,.76);
    border-radius:999px;
    background:rgba(0,0,0,.84);
    color:#fff;
    box-shadow:0 2px 5px rgba(0,0,0,.62);
    font:700 11px/16px "Poppins",sans-serif;
    white-space:nowrap;
    pointer-events:none;
}

@media (max-width:390px) {
    .collectionCreatureCountBadge {
        top:5px;
        right:0;
        min-width:17px;
        height:17px;
        padding-inline:4px;
        font-size:7.5px;
        line-height:15px;
    }
}

/* Tri Doublons : chaque lignée+élément devient un bloc visuel unique.
   Le contour reste volontairement léger pour ne pas concurrencer les médaillons. */
.collectionDuplicateFamilyGroup {
    position:relative;
    flex:0 0 auto;
    display:flex;
    align-items:flex-start;
    gap:2px;
    min-width:0;
    padding:5px 4px 3px;
    border:1px dashed rgba(214,192,151,.92);
    border-radius:8px;
    box-sizing:border-box;
    scroll-snap-align:none;
}
.collectionDuplicateFamilyGroup.is-single {
    border-color:transparent;
}
.collectionDuplicateFamilyTotal {
    position:absolute;
    top:-7px;
    right:-2px;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-width:28px;
    height:15px;
    padding:0 2px;
    box-sizing:border-box;
    background:#272125;
    color:#f7e6c0;
    font:900 13px/13px "Poppins",sans-serif;
    white-space:nowrap;
    text-shadow:2px 2px 2px black;
}
.collectionEquivalentCopiesIcon {
    position:relative;
    display:inline-block;
    flex:0 0 13px;
    width:13px;
    height:11px;
}
.collectionEquivalentCopiesIcon::before,
.collectionEquivalentCopiesIcon::after {
    content:"";
    position:absolute;
    width:8px;
    height:6px;
    border:1px solid currentColor;
    border-radius:2px;
    box-sizing:border-box;
    background:#272125;
    box-shadow:1px 1px 1px rgba(0,0,0,.55);
}
.collectionEquivalentCopiesIcon::before {
    left:0;
    top:0;
    opacity:.72;
}
.collectionEquivalentCopiesIcon::after {
    left:4px;
    top:3px;
}
.collectionEquivalentCopiesValue {
    display:inline-block;
    min-width:1ch;
    text-align:right;
}

/* Le tooltip des copies équivalentes réutilise le composant Reward Tray. */
.battleRewardTooltip.collectionCopiesTooltip {
    z-index:1800 !important;
}

@media (max-width:390px) {
    .collectionDuplicateFamilyGroup {
        gap:1px;
        padding:4px 3px 2px;
        border-radius:7px;
    }
}


/* v56 — les icônes/boutons d'élément sont auto-explicites :
   suppression du libellé et utilisation de toute la largeur disponible. */
.collectionFilterGroupElement {
    grid-template-columns:minmax(0,1fr);
}

/* v55 — mise en page compacte des filtres Collection.
   L'élément garde toute la largeur ; les couples Rang actuel / Rang natif
   puis Tri / Équipe utilisent une grille 5/7 afin de donner plus de largeur à Équipe. */
@media (min-width:521px) {
    .collectionFilterPanel {
        display:grid;
        grid-template-columns:repeat(12,minmax(0,1fr));
        column-gap:8px;
        row-gap:6px;
    }
    .collectionFilterTop,
    .collectionFilterGroupElement {
        grid-column:1 / -1;
    }
    .collectionFilterGroupRankCurrent {
        grid-column:1 / 7;
    }
    .collectionFilterGroupRankNative {
        grid-column:7 / 13;
    }
    .collectionFilterGroupSort {
        grid-column:1 / 6;
    }
    .collectionFilterGroupTeam {
        grid-column:6 / 13;
    }
    .collectionFilterTop {
        margin-bottom:0;
    }
    .collectionFilterGroup {
        margin-top:0;
    }
    .collectionFilterGroupRankCurrent,
    .collectionFilterGroupRankNative,
    .collectionFilterGroupSort,
    .collectionFilterGroupTeam {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:3px;
    }
    .collectionFilterGroupRankCurrent .collectionFilterLabel,
    .collectionFilterGroupRankNative .collectionFilterLabel,
    .collectionFilterGroupSort .collectionFilterLabel,
    .collectionFilterGroupTeam .collectionFilterLabel {
        min-height:11px;
        line-height:11px;
    }
    .collectionFilterGroupRankCurrent .collectionFilterOptions,
    .collectionFilterGroupRankNative .collectionFilterOptions,
    .collectionFilterGroupSort .collectionFilterOptions,
    .collectionFilterGroupTeam .collectionFilterOptions {
        width:100%;
        flex-wrap:nowrap;
    }
    .collectionFilterGroupRankCurrent .collectionFilterChip,
    .collectionFilterGroupRankNative .collectionFilterChip,
    .collectionFilterGroupSort .collectionFilterChip,
    .collectionFilterGroupTeam .collectionFilterChip {
        flex:1 1 0;
        min-width:0;
        padding-inline:4px;
    }
    
}

/* v59 — Rang actuel / Rang natif : chiffre blanc, étoile jaune.
   Le texte HTML reste intact pour l'accessibilité ; le rendu visuel est séparé via pseudo-éléments. */
.collectionFilterRanks .collectionFilterChip[data-collection-filter-rank],
.collectionFilterRanks .collectionFilterChip[data-collection-filter-native-rank] {
    gap:0;
    font-size:0;
}
.collectionFilterRanks .collectionFilterChip[data-collection-filter-rank]::before,
.collectionFilterRanks .collectionFilterChip[data-collection-filter-native-rank]::before {
    color:#eef7fc;
    font:700 10px/1 "Poppins",sans-serif;
}
.collectionFilterRanks .collectionFilterChip[data-collection-filter-rank]::after,
.collectionFilterRanks .collectionFilterChip[data-collection-filter-native-rank]::after {
    content:"★";
    color:#f2cf58;
    font:800 10px/1 "Poppins",sans-serif;
}
.collectionFilterRanks .collectionFilterChip[data-collection-filter-rank]::before {
    content:attr(data-collection-filter-rank);
}
.collectionFilterRanks .collectionFilterChip[data-collection-filter-native-rank]::before {
    content:attr(data-collection-filter-native-rank);
}
.collectionFilterRanks .collectionFilterChip[data-collection-filter-rank="6+"]::before {
    content:"6";
}
.collectionFilterRanks .collectionFilterChip[data-collection-filter-rank="6+"]::after {
    content:"★+";
}
.collectionFilterRanks .collectionFilterChip.is-active[data-collection-filter-rank]::after,
.collectionFilterRanks .collectionFilterChip.is-active[data-collection-filter-native-rank]::after {
    color:#ffe27a;
}