/* =========================================================
   CDV ACTUALITÉS V1
========================================================= */

.cdv-newsroom {
    --news-violet:
        148, 113, 255;

    --news-cyan:
        83, 218, 255;

    --news-gold:
        239, 193, 99;
}


/* =========================================================
   HERO
========================================================= */

.cdv-news-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 420px;

    margin:
        30px 0 24px;

    padding:
        clamp(
            28px,
            5vw,
            60px
        );

    display: flex;
    align-items: flex-end;

    border:
        1px solid
        rgba(
            146,
            119,
            255,
            .22
        );

    border-radius:
        28px;

    background:
        radial-gradient(
            circle
            at
            var(--news-x, 78%)
            var(--news-y, 20%),

            rgba(
                73,
                205,
                255,
                .15
            ),

            transparent
            28%
        ),

        linear-gradient(
            135deg,

            rgba(
                16,
                18,
                38,
                .96
            ),

            rgba(
                6,
                8,
                20,
                .92
            )
        );

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

        0 35px 90px
        rgba(
            0,
            0,
            0,
            .42
        );

    backdrop-filter:
        blur(24px);

    -webkit-backdrop-filter:
        blur(24px);
}

.cdv-news-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    opacity: .18;

    background-image:
        linear-gradient(
            rgba(
                120,
                150,
                255,
                .08
            )
            1px,

            transparent
            1px
        ),

        linear-gradient(
            90deg,

            rgba(
                120,
                150,
                255,
                .08
            )
            1px,

            transparent
            1px
        );

    background-size:
        42px 42px;

    mask-image:
        linear-gradient(
            to right,

            black,

            black 65%,

            transparent
        );
}

.cdv-news-hero::after {
    content: "";

    position: absolute;

    left: -25%;
    top: -120%;

    z-index: -1;

    width: 42%;
    height: 320%;

    opacity: .18;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(
                151,
                122,
                255,
                .8
            ),

            transparent
        );

    transform:
        rotate(20deg);

    animation:
        cdvNewsHeroSweep
        8s
        ease-in-out
        infinite;
}

.cdv-news-corners {
    position: absolute;
    inset: 15px;

    pointer-events: none;

    border-radius:
        20px;

    background:
        linear-gradient(
            #8b76ff,
            #8b76ff
        )
        left top
        /
        28px 1px
        no-repeat,

        linear-gradient(
            #8b76ff,
            #8b76ff
        )
        left top
        /
        1px 28px
        no-repeat,

        linear-gradient(
            #5edcff,
            #5edcff
        )
        right top
        /
        28px 1px
        no-repeat,

        linear-gradient(
            #5edcff,
            #5edcff
        )
        right top
        /
        1px 28px
        no-repeat,

        linear-gradient(
            #8b76ff,
            #8b76ff
        )
        left bottom
        /
        28px 1px
        no-repeat,

        linear-gradient(
            #5edcff,
            #5edcff
        )
        right bottom
        /
        28px 1px
        no-repeat;
}

.cdv-news-hero-content {
    position: relative;
    z-index: 2;

    max-width: 800px;
}

.cdv-news-live {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 18px;

    color:
        rgba(
            225,
            220,
            242,
            .48
        );

    font-size: 8px;
    font-weight: 900;

    letter-spacing:
        .2em;
}

.cdv-news-live span {
    width: 7px;
    height: 7px;

    border-radius: 999px;

    background:
        #62efaa;

    box-shadow:
        0 0 18px
        rgba(
            98,
            239,
            170,
            .72
        );

    animation:
        cdvNewsLive
        1.8s
        ease-in-out
        infinite;
}

.cdv-news-title {
    margin: 0;

    color: #fff;

    font-size:
        clamp(
            52px,
            7vw,
            100px
        );

    line-height: .85;

    font-weight: 900;

    letter-spacing:
        -.075em;
}

.cdv-news-title span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            100deg,

            #fff,

            #c5b5ff 48%,

            #70ddff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;
}

.cdv-news-description {
    max-width: 650px;

    margin-top: 25px;

    color:
        rgba(
            226,
            222,
            238,
            .48
        );

    font-size: 13px;
    line-height: 1.75;
}

.cdv-news-hero-data {
    position: absolute;

    right:
        clamp(
            28px,
            5vw,
            60px
        );

    bottom:
        clamp(
            28px,
            5vw,
            58px
        );

    z-index: 3;

    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(
                105px,
                1fr
            )
        );

    gap: 9px;
}

.cdv-news-data-card {
    min-height: 82px;

    padding:
        15px 16px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );

    border-radius:
        14px;

    background:
        rgba(
            5,
            8,
            19,
            .56
        );

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

