* {
    box-sizing: border-box;
}


:root {
    --plex: #e5a00d;
    --background: #090909;

    --card:
        rgba(255, 255, 255, .06);

    --border:
        rgba(255, 255, 255, .10);

    --muted: #999;
}


body {
    margin: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            #2b2116,
            transparent 30%
        ),
        radial-gradient(
            circle at top right,
            #202020,
            transparent 32%
        ),
        var(--background);

    color: white;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* ========================================================
   TRANSITIONS GLOBALES / MODE CINÉMA
   ======================================================== */

header,
.page-intro,
.card,
.discovery-section > .section-heading,
.trending-wrapper,
.requests-section {
    transition:
        filter .40s ease,
        opacity .40s ease;
}


body.trailer-active header,
body.trailer-active .page-intro,
body.trailer-active .card,
body.trailer-active .discovery-section > .section-heading,
body.trailer-active .trending-wrapper,
body.trailer-active .requests-section {
    filter:
        brightness(.36)
        saturate(.62);

    opacity: .72;
}


body.trailer-active .discovery-hero {
    position: relative;

    z-index: 20;

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

        0 35px 100px
        rgba(0, 0, 0, .72);
}


/* ========================================================
   HEADER
   ======================================================== */

header {
    padding: 28px 5%;

    display: flex;

    justify-content: space-between;
    align-items: center;
}


.logo {
    font-size: 1.5rem;

    font-weight: 750;
}


.logo span {
    color: var(--plex);
}


.badge {
    padding: 8px 13px;

    border-radius: 999px;

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

    color: #bbb;

    font-size: .8rem;

    font-weight: 600;
}


/* ========================================================
   PAGE
   ======================================================== */

main {
    width:
        min(
            1200px,
            90%
        );

    margin:
        40px auto 90px;
}


.page-intro {
    margin-bottom: 36px;
}


.page-intro h1 {
    margin:
        0 0 10px;

    font-size:
        clamp(
            2.2rem,
            5vw,
            4rem
        );

    line-height: 1.05;
}


.page-intro p {
    margin: 0;

    color: #aaa;

    font-size: 1.1rem;
}


/* ========================================================
   CARTE PLEX
   ======================================================== */

.card {
    padding: 28px;

    background:
        var(--card);

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

    border-radius: 22px;

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, .25);
}


.status-header {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;
}


.status-left {
    display: flex;

    align-items: center;

    gap: 14px;
}


.dot {
    width: 14px;
    height: 14px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #777;

    box-shadow:
        0 0 15px
        currentColor;
}


.dot.online {
    background: #3ddc84;
}


.dot.warning {
    background: #ffb020;
}


.dot.offline {
    background: #ff5252;
}


.status-title {
    font-size: 1.35rem;

    font-weight: 650;
}


#status-description {
    margin-top: 4px;

    color: #ddd;
}


.metrics {
    display: grid;

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

    gap: 16px;

    margin-top: 28px;
}


.metric {
    padding: 18px;

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

    border-radius: 16px;
}


.metric-label {
    margin-bottom: 8px;

    color: #888;

    font-size: .85rem;
}


.metric-value {
    font-size: 1.15rem;

    font-weight: 600;
}


.actions {
    margin-top: 28px;
}


.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 12px 20px;

    border: 0;

    border-radius: 10px;

    background: var(--plex);

    color: #111;

    font-size: .95rem;

    font-weight: 750;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .18s ease,
        transform .18s ease;
}


.button:hover {
    background: #f4ae10;

    transform:
        translateY(-1px);
}


.button.secondary {
    background:
        rgba(255, 255, 255, .14);

    color: white;

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


.button.secondary:hover {
    background:
        rgba(255, 255, 255, .24);
}


/* ========================================================
   SECTIONS
   ======================================================== */

.discovery-section,
.requests-section {
    margin-top: 58px;
}


.section-heading {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap: 20px;

    margin-bottom: 22px;
}


.section-heading h2 {
    margin: 0;

    font-size: 1.9rem;
}


.section-heading p {
    margin:
        7px 0 0;

    color: var(--muted);
}


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

.discovery-hero {
    position: relative;

    min-height: 500px;

    overflow: hidden;

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

    border-radius: 24px;

    background: #151515;

    background-size: cover;

    background-position: center;

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

    transition:
        background-image .35s ease,
        box-shadow .35s ease;
}


.discovery-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 5, 5, .96) 0%,
            rgba(5, 5, 5, .80) 35%,
            rgba(5, 5, 5, .25) 70%,
            rgba(5, 5, 5, .08) 100%
        );
}


.discovery-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            #090909 0%,
            transparent 32%
        );
}


.discovery-hero.trailer-mode::before,
.discovery-hero.trailer-mode::after {
    opacity: 0;

    pointer-events: none;
}


