/* =============================================
   SlideNet by salim3 v2.2
   NETFLIX exact behaviour
   - No arrows anywhere
   - Drag to scroll
   - Title left / Voir plus right
   ============================================= */

/* ── Dark mode ── */
body.sn-dark-mode,
body.sn-dark-mode header,
body.sn-dark-mode footer,
body.sn-dark-mode nav,
body.sn-dark-mode main,
body.sn-dark-mode article,
body.sn-dark-mode section,
body.sn-dark-mode aside,
body.sn-dark-mode .site-header,
body.sn-dark-mode .site-footer,
body.sn-dark-mode .entry-content,
body.sn-dark-mode .page-content {
    background-color: #141414 !important;
    color: #e5e5e5 !important;
}
body.sn-dark-mode { background: #141414 !important; }
body.sn-dark-mode h1,
body.sn-dark-mode h2,
body.sn-dark-mode h3,
body.sn-dark-mode h4,
body.sn-dark-mode p,
body.sn-dark-mode span,
body.sn-dark-mode li { color: #e5e5e5 !important; }
body.sn-dark-mode a { color: #e50914 !important; }
body.sn-dark-mode .slidenet-row { background: #141414 !important; }

/* ── Row container ── */
.slidenet-row {
    padding: 16px 0 24px;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
}

/* ══════════════════════════════════════════
   HEADER: title LEFT — voir plus RIGHT
   Same line, nothing between them
   ══════════════════════════════════════════ */
.slidenet-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;  /* title far left, voir plus far right */
    padding: 0 16px 10px 16px;
    gap: 12px;
}

.slidenet-row-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    flex: 1;                  /* takes all space pushing voir plus to right */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* color/font set inline by PHP */
}

.slidenet-voir-plus {
    font-size: 13px;
    font-weight: 600;
    color: #e50914;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .2s;
}
.slidenet-voir-plus:hover { opacity: .75; color: #e50914; text-decoration: none; }

/* ══════════════════════════════════════════
   TRACK — horizontal scroll, NO scrollbar
   Drag with mouse or finger
   NO arrows, ever
   ══════════════════════════════════════════ */
.slidenet-track-outer {
    padding: 0 16px;
    overflow: hidden;        /* hide the native scrollbar */
    position: relative;
}

.slidenet-track {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    overflow-x: scroll;      /* native scroll — driven by JS drag */
    overflow-y: visible;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;

    /* Hide scrollbar on all browsers */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.slidenet-track::-webkit-scrollbar { display: none; }

/* Items start from LEFT — like Netflix */
.slidenet-track > .slidenet-item:first-child { margin-left: 0; }

/* ── Item ── */
.slidenet-item {
    flex: 0 0 auto;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #222;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    transition: transform .22s ease, box-shadow .22s ease;
    /* margin-right set by gap in HTML style */
}

/* Scale UP on hover — exits its bounds, no dark overlay */
.slidenet-item:hover {
    transform: scale(1.07);
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    z-index: 10;
}

/* ── Inner link ── */
.sn-item-inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;
    -webkit-user-drag: none;   /* prevent browser image drag interfering */
    user-select: none;
}

/* ── Image ── */
.sn-item-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.sn-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;     /* prevents image drag */
    -webkit-user-drag: none;
}

/* ── Video ── */
.sn-item-video { width: 100%; height: 100%; }
.sn-item-video iframe,
.sn-item-video video {
    width: 100%; height: 100%;
    border: none; display: block;
    pointer-events: none;
}
.slidenet-item:hover .sn-item-video iframe,
.slidenet-item:hover .sn-item-video video { pointer-events: auto; }

/* No image placeholder */
.sn-no-image {
    width: 100%; height: 100%;
    background: linear-gradient(135deg,#1a1a2e,#0f3460);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; opacity: .5;
}

/* ── Title overlay — fades in on hover, no dark bg on image ── */
.sn-item-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, transparent 70%);
    padding: 22px 10px 8px;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.slidenet-item:hover .sn-item-overlay { opacity: 1; }

.sn-item-title {
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    display: block;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
}

/* ── Badge top-right ── */
.sn-badge {
    position: absolute; top: 6px; right: 6px; z-index: 5;
    font-size: 9px; font-weight: 800; padding: 3px 6px;
    border-radius: 3px; text-transform: uppercase; letter-spacing: .4px;
    color: #fff; line-height: 1.2; pointer-events: none;
}
.sn-badge-new   { background: #e50914; }
.sn-badge-top   { background: #ff6b00; }
.sn-badge-best  { background: #f5c518; color: #141414; }
.sn-badge-promo { background: #8e24aa; }

/* ── Price bottom-left ── */
.sn-price {
    position: absolute; bottom: 6px; left: 6px; z-index: 5;
    background: rgba(0,0,0,.72); color: #fff;
    font-size: 11px; font-weight: 700; padding: 3px 8px;
    border-radius: 4px; line-height: 1.4; pointer-events: none;
}

/* ══════════════════════════════════════════
   Dark/Light toggle — fixed top right
   ══════════════════════════════════════════ */
.sn-mode-btn-wrap {
    position: fixed;
    top: 0; right: 0;
    z-index: 99999;
}
body.admin-bar .sn-mode-btn-wrap { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .sn-mode-btn-wrap { top: 46px; }
}
.sn-mode-btn {
    background: #141414;
    border: 2px solid #e50914;
    color: #fff;
    padding: 7px 14px 7px 10px;
    border-radius: 0 0 0 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    box-shadow: -2px 2px 10px rgba(0,0,0,.3);
    transition: background .2s;
    white-space: nowrap;
}
.sn-mode-btn:hover { background: #e50914; }
body.sn-dark-mode .sn-mode-btn { background: #e50914; border-color: rgba(255,255,255,.3); }

/* ── Lightbox ── */
#sn-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.94);
    z-index: 999999;
    display: flex; align-items: center; justify-content: center;
}
.sn-lightbox-inner {
    position: relative;
    width: min(900px, 92vw);
    aspect-ratio: 16/9;
}
.sn-lightbox-inner iframe { width:100%; height:100%; border:none; border-radius:8px; }
.sn-lightbox-close {
    position: absolute; top: -44px; right: 0;
    background: none; border: none; color: #fff;
    font-size: 30px; cursor: pointer; line-height: 1;
    transition: color .2s;
}
.sn-lightbox-close:hover { color: #e50914; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .slidenet-row-header { padding: 0 10px 8px; }
    .slidenet-track-outer { padding: 0 10px; }
    .slidenet-row-title { font-size: 16px !important; }
    .sn-btn-label { display: none; }
    .sn-mode-btn { padding: 7px 10px; }
}