/* =========================================================
   ALIGNEMENT GÉNÉRAL
========================================================= */

section.cdv-most-wanted {
    width:
        min(
            1120px,
            calc(100% - 40px)
        ) !important;

    max-width:
        1120px !important;

    margin:
        24px auto
        24px !important;

    position:
        relative !important;

    z-index:
        5 !important;

    display:
        block !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    transform:
        none !important;
}


/* =========================================================
   TITRE PLUS COMPACT POUR S’INTÉGRER ENTRE LE HERO
   ET LA RECHERCHE
========================================================= */

section.cdv-most-wanted
.cdv-mw-heading {
    margin-bottom:
        18px !important;
}


section.cdv-most-wanted
.cdv-mw-heading h2 {
    margin:
        4px 0 0 !important;

    font-size:
        clamp(
            34px,
            4vw,
            58px
        ) !important;

    line-height:
        .95 !important;
}


section.cdv-most-wanted
.cdv-mw-heading p {
    max-width:
        310px !important;

    margin:
        0 !important;
}


/* =========================================================
   BADGE DE RANG
========================================================= */

.cdv-mw-card[
    data-worst-rank="1"
] {
    border-color:
        rgba(
            255,
            197,
            88,
            .40
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            .07
        ),

        0 18px 45px
        rgba(
            255,
            158,
            43,
            .08
        ) !important;
}


.cdv-mw-card[
    data-worst-rank="1"
]
.cdv-mw-match {
    color:
        #ffd36f !important;
}


/* =========================================================
   ESPACEMENT AVEC LA BARRE DE RECHERCHE
========================================================= */

section.cdv-most-wanted
+
.cdv-most-wanted-search-anchor {
    margin-top:
        0 !important;
}


@media (max-width: 760px) {
    section.cdv-most-wanted {
        width:
            calc(100% - 20px)
            !important;

        margin:
            18px auto
            18px !important;
    }

    section.cdv-most-wanted
    .cdv-mw-heading {
        gap:
            12px !important;
    }

    section.cdv-most-wanted
    .cdv-mw-heading p {
        display:
            none !important;
    }
}



/* CDV MOST WANTED READABILITY V5 START */

/*
   Dimensions desktop plus généreuses.
   Le pseudo reste sur une seule ligne.
*/

.cdv-most-wanted .cdv-mw-card {
    width:
        clamp(
            470px,
            32vw,
            525px
        ) !important;

    min-width:
        clamp(
            470px,
            32vw,
            525px
        ) !important;

    max-width:
        clamp(
            470px,
            32vw,
            525px
        ) !important;

    min-height:
        225px !important;

    flex:
        0 0
        clamp(
            470px,
            32vw,
            525px
        ) !important;

    grid-template-columns:
        88px
        minmax(0, 1fr)
        auto !important;

    grid-template-rows:
        auto
        minmax(88px, 1fr)
        auto !important;

    gap:
        15px
        19px !important;

    padding:
        24px !important;
}


/* Ligne AVIS DE RECHERCHE */

.cdv-most-wanted
.cdv-mw-card-topline {
    gap:
        10px !important;

    font-size:
        9px !important;

    line-height:
        1.25 !important;

    letter-spacing:
        .16em !important;
}

.cdv-most-wanted
.cdv-mw-status-dot {
    width:
        8px !important;

    height:
        8px !important;

    flex:
        0 0
        8px !important;
}


/* Avatar */

.cdv-most-wanted
.cdv-mw-avatar {
    width:
        88px !important;

    height:
        88px !important;

    border-radius:
        21px !important;

    box-shadow:
        0 13px 30px
        rgba(
            0,
            0,
            0,
            .24
        ),

        0 0 25px
        rgba(
            255,
            73,
            111,
            .08
        ) !important;
}


/* Zone du pseudo */

.cdv-most-wanted
.cdv-mw-copy {
    min-width:
        0 !important;

    width:
        100% !important;

    overflow:
        visible !important;
}