.hero-content {
    position: relative;

    z-index: 2;

    width:
        min(
            600px,
            86%
        );

    min-height: 500px;

    padding: 70px 55px;

    display: flex;

    flex-direction: column;

    justify-content: center;

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


.discovery-hero.trailer-mode
.hero-content {
    opacity: 0;

    transform:
        translateY(10px);

    pointer-events: none;
}


.hero-type {
    color: var(--plex);

    font-size: .78rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .12em;
}


.hero-title {
    margin:
        10px 0 12px;

    font-size:
        clamp(
            2.4rem,
            5vw,
            4.6rem
        );

    line-height: .98;
}


.hero-meta {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color: #ddd;
}


.hero-status {
    display: inline-flex;

    align-items: center;

    width: fit-content;

    padding: 7px 11px;

    border-radius: 999px;

    font-size: .72rem;

    font-weight: 750;
}


.hero-status.available {
    background:
        rgba(31, 160, 95, .9);
}


.hero-status.processing {
    background:
        rgba(229, 160, 13, .92);

    color: #111;
}


.hero-status.partial {
    background:
        rgba(108, 80, 195, .92);
}


.hero-status.pending {
    background:
        rgba(55, 116, 190, .92);
}


.hero-status.discover {
    background:
        rgba(255, 255, 255, .14);
}


.hero-overview {
    margin:
        18px 0 24px;

    max-width: 580px;

    color: #ddd;

    font-size: 1rem;

    line-height: 1.65;

    display:
        -webkit-box;

    -webkit-line-clamp: 5;

    -webkit-box-orient:
        vertical;

    overflow: hidden;
}


.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


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

.hero-trailer {
    position: absolute;

    z-index: 20;

    inset: 0;

    overflow: hidden;

    background: #000;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .32s ease;
}


.hero-trailer.active {
    opacity: 1;

    pointer-events: auto;
}


/*
 * Les dimensions exactes de l'iframe sont calculées
 * par JavaScript afin d'obtenir un véritable comportement
 * "cover" avec une vidéo YouTube 16:9.
 */

.hero-trailer iframe {
    position: absolute;

    top: 50%;
    left: 50%;

    border: 0;

    background: #000;

    transform:
        translate(-50%, -50%);

    max-width: none;

    max-height: none;
}


.trailer-close {
    position: absolute;

    z-index: 30;

    top: 18px;
    right: 18px;

    padding:
        9px 14px;

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

    border-radius: 999px;

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

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

    font-size: .78rem;

    font-weight: 650;

    cursor: pointer;

    opacity: .72;

    backdrop-filter:
        blur(12px);

    transition:
        opacity .18s ease,
        background .18s ease,
        color .18s ease;
}


.trailer-close:hover {
    opacity: 1;

    background:
        rgba(5, 5, 5, .88);

    color: white;
}


/* ========================================================
   CARROUSEL
   ======================================================== */

.trending-wrapper {
    position: relative;
}


.trending-strip {
    display: flex;

    gap: 14px;

    margin-top: 20px;

    padding:
        0 4px 12px;

    overflow-x: auto;

    scroll-behavior:
        smooth;

    scroll-snap-type:
        x proximity;

    scrollbar-width: none;
}


.trending-strip::-webkit-scrollbar {
    display: none;
}


.trend-card {
    position: relative;

    flex:
        0 0 160px;

    aspect-ratio: 2 / 3;

    overflow: hidden;

    border:
        2px solid transparent;

    border-radius: 14px;

    background: #181818;

    cursor: pointer;

    scroll-snap-align: start;

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


.trend-card:hover {
    transform:
        translateY(-5px);
}


.trend-card.active {
    border-color: var(--plex);
}


.trend-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.trend-overlay {
    position: absolute;

    inset:
        auto 0 0 0;

    padding:
        45px 10px 10px;

    background:
        linear-gradient(
            transparent,
            rgba(0, 0, 0, .95)
        );
}


.trend-title {
    font-size: .83rem;

    font-weight: 700;

    line-height: 1.25;
}


.trend-status {
    margin-top: 5px;

    color: #aaa;

    font-size: .68rem;
}


.carousel-button {
    position: absolute;

    z-index: 10;

    top: 50%;

    width: 44px;
    height: 74px;

    transform:
        translateY(-50%);

    border: 0;

    border-radius: 12px;

    background:
        rgba(0, 0, 0, .72);

    color: white;

    font-size: 2.4rem;

    cursor: pointer;

    opacity: .75;

    transition:
        opacity .15s ease,
        background .15s ease;
}


.carousel-button:hover {
    opacity: 1;

    background:
        rgba(0, 0, 0, .92);
}


.carousel-button.previous {
    left: 5px;
}


.carousel-button.next {
    right: 5px;
}


/* ========================================================
   DERNIÈRES DEMANDES
   ======================================================== */

.requests-grid {
    display: grid;

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

    gap: 18px;
}


.request-card {
    overflow: hidden;

    background: #181818;

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

    border-radius: 16px;

    transition:
        transform .2s ease;
}


.request-card:hover {
    transform:
        translateY(-5px);
}


.poster-wrap {
    position: relative;

    aspect-ratio: 2 / 3;

    overflow: hidden;

    background: #202020;
}


.poster {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.media-pill {
    position: absolute;

    top: 10px;
    left: 10px;

    padding: 6px 9px;

    border-radius: 999px;

    background:
        rgba(0, 0, 0, .75);

    font-size: .68rem;

    font-weight: 700;
}


.request-status {
    position: absolute;

    right: 10px;
    bottom: 10px;

    max-width:
        calc(100% - 20px);

    padding: 7px 10px;

    border-radius: 999px;

    font-size: .68rem;

    font-weight: 750;

    text-align: center;
}


.request-status.available {
    background: #1d9d5c;
}


.request-status.processing {
    background: var(--plex);

    color: #111;
}


.request-status.partial {
    background: #674fc3;
}


.request-status.pending,
.request-status.approved {
    background: #3673be;
}


.request-content {
    padding: 14px;
}


.request-title {
    min-height: 44px;

    font-weight: 700;

    line-height: 1.3;
}


.request-year {
    margin-top: 5px;

    color: #aaa;

    font-size: .82rem;
}


.request-requester,
.request-date {
    margin-top: 7px;

    color: #737373;

    font-size: .75rem;
}


.requests-message {
    width: 100%;

    padding: 35px;

    border-radius: 16px;

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

    color: #aaa;

    text-align: center;
}


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

@media (max-width: 1000px) {

    .requests-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 700px) {

    .metrics {
        grid-template-columns: 1fr;
    }


    .status-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .hero-content {
        padding:
            50px 28px;
    }


    .discovery-hero::before {
        background:
            rgba(5, 5, 5, .70);
    }


    .requests-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .carousel-button {
        display: none;
    }


    .trailer-close {
        top: 12px;
        right: 12px;

        padding:
            8px 12px;
    }


    body.trailer-active header,
    body.trailer-active .page-intro,
    body.trailer-active .card,
    body.trailer-active .discovery-section > .section-heading,
    body.trailer-active .trending-wrapper,
    body.trailer-active .requests-section {
        filter:
            brightness(.42)
            saturate(.7);

        opacity: .76;
    }

}


/* ========================================================
   MOBILE UX V2
   ======================================================== */

@media (max-width: 700px) {

    /*
     * Page plus large sur petit écran.
     */

    main {
        width: 100%;

        margin:
            24px auto
            70px;
    }


    .page-intro,
    .card,
    .discovery-section > .section-heading,
    .requests-section > .section-heading {
        margin-left: 16px;
        margin-right: 16px;
    }


    .discovery-section,
    .requests-section {
        margin-top: 42px;
    }


    /*
     * HERO
     *
     * Plus compact et davantage pensé
     * comme une fiche mobile.
     */

    .discovery-stage {
        margin: 0 8px;
    }


    .discovery-hero {
        min-height: 440px;

        border-radius: 20px;

        background-position:
            center top;
    }


    .discovery-hero::before {
        background:
            linear-gradient(
                0deg,
                rgba(5, 5, 5, .98) 0%,
                rgba(5, 5, 5, .90) 38%,
                rgba(5, 5, 5, .38) 70%,
                rgba(5, 5, 5, .15) 100%
            );
    }


    .discovery-hero::after {
        background:
            linear-gradient(
                0deg,
                #090909 0%,
                transparent 22%
            );
    }


    .hero-content {
        width: 100%;

        min-height: 440px;

        padding:
            150px
            26px
            26px;

        justify-content:
            flex-end;
    }


    .hero-title {
        margin:
            7px 0
            9px;

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

        line-height: 1;
    }


    .hero-meta {
        margin-bottom: 12px;

        gap: 8px;

        font-size: .9rem;
    }


    .hero-status {
        padding:
            6px 10px;

        font-size: .68rem;
    }


    .hero-overview {
        margin:
            14px 0
            18px;

        max-width: 100%;

        font-size: .91rem;

        line-height: 1.5;

        -webkit-line-clamp: 3;
    }


    /*
     * Actions sur une seule ligne si possible.
     */

    .hero-actions {
        flex-wrap: nowrap;

        align-items: center;

        gap: 8px;

        overflow-x: auto;

        scrollbar-width: none;
    }


    .hero-actions::-webkit-scrollbar {
        display: none;
    }


    .hero-actions .button {
        flex: 0 0 auto;

        min-height: 42px;

        padding:
            10px 14px;

        font-size: .86rem;

        white-space: nowrap;
    }


    /*
     * CARROUSEL À DÉCOUVRIR
     *
     * Cartes plus étroites afin de montrer
     * visuellement qu'il y a du contenu à swiper.
     */

    .trending-wrapper {
        overflow: visible;
    }


    .trending-strip {
        gap: 10px;

        margin-top: 16px;

        padding:
            0 16px
            12px;

        scroll-padding-left: 16px;

        scroll-snap-type:
            x mandatory;
    }


    .trend-card {
        flex:
            0 0
            min(
                128px,
                35vw
            );

        border-radius: 13px;

        scroll-snap-align: start;
    }


    .trend-title {
        font-size: .76rem;
    }


    .trend-status {
        font-size: .64rem;
    }


    /*
     * DERNIÈRES DEMANDES
     *
     * La grille devient un véritable carrousel
     * horizontal tactile.
     */

    .requests-grid {
        display: flex;

        gap: 12px;

        overflow-x: auto;

        padding:
            0 16px
            14px;

        scroll-padding-left: 16px;

        scroll-snap-type:
            x mandatory;

        scrollbar-width: none;
    }


    .requests-grid::-webkit-scrollbar {
        display: none;
    }


    .request-card {
        flex:
            0 0
            min(
                155px,
                43vw
            );

        scroll-snap-align: start;

        border-radius: 14px;
    }


    .request-card:hover {
        transform: none;
    }


    .request-content {
        padding: 12px;
    }


    .request-title {
        min-height: 38px;

        font-size: .88rem;
    }


    .request-year {
        font-size: .76rem;
    }


    .request-requester,
    .request-date {
        font-size: .68rem;
    }


    .media-pill,
    .request-status {
        font-size: .62rem;
    }

}


/* ========================================================
   MOBILE HERO BACKDROP — meilleure lisibilité
   ======================================================== */

@media (max-width: 700px) {

    .discovery-hero {
        background-size: cover;

        background-position:
            center 22%;
    }


    .discovery-hero::before {
        background:
            linear-gradient(
                0deg,
                rgba(5, 5, 5, .98) 0%,
                rgba(5, 5, 5, .88) 34%,
                rgba(5, 5, 5, .20) 67%,
                rgba(5, 5, 5, .06) 100%
            );
    }


    .hero-content {
        padding-top: 165px;
    }

}


/* ========================================================
   MOBILE HERO POSTER
   ======================================================== */

.hero-mobile-poster {
    display: none;
}


@media (max-width: 700px) {

    .hero-content {
        position: relative;

        padding-top: 190px;
    }


    .hero-mobile-poster {
        display: block;

        position: absolute;

        top: 24px;
        left: 28px;

        width: 86px;

        aspect-ratio: 2 / 3;

        object-fit: cover;

        border-radius: 11px;

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

        box-shadow:
            0 12px 30px
            rgba(0, 0, 0, .55);

        z-index: 2;
    }


    .hero-mobile-poster[hidden] {
        display: none !important;
    }

}


/* ========================================================
   MOBILE HERO POSTER — aligné avec les infos
   ======================================================== */

@media (max-width: 700px) {

    .hero-content {
        padding-top: 165px;
        padding-right: 128px;
    }


    .hero-mobile-poster {
        top: auto;
        left: auto;

        right: 24px;
        bottom: 118px;

        width: 88px;

        border-radius: 11px;
    }


    .hero-title,
    .hero-meta,
    .hero-status {
        max-width: 100%;
    }


    .hero-overview {
        margin-right: -104px;
    }


    .hero-actions {
        margin-right: -104px;
    }

}


/* ========================================================
   MOBILE HERO V3
   Backdrop complet + hauteur dynamique + synopsis complet
   ======================================================== */

@media (max-width: 700px) {

    /*
     * Le Hero n'impose plus une grande hauteur fixe.
     * Son contenu détermine naturellement sa hauteur.
     */

    .discovery-hero {
        min-height: 0;

        background-size:
            100% auto;

        background-position:
            center top;

        background-repeat:
            no-repeat;

        background-color:
            #090909;
    }


    /*
     * L'image reste visible dans sa totalité en largeur,
     * puis se fond progressivement dans le fond noir.
     */

    .discovery-hero::before {
        background:
            linear-gradient(
                180deg,
                rgba(5, 5, 5, .03) 0%,
                rgba(5, 5, 5, .08) 24%,
                rgba(5, 5, 5, .48) 47%,
                rgba(5, 5, 5, .88) 66%,
                rgba(5, 5, 5, .98) 82%,
                #090909 100%
            );
    }


    .discovery-hero::after {
        background:
            linear-gradient(
                0deg,
                #090909 0%,
                transparent 18%
            );
    }


    /*
     * Plus de min-height forcé.
     * On garde seulement suffisamment d'espace en haut
     * pour profiter du backdrop.
     */

    .hero-content {
        min-height: 0;

        padding:
            170px
            128px
            26px
            28px;

        justify-content:
            flex-start;
    }


    /*
     * Poster à droite de la zone titre.
     */

    .hero-mobile-poster {
        top: 174px;
        right: 24px;
        bottom: auto;

        width: 86px;
    }


    /*
     * Le synopsis reprend ensuite toute la largeur.
     */

    .hero-overview {
        margin-right: -100px;

        max-width: none;

        /*
         * Suppression du tronquage à 3 lignes.
         */

        display: block;

        overflow: visible;

        -webkit-line-clamp:
            unset;

        -webkit-box-orient:
            unset;

        line-clamp:
            unset;

        white-space: normal;

        text-overflow: unset;
    }


    /*
     * Les actions reprennent elles aussi
     * toute la largeur disponible.
     */

    .hero-actions {
        margin-right: -100px;
    }

}


/* ========================================================
   MOBILE DISCOVERY CAROUSEL — espace sous le Hero
   ======================================================== */

@media (max-width: 700px) {

    .trending-wrapper {
        padding-top: 14px;
    }


    .trending-strip {
        margin-top: 0;

        padding-top: 3px;
    }

}


/* ========================================================
   MOBILE DISCOVERY CAROUSEL — suppression du hover tactile
   ======================================================== */

@media (max-width: 700px) {

    /*
     * Sur mobile, :hover peut rester actif après un tap.
     * On empêche donc les cartes de remonter de 5px.
     */

    .trend-card:hover,
    .trend-card.active:hover {
        transform: none;
    }


    /*
     * Un peu d'espace interne supplémentaire permet
     * également de bien dégager la bordure supérieure.
     */

    .trending-strip {
        padding-top: 8px;
    }

}


/* ========================================================
   DISCOVERY CAROUSEL — espace pour le hover desktop
   ======================================================== */

.trending-strip {
    padding-top: 8px;
}


/* =========================================================
   RECOMMANDÉS PAR VOS AMIS
   ========================================================= */

.friends-recommendations-section {
    margin-top: 56px;
}


/*
 * Les cartes utilisent volontairement les composants
 * visuels de la section "Dernières demandes".
 */

.friend-recommendation-card {
    cursor: pointer;
}


.friend-recommendation-card
.poster-wrap {
    position: relative;
}


/* Badge SÉRIE / FILM */

.friend-recommendation-card
.media-pill {
    text-transform: uppercase;
}


/* Informations sociales */

.friend-recommendation-author {
    display: flex;

    align-items: flex-start;

    gap: 6px;

    margin-top: 9px;

    color: #858585;

    font-size: .75rem;

    line-height: 1.35;
}


.friend-recommendation-heart {
    flex: 0 0 auto;

    font-size: .78rem;

    line-height: 1.2;
}


.friend-recommendation-author-text {
    min-width: 0;
}


.friend-recommendation-author-label {
    color: #737373;
}


.friend-recommendation-author-name {
    color: #aaa;

    font-weight: 650;
}


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

@media (max-width: 700px) {

    .friends-recommendations-section {
        margin-top: 42px;
    }


    .friends-recommendations-section
    > .section-heading {
        margin-left: 16px;
        margin-right: 16px;
    }


    /*
     * requests-grid devient déjà un carrousel horizontal
     * tactile grâce aux règles existantes.
     */

    .friends-recommendations-grid {
        padding-bottom: 14px;
    }


    .friend-recommendation-author {
        font-size: .7rem;
    }

}


/* =========================================================
   TOP 10 STREAMING
   ========================================================= */

.streaming-top10-section {
    margin-top: 58px;
}


/* =========================================================
   PLATEFORMES
   ========================================================= */

.streaming-platform-tabs {
    display: flex;

    gap: 10px;

    margin-bottom: 14px;

    overflow-x: auto;

    scrollbar-width: none;
}


.streaming-platform-tabs::-webkit-scrollbar {
    display: none;
}


.streaming-platform-tab {
    flex: 0 0 auto;

    padding:
        9px 16px;

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

    border-radius: 999px;

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

    color:
        #aaa;

    font: inherit;

    font-size: .84rem;

    font-weight: 750;

    cursor: pointer;

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


.streaming-platform-tab.active {
    border-color:
        rgba(229, 9, 20, .75);

    background:
        rgba(229, 9, 20, .15);

    color:
        #fff;
}


/* =========================================================
   SÉRIES / FILMS
   ========================================================= */

.streaming-type-switch {
    display: inline-flex;

    padding: 3px;

    margin-bottom: 20px;

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

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .035);
}


.streaming-type-button {
    min-width: 86px;

    padding:
        7px 14px;

    border: 0;

    border-radius: 999px;

    background:
        transparent;

    color:
        #888;

    font: inherit;

    font-size: .78rem;

    font-weight: 750;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease;
}


.streaming-type-button.active {
    background:
        rgba(255, 255, 255, .12);

    color:
        #fff;
}


/* =========================================================
   CARROUSEL
   ========================================================= */

.streaming-top10-wrapper {
    position: relative;
}


.streaming-top10-strip {
    display: flex;

    gap: 18px;

    padding:
        10px 6px
        20px;

    overflow-x: auto;

    scroll-behavior:
        smooth;

    scroll-snap-type:
        x proximity;

    scrollbar-width:
        none;
}


.streaming-top10-strip::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   ITEM TOP 10
   ========================================================= */

.streaming-top10-item {
    position: relative;

    flex:
        0 0 214px;

    min-width:
        214px;

    height:
        268px;

    cursor: pointer;

    scroll-snap-align:
        start;

    transition:
        transform .18s ease;
}


.streaming-top10-item:hover {
    transform:
        translateY(-5px);
}


/*
 * Le numéro est volontairement indépendant
 * du poster et passe derrière lui.
 */

.streaming-top10-rank {
    position: absolute;

    z-index: 1;

    left: 0;
    bottom: 16px;

    width: 92px;

    color:
        #090909;

    font-size:
        11.5rem;

    font-weight:
        950;

    line-height:
        .72;

    letter-spacing:
        -.11em;

    text-align:
        right;

    -webkit-text-stroke:
        3px
        rgba(255, 255, 255, .78);

    text-shadow:
        0 8px 25px
        rgba(0, 0, 0, .8);

    user-select:
        none;

    pointer-events:
        none;
}


/* 10 nécessite davantage de largeur */

.streaming-top10-rank.double {
    left: -11px;

    width: 118px;

    font-size:
        9.3rem;

    letter-spacing:
        -.18em;
}


/* =========================================================
   POSTER
   ========================================================= */

.streaming-top10-poster-wrap {
    position: absolute;

    z-index: 2;

    top: 0;
    right: 0;

    width: 154px;

    aspect-ratio:
        2 / 3;

    overflow: hidden;

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

    border-radius:
        14px;

    background:
        #181818;

    box-shadow:
        0 14px 30px
        rgba(0, 0, 0, .38);
}


.streaming-top10-poster {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   STATUT PLEX
   ========================================================= */

.streaming-top10-status {
    position: absolute;

    z-index: 3;

    right: 7px;
    bottom: 7px;

    max-width:
        calc(100% - 14px);

    padding:
        5px 7px;

    border-radius:
        999px;

    background:
        rgba(0, 0, 0, .78);

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

    font-size:
        .59rem;

    font-weight:
        700;

    white-space:
        nowrap;

    backdrop-filter:
        blur(7px);
}


.streaming-top10-status.available {
    color:
        #7ce0aa;
}


.streaming-top10-status.processing {
    color:
        #efb63c;
}


.streaming-top10-status.partial {
    color:
        #baa9ff;
}


.streaming-top10-status.pending {
    color:
        #8ab9f5;
}


/* =========================================================
   TITRE
   ========================================================= */

.streaming-top10-title {
    position: absolute;

    z-index: 4;

    left: 62px;
    right: 0;
    bottom: 0;

    overflow: hidden;

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

    font-size:
        .72rem;

    font-weight:
        700;

    line-height:
        1.25;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


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

@media (max-width: 700px) {

    .streaming-top10-section {
        margin-top: 42px;
    }


    .streaming-top10-section
    > .section-heading {
        margin-left: 16px;
        margin-right: 16px;
    }


    .streaming-platform-tabs,
    .streaming-type-switch {
        margin-left: 16px;
    }


    .streaming-platform-tabs {
        margin-right: 16px;
    }


    .streaming-top10-strip {
        gap: 12px;

        padding:
            8px 16px
            16px;

        scroll-padding-left:
            16px;

        scroll-snap-type:
            x mandatory;
    }


    .streaming-top10-item {
        flex:
            0 0 174px;

        min-width:
            174px;

        height:
            224px;
    }


    .streaming-top10-item:hover {
        transform: none;
    }


    .streaming-top10-rank {
        bottom: 15px;

        width: 72px;

        font-size:
            9rem;

        -webkit-text-stroke:
            2.5px
            rgba(255, 255, 255, .76);
    }


    .streaming-top10-rank.double {
        left: -8px;

        width: 91px;

        font-size:
            7.2rem;
    }


    .streaming-top10-poster-wrap {
        width: 126px;

        border-radius: 12px;
    }


    .streaming-top10-title {
        left: 48px;

        font-size:
            .64rem;
    }


    .streaming-top10-status {
        font-size: .52rem;
    }


    .streaming-top10-wrapper
    .carousel-button {
        display: none;
    }

}


/* =========================================================
   TOP 10 STREAMING — AJUSTEMENTS VISUELS
   ========================================================= */

/* Onglet plateforme avec logo */
.streaming-platform-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    min-width: 92px;
}

.streaming-platform-logo {
    display: block;
    height: 18px;
    width: auto;
}





/* Logo Netflix officiel */

.streaming-platform-logo {
    height: 20px;
    width: auto;
    display: block;
}

@media (max-width: 700px) {

    .streaming-platform-logo {
        height: 18px;
    }

}


/* =========================================================
   TOP 10 — CLASSEMENT DÉFINITIF
   ========================================================= */

.streaming-top10-item {
    position: relative;
    overflow: visible;
}


.streaming-top10-rank {
    display: block !important;

    position: absolute !important;

    left: -18px !important;
    top: 46% !important;
    bottom: auto !important;

    width: 112px !important;

    transform:
        translateY(-50%) !important;

    z-index: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;

    color: #090909 !important;

    font-size: 11.5rem !important;
    font-weight: 950 !important;

    line-height: .72 !important;

    letter-spacing: -.11em !important;

    text-align: center !important;

    -webkit-text-stroke:
        3px
        rgba(255, 255, 255, .78) !important;

    text-shadow:
        0 8px 25px
        rgba(0, 0, 0, .8) !important;

    user-select: none;
    pointer-events: none;
}


.streaming-top10-rank.double {
    left: -28px !important;

    width: 132px !important;

    font-size: 9.3rem !important;

    letter-spacing: -.18em !important;
}


.streaming-top10-poster-wrap {
    z-index: 2;
}


@media (max-width: 700px) {

    .streaming-top10-rank {
        left: -14px !important;
        top: 45% !important;

        width: 88px !important;

        font-size: 9rem !important;

        -webkit-text-stroke:
            2.5px
            rgba(255, 255, 255, .76) !important;
    }


    .streaming-top10-rank.double {
        left: -20px !important;

        width: 104px !important;

        font-size: 7.2rem !important;
    }

}


/* =========================================================
   TOP 10 — RANG 9 SANS MÉTADONNÉES + RANG 10
   ========================================================= */

.streaming-top10-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: 16px;

    background:
        linear-gradient(
            145deg,
            #222,
            #111
        );

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

    text-align: center;

    font-size: .72rem;
    font-weight: 700;

    line-height: 1.35;
}


/*
 * Uniquement le rang 10 :
 * plus de largeur pour les deux chiffres.
 */

.streaming-top10-rank.double {
    left: -36px !important;

    width: 148px !important;

    font-size: 8.8rem !important;

    letter-spacing: -.18em !important;
}


@media (max-width: 700px) {

    .streaming-top10-rank.double {
        left: -27px !important;

        width: 112px !important;

        font-size: 6.9rem !important;
    }

}


/* =========================================================
   TOP 10 — PRIME VIDEO
   ========================================================= */

.streaming-platform-logo-prime {
    height: 24px;
    width: auto;
    max-width: 118px;
}

@media (max-width: 700px) {

    .streaming-platform-logo-prime {
        height: 21px;
        max-width: 100px;
    }

}


/* =========================================================
   TOP 10 — COULEUR ACTIVE PAR PLATEFORME
   ========================================================= */

.streaming-platform-tab {
    border: 1px solid rgba(255, 255, 255, .10);
}


.streaming-platform-tab.active[data-provider="netflix"] {
    border-color: #e50914;

    box-shadow:
        0 0 0 1px rgba(229, 9, 20, .14) inset,
        0 0 18px rgba(229, 9, 20, .14);
}


.streaming-platform-tab.active[data-provider="prime"] {
    border-color: #00a8e1;

    box-shadow:
        0 0 0 1px rgba(0, 168, 225, .14) inset,
        0 0 18px rgba(0, 168, 225, .14);
}



/* =========================================================
   RECOMMANDÉS PAR VOS AMIS — CARROUSEL
   ========================================================= */

.friends-recommendations-carousel {
    position: relative;
}


/*
 * On ne réutilise plus requests-grid :
 * la section amis est maintenant un vrai ruban horizontal
 * sur desktop comme sur mobile.
 */

.friends-recommendations-grid {
    display: flex;

    gap: 18px;

    padding:
        8px 6px 18px;

    overflow-x: auto;
    overflow-y: visible;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;

    scrollbar-width: none;
}


.friends-recommendations-grid::-webkit-scrollbar {
    display: none;
}


/*
 * Dimensions proches des cartes de Dernières demandes,
 * mais sans chercher à remplir toute la largeur.
 */

.friends-recommendations-grid
.friend-recommendation-card {
    flex:
        0 0
        calc(
            (100% - 72px)
            / 5
        );

    min-width: 0;

    scroll-snap-align: start;
}


/*
 * Les boutons sont au-dessus des cartes,
 * comme sur les autres carrousels du portail.
 */

.friends-recommendations-button {
    z-index: 8;
}


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

@media (max-width: 1050px) {

    .friends-recommendations-grid
    .friend-recommendation-card {
        flex:
            0 0
            calc(
                (100% - 54px)
                / 4
            );
    }

}


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

@media (max-width: 700px) {

    .friends-recommendations-grid {
        gap: 12px;

        padding:
            6px 16px 14px;
    }


    .friends-recommendations-grid
    .friend-recommendation-card {
        flex:
            0 0
            min(
                155px,
                calc(
                    46vw - 8px
                )
            );

        min-width:
            min(
                155px,
                calc(
                    46vw - 8px
                )
            );
    }


    /*
     * Sur mobile, le swipe natif suffit.
     */

    .friends-recommendations-button {
        display: none;
    }

}


/* =========================================================
   CAROUSELS — FLÈCHES STYLE PRIME VIDEO
   ========================================================= */

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    z-index: 12;

    width: 54px;
    height: 120px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 0;

    background: transparent;
    box-shadow: none;

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

    font-size: 4rem;
    font-weight: 300;
    line-height: 1;
    text-align: center;

    cursor: pointer;
    user-select: none;

    opacity: .72;

    transition:
        opacity .18s ease,
        transform .18s ease,
        color .18s ease;
}


/*
 * Zone visuelle discrète derrière le chevron,
 * proche de l'esprit Prime Video.
 */

.carousel-button::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;
    opacity: .55;

    transition:
        opacity .18s ease;
}


.carousel-button.previous {
    left: 0;
}

.carousel-button.previous::before {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .42) 0%,
            rgba(0, 0, 0, .16) 38%,
            rgba(0, 0, 0, 0) 100%
        );
}


