/* ===========================================
   FnHub - Fortnite Gaming Theme
   =========================================== */

/* Burbank Big Condensed Black - Official Fortnite Font */
@font-face {
    font-family: 'Burbank';
    src: url('images/fonts/BurbankBigCondensed-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Import Google Fonts - Gaming style */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;700;900&family=Rajdhani:wght@400;500;600;700&family=Russo+One&display=swap');

/* CSS Variables - Fortnite Chapter 6 Theme */
:root {
    --fn-purple: #8c32ff;
    --fn-purple-dark: #5a1fb8;
    --fn-cyan: #00e5ff;
    --fn-yellow: #f4ef1c;
    --fn-yellow-dark: #d4c200;
    --fn-red: #ff003c;
    --bg-dark: #16191c;
    --bg-card: #1a1d22;
    --bg-card-hover: #1e2227;
    --border: #2d3238;
    --border-hover: var(--fn-cyan);
    --primary: var(--fn-purple);
    --primary-light: #a855f7;
    --primary-dark: var(--fn-purple-dark);
    --accent: var(--fn-cyan);
    --accent-glow: rgba(0, 229, 255, 0.6);
    --warning: var(--fn-yellow);
    --success: #00ff88;
    --danger: var(--fn-red);
    --text: #ffffff;
    --text-muted: #8a9199;
    --gradient-primary: linear-gradient(135deg, var(--fn-purple) 0%, var(--fn-cyan) 100%);
    --gradient-cyan: linear-gradient(135deg, var(--fn-cyan) 0%, #00b8d4 100%);
    --neon-glow: 0 0 10px var(--fn-purple), 0 0 20px var(--fn-purple), 0 0 40px var(--fn-purple-dark);
    --neon-cyan: 0 0 10px var(--fn-cyan), 0 0 25px rgba(0, 229, 255, 0.5);
    --card-glow: 0 10px 30px rgba(0, 229, 255, 0.2);
    --bevel: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
    --bevel-small: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
    --bevel-reverse: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 92%);
}

/* Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}
/* Plus de background-color ici (etait #16191c) : mesure @amnor (#19826), presence d'un fond sur <html>
   cache les rayures de body::before quelle que soit sa couleur. La couleur de page vit maintenant sur
   <html> (voir l'attribut style, core/templates/index.php) -- garde l'absence de flash au chargement,
   body reste transparent et laisse les rayures peindre par-dessus. */

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.02),
            rgba(255, 255, 255, 0.02) 5px,
            transparent 5px,
            transparent 7px,
            rgba(255, 255, 255, 0.02) 7px,
            rgba(255, 255, 255, 0.02) 12px,
            transparent 12px,
            transparent 14px
        );
    pointer-events: none;
    z-index: -1;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ===========================================
   Header - Fortnite Storm Style
   =========================================== */
.header {
    background: #16191c;
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--gradient-primary);
    box-shadow: 0 0 8px var(--fn-purple), 0 0 15px var(--fn-cyan);
    z-index: 101;
}


.header-banner {
    position: relative;
    padding: 0;
    border-bottom: none;
}

.header-banner::after {
    display: none;
}

.banner-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    filter: brightness(0.6);
}

.header-banner .header-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1800px;
}

.header-content {
    max-width: 1800px;
    margin: 0 auto;
    padding: 12px 20px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.02);
}

.logo-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    box-shadow: var(--card-glow);
}

.logo-text {
    display: flex;
    flex-direction: column;
}

h1.logo-name {
    margin: 0;
}
.logo-name {
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 17px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--fn-cyan);
    -webkit-text-fill-color: var(--fn-cyan);
    text-shadow: none;
    padding-right: 4px;
    position: relative;
    top: 2px;
}

.logo-name .logo-dash {
    color: var(--fn-purple);
    -webkit-text-fill-color: var(--fn-purple);
}

.logo-name .logo-fortnite {
    color: #ffd700;
    -webkit-text-fill-color: #ffd700;
}

.tagline {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ===========================================
   Header Items (boutique / leaks)
   =========================================== */
.header-content {
    flex-wrap: nowrap !important;
}

.header-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.header-item:hover {
    transform: scale(1.1);
}

/* ===========================================
   Header - Single Line + Menu
   =========================================== */
.header-top-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 5px 4px 14px;
    background-color: #16191c;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.02),
        rgba(255, 255, 255, 0.02) 5px,
        transparent 5px,
        transparent 7px,
        rgba(255, 255, 255, 0.02) 7px,
        rgba(255, 255, 255, 0.02) 12px,
        transparent 12px,
        transparent 14px
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.header-top-line .logo {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    position: relative;
    top: 1px;
    padding: 1px 16px;
    border-radius: 6px;
    border: 1.5px solid var(--fn-purple);
    background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%);
    box-shadow: 0 0 0 1px #000, 0 0 0 3px #000, 0 0 0 4px #2a2d33;
}

.header-videos-link {
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 4px;
    width: calc(20% - 5px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0px 4px;
    background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
}

.header-videos-link:hover {
    color: var(--fn-cyan);
    border-color: var(--fn-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
}

.header-videos-link svg {
    width: 14px;
    height: 14px;
}

.header-item-img {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform 0.3s ease;
}

.header-item-img:nth-of-type(2) {
    grid-column: 4;
    justify-self: center;
    padding-left: 25%;
}

.header-item-img:nth-of-type(3) {
    grid-column: 5;
    justify-self: center;
    padding-left: 25%;
}

.header-item-img img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    transition: box-shadow 0.3s ease;
}

/* Boutique = rond violet */
.header-item-img:nth-of-type(2) img {
    border: 2px solid var(--fn-purple);
    box-shadow: 0 0 8px rgba(140, 50, 255, 0.4);
    background: rgba(140, 50, 255, 0.15);
}
.header-item-img:nth-of-type(2):hover img {
    box-shadow: 0 0 14px rgba(140, 50, 255, 0.7);
}

/* Leaks = rond vert fluo */
.header-item-img:nth-of-type(3) img {
    border: 2px solid #39ff14;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
    background: rgba(57, 255, 20, 0.15);
}
.header-item-img:nth-of-type(3):hover img {
    box-shadow: 0 0 14px rgba(57, 255, 20, 0.7);
}

.header-item-img:hover {
    transform: scale(1.1);
}

.header-item-img:hover img {
    border-color: var(--fn-cyan);
}

.header-menu {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 5px 4px;
    background: #0d0f12;
    border-bottom: none;
}

.menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding: 0px 4px 6px;
    background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
    min-width: 0;
}

.menu-item::before {
    display: none;
}

