/*
|--------------------------------------------------------------------------
| Unlocky - Actualités
|--------------------------------------------------------------------------
*/

:root {
    --news-navy: #03162f;
    --news-navy-2: #06254c;
    --news-blue: #087cff;
    --news-cyan: #05d7ff;
    --news-ink: #07172d;
    --news-muted: #66758b;
    --news-soft: #f4f8fc;
    --news-border: #dfe8f2;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.article-hero {
    position: relative;
    padding: 145px 0 110px;
    overflow: hidden;
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #020d20 0%,
            #031a3b 52%,
            #06152b 100%
        );
}

.article-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(5px);
}

.article-hero-glow-1 {
    width: 520px;
    height: 520px;

    top: -220px;
    right: -100px;

    background:
        radial-gradient(
            circle,
            rgba(5, 215, 255, .22),
            transparent 67%
        );
}

.article-hero-glow-2 {
    width: 500px;
    height: 500px;

    left: -170px;
    bottom: -300px;

    background:
        radial-gradient(
            circle,
            rgba(8, 124, 255, .22),
            transparent 67%
        );
}

.article-heading {
    position: relative;
    z-index: 2;

    width: min(
        100%,
        980px
    );

    margin: auto;
}

.article-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 30px;

    font-size: .86rem;
}

.article-breadcrumb a {
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
}

.article-breadcrumb a:hover {
    color: #ffffff;
}

.article-breadcrumb i {
    color: rgba(255, 255, 255, .28);
    font-size: .65rem;
}

.article-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;
    margin-bottom: 23px;

    border:
        1px solid
        rgba(5, 215, 255, .24);

    border-radius: 999px;

    color: var(--news-cyan);

    background:
        rgba(5, 215, 255, .08);

    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.article-heading h1 {
    max-width: 980px;

    margin: 0;

    font-size:
        clamp(
            2.65rem,
            5.2vw,
            5.2rem
        );

    line-height: .99;
    letter-spacing: -.055em;
    font-weight: 900;
}

.article-heading h1 span {
    color: var(--news-cyan);
}

.article-intro {
    max-width: 830px;

    margin:
        30px 0 0;

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

    font-size:
        clamp(
            1.1rem,
            1.5vw,
            1.32rem
        );

    line-height: 1.7;
}

.article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        14px
        27px;

    margin-top: 35px;

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

    font-size: .88rem;
}

.article-meta > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.meta-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

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

    color: var(--news-cyan);
}


/*
|--------------------------------------------------------------------------
| Image principale
|--------------------------------------------------------------------------
*/

.article-cover {
    position: relative;

    margin-top: -55px;

    z-index: 3;
}

.article-cover-inner {
    width: min(100%, 1120px);

    margin: 0 auto;

    overflow: hidden;

    border-radius: 28px;

    background: #dfe8f2;

    box-shadow:
        0 30px 80px
        rgba(
            3,
            22,
            47,
            .18
        );
}

.article-cover-inner img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}


/*
|--------------------------------------------------------------------------
| Article
|--------------------------------------------------------------------------
*/

.article-content {
    padding:
        85px 0
        110px;
}

.article-layout {
    display: grid;

    grid-template-columns:
        70px
        minmax(0, 760px);

    justify-content: center;

    gap: 48px;
}

.article-body {
    min-width: 0;

    font-size: 1.08rem;
    line-height: 1.87;
}

.article-body p {
    margin-bottom: 27px;

    color: #34445a;
}

.article-body strong {
    color: var(--news-ink);
}

.article-lead {
    color: var(--news-ink) !important;

    font-size:
        clamp(
            1.18rem,
            1.5vw,
            1.35rem
        );

    line-height: 1.75 !important;

    font-weight: 600;
}

.article-body h2 {
    margin:
        65px 0
        24px;

    color: var(--news-ink);

    font-size:
        clamp(
            1.75rem,
            3vw,
            2.45rem
        );

    line-height: 1.12;
    letter-spacing: -.035em;
    font-weight: 900;
}

.article-body blockquote {
    position: relative;

    margin:
        38px 0;

    padding:
        24px
        30px;

    border-left:
        4px solid
        var(--news-cyan);

    border-radius:
        0 15px 15px 0;

    color: var(--news-ink);
    background: var(--news-soft);

    font-size: 1.22rem;
    line-height: 1.6;
    font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| Partage
|--------------------------------------------------------------------------
*/

.share-column {
    position: sticky;

    top: 115px;

    align-self: start;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 14px;
}

.share-label {
    color: #9aa7b7;

    font-size: .68rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .1em;

    writing-mode: vertical-rl;

    transform: rotate(180deg);
}

.share-column a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border:
        1px solid
        var(--news-border);

    border-radius: 50%;

    color: var(--news-navy);

    background: #ffffff;

    text-decoration: none;

    transition:
        .2s ease;
}