.cdv-news-data-value {
    color: #fff;

    font-size: 25px;
    line-height: 1;

    font-weight: 900;
}

.cdv-news-data-label {
    margin-top: 9px;

    color:
        rgba(
            255,
            255,
            255,
            .27
        );

    font-size: 6px;
    font-weight: 900;

    letter-spacing:
        .14em;
}


/* =========================================================
   TICKER
========================================================= */

.cdv-news-ticker {
    position: relative;
    overflow: hidden;

    margin:
        0 0 34px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .065
        );

    border-radius:
        14px;

    background:
        rgba(
            8,
            10,
            23,
            .72
        );
}

.cdv-news-ticker-track {
    width: max-content;

    display: flex;
    align-items: center;

    min-height: 42px;

    animation:
        cdvTickerMove
        27s
        linear
        infinite;
}

.cdv-news-ticker:hover
.cdv-news-ticker-track {
    animation-play-state:
        paused;
}

.cdv-news-ticker-item {
    display: flex;
    align-items: center;
    gap: 15px;

    padding:
        0 30px;

    color:
        rgba(
            255,
            255,
            255,
            .44
        );

    font-size: 7px;
    font-weight: 900;

    letter-spacing:
        .14em;

    white-space: nowrap;
}

.cdv-news-ticker-item strong {
    color:
        #76e4ff;
}

.cdv-news-ticker-item span {
    color:
        rgba(
            165,
            137,
            255,
            .58
        );
}


/* =========================================================
   À LA UNE
========================================================= */

.cdv-news-featured {
    position: relative;
    overflow: hidden;

    min-height: 455px;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1.35fr
        )

        minmax(
            320px,
            .65fr
        );

    margin-bottom: 60px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .075
        );

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,

            rgba(
                19,
                20,
                38,
                .86
            ),

            rgba(
                6,
                8,
                18,
                .82
            )
        );

    box-shadow:
        0 30px 70px
        rgba(
            0,
            0,
            0,
            .28
        );

    color: inherit;
    text-decoration: none;
}

.cdv-news-featured-media {
    position: relative;
    overflow: hidden;

    min-height: 455px;
}

.cdv-news-featured-media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,

            transparent
            55%,

            rgba(
                7,
                9,
                20,
                .82
            )
        );
}

.cdv-news-featured-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform
        .8s
        cubic-bezier(
            .2,
            .75,
            .25,
            1
        ),

        filter
        .5s ease;
}

.cdv-news-featured:hover
.cdv-news-featured-media img {
    transform:
        scale(1.045);

    filter:
        saturate(1.08)
        brightness(1.04);
}

.cdv-news-featured-badge {
    position: absolute;

    left: 21px;
    top: 21px;

    z-index: 3;

    padding:
        8px 11px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius:
        9px;

    color: #fff;

    background:
        rgba(
            7,
            9,
            20,
            .72
        );

    backdrop-filter:
        blur(13px);

    -webkit-backdrop-filter:
        blur(13px);

    font-size: 7px;
    font-weight: 900;

    letter-spacing:
        .15em;
}

.cdv-news-featured-copy {
    position: relative;

    padding:
        clamp(
            28px,
            4vw,
            46px
        );

    display: flex;
    flex-direction: column;

    justify-content:
        center;
}

.cdv-news-featured-label {
    color:
        rgba(
            168,
            145,
            255,
            .78
        );

    font-size: 8px;
    font-weight: 900;

    letter-spacing:
        .2em;
}

.cdv-news-featured-title {
    margin-top: 17px;

    color: #fff;

    font-size:
        clamp(
            28px,
            3vw,
            44px
        );

    line-height: 1.02;

    font-weight: 900;

    letter-spacing:
        -.045em;
}

.cdv-news-featured-meta {
    margin-top: 20px;

    color:
        rgba(
            255,
            255,
            255,
            .38
        );

    font-size: 8px;
    font-weight: 800;

    line-height: 1.8;
}

.cdv-news-score {
    margin-top: 26px;

    color: #fff;

    font-size: 38px;
    font-weight: 900;

    letter-spacing:
        -.05em;
}

.cdv-news-winner {
    margin-top: 5px;

    color: #f0c36d;

    font-size: 8px;
    font-weight: 900;

    letter-spacing:
        .13em;
}

.cdv-news-featured-action {
    margin-top: 28px;

    display: inline-flex;
    align-items: center;

    gap: 15px;

    color:
        rgba(
            255,
            255,
            255,
            .74
        );

    font-size: 8px;
    font-weight: 900;

    letter-spacing:
        .13em;
}


/* =========================================================
   SECTION ET FILTRES
========================================================= */

