/*
|--------------------------------------------------------------------------
| THÈME IMPACT AFRIQUE
|--------------------------------------------------------------------------
| Couleurs inspirées du logo officiel :
| - Or : #D8AF26
| - Bleu : #0869A7
| - Bleu nuit : #07182A
|--------------------------------------------------------------------------
*/

:root{
    --impact-gold:#d8af26;
    --impact-gold-light:#f4d95b;
    --impact-blue:#0869a7;
    --impact-blue-dark:#064a78;
    --impact-navy:#07182a;
    --impact-panel:#0d2238;
    --impact-panel-soft:#132d48;
    --impact-white:#ffffff;
    --impact-muted:#a9bdd0;
    --impact-border:rgba(216,175,38,.30);
}

html,
body{
    min-height:100%;
}

body{
    background:
        radial-gradient(circle at 78% 8%, rgba(8,105,167,.20), transparent 34%),
        linear-gradient(135deg,#06111f 0%,#08192b 48%,#0a2239 100%) !important;
    color:var(--impact-white);
}

.layout{
    min-height:100vh;
    background:transparent !important;
}

/*
|--------------------------------------------------------------------------
| COLONNE GAUCHE
|--------------------------------------------------------------------------
*/

.sidebar{
    width:370px !important;
    min-width:370px !important;
    height:100vh;
    padding:22px 18px !important;
    overflow-y:auto;
    background:
        linear-gradient(180deg,rgba(8,105,167,.98) 0%,rgba(6,74,120,.98) 46%,rgba(7,24,42,.99) 100%) !important;
    border-right:1px solid rgba(216,175,38,.28);
    box-shadow:18px 0 50px rgba(0,0,0,.24);
    scrollbar-width:thin;
    scrollbar-color:var(--impact-gold) transparent;
}

.sidebar::-webkit-scrollbar{
    width:6px;
}

.sidebar::-webkit-scrollbar-thumb{
    background:var(--impact-gold);
    border-radius:20px;
}

/*
|--------------------------------------------------------------------------
| LOGO ET NOM
|--------------------------------------------------------------------------
*/

.brand{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:24px;
    padding:6px 4px 14px;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.brand-logo{
    width:78px;
    height:78px;
    flex:0 0 78px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:5px;
    background:#fff;
    border:2px solid var(--impact-gold);
    border-radius:18px;
    box-shadow:
        0 9px 22px rgba(0,0,0,.24),
        0 0 0 4px rgba(216,175,38,.10);
}

.brand-logo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    border-radius:11px;
}

.brand-text{
    min-width:0;
}

.brand-text h1{
    margin:0;
    color:#fff;
    font-size:24px;
    font-weight:900;
    line-height:1.1;
    letter-spacing:.4px;
    text-shadow:0 2px 10px rgba(0,0,0,.22);
}

.brand-text span{
    display:block;
    margin-top:6px;
    color:var(--impact-gold-light);
    font-size:12px;
    font-style:italic;
    letter-spacing:.5px;
}

/*
|--------------------------------------------------------------------------
| RECHERCHE
|--------------------------------------------------------------------------
*/

.search-box{
    position:relative;
    display:flex;
    align-items:center;
    margin-bottom:18px;
}

.search-box i{
    position:absolute;
    left:16px;
    z-index:2;
    color:var(--impact-gold);
    font-size:16px;
}

.search-box input{
    width:100%;
    height:52px;
    padding:0 16px 0 47px !important;
    margin:0 !important;
    color:#fff !important;
    background:rgba(7,24,42,.78) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:14px !important;
    outline:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.search-box input::placeholder{
    color:#b8c8d7;
}

.search-box input:focus{
    border-color:var(--impact-gold) !important;
    box-shadow:0 0 0 3px rgba(216,175,38,.14) !important;
}

/*
|--------------------------------------------------------------------------
| ONGLETS
|--------------------------------------------------------------------------
*/

.tabs{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:10px !important;
    margin-bottom:18px !important;
}

.tab{
    min-height:46px;
    margin:0 !important;
    color:#d7e3ed !important;
    background:rgba(7,24,42,.75) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:13px !important;
    font-weight:800;
    cursor:pointer;
    transition:.22s ease;
}

.tab:hover{
    transform:translateY(-1px);
    border-color:rgba(216,175,38,.55) !important;
}

.tab.active{
    color:var(--impact-navy) !important;
    background:linear-gradient(135deg,var(--impact-gold-light),var(--impact-gold)) !important;
    border-color:var(--impact-gold-light) !important;
    box-shadow:0 8px 20px rgba(216,175,38,.20);
}

/*
|--------------------------------------------------------------------------
| LISTE DES CHAÎNES
|--------------------------------------------------------------------------
*/

.channels-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.channel-item{
    position:relative;
    display:flex !important;
    align-items:center;
    gap:13px;
    min-height:88px;
    padding:12px !important;
    margin:0 !important;
    color:#fff !important;
    background:rgba(7,24,42,.80) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:17px !important;
    text-decoration:none !important;
    box-shadow:0 8px 22px rgba(0,0,0,.12);
    transition:.22s ease;
}

.channel-item:hover{
    transform:translateY(-2px);
    background:rgba(13,34,56,.96) !important;
    border-color:rgba(216,175,38,.55) !important;
}

.channel-item.playing{
    background:
        linear-gradient(135deg,rgba(8,105,167,.98),rgba(6,74,120,.98)) !important;
    border:2px solid var(--impact-gold) !important;
    box-shadow:
        0 11px 25px rgba(0,0,0,.20),
        0 0 0 3px rgba(216,175,38,.11);
}

.channel-logo{
    position:relative;
    width:64px;
    height:64px;
    flex:0 0 64px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:5px;
    overflow:visible;
    background:#fff;
    border-radius:15px;
}

.channel-logo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    border-radius:10px;
}

.live-dot{
    position:absolute;
    right:-3px;
    bottom:-3px;
    width:13px;
    height:13px;
    background:#e83232;
    border:3px solid var(--impact-navy);
    border-radius:50%;
    box-shadow:0 0 0 2px rgba(232,50,50,.18);
}

.channel-meta{
    flex:1;
    min-width:0;
}

.channel-meta strong{
    display:block;
    overflow:hidden;
    color:#fff;
    font-size:16px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.channel-meta span{
    display:block;
    overflow:hidden;
    margin-top:6px;
    color:var(--impact-muted);
    font-size:12px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.favorite-star{
    width:38px !important;
    height:38px !important;
    flex:0 0 38px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 !important;
    margin:0 !important;
    color:var(--impact-gold-light) !important;
    background:transparent !important;
    border:0 !important;
    border-radius:50% !important;
    font-size:22px !important;
    cursor:pointer;
}

.favorite-star:hover{
    color:#fff2a8 !important;
    background:rgba(216,175,38,.10) !important;
    transform:scale(1.08);
}

.empty-channels{
    padding:24px;
    color:var(--impact-muted);
    background:rgba(7,24,42,.75);
    border:1px dashed var(--impact-border);
    border-radius:15px;
    text-align:center;
}

/*
|--------------------------------------------------------------------------
| PARTIE LECTEUR ET INFORMATIONS
|--------------------------------------------------------------------------
| Le contenu et les informations de la chaîne ne sont pas modifiés.
| Seules les couleurs et surfaces sont harmonisées avec le logo.
|--------------------------------------------------------------------------
*/

.content{
    background:transparent !important;
}

.player,
.tv-player-card{
    border:1px solid rgba(216,175,38,.18);
    box-shadow:0 18px 45px rgba(0,0,0,.28) !important;
}

.video-box{
    background:#000 !important;
    border-radius:18px 18px 0 0;
}

.channel-details{
    background:
        linear-gradient(145deg,rgba(13,34,56,.98),rgba(7,24,42,.98)) !important;
    border:1px solid rgba(216,175,38,.18);
    box-shadow:0 15px 38px rgba(0,0,0,.20);
}

.channel-details h1,
.channel-details strong{
    color:#fff;
}

.channel-details .badge-live{
    background:linear-gradient(135deg,#ef3030,#b90808) !important;
}

.channel-details .card{
    background:rgba(8,105,167,.10) !important;
    border:1px solid rgba(216,175,38,.17) !important;
}

.channel-details .card i{
    color:var(--impact-gold) !important;
}

.channel-details .card a{
    color:#79c8ff !important;
}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media(max-width:900px){

    .layout{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        height:auto !important;
        min-height:100vh !important;
    }

    /* Lecteur placé en haut */

    .content{
        order:1 !important;
        width:100% !important;
        padding:12px !important;
        overflow:visible !important;
    }

    /* Chaînes placées après le lecteur */

    .sidebar{
        order:2 !important;
        position:relative !important;
        width:100% !important;
        min-width:0 !important;
        height:auto !important;
        max-height:none !important;
        padding:16px 14px !important;
        overflow:visible !important;
        border-right:0;
        border-top:1px solid rgba(216,175,38,.25);
        border-bottom:0;
    }

    .video-box{
        width:100% !important;
        min-height:230px !important;
        border-radius:14px !important;
    }

    .video-box video,
    .video-box iframe{
        width:100% !important;
        height:auto !important;
        min-height:230px !important;
        aspect-ratio:16 / 9;
        object-fit:contain;
    }

    .iframe-player-wrapper,
    .iframe-player-wrapper iframe{
        min-height:230px !important;
    }

    .brand{
        justify-content:center;
    }

    .channels-list{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:580px){

    .sidebar{
        padding:16px 14px !important;
    }

    .brand{
        justify-content:flex-start;
    }

    .brand-logo{
        width:66px;
        height:66px;
        flex-basis:66px;
    }

    .brand-text h1{
        font-size:21px;
    }

    .channels-list{
        grid-template-columns:1fr;
    }

    .channel-item{
        min-height:80px;
    }

    .channel-logo{
        width:58px;
        height:58px;
        flex-basis:58px;
    }
}
.channel-item.favorite-hidden{
    display:none !important;
}
/* Numéro de chaîne */

.channel-number{

    width:48px;
    min-width:48px;
    height:26px;

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

    background:#111;

    color:#FFD54A;

    border:1px solid #FFD54A;

    border-radius:6px;

    font-size:14px;

    font-weight:700;

    margin:0 12px;

    box-shadow:none;

    font-family:Arial,sans-serif;

}