.menu-item:hover {
    color: var(--fn-cyan);
    border-color: var(--fn-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
    transform: none;
}

.menu-item.active {
    color: var(--fn-cyan);
    background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%);
    border: 1px solid var(--fn-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
}

/* Classements actif : jaune */
.menu-item:nth-child(2).active {
    color: #ffd700;
    border-color: #ffd700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.25);
}
.menu-item:nth-child(2).active .menu-icon { color: #ffd700; }

/* Map actif : bleu ocean */
.menu-item:nth-child(3).active {
    color: #0077b6;
    border-color: #0077b6;
    box-shadow: 0 0 8px rgba(0, 119, 182, 0.25);
}
.menu-item:nth-child(3).active .menu-icon { color: #0077b6; }

/* Boutique actif : fond violet, garde bordure grise par défaut */
.menu-item:nth-child(4).active,
.menu-item[href*="boutique"].active {
    color: #fff;
    background: var(--fn-purple);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
}

/* Leaks actif : fond noir, bordure vert fluo */
.menu-item:nth-child(5).active {
    color: #39ff14;
    background: #000;
    border-color: #39ff14;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.25);
}
.menu-item:nth-child(5).active .menu-icon { color: #39ff14; }

/* Search in menu - Style menu item */
.header-menu .menu-search,
.header-menu form.menu-search,
form.search-form.menu-search {
    display: flex !important;
    margin: 0 !important;
    flex: none !important;
    background: var(--bg-card) !important;
    border: 2px solid var(--border) !important;
    clip-path: var(--bevel-small) !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
}

.header-menu .menu-search:hover,
.header-menu .menu-search:focus-within {
    border-color: var(--fn-cyan);
    box-shadow: var(--neon-cyan);
}

.header-menu .menu-search .search-input {
    padding: 10px 14px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text) !important;
    font-family: 'Burbank', 'Russo One', sans-serif !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    width: 140px !important;
    flex: none !important;
    transition: all 0.3s ease !important;
}

.header-menu .menu-search .search-input:focus {
    outline: none !important;
}

.header-menu .menu-search .search-input::placeholder {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.header-menu .menu-search .search-btn {
    padding: 10px 16px !important;
    border: none !important;
    border-left: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--fn-cyan) !important;
    font-family: 'Burbank', 'Russo One', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}

.header-menu .menu-search .search-btn:hover {
    background: var(--fn-cyan) !important;
    color: #000 !important;
}

/* Menu SVG icons */
.menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.menu-icon svg {
    display: block;
    width: 36px !important;
    height: 36px !important;
    margin-top: 0px;
    margin-bottom: 2px;
}
.menu-item:nth-child(1) .menu-icon svg,
.menu-item:nth-child(2) .menu-icon svg {
    margin-top: 2px;
    margin-bottom: 0px;
}

.menu-icon .menu-item-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: -4px;
}

/* Filter bar SVG icons */
.filter-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.duration-btn.active .filter-icon,
.duration-btn:hover .filter-icon {
    opacity: 1;
}

/* Duration dropdown */
.duration-dropdown-wrap {
    position: relative;
    cursor: pointer;
}

.duration-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 30, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 10px;
    padding: 6px;
    min-width: 110px;
    z-index: 200;
    flex-direction: column;
    gap: 2px;
}

.duration-dropdown-wrap.open .duration-dropdown {
    display: flex;
}

.dropdown-item {
    display: block;
    padding: 8px 12px;
    color: var(--text-muted);
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-align: center;
}

.dropdown-item:hover {
    background: rgba(0, 229, 255, 0.1);
    color: var(--fn-cyan);
}

.dropdown-item.active {
    color: var(--fn-cyan);
    background: rgba(0, 229, 255, 0.15);
}

/* Search button with dropdown */
.search-btn-wrap {
    position: relative;
    cursor: pointer;
}

.search-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 30, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 10px;
    padding: 8px;
    z-index: 200;
    flex-direction: row;
    gap: 4px;
    min-width: 200px;
}

.search-btn-wrap.open .search-dropdown {
    display: flex;
}

.search-dropdown .filter-search-input {
    flex: 1;
    padding: 8px 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    outline: none;
}

.search-dropdown .filter-search-input:focus {
    border-color: var(--fn-cyan);
}

.search-dropdown .filter-search-btn {
    padding: 8px 14px;
    background: var(--fn-cyan);
    color: #000;
    border: none;
    border-radius: 6px;
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
}

/* ===========================================
   Search (standalone)
   =========================================== */
.search-form {
    flex: 1;
    max-width: 500px;
    display: flex;
}

.search-input {
    flex: 1;
    padding: 12px 18px;
    border: 2px solid var(--border);
    border-right: none;
    border-radius: 25px 0 0 25px;
    background: var(--bg-card);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(157, 78, 221, 0.3);
}

.search-btn {
    padding: 12px 25px;
    border: 2px solid var(--primary);
    border-radius: 0 25px 25px 0;
    background: var(--gradient-primary);
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-btn:hover {
    box-shadow: var(--card-glow);
}

/* ===========================================
   Filters
   =========================================== */
.filters {
    background: rgba(18, 18, 26, 0.9);
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
}

.filters-content {
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-select {
    padding: 10px 15px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary);
}

.filter-reset {
    padding: 10px 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-reset:hover {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--primary);
}

.results-count {
    color: var(--text-muted);
    font-size: 14px;
    margin-left: auto;
}

/* ===========================================
   Main Content
   =========================================== */
.main {
    max-width: 1800px;
    margin: 0 auto;
    padding: 12px 20px 25px;
}

/* ===========================================
   Section Headers - Fortnite Beveled Style
   =========================================== */
/* Section Headers - Solid Style */
.index-section-header {
    font-family: 'Burbank', 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--fn-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.index-section-header.cyan {
    color: var(--fn-cyan);
}

.index-section-header.purple {
    color: var(--fn-purple);
}

.index-section-header.yellow {
    color: var(--fn-yellow);
}

/* ===========================================
   Video Grid
   =========================================== */
.video-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.video-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.video-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.video-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1400px) {
    .video-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1100px) {
    .video-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .video-grid, .video-grid.cols-3, .video-grid.cols-4, .video-grid.cols-5 { grid-template-columns: repeat(2, 1fr); gap: 16px; }

    /* Bottom bar fixe pour filtres vidéos */
    .duration-filters {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0;
        background: #16191c;
        border-top: none;
        box-sizing: border-box;
        overflow: visible;
    }
    .duration-filters::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(135deg, var(--fn-cyan) 0%, var(--fn-purple) 100%);
        box-shadow: 0 0 8px var(--fn-cyan), 0 0 15px var(--fn-purple);
    }
    .duration-filters::-webkit-scrollbar { display: none; }
    .duration-btn {
        flex: 1 1 0 !important;
        min-width: 0;
        padding: 4px 2px 6px !important;
        font-size: 12px !important;
        font-style: italic !important;
        letter-spacing: 0.3px !important;
        text-align: center;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        white-space: nowrap;
        border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%) !important;
        color: rgba(255, 255, 255, 0.5) !important;
    }
    .duration-btn.active {
        color: var(--fn-cyan) !important;
        background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%) !important;
        border: 1px solid var(--fn-cyan) !important;
        border-radius: 8px !important;
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
    }
    .duration-btn[data-filter="live"].active {
        color: var(--fn-red) !important;
        background: #1a1d22 !important;
        border: 1px solid var(--fn-red) !important;
        border-radius: 8px !important;
        box-shadow: 0 0 8px rgba(255, 50, 50, 0.25);
    }
    /* Fusion mobile (gruid #21613) : un seul bouton LIVE remplace les 2 boutons desktop.
       live-desktop-sep (le separateur de LIVE (n)) se cache avec lui. live-mobile-sep n'a
       PAS besoin d'etre force ici : il porte aussi la classe .filter-sep, donc il suit deja
       la regle existante de la page (cache pour une langue, visible sur le hub via la regle
       `.duration-filters.vcr-hub .filter-sep` -- plus specifique que le display:none desktop
       pose plus bas dans ce fichier). Le forcer ici en !important l'aurait rendu visible aussi
       sur les pages de langue, ou aucun separateur ne doit apparaitre sur mobile (trouve en
       testant le rendu, pas seulement en lisant -- @amnor avait raisonne juste sur le hub). */
    .duration-btn[data-filter="live"],
    .duration-btn[data-filter="live-now"],
    .live-desktop-sep {
        display: none !important;
    }
    .live-mobile-btn {
        display: flex !important;
    }
    .duration-btn[data-filter="live-all"].active {
        color: var(--fn-red) !important;
        background: #1a1d22 !important;
        border: 1px solid var(--fn-red) !important;
        border-radius: 8px !important;
        box-shadow: 0 0 8px rgba(255, 50, 50, 0.25);
    }
    .duration-btn[data-filter="live"] {
        font-size: 10px !important;
    }
    .duration-btn[data-filter="live"] .filter-icon {
        margin-top: 0px !important;
        width: 34px !important;
        height: 34px !important;
    }
    .duration-btn:hover {
        transform: none;
        background: #1a1d22 !important;
        color: var(--fn-cyan) !important;
        border-color: var(--fn-cyan) !important;
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.25) !important;
    }
    .duration-btn.active:hover {
        background: #1a1d22 !important;
    }
    .filter-icon {
        width: 32px !important;
        height: 32px !important;
        margin-right: 0 !important;
        opacity: 1 !important;
    }
    .duration-btn:first-child .filter-icon {
        width: 30px !important;
        height: 30px !important;
    }
    .filter-search {
        flex: 1 0 auto;
        display: flex !important;
        align-items: stretch;
    }
    .filter-search-input {
        flex: 1;
        min-width: 0;
        width: 80px !important;
        padding: 7px 8px !important;
        font-size: 16px !important;
        letter-spacing: 0.8px !important;
    }
    .filter-search-btn {
        display: block !important;
        padding: 7px 12px !important;
        font-size: 10px !important;
        letter-spacing: 0.8px !important;
        flex-shrink: 0;
    }

    /* Espace en bas du contenu pour ne pas cacher les dernières vidéos */
    .pagination { padding-bottom: 55px; }
    .video-grid { padding-bottom: 10px; }

    .live-section {
        margin: 16px -4px 16px;
        padding: 14px 8px 8px;
    }
    .live-card {
        width: calc((100% - 16px) / 2.2);
    }

    .section-title {
        font-size: 22px;
        padding: 2px 10px;
    }

    .video-duration {
        padding: 1px 4px;
        top: 2px;
        right: 4px;
        font-size: 11px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        border-radius: 3px;
    }

}