.carousel-button.next {
    right: 0;
}

.carousel-button.next::before {
    background:
        linear-gradient(
            270deg,
            rgba(0, 0, 0, .42) 0%,
            rgba(0, 0, 0, .16) 38%,
            rgba(0, 0, 0, 0) 100%
        );
}


.carousel-button:hover {
    opacity: 1;
    color: rgba(255, 255, 255, 1);

    transform:
        translateY(-50%)
        scale(1.04);
}


.carousel-button:hover::before {
    opacity: .78;
}


.carousel-button:focus-visible {
    outline: none;

    opacity: 1;
    color: #ffffff;

    text-shadow:
        0 0 10px rgba(255, 255, 255, .22);
}


.carousel-button:disabled {
    opacity: .16;
    pointer-events: none;
}


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

@media (max-width: 700px) {

    .carousel-button {
        width: 42px;
        height: 92px;

        font-size: 3rem;

        opacity: .62;
    }

}


/* =========================================================
   CAROUSELS — CHEVRONS SANS FOND
   ========================================================= */

.carousel-button::before {
    display: none !important;
}


.carousel-button {
    background: transparent !important;
    box-shadow: none !important;

    opacity: .72;

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.carousel-button:hover {
    background: transparent !important;
    box-shadow: none !important;

    opacity: 1;

    transform:
        translateY(-50%)
        scale(1.18);
}


.carousel-button:focus,
.carousel-button:focus-visible,
.carousel-button:active {
    background: transparent !important;
    box-shadow: none !important;
}



/* =========================================================
   CAROUSELS — RESPECT DE L'ÉTAT HIDDEN
   ========================================================= */

.carousel-button[hidden] {
    display: none !important;
}



/* =========================================================
   CAROUSELS — VISIBILITÉ DES CHEVRONS
   ========================================================= */

.carousel-button.carousel-arrow-hidden {
    display: none !important;
}



/* =========================================================
   TOP 10 — FICHE MÉDIA FLOTTANTE STYLE PRIME VIDEO
   ========================================================= */

.streaming-media-preview {
    position: fixed;

    z-index: 1000;

    width:
        min(
            390px,
            calc(100vw - 32px)
        );

    overflow: hidden;

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

    border-radius: 16px;

    background:
        #101010;

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        scale(.92)
        translateY(6px);

    transform-origin:
        center center;

    transition:
        opacity .20s ease,
        transform .20s ease,
        visibility .20s ease;
}


.streaming-media-preview.visible {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        scale(1)
        translateY(0);
}


/* =========================================================
   VISUEL
   ========================================================= */

.streaming-preview-visual {
    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 9;

    background:
        #181818;

    background-size:
        cover;

    background-position:
        center;
}


.streaming-preview-visual-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            #101010 0%,
            rgba(16, 16, 16, .35) 36%,
            transparent 66%
        );
}