.cdv-news-section-head {
    display: flex;
    align-items: flex-end;

    justify-content:
        space-between;

    gap: 20px;

    margin-bottom: 20px;
}

.cdv-news-section-eyebrow {
    margin-bottom: 8px;

    color:
        rgba(
            168,
            145,
            255,
            .64
        );

    font-size: 8px;
    font-weight: 900;

    letter-spacing:
        .2em;
}

.cdv-news-section-head h2 {
    margin: 0;

    color: #fff;

    font-size:
        clamp(
            28px,
            3vw,
            39px
        );

    letter-spacing:
        -.045em;
}

.cdv-news-filters {
    display: flex;
    flex-wrap: wrap;

    justify-content:
        flex-end;

    gap: 7px;
}

.cdv-news-filter {
    min-height: 34px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );

    border-radius:
        10px;

    color:
        rgba(
            255,
            255,
            255,
            .33
        );

    background:
        rgba(
            255,
            255,
            255,
            .018
        );

    cursor: pointer;

    font-size: 6px;
    font-weight: 900;

    letter-spacing:
        .12em;

    transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        transform .22s ease;
}

.cdv-news-filter:hover,
.cdv-news-filter.active {
    color: #fff;

    border-color:
        rgba(
            133,
            110,
            255,
            .32
        );

    background:
        rgba(
            117,
            91,
            230,
            .12
        );

    transform:
        translateY(-2px);
}


/* =========================================================
   CARTES DES ÉVÉNEMENTS
========================================================= */

.cdv-news-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 15px;
}

.cdv-news-card {
    position: relative;
    overflow: hidden;

    min-width: 0;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );

    border-radius:
        19px;

    color: inherit;
    text-decoration: none;

    background:
        linear-gradient(
            145deg,

            rgba(
                18,
                20,
                35,
                .82
            ),

            rgba(
                7,
                9,
                18,
                .72
            )
        );

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

        0 20px 48px
        rgba(
            0,
            0,
            0,
            .18
        );

    transform:
        translateY(0);

    transition:
        transform
        .32s
        cubic-bezier(
            .2,
            .75,
            .25,
            1
        ),

        border-color
        .3s ease,

        box-shadow
        .3s ease;
}

.cdv-news-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(
            138,
            116,
            255,
            .32
        );

    box-shadow:
        0 32px 65px
        rgba(
            0,
            0,
            0,
            .31
        );
}

.cdv-news-card.hidden {
    display: none;
}

.cdv-news-card-image {
    position: relative;
    overflow: hidden;

    aspect-ratio:
        16 / 10;
}

.cdv-news-card-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,

            rgba(
                7,
                9,
                19,
                .86
            ),

            transparent
            56%
        );
}

.cdv-news-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform
        .65s
        cubic-bezier(
            .2,
            .75,
            .25,
            1
        ),

        filter
        .4s ease;
}

.cdv-news-card:hover
.cdv-news-card-image img {
    transform:
        scale(1.065);

    filter:
        saturate(1.1)
        brightness(1.05);
}

.cdv-news-card-status {
    position: absolute;

    left: 14px;
    top: 14px;

    z-index: 2;

    padding:
        7px 9px;

    border-radius:
        8px;

    color: #72efb1;

    background:
        rgba(
            7,
            24,
            20,
            .72
        );

    backdrop-filter:
        blur(10px);

    font-size: 6px;
    font-weight: 900;

    letter-spacing:
        .12em;
}

.cdv-news-card-number {
    position: absolute;

    right: 14px;
    top: 14px;

    z-index: 2;

    color:
        rgba(
            255,
            255,
            255,
            .55
        );

    font-size: 7px;
    font-weight: 900;

    letter-spacing:
        .12em;
}

.cdv-news-card-score {
    position: absolute;

    left: 16px;
    bottom: 15px;

    z-index: 2;

    color: #fff;

    font-size: 26px;
    font-weight: 900;

    letter-spacing:
        -.04em;
}

.cdv-news-card-content {
    padding:
        19px 19px 20px;
}

.cdv-news-card-title {
    color: #fff;

    font-size: 17px;
    line-height: 1.15;

    font-weight: 900;

    letter-spacing:
        -.025em;
}

.cdv-news-card-meta {
    margin-top: 10px;

    color:
        rgba(
            255,
            255,
            255,
            .31
        );

    font-size: 7px;
    font-weight: 800;

    line-height: 1.7;
}

.cdv-news-card-footer {
    display: flex;
    align-items: center;

    justify-content:
        space-between;

    gap: 15px;

    margin-top: 16px;

    padding-top: 14px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .055
        );
}