.cdv-most-wanted
.cdv-mw-name {
    width:
        100% !important;

    max-width:
        none !important;

    overflow:
        visible !important;

    color:
        #ffffff !important;

    font-size:
        clamp(
            24px,
            1.75vw,
            30px
        ) !important;

    font-weight:
        950 !important;

    line-height:
        1.05 !important;

    letter-spacing:
        -.035em !important;

    text-overflow:
        clip !important;

    white-space:
        nowrap !important;

    word-break:
        normal !important;

    overflow-wrap:
        normal !important;
}

.cdv-most-wanted
.cdv-mw-champion {
    margin-top:
        8px !important;

    color:
        rgba(
            222,
            211,
            228,
            .48
        ) !important;

    font-size:
        10px !important;

    font-weight:
        900 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        .13em !important;
}


/* Badge de classement */

.cdv-most-wanted
.cdv-mw-match {
    min-width:
        142px !important;

    padding:
        10px
        13px !important;

    border-radius:
        12px !important;

    font-size:
        9px !important;

    line-height:
        1.15 !important;

    letter-spacing:
        .08em !important;

    white-space:
        nowrap !important;
}


/* KDA */

.cdv-most-wanted
.cdv-mw-kda {
    font-size:
        12px !important;

    line-height:
        1 !important;

    letter-spacing:
        .06em !important;
}


/* Nombre de distinctions */

.cdv-most-wanted
.cdv-mw-penalty {
    gap:
        9px !important;

    font-size:
        9px !important;

    line-height:
        1.2 !important;

    letter-spacing:
        .09em !important;
}

.cdv-most-wanted
.cdv-mw-penalty strong {
    font-size:
        14px !important;

    line-height:
        1 !important;
}


/* Flèche */

.cdv-most-wanted
.cdv-mw-arrow {
    font-size:
        18px !important;
}


/*
   Le rail ne doit jamais s'arrêter au survol,
   au focus ou lors d'un passage de souris.
*/

.cdv-most-wanted
.cdv-mw-viewport:hover
.cdv-mw-track,

.cdv-most-wanted
.cdv-mw-track:hover,

.cdv-most-wanted
.cdv-mw-card:hover
~ .cdv-mw-track,

.cdv-most-wanted
.cdv-mw-viewport:focus-within
.cdv-mw-track {
    animation-play-state:
        running !important;
}


/* Tablettes */

@media (
    min-width: 701px
) and (
    max-width: 1100px
) {
    .cdv-most-wanted
    .cdv-mw-card {
        width:
            440px !important;

        min-width:
            440px !important;

        max-width:
            440px !important;

        flex-basis:
            440px !important;

        grid-template-columns:
            82px
            minmax(0, 1fr)
            auto !important;
    }

    .cdv-most-wanted
    .cdv-mw-avatar {
        width:
            82px !important;

        height:
            82px !important;
    }

    .cdv-most-wanted
    .cdv-mw-name {
        font-size:
            24px !important;
    }

    .cdv-most-wanted
    .cdv-mw-match {
        min-width:
            125px !important;
    }
}


/* Mobile */

@media (max-width: 700px) {
    .cdv-most-wanted
    .cdv-mw-card {
        width:
            min(
                350px,
                calc(100vw - 34px)
            ) !important;

        min-width:
            min(
                350px,
                calc(100vw - 34px)
            ) !important;

        max-width:
            min(
                350px,
                calc(100vw - 34px)
            ) !important;

        min-height:
            190px !important;

        flex-basis:
            min(
                350px,
                calc(100vw - 34px)
            ) !important;

        grid-template-columns:
            70px
            minmax(0, 1fr)
            auto !important;

        gap:
            11px
            13px !important;

        padding:
            18px !important;
    }

    .cdv-most-wanted
    .cdv-mw-avatar {
        width:
            70px !important;

        height:
            70px !important;

        border-radius:
            17px !important;
    }

    .cdv-most-wanted
    .cdv-mw-name {
        font-size:
            clamp(
                20px,
                6vw,
                24px
            ) !important;
    }

    .cdv-most-wanted
    .cdv-mw-match {
        min-width:
            0 !important;

        padding:
            8px
            9px !important;

        font-size:
            7px !important;
    }

    .cdv-most-wanted
    .cdv-mw-card-topline,
    .cdv-most-wanted
    .cdv-mw-penalty {
        font-size:
            8px !important;
    }
}