/* =========================================================
   CONTENU
   ========================================================= */

.streaming-preview-content {
    padding:
        16px 18px 18px;
}


.streaming-preview-title {
    color: #fff;

    font-size:
        1.25rem;

    font-weight:
        800;

    line-height:
        1.15;
}


.streaming-preview-meta {
    margin-top: 7px;

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

    font-size:
        .76rem;

    font-weight:
        650;
}


.streaming-preview-status {
    display: inline-flex;

    width: fit-content;

    margin-top: 10px;

    padding:
        5px 8px;

    border-radius:
        999px;

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

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

    font-size:
        .68rem;

    font-weight:
        750;
}


.streaming-preview-status.available {
    color: #78e2aa;

    background:
        rgba(31, 160, 95, .16);
}


.streaming-preview-status.processing {
    color: #efb63c;

    background:
        rgba(229, 160, 13, .16);
}


.streaming-preview-status.partial {
    color: #baa9ff;

    background:
        rgba(108, 80, 195, .18);
}


.streaming-preview-status.pending {
    color: #8ab9f5;

    background:
        rgba(55, 116, 190, .18);
}


.streaming-preview-overview {
    margin-top: 12px;

    overflow: hidden;

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

    font-size:
        .82rem;

    line-height:
        1.45;

    display:
        -webkit-box;

    -webkit-line-clamp:
        3;

    -webkit-box-orient:
        vertical;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.streaming-preview-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 14px;
}


