/* =========================================================
   LAYOUT
   ========================================================= */

.rail-layout{

    display:flex;

    width:100%;

    background:#050505;

    border-top:
        1px solid rgba(120,220,255,.08);
}
/* ==========================================
   VIDEO DEJA VUE (>50%)
   ========================================== */

.rail-item.vu::before{

    content:"✓";

    position:absolute;

    top:12px;

    right:12px;

    width:54px;

    height:54px;

    border-radius:50%;

    background:#22a5e5;

    color:#fff;

    font-size:22px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:20;

    box-shadow:
        0 0 12px rgba(34,165,229,.45);
}
/* =========================================================
   FILTRES
   ========================================================= */

.rail-filtres{

    width:560px;

    flex-shrink:0;

    padding:24px;

    background:
        linear-gradient(
            to bottom,
            #081620,
            #050d14
        );

    border-right:
        1px solid rgba(120,220,255,.08);

    display:flex;

    flex-direction:column;

    gap:14px;
}

.filtre-titre{

    color:#22a5e5;

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:4px;
}

/* =========================================================
   PILLS
   ========================================================= */

.filtre-pills{

    display:flex;

    flex-wrap:wrap;

    gap:10px;
}

.filtre-pill{

    border:none;

    border-radius:999px;

    padding:
        10px
        16px;

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

    color:#dff7ff;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

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

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

    backdrop-filter:blur(10px);
}

.filtre-pill:hover{

    background:
        rgba(120,220,255,.16);

    border-color:
        rgba(120,220,255,.22);
}

.filtre-pill:active{

    transform:scale(.96);
}

.filtre-pill.active{

    background:
        linear-gradient(
            135deg,
            #58d7ff,
            #7ee6ff
        );

    color:#001018;

    border-color:transparent;

    box-shadow:
        0 0 20px rgba(90,220,255,.35);
}

/* =========================================================
   RAIL
   ========================================================= */

.rail-plongees{

    flex:1;

    display:flex;

    gap:16px;

    overflow-x:auto;

    overflow-y:hidden;

    padding:24px;

    box-sizing:border-box;

    scroll-behavior:smooth;

    scrollbar-width:thin;

    scrollbar-color:
        rgba(120,220,255,.25)
        transparent;
}

/* =========================================================
   SCROLLBAR WEBKIT
   ========================================================= */

.rail-plongees::-webkit-scrollbar{

    height:10px;
}

.rail-plongees::-webkit-scrollbar-track{

    background:transparent;
}

.rail-plongees::-webkit-scrollbar-thumb{

    background:
        rgba(120,220,255,.25);

    border-radius:999px;
}

/* =========================================================
   ITEM
   ========================================================= */

.rail-item{
    flex:0 0 auto;
    width:320px;
    position:relative;
    overflow:hidden;
    border-radius:16px;
    text-decoration:none;
    background:transparent;
    box-shadow:
        0 6px 18px rgba(0,0,0,.45);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.rail-item:hover{
    transform:scale(1.03);
    box-shadow:
        0 12px 28px rgba(0,0,0,.60);
}

/* =========================================================
   IMAGE
   ========================================================= */

.rail-item img{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:16px;
    transition:transform .35s ease;
}

.rail-item:hover img{
    transform:scale(1.05);
}

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

@media (max-width:900px){

    .rail-layout{

        flex-direction:column;
    }

    .rail-filtres{

        width:100%;

        border-right:none;

        border-bottom:
            1px solid rgba(120,220,255,.08);

        padding:18px;
    }

    .rail-plongees{

        gap:12px;

        padding:16px;
    }

    .rail-item{

        width:240px;

        border-radius:12px;
    }

    .filtre-pill{

        font-size:12px;

        padding:
            8px
            14px;
    }
}