/* =========================================================
   BANNIÈRE D’IDENTITÉ ESPORT
   Ce bloc modifie uniquement la vignette supérieure.
========================================================= */

.player-v2-header.cdv-wide-hero {

    position: relative !important;

    width: 100% !important;

    min-height: 300px !important;

    display: grid !important;

    grid-template-columns:
        190px
        minmax(
            330px,
            1fr
        )
        340px !important;

    align-items: center !important;

    gap: 32px !important;

    overflow: hidden !important;

    margin:
        0 0 20px !important;

    padding:
        34px 45px !important;

    border:
        1px solid
        rgba(
            var(--player-accent),
            .15
        ) !important;

    border-radius: 32px !important;

    text-align: left !important;

    background:

        linear-gradient(
            90deg,

            rgba(
                var(--player-accent),
                .105
            )
            0%,

            transparent
            28%
        ),

        radial-gradient(
            520px circle
            at
            91% 48%,

            rgba(
                var(--player-accent),
                .15
            ),

            transparent 65%
        ),

        radial-gradient(
            480px circle
            at
            43% 115%,

            rgba(
                var(--player-accent-soft),
                .075
            ),

            transparent 70%
        ),

        linear-gradient(
            122deg,

            rgba(
                10,
                12,
                29,
                .94
            ),

            rgba(
                15,
                17,
                34,
                .88
            )
            46%,

            rgba(
                6,
                8,
                22,
                .95
            )
        ) !important;

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .045
        ),

        inset
        0 -1px 0
        rgba(
            0,
            0,
            0,
            .55
        ),

        0 32px 80px
        rgba(
            0,
            0,
            0,
            .34
        ),

        0 0 65px
        rgba(
            var(--player-accent),
            .045
        ) !important;
}


/* =========================================================
   LIGNE SUPÉRIEURE COLORÉE
========================================================= */

.player-v2-header.cdv-wide-hero::before {

    content: "" !important;

    position: absolute !important;

    left: 38px !important;
    right: 38px !important;
    top: 0 !important;

    width: auto !important;
    height: 1px !important;

    z-index: 5 !important;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(
                var(--player-accent),
                .38
            )
            18%,

            rgba(
                var(--player-accent-soft),
                .92
            )
            50%,

            rgba(
                var(--player-accent),
                .38
            )
            82%,

            transparent
        ) !important;
}


/* =========================================================
   MOTIF GRAPHIQUE DE FOND
========================================================= */

.player-v2-header.cdv-wide-hero::after {

    content: "CDV" !important;

    position: absolute !important;

    left: auto !important;
    right: 42% !important;
    top: 50% !important;

    width: auto !important;
    height: auto !important;

    z-index: 0 !important;

    border-radius: 0 !important;

    color:
        rgba(
            var(--player-accent),
            .026
        ) !important;

    background: none !important;

    filter: none !important;

    font-size:
        clamp(
            150px,
            13vw,
            235px
        ) !important;

    font-weight: 1000 !important;
    line-height: .8 !important;
    letter-spacing: -.10em !important;

    transform:
        translateY(-50%)
        skewX(-8deg) !important;

    animation: none !important;

    pointer-events: none !important;
}


/* =========================================================
   SUPPRESSION DE L’EFFET TROIS BLOCS
========================================================= */

.cdv-wide-hero-left,
.cdv-wide-hero-center,
.cdv-wide-hero-right {

    position: relative;

    z-index: 3;

    min-width: 0;
}


.cdv-wide-hero-center {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;

    padding: 0 !important;

    border: 0 !important;
}


/* =========================================================
   AVATAR — PHOTO DE JOUEUR
========================================================= */

.cdv-wide-hero-left {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;

    gap: 14px !important;
}


.cdv-wide-avatar {

    position: relative !important;

    width: 150px !important;
    height: 178px !important;

    flex:
        0 0 178px !important;

    overflow: hidden !important;

    border:
        1px solid
        rgba(
            var(--player-accent),
            .30
        ) !important;

    border-radius:
        25px 25px 48px 25px !important;

    background:
        rgba(
            6,
            8,
            20,
            .85
        ) !important;

    box-shadow:

        0 0 0 6px
        rgba(
            var(--player-accent),
            .035
        ),

        0 24px 48px
        rgba(
            0,
            0,
            0,
            .48
        ),

        0 0 40px
        rgba(
            var(--player-accent),
            .12
        ) !important;

    transform:
        rotate(-1.5deg) !important;
}