.streaming-preview-action {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding:
        8px 12px;

    border-radius:
        9px;

    text-decoration: none;

    font-size:
        .76rem;

    font-weight:
        750;

    transition:
        transform .16s ease,
        background .16s ease;
}


.streaming-preview-action:hover {
    transform:
        translateY(-1px);
}


.streaming-preview-action.primary {
    background:
        var(--plex);

    color: #111;
}


.streaming-preview-action.secondary {
    border:
        1px solid
        rgba(255, 255, 255, .12);

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

    color: #fff;
}


.streaming-preview-action.secondary:hover {
    background:
        rgba(255, 255, 255, .17);
}


/* =========================================================
   CHARGEMENT
   ========================================================= */

.streaming-preview-loading {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 180px;

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

    font-size:
        .82rem;
}


/* =========================================================
   TOP 10 — EFFET SUR LA CARTE SOURCE
   ========================================================= */

@media (min-width: 701px) {

    .streaming-top10-item:hover {
        z-index: 20;

        transform:
            translateY(-5px)
            scale(1.035);
    }

}


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

@media (max-width: 700px) {

    .streaming-media-preview {
        width:
            calc(100vw - 24px);

        max-height:
            calc(100vh - 24px);

        overflow-y: auto;

        border-radius:
            14px;
    }


    .streaming-preview-content {
        padding:
            14px 15px 16px;
    }


    .streaming-preview-title {
        font-size:
            1.1rem;
    }


    .streaming-preview-overview {
        -webkit-line-clamp:
            4;
    }

}