.share-column a:hover {
    color: #ffffff;

    border-color:
        var(--news-blue);

    background:
        var(--news-blue);

    transform:
        translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| Highlight
|--------------------------------------------------------------------------
*/

.article-highlight {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 20px;

    margin:
        45px 0;

    padding: 28px;

    border:
        1px solid
        rgba(
            8,
            124,
            255,
            .14
        );

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #f4f9ff,
            #f9fdff
        );
}

.highlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border-radius: 15px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--news-blue),
            var(--news-cyan)
        );

    font-size: 1.35rem;
}

.article-highlight strong {
    display: block;

    margin-bottom: 5px;

    font-size: 1.12rem;
}

.article-highlight p {
    margin: 0;

    font-size: .98rem;
    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Étapes
|--------------------------------------------------------------------------
*/

.article-steps {
    margin:
        35px 0
        55px;

    border-top:
        1px solid
        var(--news-border);
}

.article-step {
    display: grid;

    grid-template-columns:
        65px
        1fr;

    gap: 20px;

    padding:
        28px 0;

    border-bottom:
        1px solid
        var(--news-border);
}

.article-step > span {
    color: var(--news-blue);

    font-size: .85rem;
    font-weight: 900;
}

.article-step h3 {
    margin:
        -5px 0
        7px;

    color: var(--news-ink);

    font-size: 1.12rem;
    font-weight: 850;
}

.article-step p {
    margin: 0;

    color:
        var(--news-muted);

    font-size: .96rem;
    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Citation
|--------------------------------------------------------------------------
*/

.article-quote {
    position: relative;

    margin:
        50px 0;

    padding:
        35px
        35px
        35px
        80px;

    overflow: hidden;

    border-radius: 24px;

    color: #ffffff;

    background:
        var(--news-navy);
}

.quote-mark {
    position: absolute;

    top: 12px;
    left: 25px;

    color:
        var(--news-cyan);

    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 1;
}

.article-quote p {
    position: relative;

    margin: 0;

    color: #ffffff;

    font-size: 1.2rem;
    line-height: 1.65;
    font-weight: 750;
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.unlocky-callout {
    position: relative;

    margin:
        70px 0;

    padding:
        50px;

    overflow: hidden;

    border-radius: 30px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #020d20,
            #06254c
        );

    box-shadow:
        0 25px 70px
        rgba(
            3,
            22,
            47,
            .18
        );
}

.callout-decoration {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.callout-decoration-1 {
    width: 300px;
    height: 300px;

    top: -160px;
    right: -80px;

    background:
        radial-gradient(
            circle,
            rgba(
                5,
                215,
                255,
                .28
            ),
            transparent 68%
        );
}

.callout-decoration-2 {
    width: 270px;
    height: 270px;

    bottom: -180px;
    left: -80px;

    background:
        radial-gradient(
            circle,
            rgba(
                8,
                124,
                255,
                .3
            ),
            transparent 68%
        );
}

.callout-brand {
    position: relative;

    margin-bottom: 20px;

    color: #ffffff;

    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -.055em;
}

.callout-brand span {
    color: var(--news-cyan);
}

.unlocky-callout h2 {
    position: relative;

    max-width: 570px;

    margin:
        0 0
        17px;

    color: #ffffff;

    font-size:
        clamp(
            2rem,
            4vw,
            3.25rem
        );

    line-height: 1;
}

.unlocky-callout > p {
    position: relative;

    max-width: 620px;

    margin-bottom: 28px;

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

    font-size: 1rem;
    line-height: 1.7;
}

.callout-features {
    position: relative;

    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 30px;
}

.callout-features span {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding:
        8px 13px;

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

    border-radius: 999px;

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

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

    font-size: .79rem;
    font-weight: 700;
}

.callout-features i {
    color:
        var(--news-cyan);
}

.unlocky-callout .btn {
    position: relative;
}


/*
|--------------------------------------------------------------------------
| Tags et auteur
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Footer article
|--------------------------------------------------------------------------
*/

.article-footer {
    margin-top: 70px;
    padding-top: 32px;

    border-top: 1px solid var(--news-border);

    background: transparent;
    color: var(--news-ink);
}


/*
|--------------------------------------------------------------------------
| Tags
|--------------------------------------------------------------------------
*/

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 32px;
}

.article-tags span {
    padding: 8px 14px;

    border-radius: 999px;

    color: #53667f;
    background: #f2f6fb;

    font-size: .76rem;
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Auteur
|--------------------------------------------------------------------------
*/

.article-author {
    display: flex;
    align-items: center;
    gap: 16px;

    padding-top: 28px;

    border-top: 1px solid var(--news-border);
}

.author-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    border-radius: 15px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #087cff,
            #05d7ff
        );

    font-size: 1.3rem;
}

.article-author strong {
    display: block;

    margin: 0 0 2px;

    color: var(--news-ink);

    font-size: 1rem;
    font-weight: 850;
}

.article-author p {
    margin: 0 !important;

    color: var(--news-muted) !important;

    font-size: .85rem;
    line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Articles relatifs
|--------------------------------------------------------------------------
*/

.related-section {
    padding:
        90px 0;

    background:
        var(--news-soft);
}

.related-heading {
    margin-bottom: 36px;
}

.related-heading > span {
    display: block;

    margin-bottom: 7px;

    color:
        var(--news-blue);

    font-size: .78rem;
    font-weight: 850;

    text-transform: uppercase;
    letter-spacing: .09em;
}

.related-heading h2 {
    margin: 0;

    color:
        var(--news-ink);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight: 900;
    letter-spacing: -.04em;
}

.related-card {
    display: flex;

    gap: 23px;

    height: 100%;

    padding: 30px;

    border:
        1px solid
        var(--news-border);

    border-radius: 23px;

    color:
        var(--news-ink);

    background: #ffffff;

    text-decoration: none;

    transition:
        .25s ease;
}

.related-card:hover {
    color:
        var(--news-ink);

    transform:
        translateY(-5px);

    box-shadow:
        0 20px 50px
        rgba(
            3,
            22,
            47,
            .08
        );
}

.related-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    flex: 0 0 auto;

    border-radius: 14px;

    color:
        var(--news-blue);

    background:
        #eef6ff;

    font-size: 1.2rem;
}

.related-card span {
    display: block;

    margin-bottom: 7px;

    color:
        var(--news-blue);

    font-size: .73rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .06em;
}

.related-card h3 {
    margin: 0;

    font-size: 1.18rem;
    line-height: 1.4;
    font-weight: 850;
}

.related-link {
    margin-top: 18px;

    color:
        var(--news-muted);

    font-size: .82rem;
    font-weight: 750;
}

.related-link i {
    margin-left: 4px;

    color:
        var(--news-blue);
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.news-footer {
    padding:
        55px 0;

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

    background:
        #020d20;
}

.news-footer-inner {
    text-align: center;
}

.footer-brand {
    display: inline-block;

    margin-bottom: 8px;

    color: #ffffff;

    font-size: 1.6rem;
    font-weight: 900;

    letter-spacing: -.055em;

    text-decoration: none;
}

.footer-brand span {
    color:
        var(--news-cyan);
}

.news-footer p {
    margin:
        0 0
        20px;

    font-size: .85rem;
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 20px;
}

.footer-links a {
    color:
        rgba(
            255,
            255,
            255,
            .55
        );

    text-decoration: none;

    font-size: .8rem;
}

.footer-links a:hover {
    color: #ffffff;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media
(
    max-width: 991px
) {

    .article-hero {
        padding:
            125px 0
            90px;
    }

    .article-layout {
        grid-template-columns:
            minmax(0, 760px);

        gap: 0;
    }

    .share-column {
        display: none;
    }

}


@media
(
    max-width: 767px
) {

    .article-hero {
        padding:
            115px 0
            80px;
    }

    .article-heading h1 {
        font-size:
            clamp(
                2.4rem,
                11vw,
                3.6rem
            );
    }

    .article-intro {
        font-size: 1.03rem;
    }

    .article-meta {
        display: grid;

        gap: 10px;
    }

    .article-cover {
        margin-top: -35px;
    }

    .article-cover-inner {
        border-radius: 18px;
    }

    .article-content {
        padding:
            60px 0
            80px;
    }

    .article-body {
        font-size: 1rem;
        line-height: 1.78;
    }

    .article-body h2 {
        margin-top: 50px;
    }

    .article-highlight {
        grid-template-columns: 1fr;
    }

    .article-step {
        grid-template-columns:
            45px 1fr;
    }

    .article-quote {
        padding:
            65px 25px
            28px;
    }

    .quote-mark {
        top: 10px;
        left: 23px;
    }

    .unlocky-callout {
        margin:
            50px 0;

        padding:
            35px 25px;

        border-radius: 23px;
    }

    .related-section {
        padding:
            70px 0;
    }

    .related-card {
        padding: 24px;
    }

}


@media
(
    max-width: 480px
) {

    .article-category {
        font-size: .7rem;
    }

    .article-breadcrumb {
        font-size: .77rem;
    }

    .article-step {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .related-card {
        flex-direction: column;
    }

}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: var(--news-cyan);
}