.cdv-wide-avatar::before {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 42%;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,

            transparent,

            rgba(
                4,
                6,
                17,
                .58
            )
        );
}


.cdv-wide-avatar::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:

        linear-gradient(
            135deg,

            rgba(
                255,
                255,
                255,
                .10
            ),

            transparent 36%
        ),

        linear-gradient(
            180deg,

            transparent 70%,

            rgba(
                var(--player-accent),
                .10
            )
        ) !important;
}


.cdv-wide-avatar img {

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    transform:
        scale(1.03) !important;
}


.cdv-wide-avatar-fallback {

    position: relative;

    z-index: 1;

    font-size: 38px !important;
}


/* Informations sous forme de badge sous la photo. */

.cdv-wide-profile-copy {

    width: 150px;

    padding-left: 3px;
}


.cdv-wide-profile-label {

    display: none !important;
}


.cdv-wide-profile-role {

    overflow: hidden;

    color:
        rgba(
            242,
            239,
            250,
            .74
        ) !important;

    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    letter-spacing: .10em !important;

    text-overflow: ellipsis;
    text-transform: uppercase;

    white-space: nowrap;
}


.cdv-wide-profile-record {

    margin-top: 7px !important;

    color:
        rgba(
            226,
            220,
            238,
            .36
        ) !important;

    font-size: 7px !important;
    letter-spacing: .05em !important;
}


.cdv-wide-profile-record strong {

    color:
        rgb(
            var(--player-accent-soft)
        ) !important;

    font-size: 10px !important;
}


/* =========================================================
   IDENTITÉ PRINCIPALE
========================================================= */

.cdv-wide-hero-center
.player-v2-kicker {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    margin: 0 0 4px !important;

    color:
        rgba(
            var(--player-accent-soft),
            .58
        ) !important;

    font-size: 8px !important;
    font-weight: 950 !important;
    letter-spacing: .24em !important;
}


.cdv-wide-hero-center
.player-v2-kicker::before {

    content: "";

    width: 28px;
    height: 1px;

    background:
        linear-gradient(
            90deg,

            rgb(
                var(--player-accent)
            ),

            transparent
        );
}


.cdv-wide-hero-center
.player-v2-name {

    width: 100% !important;

    margin:
        10px 0 15px !important;

    color: transparent !important;

    font-size:
        clamp(
            57px,
            5.5vw,
            92px
        ) !important;

    font-weight: 950 !important;
    line-height: .90 !important;
    letter-spacing: -.065em !important;

    text-align: left !important;

    background:
        linear-gradient(
            110deg,

            #ffffff 5%,

            #f4efff 40%,

            rgb(
                var(--player-accent-soft)
            )
            78%,

            rgb(
                var(--player-accent)
            )
        ) !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    text-shadow:
        0 22px 52px
        rgba(
            var(--player-accent),
            .14
        ) !important;
}


.cdv-wide-hero-center
.player-v2-meta {

    width: max-content !important;
    max-width: 100% !important;

    min-height: 32px !important;

    margin: 0 !important;

    padding:
        7px 13px !important;

    border:
        1px solid
        rgba(
            var(--player-accent),
            .16
        ) !important;

    background:
        rgba(
            5,
            8,
            21,
            .60
        ) !important;
}


/* =========================================================
   RANG SOLOQ — EMBLÈME DÉCORATIF GÉANT
========================================================= */

.cdv-wide-hero-right {

    height: 100%;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;
}


.cdv-wide-rank {

    position: relative;

    width: 100%;
    min-height: 220px;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-end !important;
    justify-content: center !important;

    gap: 0 !important;

    padding-right: 9px;

    isolation: isolate;

    text-align: right;
}


.cdv-wide-rank-emblem {

    position: absolute !important;

    right: -13px !important;
    top: 50% !important;

    width: 230px !important;
    height: 230px !important;

    z-index: 0 !important;

    overflow: visible !important;

    transform:
        translateY(-50%) !important;

    pointer-events: none;
}