/* =========================================================
   TOP 10 — MINI HERO INTÉGRÉ V2
   ========================================================= */

/*
 * L'item reste dans le flex.
 * Sa largeur évolue : les voisins sont donc réellement
 * déplacés et jamais recouverts.
 */

.streaming-top10-item {
    transition:
        flex-basis .28s cubic-bezier(.2,.8,.2,1),
        min-width .28s cubic-bezier(.2,.8,.2,1),
        transform .20s ease;
}


.streaming-top10-item.is-expanded {
    flex-basis: 520px;

    min-width: 520px;

    z-index: 20;

    transform: none !important;
}


/* =========================================================
   DISPARITION DU POSTER D'ORIGINE
   ========================================================= */

.streaming-top10-rank,
.streaming-top10-poster-wrap,
.streaming-top10-title {
    transition:
        opacity .16s ease,
        transform .22s ease;
}


.streaming-top10-item.is-expanded
.streaming-top10-rank {
    opacity: 0 !important;

    transform:
        translateY(-50%)
        scale(.88) !important;

    pointer-events: none;
}


.streaming-top10-item.is-expanded
.streaming-top10-poster-wrap {
    opacity: 0;

    transform:
        scale(.92);

    pointer-events: none;
}


.streaming-top10-item.is-expanded
.streaming-top10-title {
    opacity: 0;

    pointer-events: none;
}


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