/* ===========================================
   Video Cards - Modern Gaming Style
   =========================================== */
.video-card {
    position: relative;
    background: #16191c;
    border: 1.5px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    overflow: visible;
    box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Scanline effect on hover - CRT gaming style */
.video-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33, 0 4px 20px rgba(0, 0, 0, 0.4);
}

.video-card:hover::before {
    opacity: 1;
}

.video-thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 4px;
}

.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.3s ease;
}

.video-card:hover .video-thumb img {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* Play icon overlay */
.video-thumb::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 55% center;
    background-size: 30px;
    box-shadow: 0 0 30px rgba(157, 78, 221, 0.6);
}

.video-card:hover .video-thumb::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.95;
}

.video-duration {
    position: absolute;
    top: 2px;
    right: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--fn-cyan);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    z-index: 3;
}

/* Badge LIVE skewé */
.badge-live-stream,
.video-duration.live {
    background: #ff4444 !important;
    color: #fff !important;
    font-family: 'Bebas Neue', sans-serif;
    padding: 2px 3px !important;
    transform: skewX(-15deg);
    font-weight: bold;
    display: inline-block;
    animation: liveFlash 1.5s ease-in-out infinite;
}

/* Channel name top-left */
.video-channel-top {
    color: rgba(255,215,0,0.95);
    font-weight: 700;
    margin-right: 4px;
}

/* Video overlay - title on thumbnail */
.video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 8px 2px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

.video-info {
    display: none;
}

.video-title {
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    transition: color 0.3s ease;
}

.video-card:hover .video-title {
    color: #ffd700;
}
.video-card:hover .video-channel-top {
    color: var(--fn-cyan);
}

.video-title .emoji {
    font-size: 0.7em;
    line-height: 1;
    vertical-align: middle;
}

.video-channel {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--fn-cyan);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    transition: color 0.3s ease;
}

.video-channel:hover {
    color: var(--primary-light);
}

.video-meta {
    display: none;
}

/* ===========================================
   LIVE Styles - Fortnite Red Flash
   =========================================== */
.video-duration.live,
.related-duration.live,
.video-duration-tag.live {
    background: var(--fn-red);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: liveFlash 1.5s ease-in-out infinite;
}

@keyframes liveFlash {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px var(--fn-red);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 20px var(--fn-red), 0 0 30px var(--fn-red);
    }
}

/* LIVE border lines */
.live-border-line {
    margin: 6px -20px 0;
    height: 5px;
    background: linear-gradient(to bottom, #2a2d33 1px, #16191c 1px, #16191c 3px, #282b30 3px, #282b30 5px);
}
.live-border-line-top {
    transform: scaleY(-1);
}
.live-border-line-bottom {
    margin: -12px -20px 8px;
}

.live-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: -25px;
}

.live-section-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 11px;
    font-weight: 900;
    font-style: italic;
    color: var(--fn-cyan);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 5px 12px 3px 14px;
    background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%);
    border: 1.5px solid #7027d6;
    border-left: none;
    border-radius: 0 6px 6px 0;
    box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33;
    align-self: flex-end;
    margin-bottom: -15px;
}

.live-dot {
    width: 6px;
    height: 6px;
    background: var(--fn-cyan);
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 6px var(--fn-cyan);
}

@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--fn-cyan); }
    50% { opacity: 0.4; box-shadow: 0 0 12px var(--fn-cyan); }
}

.live-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 2px 0;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 4px;
    padding-right: 20px;
    margin-bottom: 12px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.live-scroll::-webkit-scrollbar { display: none; }
.live-nav-btn { display: none; }
.live-scroll-wrapper { position: relative; }

.live-card {
    flex-shrink: 0;
    width: calc((100% - 16px) / 2.2);
    text-decoration: none;
    transition: transform 0.25s ease;
}

.live-card:hover {
    transform: scale(1.03);
}
.live-card:hover .live-title {
    color: #ffd700;
}
.live-card:hover .live-channel {
    color: var(--fn-cyan);
}

.live-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
}

.live-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.live-top-row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 5px;
    background: rgba(0, 0, 0, 0.7);
    z-index: 3;
}

.live-badge {
    background: var(--fn-red);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 1px;
    animation: liveFlash 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(255, 0, 60, 0.5);
    flex-shrink: 0;
}

.live-channel {
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 10px;
    color: #ffd700;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-viewers {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #ff6b6b;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 700;
    margin-left: auto;
    flex-shrink: 0;
}

.live-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 5px 2px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
    z-index: 2;
}

.live-channel {
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #ffd700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.live-title {
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 11px;
    font-weight: 600;
    font-style: italic;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===========================================
   Pagination
   =========================================== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.pagination a, .pagination span {
    padding: 12px 18px;
    border-radius: 8px;
    font-family: 'Burbank', 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pagination a {
    background: #16191c;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: var(--text);
}

.pagination a:hover {
    background: #1a1d22;
    border-color: var(--fn-cyan);
    color: var(--fn-cyan);
}

.pagination span.current {
    background: #1a1d22;
    color: var(--fn-cyan);
    border: 1px solid var(--fn-cyan);
    border-radius: 8px;
}

.pagination .dots {
    color: var(--text-muted);
}

/* ===========================================
   No Results
   =========================================== */
.no-results {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
}

.no-results h2 {
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--text);
}

/* ===========================================
   Video Page
   =========================================== */
.main-video {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 30px;
}

/* Video page layout with sidebar */
.video-page-layout {
    display: grid;
    grid-template-columns: minmax(auto, 700px) 320px;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    margin-bottom: -15px;
    align-items: start;
    justify-content: center;
}

.video-page-player {
    min-width: 0;
}

/* Sidebar desktop */
.video-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 50px;
}