.cdv-wide-rank-emblem::before {

    inset: 24% !important;

    background:
        rgba(
            var(--player-accent),
            .30
        ) !important;

    filter:
        blur(35px) !important;
}


/*
L’image Riot possède beaucoup de transparence.
Le scale agrandit le véritable emblème visible.
*/

.cdv-wide-rank-emblem img {

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 210px !important;
    height: 210px !important;

    max-width: none !important;

    opacity: .42 !important;

    filter:

        saturate(1.18)

        drop-shadow(
            0 18px 34px
            rgba(
                0,
                0,
                0,
                .52
            )
        ) !important;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.65) !important;
}


.cdv-wide-rank-empty {

    opacity: .25;
}


.cdv-wide-rank-copy {

    position: relative;

    z-index: 3;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-end;
}


.cdv-wide-rank-mode {

    color:
        rgba(
            232,
            226,
            242,
            .46
        ) !important;

    font-size: 7px !important;
    letter-spacing: .18em !important;

    text-shadow:
        0 2px 10px
        rgba(
            0,
            0,
            0,
            .75
        );
}


.cdv-wide-rank-name {

    max-width: 230px;

    margin-top: 9px !important;

    color: #ffffff !important;

    font-size:
        clamp(
            23px,
            2.2vw,
            34px
        ) !important;

    font-weight: 1000 !important;
    line-height: .95 !important;
    letter-spacing: -.035em;

    text-shadow:

        0 3px 14px
        rgba(
            0,
            0,
            0,
            .92
        ),

        0 0 24px
        rgba(
            var(--player-accent),
            .18
        );
}


.cdv-wide-rank-lp {

    margin-top: 13px !important;

    padding:
        7px 11px !important;

    color:
        rgb(
            var(--player-accent-soft)
        ) !important;

    background:
        rgba(
            5,
            7,
            19,
            .70
        ) !important;

    box-shadow:
        0 8px 22px
        rgba(
            0,
            0,
            0,
            .28
        );
}


/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1050px) {

    .player-v2-header.cdv-wide-hero {

        grid-template-columns:
            150px
            minmax(
                280px,
                1fr
            )
            250px !important;

        gap: 24px !important;

        padding:
            30px 32px !important;
    }


    .cdv-wide-avatar {

        width: 125px !important;
        height: 155px !important;

        flex-basis:
            155px !important;
    }


    .cdv-wide-profile-copy {

        width: 125px;
    }


    .cdv-wide-rank-emblem {

        right: -25px !important;

        width: 190px !important;
        height: 190px !important;
    }


    .cdv-wide-rank-emblem img {

        width: 180px !important;
        height: 180px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 790px) {

    .player-v2-header.cdv-wide-hero {

        min-height: auto !important;

        grid-template-columns:
            1fr !important;

        gap: 25px !important;

        padding:
            30px 23px !important;

        border-radius: 24px !important;
    }


    .cdv-wide-hero-center {

        order: -1;

        align-items: center !important;

        text-align: center !important;
    }


    .cdv-wide-hero-center
    .player-v2-name {

        text-align: center !important;
    }


    .cdv-wide-hero-center
    .player-v2-kicker {

        justify-content: center;
    }


    .cdv-wide-hero-left {

        flex-direction: row !important;

        align-items: center !important;
        justify-content: center !important;
    }


    .cdv-wide-avatar {

        width: 112px !important;
        height: 130px !important;

        flex-basis:
            130px !important;
    }


    .cdv-wide-profile-copy {

        width: auto;
        min-width: 120px;
    }


    .cdv-wide-hero-right {

        min-height: 210px;

        justify-content: center !important;
    }


    .cdv-wide-rank {

        min-height: 205px;

        align-items: center !important;

        padding-right: 0;

        text-align: center;
    }


    .cdv-wide-rank-emblem {

        left: 50% !important;
        right: auto !important;

        transform:
            translate(
                -50%,
                -50%
            ) !important;
    }


    .cdv-wide-rank-copy {

        align-items: center;
    }


    .cdv-wide-rank-name {

        text-align: center;
    }
}


/* =========================================================
   ACCESSIBILITÉ
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cdv-wide-rank-emblem::before {

        animation: none !important;
    }
}