/* CDV MOST WANTED READABILITY V5 END */







/* CDV MOST WANTED READABILITY V6 START */

.cdv-most-wanted .cdv-mw-card {
    width: clamp(490px, 33vw, 545px) !important;
    min-width: clamp(490px, 33vw, 545px) !important;
    max-width: clamp(490px, 33vw, 545px) !important;
    min-height: 230px !important;
    flex: 0 0 clamp(490px, 33vw, 545px) !important;

    grid-template-columns:
        92px
        minmax(0, 1fr)
        auto !important;

    grid-template-rows:
        auto
        minmax(92px, 1fr)
        auto !important;

    gap: 16px 20px !important;
    padding: 25px !important;
}

.cdv-most-wanted .cdv-mw-card-topline {
    gap: 10px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: .14em !important;
}

.cdv-most-wanted .cdv-mw-status-dot {
    width: 8px !important;
    height: 8px !important;
    flex: 0 0 8px !important;
}

.cdv-most-wanted .cdv-mw-avatar {
    width: 92px !important;
    height: 92px !important;
    border-radius: 22px !important;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, .28),
        0 0 28px rgba(255, 73, 111, .12) !important;
}

.cdv-most-wanted .cdv-mw-copy {
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
}

.cdv-most-wanted .cdv-mw-name {
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;

    color: #ffffff !important;
    font-size: clamp(25px, 1.8vw, 31px) !important;
    font-weight: 950 !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;

    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-overflow: clip !important;
}

.cdv-most-wanted .cdv-mw-champion {
    margin-top: 9px !important;
    color: rgba(230, 219, 235, .58) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: .12em !important;
}

.cdv-most-wanted .cdv-mw-match {
    min-width: 150px !important;
    padding: 11px 14px !important;
    border-radius: 12px !important;

    font-size: 10px !important;
    line-height: 1.15 !important;
    letter-spacing: .07em !important;
    white-space: nowrap !important;
}

.cdv-most-wanted .cdv-mw-kda {
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: .05em !important;
}

.cdv-most-wanted .cdv-mw-penalty {
    gap: 9px !important;
    color: rgba(235, 224, 240, .62) !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
}

.cdv-most-wanted .cdv-mw-penalty strong {
    color: #ff6483 !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

.cdv-most-wanted .cdv-mw-arrow {
    font-size: 19px !important;
}

.cdv-most-wanted .cdv-mw-track,
.cdv-most-wanted .cdv-mw-track:hover,
.cdv-most-wanted .cdv-mw-viewport:hover .cdv-mw-track,
.cdv-most-wanted .cdv-mw-viewport:focus-within .cdv-mw-track {
    animation-play-state: running !important;
}

@media (max-width: 700px) {
    .cdv-most-wanted .cdv-mw-card {
        width: min(360px, calc(100vw - 32px)) !important;
        min-width: min(360px, calc(100vw - 32px)) !important;
        max-width: min(360px, calc(100vw - 32px)) !important;
        min-height: 195px !important;
        flex-basis: min(360px, calc(100vw - 32px)) !important;

        grid-template-columns:
            72px
            minmax(0, 1fr)
            auto !important;

        gap: 12px 13px !important;
        padding: 18px !important;
    }

    .cdv-most-wanted .cdv-mw-avatar {
        width: 72px !important;
        height: 72px !important;
        border-radius: 18px !important;
    }

    .cdv-most-wanted .cdv-mw-name {
        font-size: clamp(20px, 6vw, 24px) !important;
    }

    .cdv-most-wanted .cdv-mw-match {
        min-width: 0 !important;
        padding: 8px !important;
        font-size: 7px !important;
    }
}

/* CDV MOST WANTED READABILITY V6 END */