.streaming-top10-minihero {
    position: absolute;

    inset: 0;

    z-index: 10;

    overflow: hidden;

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

    border-radius: 16px;

    background:
        #101010;

    box-shadow:
        0 18px 42px
        rgba(0,0,0,.48);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        scale(.97);

    transform-origin:
        center;

    transition:
        opacity .20s ease,
        transform .28s cubic-bezier(.2,.8,.2,1),
        visibility .20s ease;
}


.streaming-top10-item.is-expanded
.streaming-top10-minihero {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        scale(1);
}


/* =========================================================
   BACKDROP
   ========================================================= */

.streaming-minihero-backdrop {
    position: absolute;

    inset: 0;

    background:
        #181818;

    background-size:
        cover;

    background-position:
        center;
}


/*
 * On assombrit principalement le bas et la gauche,
 * dans le même esprit que le Hero principal.
 */

.streaming-minihero-gradient {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.96) 0%,
            rgba(5,5,5,.80) 35%,
            rgba(5,5,5,.28) 68%,
            rgba(5,5,5,.08) 100%
        ),
        linear-gradient(
            0deg,
            rgba(5,5,5,.92) 0%,
            rgba(5,5,5,.25) 55%,
            transparent 100%
        );
}


/* =========================================================
   CONTENU
   ========================================================= */

.streaming-minihero-content {
    position: absolute;

    z-index: 2;

    left: 22px;
    right: 22px;
    bottom: 18px;

    max-width: 66%;
}


.streaming-minihero-title {
    overflow: hidden;

    color: #fff;

    font-size: 1.45rem;

    font-weight: 850;

    line-height: 1.08;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-shadow:
        0 2px 14px
        rgba(0,0,0,.72);
}


/* =========================================================
   ACTIONS
   ========================================================= */

.streaming-minihero-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 7px;

    margin-top: 10px;
}


.streaming-minihero-action {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 34px;

    padding:
        7px 11px;

    border-radius: 8px;

    text-decoration: none;

    font-size: .72rem;

    font-weight: 800;

    transition:
        transform .15s ease,
        background .15s ease;
}


.streaming-minihero-action:hover {
    transform:
        scale(1.035);
}


.streaming-minihero-action.primary {
    background:
        var(--plex);

    color: #111;
}


.streaming-minihero-action.secondary {
    border:
        1px solid
        rgba(255,255,255,.16);

    background:
        rgba(28,28,28,.80);

    color: #fff;

    backdrop-filter:
        blur(8px);
}


.streaming-minihero-action.secondary:hover {
    background:
        rgba(55,55,55,.88);
}


/* =========================================================
   STATUT
   ========================================================= */

.streaming-minihero-status {
    display: inline-flex;

    width: fit-content;

    margin-top: 9px;

    padding:
        4px 7px;

    border-radius: 999px;

    background:
        rgba(0,0,0,.58);

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

    font-size:
        .62rem;

    font-weight:
        800;

    backdrop-filter:
        blur(7px);
}


.streaming-minihero-status.available {
    color: #76e1a8;
}


.streaming-minihero-status.processing {
    color: #efb63c;
}


.streaming-minihero-status.partial {
    color: #baa9ff;
}


.streaming-minihero-status.pending {
    color: #8ab9f5;
}


/* =========================================================
   META + SYNOPSIS
   ========================================================= */

.streaming-minihero-meta {
    margin-top: 7px;

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

    font-size:
        .66rem;

    font-weight:
        700;
}


