/* --- VARIABLES & DESIGN TIVIZER --- */
        :root {
            --tivizer-red: #ee273c;
            --tivizer-dark: #111111;
            --border-color: #eeeeee;
        }

        body {
            font-family: "Satoshi-Variable", sans-serif;
            background-color: #ffffff;
            color: #2a2a2a;
        }

        .sct-channel-content {
            padding: 40px 0; /* Réduit pour gagner de la place */
        }

        .chl-blk {
            max-width: 900px;
            margin: 0 auto;
        }

        /* --- BARRE DE RECHERCHE --- */
        .search-container {
            position: relative;
            margin-bottom: 15px;
        }

        .search-container i {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            font-size: 1.1rem;
            z-index: 5;
        }

        .search-bar {
            width: 100%;
            padding: 12px 20px 12px 50px;
            border: 2px solid var(--border-color);
            border-radius: 12px;
            font-size: 1rem;
            background: #ffffff;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .search-bar:focus {
            outline: none;
            border-color: var(--tivizer-red);
            box-shadow: 0 5px 15px rgba(238, 39, 60, 0.05);
        }

        /* --- SÉLECTEUR DE CATÉGORIE --- */
        .slct-cntry {
            width: 100%;
            padding: 14px 20px;
            background-color: var(--tivizer-red);
            color: white !important;
            border: none;
            border-radius: 12px;
            font-family: 'Satoshi-Black', sans-serif;
            font-size: 1.2rem;
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 20px center;
            box-shadow: 0px 5px 15px 0px rgba(238, 39, 60, 0.3);
            margin-bottom: 20px;
            text-align: left;
        }

        .slct-cntry option {
            background-color: white;
            color: black;
            font-family: sans-serif;
            font-size: 0.9rem;
        }

        /* --- TABLEAU --- */
        .channel-table-wrapper {
            background: #ffffff;
            border-radius: 15px;
            border: 1px solid var(--border-color);
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.02);
        }

        /* Hauteur réduite pour un tableau plus compact */
        .channel-list-scroll {
            max-height: 380px; 
            overflow-y: auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            scrollbar-width: thin;
            scrollbar-color: var(--tivizer-red) #f1f1f1;
        }

        .channel-list-scroll::-webkit-scrollbar { width: 5px; }
        .channel-list-scroll::-webkit-scrollbar-thumb { background-color: var(--tivizer-red); border-radius: 10px; }

        .channel-row {
            display: flex;
            align-items: center;
            padding: 8px 20px; /* Espacement réduit par deux */
            border-bottom: 1px solid #f9f9f9;
            border-right: 1px solid #f9f9f9;
            transition: background 0.2s ease;
        }

        .channel-row:nth-child(even) {
            border-right: none;
        }

        .channel-row:hover { background-color: #fffafb; }

        .play-icon {
            color: var(--tivizer-red);
            margin-right: 12px;
            font-size: 0.7rem;
        }

        .col-name {
            flex: 1;
            font-weight: 600;
            color: #333333;
            font-size: 0.85rem; /* Un peu plus petit pour le compact */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .loading-text {
            grid-column: span 2;
            padding: 30px;
            text-align: center;
            color: #999;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .channel-list-scroll {
                grid-template-columns: 1fr;
                max-height: 400px;
            }
            .channel-row { border-right: none; }
            .slct-cntry { font-size: 1.1rem; padding: 12px 15px; }
        }