.sidebar-card {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.sidebar-card:hover {
    border-color: var(--fn-cyan);
    background: var(--bg-card-hover);
}

.sidebar-thumb {
    position: relative;
    width: 120px;
    min-width: 120px;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
}

.sidebar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.video-sidebar .sidebar-title {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.2;
    margin-bottom: 2px;
    padding-bottom: 0;
    border-bottom: none;
}

.sidebar-thumb .video-duration {
    padding: 1px 4px !important;
    font-size: 9px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-channel {
    font-size: 11px;
    color: var(--text-muted);
}

.section-header-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 35px;
    margin-bottom: 24px;
    margin-left: -20px;
    margin-right: -20px;
}

.section-header-row .section-title {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #8a3de0 0%, #6020b0 100%);
    border: 1.5px solid #7027d6;
    border-radius: 6px;
    box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33;
}

.text-grey {
    color: #8a9199;
}

.text-violet {
    color: #b366ff;
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 16px;
    margin-bottom: 16px;
    margin-left: -20px;
    margin-right: -20px;
}

.section-title-centered {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 16px;
}

.section-title-centered .section-title {
    background: linear-gradient(180deg, #8a3de0 0%, #6020b0 100%);
    border: 1.5px solid #7027d6;
    border-radius: 6px;
    box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33;
}

.section-count .count-number {
    color: #ffd700;
    margin-right: 5px;
}
.section-count {
    font-family: 'Burbank', 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    color: var(--fn-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 14px 6px 14px;
    background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%);
    border: 1.5px solid #7027d6;
    border-right: none;
    border-radius: 6px 0 0 6px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33;
}

.section-title {
    position: relative;
    font-family: 'Burbank', 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    padding: 6px 14px;
    background: #7027d6;
    border: 1.5px solid #7027d6;
    border-right: none;
    border-radius: 0 12px 12px 0;
    display: inline-block;
    margin-bottom: 0;
    box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33;
}

.section-stats {
    display: flex;
    gap: 0;
    align-items: stretch;
    margin-left: -2px;
    position: relative;
    z-index: 2;
}

.section-today {
    font-family: 'Burbank', 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    color: var(--fn-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 14px 6px 14px;
    background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%);
    border: 1.5px solid #7027d6;
    border-left: none;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: center;
    box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33;
}

/* Séparateur de date dans la grille */
.grid-date-separator {
    grid-column: 1 / -1;
    margin: 12px -20px 12px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

/* Premier séparateur collé au titre */
.grid-date-separator:first-of-type {
    margin-top: 0;
}

.date-separator-title {
    font-family: 'Burbank', 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    color: var(--fn-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 20px 6px 14px;
    background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%);
    border: 1.5px solid #7027d6;
    border-left: none;
    border-radius: 0 6px 6px 0;
    display: inline-block;
    box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33;
}

.related-fullwidth {
    padding: 10px 20px 0;
}

.related-fullwidth .section-title {
    margin-bottom: 20px;
}

/* Section mobile : Plus de [chaîne] - cachée sur desktop */
.mobile-channel-section {
    display: none;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.back-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    color: var(--primary-light);
}

.player-container {
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.06);
    max-width: 700px;
    box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33;
    margin-top: 20px;
    margin-bottom: 20px;
}

.player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-info-full {
    padding: 25px 0 10px;
}

/* Title row with duration */
.video-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
}

.video-duration-top {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(0, 229, 255, 0.15);
    border: 0.5px solid var(--fn-cyan);
    border-radius: 3px;
    color: var(--fn-cyan);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
    align-self: center;
}

.video-duration-top.live {
    background: rgba(255, 0, 60, 0.15);
    border-color: var(--fn-red);
    color: var(--fn-red);
    animation: pulse 1.5s infinite;
}

.video-title-full {
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 24px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
    margin: 0;
}

.video-meta-full {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.video-date {
    color: var(--text-muted);
    font-size: 14px;
}

.video-duration-tag {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

/* Video Subheader - simple inline row */
.video-subheader {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.video-subheader .channel-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.video-subheader .channel-link {
    font-size: 13px;
    color: var(--accent);
}

.video-subheader .video-date {
    margin-left: auto;
    font-size: 14px;
    color: var(--text-muted);
}

.channel {
    display: flex;
    align-items: center;
    gap: 12px;
}

.channel-avatar {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 20px;
    color: #fff;
}

.channel-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    font-weight: 600;
}

.channel-link {
    font-size: 13px;
    color: var(--accent);
    transition: color 0.3s ease;
}

.channel-link:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

.yt-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    background: var(--gradient-primary);
    color: #fff;
    border-radius: 25px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.yt-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-glow);
}

/* YouTube link button (centered - video page) */
.yt-link-btn-center {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background: #cc0000;
    border: 1.5px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 6px 14px;
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33;
    transition: all 0.2s ease;
    cursor: pointer;
}

.yt-link-btn-center:hover {
    background: #ff1a1a;
    box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33, 0 0 12px rgba(255, 0, 0, 0.4);
}

.description {
    background: var(--bg-card);
    border: 1.5px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 15px 20px;
    margin-top: 20px;
    box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33;
}

.description-toggle {
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 13px;
    color: var(--fn-cyan);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.description-toggle:hover {
    color: var(--primary-light);
}

.description .toggle-hide {
    display: inline;
}

.description .toggle-show {
    display: none;
}

.description.collapsed .toggle-hide {
    display: none;
}

.description.collapsed .toggle-show {
    display: inline;
}

.description-content {
    margin-top: 15px;
}

.description.collapsed .description-content {
    display: none;
}

.description-title {
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 14px;
    margin-bottom: 15px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.description-text {
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
    color: var(--text);
}

/* ===========================================
   Sidebar
   =========================================== */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-title {
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 18px;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--fn-cyan);
}

.related-card {
    display: flex;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.related-card:hover {
    background: var(--bg-card);
    border-color: var(--primary);
}

.related-thumb {
    position: relative;
    width: 168px;
    min-width: 168px;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-card:hover .related-thumb img {
    transform: scale(1.05);
}

.related-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.related-info {
    flex: 1;
    min-width: 0;
}

.related-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.related-card:hover .related-title {
    color: var(--primary-light);
}

.related-channel {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.related-date {
    font-size: 12px;
    color: var(--text-muted);
}

/* ===========================================
   Featured Section
   =========================================== */
.featured-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border);
}

.featured-title {
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--warning);
    display: flex;
    align-items: center;
    gap: 10px;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.featured-card {
    border: 2px solid rgba(255, 204, 0, 0.4);
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.05) 0%, transparent 100%);
}

.featured-card:hover {
    border-color: var(--warning);
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.3);
}

.featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--warning);
    color: #000;
    padding: 5px 10px;
    border-radius: 6px;
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 11px;
    font-weight: 400;
    z-index: 2;
}

/* ===========================================
   Footer
   =========================================== */
.footer {
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33;
    padding: 18px 20px 100px;
    margin: 20px 12px 20px;
    text-align: center;
}

.footer-site-name {
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    text-align: center;
}