.streaming-minihero-overview {
    margin-top: 8px;

    overflow: hidden;

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

    font-size:
        .69rem;

    font-weight:
        500;

    line-height: 1.35;

    display:
        -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient:
        vertical;
}


/* =========================================================
   CHARGEMENT
   ========================================================= */

.streaming-minihero-loading {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        #151515;

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

    font-size:
        .75rem;
}


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

@media (
    min-width: 701px
)
and (
    max-width: 1050px
) {

    .streaming-top10-item.is-expanded {
        flex-basis: 450px;

        min-width: 450px;
    }

}


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

@media (max-width: 700px) {

    .streaming-top10-item.is-expanded {
        flex-basis:
            min(
                86vw,
                390px
            );

        min-width:
            min(
                86vw,
                390px
            );
    }


    .streaming-minihero-content {
        left: 16px;
        right: 16px;
        bottom: 14px;

        max-width: 78%;
    }


    .streaming-minihero-title {
        font-size:
            1.08rem;
    }


    .streaming-minihero-overview {
        display: none;
    }


    .streaming-minihero-action {
        min-height: 32px;

        padding:
            6px 9px;

        font-size:
            .66rem;
    }

}


/* =========================================================
   V2 — neutraliser l'ancien petit hover de la carte
   ========================================================= */

.streaming-top10-item:hover {
    transform: none;
}



/* =========================================================
   TOP 10 — MINI HERO ANCRÉ SUR LE POSTER
   ========================================================= */

/*
 * Géométrie :
 *
 * Desktop :
 *   item normal    = 214 px
 *   poster         = 154 px
 *   décalage       = 60 px
 *
 * Le mini-Hero commence donc exactement là où commençait
 * le poster et grandit uniquement vers la droite.
 */

.streaming-top10-item {
    --streaming-minihero-offset: 60px;
    --streaming-minihero-width: 520px;
}


.streaming-top10-item.is-expanded {
    flex-basis:
        calc(
            var(--streaming-minihero-offset)
            + var(--streaming-minihero-width)
        );

    min-width:
        calc(
            var(--streaming-minihero-offset)
            + var(--streaming-minihero-width)
        );
}


.streaming-top10-minihero {
    inset: 0 auto 0
        var(--streaming-minihero-offset);

    width:
        var(--streaming-minihero-width);
}


/* Tablette */

@media (
    min-width: 701px
)
and (
    max-width: 1050px
) {

    .streaming-top10-item {
        --streaming-minihero-width: 450px;
    }

}


/* Mobile :
 * item 174 px - poster 126 px = 48 px
 */

@media (max-width: 700px) {

    .streaming-top10-item {
        --streaming-minihero-offset: 48px;

        --streaming-minihero-width:
            min(
                86vw,
                390px
            );
    }


    .streaming-top10-item.is-expanded {
        flex-basis:
            calc(
                var(--streaming-minihero-offset)
                + var(--streaming-minihero-width)
            );

        min-width:
            calc(
                var(--streaming-minihero-offset)
                + var(--streaming-minihero-width)
            );
    }

}


/* =========================================================
   TOP 10 — MINI HERO ANCRÉ SUR LE POSTER
   ========================================================= */

/*
 * Géométrie :
 *
 * Desktop :
 *   item normal    = 214 px
 *   poster         = 154 px
 *   décalage       = 60 px
 *
 * Le mini-Hero commence donc exactement là où commençait
 * le poster et grandit uniquement vers la droite.
 */

.streaming-top10-item {
    --streaming-minihero-offset: 60px;
    --streaming-minihero-width: 520px;
}


.streaming-top10-item.is-expanded {
    flex-basis:
        calc(
            var(--streaming-minihero-offset)
            + var(--streaming-minihero-width)
        );

    min-width:
        calc(
            var(--streaming-minihero-offset)
            + var(--streaming-minihero-width)
        );
}


.streaming-top10-minihero {
    inset: 0 auto 0
        var(--streaming-minihero-offset);

    width:
        var(--streaming-minihero-width);
}


/* Tablette */

@media (
    min-width: 701px
)
and (
    max-width: 1050px
) {

    .streaming-top10-item {
        --streaming-minihero-width: 450px;
    }

}


/* Mobile :
 * item 174 px - poster 126 px = 48 px
 */

@media (max-width: 700px) {

    .streaming-top10-item {
        --streaming-minihero-offset: 48px;

        --streaming-minihero-width:
            min(
                86vw,
                390px
            );
    }


    .streaming-top10-item.is-expanded {
        flex-basis:
            calc(
                var(--streaming-minihero-offset)
                + var(--streaming-minihero-width)
            );

        min-width:
            calc(
                var(--streaming-minihero-offset)
                + var(--streaming-minihero-width)
            );
    }

}


/* =========================================================
   TOP 10 — CONSERVER LE RANG PENDANT LE MINI-HERO
   ========================================================= */

.streaming-top10-item.is-expanded
.streaming-top10-rank {
    opacity: 1 !important;

    visibility: visible !important;

    /*
     * On conserve exactement la position normale
     * du chiffre.
     */
    transform:
        translateY(-50%) !important;

    /*
     * Le chiffre reste derrière le mini-Hero :
     * seule sa partie située à gauche reste visible.
     */
    z-index: 9 !important;
}


/*
 * Le mini-Hero reste devant le numéro.
 */
.streaming-top10-item.is-expanded
.streaming-top10-minihero {
    z-index: 10;
}



/* =========================================================
   TOP 10 MINI-HERO — BANDE-ANNONCE INTÉGRÉE
   ========================================================= */

.streaming-minihero-trailer {
    position: absolute;

    inset: 0;

    z-index: 30;

    overflow: hidden;

    background: #000;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .18s ease,
        visibility .18s ease;
}


.streaming-minihero-trailer.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.streaming-minihero-trailer-frame {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 101%;
    height: 101%;

    border: 0;

    transform:
        translate(
            -50%,
            -50%
        );

    background: #000;
}


.streaming-minihero-trailer-close {
    position: absolute;

    z-index: 4;

    top: 12px;
    left: 12px;

    min-height: 34px;

    padding:
        7px 11px;

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

    border-radius: 8px;

    background:
        rgba(0,0,0,.72);

    color: #fff;

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

    cursor: pointer;

    backdrop-filter:
        blur(8px);
}


.streaming-minihero-trailer-close:hover {
    background:
        rgba(25,25,25,.9);
}


/*
 * Pendant la vidéo, le contenu normal reste derrière.
 */
.streaming-top10-minihero.trailer-active
.streaming-minihero-content {
    opacity: 0;

    pointer-events: none;
}