.cdv-news-card-winner {
    overflow: hidden;

    color: #efc26d;

    font-size: 7px;
    font-weight: 900;

    white-space: nowrap;
    text-overflow: ellipsis;

    letter-spacing:
        .08em;
}

.cdv-news-card-arrow {
    color:
        rgba(
            255,
            255,
            255,
            .32
        );

    font-size: 16px;

    transition:
        transform .25s ease,
        color .25s ease;
}

.cdv-news-card:hover
.cdv-news-card-arrow {
    color: #a995ff;

    transform:
        translateX(4px);
}


/* =========================================================
   TIMELINE
========================================================= */

.cdv-news-timeline {
    margin-top: 70px;
}

.cdv-news-timeline-list {
    position: relative;

    display: grid;

    gap: 0;

    margin-top: 22px;

    padding-left: 31px;
}

.cdv-news-timeline-list::before {
    content: "";

    position: absolute;

    left: 8px;
    top: 10px;
    bottom: 10px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,

            rgba(
                139,
                112,
                255,
                .55
            ),

            rgba(
                83,
                218,
                255,
                .2
            ),

            transparent
        );
}

.cdv-news-timeline-row {
    position: relative;

    min-height: 88px;

    padding:
        15px 18px;

    display: flex;
    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .055
        );

    color: inherit;

    text-decoration:
        none;

    transition:
        background .22s ease,
        padding-left .22s ease;
}

.cdv-news-timeline-row::before {
    content: "";

    position: absolute;

    left: -27px;

    width: 9px;
    height: 9px;

    border-radius:
        50%;

    background:
        #8c72ff;

    box-shadow:
        0 0 16px
        rgba(
            140,
            114,
            255,
            .62
        );
}

.cdv-news-timeline-row:hover {
    padding-left: 24px;

    background:
        rgba(
            118,
            92,
            230,
            .045
        );
}

.cdv-news-timeline-date {
    width: 95px;
    flex: 0 0 auto;

    color:
        rgba(
            255,
            255,
            255,
            .3
        );

    font-size: 7px;
    font-weight: 900;

    letter-spacing:
        .12em;
}

.cdv-news-timeline-copy {
    min-width: 0;
    flex: 1;
}

.cdv-news-timeline-copy strong,
.cdv-news-timeline-copy span {
    display: block;
}

.cdv-news-timeline-copy strong {
    color: #fff;

    font-size: 13px;
}

.cdv-news-timeline-copy span {
    margin-top: 6px;

    color:
        rgba(
            255,
            255,
            255,
            .3
        );

    font-size: 7px;
    font-weight: 800;
}

.cdv-news-timeline-score {
    color: #f0c26d;

    font-size: 17px;
    font-weight: 900;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cdvNewsHeroSweep {
    0%,
    18% {
        transform:
            translateX(-45%)
            rotate(20deg);
    }

    55%,
    100% {
        transform:
            translateX(390%)
            rotate(20deg);
    }
}

@keyframes cdvNewsLive {
    0%,
    100% {
        opacity: .6;

        transform:
            scale(.85);
    }

    50% {
        opacity: 1;

        transform:
            scale(1);
    }
}

@keyframes cdvTickerMove {
    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {
    .cdv-news-hero {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .cdv-news-hero-data {
        position: static;

        width: 100%;

        margin-top: 35px;
    }

    .cdv-news-featured {
        grid-template-columns:
            1fr;
    }

    .cdv-news-featured-media {
        min-height: 360px;
    }

    .cdv-news-featured-media::after {
        background:
            linear-gradient(
                to top,

                rgba(
                    7,
                    9,
                    20,
                    .84
                ),

                transparent
                48%
            );
    }

    .cdv-news-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }
}

@media (max-width: 660px) {
    .cdv-news-hero {
        min-height: auto;

        margin-top: 20px;

        padding:
            28px 21px;

        border-radius:
            21px;
    }

    .cdv-news-title {
        font-size:
            clamp(
                48px,
                17vw,
                68px
            );
    }

    .cdv-news-description {
        font-size: 12px;
    }

    .cdv-news-section-head {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .cdv-news-filters {
        justify-content:
            flex-start;
    }

    .cdv-news-grid {
        grid-template-columns:
            1fr;
    }

    .cdv-news-featured-media {
        min-height: 280px;
    }

    .cdv-news-timeline-row {
        align-items:
            flex-start;

        flex-wrap: wrap;
    }

    .cdv-news-timeline-date {
        width: 100%;
    }
}

@media (
    prefers-reduced-motion:
    reduce
) {
    .cdv-news-hero::after,
    .cdv-news-live span,
    .cdv-news-ticker-track {
        animation:
            none !important;
    }

    .cdv-news-ticker-track {
        width: auto;

        flex-wrap: wrap;
    }
}