.footer-section {
    margin-bottom: 14px;
    text-align: center;
}
.footer-section:last-of-type {
    margin-bottom: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.footer-section-title {
    font-family: 'Burbank', 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 4px;
    line-height: 1.8;
}

.footer-links a {
    color: #666;
    text-decoration: none;
    font-size: 12px;
    transition: color 0.2s;
}

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

.footer-dot {
    color: #666;
    margin: 0 6px;
    font-size: 10px;
}

.footer-disclaimer {
    margin-top: 0;
    margin-bottom: 16px;
    padding: 0 0 14px;
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    text-align: center;
}

.footer-disclaimer p {
    color: #666;
    font-size: 11px;
    margin: 0 0 4px;
    line-height: 1.6;
}

.footer-disclaimer a {
    color: #666;
    text-decoration: none;
}

.footer-disclaimer a:hover {
    color: #8a9199;
}

/* Legacy classes kept for compat */
.footer-tagline {
    font-family: 'Burbank', 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #8a9199;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* old footer-links removed */

.footer-legal {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.footer-legal a {
    font-size: 10px;
    color: #555a60;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-legal a:hover {
    color: #8a9199;
}

.footer-bottom p {
    color: #3a3f45;
    font-size: 10px;
    margin: 0 0 6px;
    line-height: 1.5;
}

.footer-bottom p:last-child {
    margin-bottom: 0;
}

.footer-bottom a {
    color: #555a60;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: #8a9199;
}

/* ===========================================
   Responsive
   =========================================== */
@media (max-width: 1200px) {
    .main-video {
        grid-template-columns: 1fr;
    }

    .sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .related-card {
        width: calc(50% - 6px);
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: stretch;
        padding: 8px 15px 0;
    }

    .logo {
        justify-content: center;
    }

    .logo-name {
        font-size: 17px;
    }

    .search-form {
        max-width: 100%;
    }

    .header-top-line {
        padding: 6px 12px 9px;
    }

    .logo-name {
        font-size: 24px !important;
        transform: none;
        transform-origin: center;
        filter: none;
    }

    .header-menu {
        padding: 2px 4px 4px;
        gap: 4px;
    }

    .menu-item {
        padding: 8px 2px 6px;
        font-size: 12px;
        letter-spacing: 0.3px;
    }

    .menu-icon svg {
        width: 24px;
        height: 24px;
    }

    .header-item-img img {
        width: 37px;
        height: 37px;
    }

    .video-title {
        font-size: 13px;
        line-height: 1.1;
    }

    .video-overlay {
        padding: 18px 6px 2px;
    }

    .video-channel {
        font-size: 10px;
    }

    /* Dropdowns open upward from bottom bar */
    .duration-dropdown {
        bottom: calc(100% + 6px);
    }

    .search-dropdown {
        position: fixed;
        bottom: 75px;
        left: calc(100vw / 6 - 10px);
        right: 4px;
        transform: none;
        min-width: auto;
        width: auto;
        padding: 12px;
    }
    .search-dropdown .filter-search-input {
        font-size: 16px !important;
        padding: 10px 12px;
    }
    .search-dropdown .filter-search-btn {
        padding: 14px 20px !important;
        font-size: 18px !important;
        min-width: 0 !important;
        white-space: nowrap;
    }

    .main-video {
        padding: 12px;
    }

    .video-page-layout {
        grid-template-columns: 1fr;
    }

    .video-sidebar {
        display: none;
    }

    .video-title-full {
        font-size: 18px;
    }

    .video-duration-top {
        padding: 2px 8px;
        font-size: 12px;
        border-width: 1px;
        margin-bottom: 1px;
    }

    /* Video info on mobile */
    .video-info-full {
        padding-top: 20px !important;
        padding-bottom: 0 !important;
    }

    .description {
        margin-top: 10px !important;
        margin-bottom: 0 !important;
    }

    .main {
        padding-bottom: 0 !important;
    }

    .video-page-layout {
        margin-bottom: 0 !important;
    }

    .video-page-player {
        margin-bottom: 0 !important;
    }

    /* Section mobile : Plus de [chaîne] - visible sur mobile */
    .mobile-channel-section {
        display: block;
        padding: 20px 15px 0;
    }

    .mobile-channel-section .section-title,
    .related-fullwidth .section-title {
        font-size: 16px;
        margin-bottom: 15px;
    }

    /* Cacher les 4 vidéos gridSameChannel dans Recommandées sur mobile */
    .related-fullwidth .grid-same-channel {
        display: none;
    }

    .related-fullwidth {
        padding-top: 0 !important;
        margin-top: 20px !important;
    }

    /* Video subheader on mobile */
    .video-subheader {
        gap: 8px;
        margin-bottom: 15px;
    }

    .video-subheader .channel-name {
        font-size: 13px;
    }

    .video-subheader .channel-link {
        font-size: 11px;
    }

    .video-subheader .video-date {
        font-size: 12px;
    }

    .related-thumb {
        width: 120px;
        min-width: 120px;
    }

    .related-title {
        font-size: 13px;
    }

    .related-card {
        width: 100%;
    }

    .featured-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* ===========================================
   Animations
   =========================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.video-card {
    animation: fadeInUp 0.4s ease backwards;
}

.video-card:nth-child(1) { animation-delay: 0.05s; }
.video-card:nth-child(2) { animation-delay: 0.1s; }
.video-card:nth-child(3) { animation-delay: 0.15s; }
.video-card:nth-child(4) { animation-delay: 0.2s; }
.video-card:nth-child(5) { animation-delay: 0.25s; }
.video-card:nth-child(6) { animation-delay: 0.3s; }
.video-card:nth-child(7) { animation-delay: 0.35s; }
.video-card:nth-child(8) { animation-delay: 0.4s; }
.video-card:nth-child(9) { animation-delay: 0.45s; }
.video-card:nth-child(10) { animation-delay: 0.5s; }

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Duration Filter Buttons */
.duration-filters {
    display: flex;
    gap: 8px;
    padding: 10px 20px 15px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}

.duration-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 14px;
    background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 11px;
    font-weight: 600;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.duration-btn::before {
    display: none;
}

.duration-btn:hover {
    color: var(--fn-cyan);
    border-color: var(--fn-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
    transform: none;
}

.duration-btn.active {
    color: var(--fn-cyan);
    background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%);
    border: 1.5px solid var(--fn-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
}

.duration-btn[data-filter="live"] {
    color: rgba(255, 255, 255, 0.5);
}

.duration-btn[data-filter="live"]:hover {
    color: var(--fn-cyan);
    border-color: var(--fn-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
}

.duration-btn[data-filter="live"].active {
    background: #16191c;
    color: var(--fn-red);
    border-color: var(--fn-red);
}

/* Boutons LIVE -- desktop garde 2 boutons separes (gruid #21613) : "LIVE (n)" (lives en cours,
   $vcrLiveNowCount > 0 seulement) et "LIVES TERMINES" (l'historique, inchange). Mobile n'affiche
   qu'un seul bouton fusionne, .live-mobile-btn (voir plus bas, @media max-width:768px) : desktop
   le cache par defaut ici. */
.live-mobile-btn,
.live-mobile-sep {
    display: none;
}

.duration-btn[data-filter="live-now"],
.duration-btn[data-filter="live-all"] {
    color: rgba(255, 255, 255, 0.5);
    gap: 6px;
}

.duration-btn[data-filter="live-now"]:hover,
.duration-btn[data-filter="live-all"]:hover {
    color: var(--fn-cyan);
    border-color: var(--fn-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
}

.duration-btn[data-filter="live-now"].active,
.duration-btn[data-filter="live-all"].active {
    background: #16191c;
    color: var(--fn-red);
    border-color: var(--fn-red);
}

.live-now-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fn-red);
    box-shadow: 0 0 6px var(--fn-red);
    animation: liveNowPulse 1.5s ease-in-out infinite;
}

@keyframes liveNowPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--fn-red); }
    50% { opacity: 0.4; box-shadow: 0 0 12px var(--fn-red); }
}

.filter-search {
    display: flex;
    align-items: stretch;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 0;
    clip-path: var(--bevel-small);
    overflow: hidden;
    transition: all 0.3s ease;
}
.filter-search:focus-within {
    border-color: var(--fn-cyan);
    box-shadow: var(--neon-cyan);
}
.filter-search-input {
    background: transparent;
    border: none;
    color: var(--text);
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 20px;
    width: 130px;
    outline: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: normal;
}
.filter-search-input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}
.filter-search-btn {
    background: var(--fn-cyan);
    border: none;
    color: var(--bg-main);
    font-family: 'Burbank', 'Russo One', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 20px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: background 0.2s ease;
    line-height: normal;
}
.filter-search-btn:hover {
    background: #fff;
}

/* ===========================================
   Vidéos menu item - hidden by default (mobile)
   =========================================== */
.menu-item-videos {
    display: none;
}

.desktop-only-title {
    display: none;
}

/* ===========================================
   DESKTOP OVERRIDES (min-width: 769px)
   Ne touche PAS au mobile !
   =========================================== */
.video-title-channel {
    display: none;
}

@media (min-width: 769px) {

    .video-channel-top {
        color: rgba(255,215,0,0.85);
    }

    .footer {
        padding-bottom: 20px;
    }

    /* === VIDEO PAGE === */
    .video-title-row {
        display: flex !important;
        align-items: center;
        gap: 8px;
    }
    .video-title-channel {
        display: inline !important;
        color: var(--fn-cyan);
        margin-right: 4px;
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 16px rgba(0, 0, 0, 0.4);
    }
    .video-date-btn {
        display: none !important;
    }
    .main:has(.video-page-layout) {
        position: relative;
    }
    .video-date-edge {
        display: block !important;
        position: absolute;
        left: 0;
        top: 23px;
        border: 1.5px solid #7027d6;
        border-left: none;
        border-radius: 0 6px 6px 0;
        z-index: 10;
    }
    .video-channel-desktop {
        text-decoration: none;
        color: var(--fn-cyan) !important;
        white-space: nowrap;
    }
    .video-duration-btn {
        border-left: 1.5px solid #7027d6 !important;
        border-radius: 6px !important;
    }

    /* === VIDEO PAGE META ROW === */
    .video-meta-row-mobile {
        display: none !important;
    }
    .video-meta-row-desktop {
        display: flex !important;
        justify-content: center;
        align-items: center;
        position: relative;
        max-width: 920px;
        margin: 12px auto;
    }
    .video-meta-row-desktop .video-duration-btn {
        position: absolute;
        left: 0;
    }
    .video-description-desktop .description-toggle {
        text-align: center;
    }
    .video-duration-desktop {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        padding: 6px 10px 6px 8px !important;
        border-left: none !important;
        border-radius: 0 6px 6px 0 !important;
    }
    .video-description-desktop {
        display: block !important;
    }
    .video-info-full {
        display: none !important;
    }
    .video-date-desktop {
        border: 1.5px solid #7027d6 !important;
        border-radius: 6px !important;
        padding: 6px 14px !important;
    }

    /* === VIDEO PLAYER DESKTOP === */
    .video-page-layout {
        grid-template-columns: minmax(auto, 580px) 280px;
        max-width: 920px;
    }

    /* === SINGLE-LINE HEADER === */
    .header {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 4px;
        padding: 8px 16px;
        background: #0d0f12;
        flex-wrap: wrap;
    }

    .header-top-line {
        display: contents;
    }

    .header-menu {
        display: contents;
    }

    /* Cacher l'ancien bouton Vidéos mobile sur desktop */
    .header-videos-link {
        display: none !important;
    }

    /* Order: Vidéos(1) News(2) Classements(3) LOGO(4) Map(5) Boutique(6) Leaks(7) */
    .menu-item-videos {
        display: flex;
        order: 1;
    }
    .logo {
        order: 4;
        flex-shrink: 0;
        padding: 4px 8px;
        margin: 0 4px;
    }
    .header-menu .menu-item:nth-child(1) { order: 2; }
    .header-menu .menu-item:nth-child(2) { order: 3; }
    .header-menu .menu-item:nth-child(3) { order: 5; }
    .header-menu .menu-item:nth-child(4) { order: 6; }
    .header-menu .menu-item:nth-child(5) { order: 7; }

    /* Menu items : horizontal, compact */
    .menu-item {
        flex-direction: row;
        gap: 6px;
        padding: 8px 16px;
        font-size: 13px;
        border-radius: 6px;
        flex: none;
    }

    .menu-icon svg {
        width: 19px !important;
        height: 19px !important;
        margin: -9px -2px !important;
        transform: translateY(-1px) !important;
    }

    .menu-icon .menu-item-img {
        width: 28px;
        height: 28px;
        margin: -6px 0;
        margin-left: -5px;
    }

    .logo-name {
        font-size: 28px;
    }

    /* Filtres dans le header = ligne 2, sticky automatique */
    .duration-filters {
        background: #0d0f12;
        padding: 4px 20px 0px;
        gap: 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        margin: 0;
        width: 100%;
        order: 10;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .duration-btn {
        flex-direction: row;
        gap: 6px;
        padding: 8px 18px;
        font-size: 13px;
        border-radius: 6px;
        white-space: nowrap;
    }

    .duration-btn:hover {
        color: var(--fn-cyan) !important;
        border-color: var(--fn-cyan) !important;
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.25) !important;
    }

    .duration-btn[data-filter="live"]:hover {
        color: var(--fn-cyan) !important;
        border-color: var(--fn-cyan) !important;
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.25) !important;
    }

    .duration-btn .filter-icon {
        width: 19px;
        height: 19px;
        margin: -9px -2px;
        transform: translateY(-1px);
    }
    /* Icône TOUTES plus petite */
    .duration-btn:first-child .filter-icon {
        width: 14px;
        height: 14px;
        margin: -4px -1px;
    }

    /* Éclater le dropdown Durée : afficher les 4 filtres inline */
    .duration-dropdown-wrap,
    .duration-dropdown-wrap.active,
    .duration-dropdown-wrap:hover {
        display: flex;
        gap: 4px;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        cursor: default;
        transform: none;
    }

    /* Cacher l'icône et le label "Durée" */
    .duration-dropdown-wrap > .filter-icon,
    .duration-dropdown-wrap > span {
        display: none;
    }

    /* Dropdown toujours visible, inline */
    .duration-dropdown,
    .duration-dropdown-wrap.open .duration-dropdown {
        display: flex !important;
        position: static;
        transform: none;
        background: none;
        backdrop-filter: none;
        border: none;
        padding: 0;
        min-width: auto;
        gap: 4px;
        flex-direction: row;
    }

    /* Items du dropdown stylés comme les autres boutons */
    .dropdown-item {
        display: flex;
        align-items: center;
        padding: 8px 18px;
        background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%);
        border: 1.5px solid rgba(255, 255, 255, 0.15);
        border-radius: 6px;
        color: rgba(255, 255, 255, 0.5);
        font-family: 'Burbank', 'Russo One', sans-serif;
        font-size: 13px;
        font-weight: 600;
        font-style: italic;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    .dropdown-item:hover,
    .duration-filters .dropdown-item:hover {
        color: var(--fn-cyan) !important;
        border-color: var(--fn-cyan) !important;
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.25) !important;
        background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%) !important;
    }

    .dropdown-item.active {
        color: var(--fn-cyan);
        border: 1.5px solid var(--fn-cyan);
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
    }

    /* === RECHERCHE INLINE === */
    .duration-filters .search-btn-wrap {
        padding: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        cursor: default !important;
    }
    .duration-filters .search-btn-wrap:hover {
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
    }
    .duration-filters .search-btn-wrap > .filter-icon,
    .duration-filters .search-btn-wrap > span {
        display: none !important;
    }
    .duration-filters .search-btn-wrap .search-dropdown,
    .duration-filters .search-btn-wrap.open .search-dropdown {
        display: flex !important;
        position: static !important;
        flex-direction: row !important;
        background: none !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        gap: 4px !important;
        min-width: auto !important;
        transform: none !important;
    }
    .duration-filters .search-dropdown .filter-search-input {
        background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 6px !important;
        color: rgba(255, 255, 255, 0.5) !important;
        font-family: 'Burbank', 'Russo One', sans-serif !important;
        font-size: 13px !important;
        font-style: italic !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        padding: 10px 18px !important;
        width: 110px !important;
        line-height: 16px !important;
        outline: none !important;
        transition: all 0.3s ease !important;
    }
    .duration-filters .search-dropdown .filter-search-input::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }
    .duration-filters .search-dropdown .filter-search-input:focus {
        border-color: var(--fn-cyan) !important;
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.25) !important;
        color: #fff !important;
    }
    .duration-filters .search-dropdown .filter-search-btn {
        background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 6px !important;
        color: rgba(255, 255, 255, 0.5) !important;
        font-family: 'Burbank', 'Russo One', sans-serif !important;
        font-size: 13px !important;
        font-style: italic !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        padding: 10px 18px !important;
        line-height: 16px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    .duration-filters .search-dropdown .filter-search-btn:hover {
        color: var(--fn-cyan) !important;
        border-color: var(--fn-cyan) !important;
        box-shadow: 0 0 8px rgba(0, 229, 255, 0.25) !important;
    }

    .desktop-only-title {
        display: flex;
        justify-content: center;
    }

    .section-header-row {
        margin-top: 2px;
        margin-bottom: 20px;
    }

    .section-header-row .section-title {
        display: none;
    }

    /* Desktop : espacement TOUTES / AUJOURD'HUI */
    .desktop-only-title {
        margin-top: 30px;
    }
    .section-title-row {
        margin-top: -24px;
    }

    /* === LIVE SECTION === */
    .live-card {
        width: calc((100% - 80px) / 6);
        min-width: 150px;
    }

    .live-scroll-wrapper {
        position: relative;
        margin-left: -20px;
        margin-right: -20px;
    }

    .live-scroll {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        -webkit-mask-image: none;
        mask-image: none;
        gap: 16px;
        justify-content: flex-start;
    }

    .live-nav-btn {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: linear-gradient(180deg, #32363f 0%, #1a1d22 100%);
        color: var(--fn-cyan);
        border: 1.5px solid #7027d6;
        width: 28px;
        height: 48px;
        font-size: 22px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        line-height: 1;
        padding: 0;
        box-shadow: 0 0 0 1px #2a2d33, 0 0 0 4px #16191c, 0 0 0 5px #2a2d33;
        transition: background 0.2s;
    }
    .live-nav-btn:hover {
        background: linear-gradient(180deg, #3e4450 0%, #22262e 100%);
        color: #ffd700;
    }
    .live-nav-prev {
        left: 0;
        border-left: none;
        border-radius: 0 6px 6px 0;
    }
    .live-nav-next {
        right: 0;
        border-right: none;
        border-radius: 6px 0 0 6px;
    }

    .live-overlay {
        padding: 24px 8px 4px;
    }

    .live-channel {
        font-family: 'Burbank', 'Russo One', sans-serif;
        font-size: 17px;
        color: rgba(255,215,0,0.85);
        text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.5);
    }

    .live-title {
        font-size: 11px;
        font-weight: 300;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    }

    .live-viewer-count {
        font-size: 14px !important;
        padding: 3px 8px !important;
        gap: 5px !important;
        border-radius: 4px !important;
    }
    .live-viewer-count svg {
        width: 14px !important;
        height: 14px !important;
    }

}

/* =============================================
   Admin bar & controls
   =========================================== */
.admin-bar {
    background: #0d0f12;
    color: #666;
    font-size: 11px;
    padding: 3px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #2a2d33;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.admin-bar a {
    color: #00e5ff;
    text-decoration: none;
    font-size: 11px;
}
.admin-bar a:hover {
    text-decoration: underline;
}
.admin-bar-logout {
    color: #888 !important;
    margin-left: auto;
}
.admin-hide-btn {
    position: absolute;
    bottom: 42px;
    right: 6px;
    z-index: 10;
    background: rgba(170, 50, 50, 0.85);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 14px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 0;
}
.video-card:hover .admin-hide-btn,
.video-thumb:hover .admin-hide-btn {
    opacity: 0.8;
}
.admin-hide-btn:hover {
    opacity: 1 !important;
    background: rgba(200, 30, 30, 1);
    transform: scale(1.1);
}
.admin-video-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 8px 0;
    padding: 8px 12px;
    background: #0d0f12;
    border-radius: 6px;
    border: 1px solid #2a2d33;
}
.admin-video-controls button,
.admin-video-controls a {
    padding: 4px 12px;
    font-size: 11px;
    border-radius: 4px;
    border: 1px solid #444;
    background: #1a1d22;
    color: #aaa;
    cursor: pointer;
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: background 0.2s, color 0.2s;
}
.admin-video-controls button:hover,
.admin-video-controls a:hover {
    background: #2a2d33;
    color: #fff;
}
.admin-video-controls .admin-btn-danger {
    background: #5c2020;
    color: #daa;
    border-color: #5c2020;
}
.admin-video-controls .admin-btn-danger:hover {
    background: #aa3333;
    color: #fff;
    border-color: #aa3333;
}
.admin-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1d22;
    color: #ccc;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #2a2d33;
    font-size: 13px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    animation: toastIn 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.admin-toast button {
    background: none;
    border: 1px solid #00e5ff;
    color: #00e5ff;
    padding: 2px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.admin-toast button:hover {
    background: #00e5ff;
    color: #000;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.admin-site-select {
    background: #1a1d22;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 11px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.admin-site-select:focus {
    outline: 1px solid #00e5ff;
}
.admin-stat {
    color: #666;
    font-size: 10px;
}
.admin-stat-hidden {
    color: #aa3333;
}
.admin-sync-btn {
    background: #1a1d22;
    color: #00e5ff;
    border: 1px solid #00e5ff;
    border-radius: 3px;
    padding: 1px 8px;
    font-size: 10px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.admin-sync-btn:hover {
    background: #00e5ff;
    color: #000;
}
.admin-sync-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}
.admin-channel-btn {
    position: absolute;
    bottom: 42px;
    left: 6px;
    z-index: 10;
    background: rgba(30, 30, 50, 0.85);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 13px;
    line-height: 26px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}
.video-card:hover .admin-channel-btn,
.video-thumb:hover .admin-channel-btn {
    opacity: 0.8;
}
.admin-channel-btn:hover {
    opacity: 1 !important;
    background: rgba(0, 229, 255, 0.3);
}
.admin-edit-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 4px 0;
    padding: 6px 12px;
    background: #0d0f12;
    border-radius: 6px;
    border: 1px solid #2a2d33;
}
.admin-title-input {
    flex: 1;
    background: #1a1d22;
    color: #eee;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.admin-title-input:focus {
    outline: 1px solid #00e5ff;
    border-color: #00e5ff;
}
.admin-edit-row button {
    padding: 4px 12px;
    font-size: 11px;
    border-radius: 4px;
    border: 1px solid #444;
    background: #1a1d22;
    color: #aaa;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.admin-edit-row button:hover {
    background: #2a2d33;
    color: #fff;
}
.admin-btn-link {
    padding: 4px 12px;
    font-size: 11px;
    border-radius: 4px;
    background: transparent;
    color: #888;
    border: 1px solid #333;
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: background 0.2s, color 0.2s;
}
.admin-btn-link:hover {
    background: #2a2d33;
    color: #fff;
}
#admin-channel-stats {
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #aaa;
}
#admin-channel-stats b {
    color: #00e5ff;
}
.admin-filter-select {
    background: #1a1d22;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@media (max-width: 768px) {
    .admin-bar {
        gap: 0;
        padding: 3px 8px;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .admin-bar > * {
        flex: 1;
        text-align: center;
    }
    .admin-bar-logout {
        flex: 0;
        margin-left: 0;
    }
    .admin-stat {
        font-size: 9px;
    }
    .admin-sync-btn {
        display: none;
    }
    .admin-hide-btn {
        opacity: 0.7;
    }
    .admin-channel-btn {
        opacity: 0.7;
    }
    .admin-video-controls {
        margin: 8px -8px;
        border-radius: 0;
        padding: 8px;
    }
    .admin-edit-row {
        margin: 4px -8px;
        border-radius: 0;
        flex-wrap: wrap;
    }
}

/* Hub fortnite.video -- boutons pays + drapeau sur miniature (yego, 2026-09-27, v2 apres review amnor).
   Les boutons reutilisent .duration-btn : meme style que Tous / Shorts / Duree. Rien de dur en langue. */
.pays-flag{width:20px;height:13px;border-radius:2px;vertical-align:-2px;box-shadow:0 0 0 1px rgba(255,255,255,.18)}

/* Codes de langue a la place des drapeaux (gruid, 2026-10-01 -- meme regle que la vitrine du socle,
   decision 689). Meme usage que .pays-flag/.card-flag (identifier un pays sur une carte ou un bouton)
   mais du texte : un fond et une bordure le gardent lisible a cette taille. */
.pays-code,.card-code{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:15px;padding:0 3px;border-radius:3px;border:1px solid #333;background:#1a1a1a;color:#999;font-size:9px;font-weight:700;letter-spacing:.3px;vertical-align:-2px}

/* Pas de bouton dans le bouton (gruid, meme remarque que sur le socle) : le gros bouton pays replie
   (mobile, et son etat affiche avant ouverture) a deja le cadre de .duration-btn -- le code y prend
   le texte nu du bouton, comme ALL ou SHORTS, au lieu de redessiner un 2e cadre dedans. Sur ordinateur
   ce bouton est cache (regle plus bas) : la portee ici est en pratique mobile seule. */
.pays-btn-wrap>.pays-code{border:none;background:none;padding:0;min-width:0;height:auto;margin:0;color:inherit;font-size:12px;font-weight:600;letter-spacing:.5px;vertical-align:baseline}

/* Drapeau sur la miniature. `.video-thumb .card-flag` (0,2,0) l'emporte sur `.video-thumb img` (0,1,1)
   qui donne 100% x 100% a toute image de la vignette ; le :hover ne doit pas le zoomer. Sous le badge date.
   Cadre blanc 1px (demande gruid, 2026-09-28) -- garde le liseré sombre en plus pour rester lisible sur une
   miniature claire, où un cadre blanc seul se fondrait dans le fond. */
.video-thumb .card-flag,.live-thumb .card-flag{position:absolute;z-index:2;width:24px !important;height:16px !important;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.5);pointer-events:none;transform:none !important;filter:none !important}
.video-thumb .card-flag{top:26px;left:6px}
.video-thumb:hover .card-flag{transform:none !important;filter:none !important}
/* Drapeau sur les cartes live/lives termines (gruid, 2026-09-28) : sous le badge LIVE/heure, ne chevauche
   pas le compteur de viewers (haut-droite) ni le bandeau du bas (chaine + titre). */
.live-thumb .card-flag{top:24px;left:4px}
.live-thumb:hover .card-flag{transform:none !important;filter:none !important}

/* Meme emplacement que .card-flag, pour le code de langue (gruid, 2026-10-01) : le badge a deja son
   propre cadre (.card-code plus haut), pas besoin du cadre blanc/noir empile fait pour une image. */
.video-thumb .card-code,.live-thumb .card-code{position:absolute;z-index:2;pointer-events:none}
.video-thumb .card-code{top:26px;left:6px}
.live-thumb .card-code{top:24px;left:4px}
/* Plus gros sur ordinateur (gruid, 2026-10-01) : 9px etait trop petit sur une grande miniature.
   Le mobile garde la taille d'origine (cartes 2 par ligne). */
@media (min-width:769px){.video-thumb .card-code,.live-thumb .card-code{min-width:30px;height:20px;padding:0 5px;font-size:12px;border-radius:4px;letter-spacing:.5px}}

/* Bouton pays REPLIE (gruid, 2026-09-28 -- remplace les 7 boutons a plat du 27/09, qui forcaient la barre
   du bas a defiler au doigt sur mobile). Une seule icone visible (le pays courant, anglais par defaut),
   les 6 autres s'ouvrent au clic dans un menu qui remonte au-dessus du bouton sur mobile (barre fixee en
   bas), en-dessous sur desktop -- meme logique que la jauge.
   `position:fixed`, PAS `absolute` (correctif amnor, review #19833, point A) : `.duration-filters` est en
   `overflow-x:auto`, et un axe d'overflow non-visible force l'AUTRE axe a se comporter en auto aussi (regle
   CSS) -- un panneau absolu qui deborde EN HAUTEUR serait donc coupe. Meme mecanique que `.vcr-jauge` :
   fixed + position calculee en JS (voir le script plus bas), pas de CSS pur possible ici. */
.pays-btn-wrap{position:relative}
.pays-btn-wrap .pays-flag{margin:0}
.pays-btn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pays-dropdown{display:none;position:fixed;z-index:1000;background:#16191c;border:1.5px solid rgba(255,255,255,.15);border-radius:8px;padding:4px;flex-direction:column;min-width:130px;box-shadow:0 -6px 24px rgba(0,0,0,.5)}
.pays-btn-wrap.open .pays-dropdown{display:flex}
.pays-dropdown-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:4px;color:rgba(255,255,255,.7);text-decoration:none;font-family:'Burbank','Russo One',sans-serif;font-size:12px;font-style:italic;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.pays-dropdown-item:hover{background:rgba(255,255,255,.08);color:#fff}
.pays-dropdown-item.active{background:rgba(140,50,255,.15);color:#fff}
.duration-filters{overflow-x:auto;scrollbar-width:none}
.duration-filters::-webkit-scrollbar{display:none}
.duration-filters{justify-content:flex-start !important}
.duration-filters>:first-child{margin-left:auto}
.duration-filters>:last-child{margin-right:auto}
/* Mobile : la barre du bas reste UNE rangee. `overflow-x:auto` reste en filet de securite (elle defilait
   au doigt avant le repli des 7 pays en 1 seul bouton, gruid #19818) mais ne se declenche plus a 6 icones --
   sauf que les 6, AVEC leur texte, ne tiennent pas dans 390px (mesure amnor, review #19833/19840, point C :
   ~438px pour 390px dispo, "Past streams" a lui seul fait 87px). Icones seules sur mobile, texte gardé pour
   les lecteurs d'ecran (meme technique que le bouton pays deja icone-seule) -- plus robuste qu'un
   retrecissement des paddings : les labels allemands (ex. "Beendete Lives") sont plus longs que l'anglais,
   et ce fichier sert les 7 langues du hub. */
@media (max-width:768px){
    .duration-filters{display:flex !important;flex-wrap:nowrap !important;grid-template-columns:none !important;overflow-x:auto !important}
    /* Boutons agrandis (gruid, 2026-09-28, apres le passage en icones seules) : plus de marge tactile
       maintenant que le texte ne remplit plus le bouton.
       ⚠️ Mon 1er calcul (16px de chaque cote) ignorait les 4 separateurs + leurs marges et debordait de
       14px, mesure par amnor sur le vrai rendu (#19859, vw=390, scrollW=396). Repasse a 13px : 6 boutons
       x 2 cotes x 3px = 36px regagnes, marge au-dela des 14px demandes. */
    .duration-filters .duration-btn,.duration-filters .search-btn-wrap{flex:0 0 auto !important;min-width:52px;padding:12px 13px !important}
    .duration-filters .pays-btn-wrap{min-width:52px}
    .duration-filters .duration-btn .filter-icon,.duration-filters .search-btn-wrap .filter-icon{width:22px !important;height:22px !important}
    .duration-filters .pays-btn-wrap .pays-flag{width:26px;height:17px}
    .duration-filters .duration-btn>span,.duration-filters .search-btn-wrap>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    /* Exception (gruid, 2026-10-01) : sur le gros bouton pays mobile, .pays-code EST l'icone depuis le
       remplacement du drapeau -- la regle generique ci-dessus le traiterait comme le label texte d'un
       bouton normal et le rendrait invisible (meme piege que .live-now-dot, corrige en le gardant hors
       de la regle generique au lieu d'ajouter une exception ici -- mais .pays-code doit rester un <span>
       pour son usage sur les cartes et dans le menu, donc l'exception se fait ici, par specificite). */
    .duration-filters .pays-btn-wrap>span.pays-code{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap}
}