@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
*{box-sizing:border-box}
html,body{margin:0;padding:0;padding-bottom:80px !important;background-color:#0f0f0f;color:#fff;font-family:'Roboto',Arial,sans-serif;pointer-events:auto !important;overflow-x:hidden;touch-action:manipulation}
body.light-mode{background-color:#f2f2f2;color:#111}
body.light-mode .header{background-color:#fff;border-bottom:1px solid #e0e0e0}
body.light-mode .logo-area{color:#111}
body.light-mode .menu-btn svg,body.light-mode .search-icon,body.light-mode .dots-btn svg{fill:#333}
body.light-mode .search-box{background-color:#f9f9f9;border:1px solid #ccc}
body.light-mode .search-box input[type="text"]{color:#111}
body.light-mode .search-btn{background-color:#eaeaea;border-left:1px solid #ccc}
body.light-mode .tabs{background:#fff;border-top:1px solid #e0e0e0}
body.light-mode .tab svg{fill:#888}
body.light-mode .tab.active svg{fill:#007c91}
body.light-mode .video-card,body.light-mode .video-card-compact{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
body.light-mode .swipe-content{background-color:#f2f2f2}
body.light-mode .title,body.light-mode .title-compact,body.light-mode .watch-title,body.light-mode .history-title{color:#111}
body.light-mode .channel,body.light-mode .meta-info,body.light-mode .watch-meta{color:#666}
body.light-mode .history-query{background:#fff;color:#111;border:1px solid #ddd}
body.light-mode .history-query span{color:#888}
body.light-mode .account-panel{background:#fff !important;box-shadow:0 2px 10px rgba(0,0,0,0.05);border:none !important}
body.light-mode .account-panel-title{color:#111}
body.light-mode .auth-input{background:#f9f9f9 !important;border:1px solid #ccc !important;color:#111}
body.light-mode .chip{background:#f0f0f0;border-color:#ddd;color:#555}
body.light-mode .chip.active{background:#007c91;color:#fff;border-color:#007c91}
body.light-mode .sidebar{background:#fff !important}
body.light-mode .sidebar-header{border-bottom:1px solid #e0e0e0}
body.light-mode .sidebar-header-title,body.light-mode .sidebar-item{color:#111}
body.light-mode .sidebar-divider{background:#e0e0e0}
body.light-mode .action-sheet{background:#fff !important}
body.light-mode .action-header{color:#111;border-bottom:1px solid #e0e0e0}
body.light-mode .action-item{color:#111}
body.light-mode .action-item svg{fill:#111}
body.light-mode .action-item.block-item{color:#ff5252}
body.light-mode .action-item.block-item svg{fill:#ff5252}
body.light-mode .playlist-modal,body.light-mode .auth-box,body.light-mode .welcome-box{background:#fff !important}
body.light-mode .playlist-modal-title,body.light-mode .auth-title,body.light-mode .welcome-title{color:#111}
body.light-mode .playlist-option{background:#f0f0f0;color:#111}
body.light-mode .sticky-player-wrapper{background-color:#f2f2f2;border-bottom:1px solid #ccc}
body.light-mode #watch-view{background-color:#f2f2f2}
body.light-mode .autocomplete-items{background-color:#fff;border:1px solid #ccc}
body.light-mode .autocomplete-item{color:#111;border-bottom:1px solid #eee}
body.light-mode .autocomplete-item:hover{background-color:#f0f0f0}
#desktop-blocker{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0f0f0f;z-index:9999999;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
#auth-view{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:9999;display:flex;flex-direction:column;justify-content:center;padding:30px}
.auth-box{background:#1a1a1a;padding:30px;border-radius:15px;box-shadow:0 10px 40px rgba(0,0,0,0.9);position:relative}
.auth-close{position:absolute;top:15px;right:20px;background:none;border:none;color:#aaa;font-size:24px;cursor:pointer}
.auth-title{font-size:22px;font-weight:700;text-align:center;margin-bottom:25px;color:#fff}
.auth-input{width:100%;padding:14px 15px;margin-bottom:15px;border-radius:8px;border:1px solid #333 !important;background:#121212 !important;color:#fff;font-size:16px;outline:none}
.auth-input:focus{border-color:#007c91 !important}
.auth-btn{width:100%;padding:14px;border-radius:8px;border:none;background:#007c91;color:#fff;font-size:16px;font-weight:bold;cursor:pointer;transition:background 0.2s}
.auth-btn:active{background:#005b6b}
.auth-switch{text-align:center;margin-top:20px;font-size:14px;color:#aaa;cursor:pointer}
.auth-switch span{color:#007c91;font-weight:500}
.auth-error{color:#ff5252;text-align:center;margin-bottom:15px;font-size:14px;display:none;background:rgba(255,82,82,0.1);padding:10px;border-radius:8px}
.divider-container{display:flex;align-items:center;text-align:center;margin:20px 0;color:#555}
.divider-container::before,.divider-container::after{content:'';flex:1;border-bottom:1px solid #333}
.divider-container:not(:empty)::before{margin-right:.5em}
.divider-container:not(:empty)::after{margin-left:.5em}
.checkbox-container{display:flex;align-items:center;margin-bottom:20px;color:#aaa;font-size:14px}
.checkbox-container input[type="checkbox"]{width:18px;height:18px;margin-right:10px;accent-color:#007c91;cursor:pointer}
.account-panel{background:#1a1a1a !important;padding:20px;border-radius:12px;margin-bottom:20px;border:1px solid #333}
.account-panel-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:10px}
.chip{display:inline-block;padding:8px 16px;border-radius:20px;background:#222;border:1px solid #333;color:#aaa;cursor:pointer;font-size:13px;font-weight:500;margin-bottom:8px}
.chip.active{background:#007c91;border-color:#007c91;color:#fff}
#welcome-popup,#payment-success-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:10000;flex-direction:column;justify-content:center;align-items:center;padding:30px}
.welcome-box{background:#1a1a1a;padding:30px;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.9);text-align:center;max-width:400px;width:100%;animation:popIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275)}
.welcome-title{font-size:24px;font-weight:700;margin-bottom:10px;color:#fff}
.welcome-text{color:#aaa;font-size:16px;margin-bottom:25px;line-height:1.5}
@keyframes popIn{0%{transform:scale(0.8);opacity:0}100%{transform:scale(1);opacity:1}}
#renewal-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);z-index:11000;flex-direction:column;justify-content:center;align-items:center;padding:30px;text-align:center}
#renewal-close-btn{margin-top:20px;padding:10px 20px;border-radius:8px;border:1px solid #555;background:transparent;color:#aaa;font-size:14px;font-weight:bold;cursor:pointer;transition:0.2s}
#renewal-close-btn.active{color:#fff;border-color:#fff;background:#222}
#webview-popup,#safari-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);z-index:12000;flex-direction:column;justify-content:center;align-items:center;padding:30px;text-align:center}
.instruction-text{color:#aaa;font-size:15px;text-align:left;line-height:1.6;margin-bottom:20px;background:#222;padding:15px;border-radius:8px}
.copy-btn{background:#222;border:1px solid #444;color:#fff;padding:14px;border-radius:8px;width:100%;font-size:15px;font-weight:bold;cursor:pointer;transition:0.2s}
.copy-btn:active{background:#333}
.header{position:fixed;top:0;left:0;width:100%;background-color:#0f0f0f;z-index:900;border-bottom:1px solid #303030;display:flex;flex-direction:column}
.header-top{display:flex;justify-content:space-between;align-items:center;padding:10px 15px}
.logo-area{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:700;color:#fff;letter-spacing:-0.5px}
.logo-area img{width:32px;height:32px;object-fit:contain}
.menu-btn{background:none;border:none;padding:5px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.menu-btn svg{fill:#fff;width:28px;height:28px}
.search-container{padding:0 15px 12px 15px;position:relative;display:flex;align-items:center;width:100%}
.search-box{flex:1;display:flex;align-items:center;background-color:#121212;border:1px solid #303030;border-radius:40px;overflow:hidden;position:relative}
.search-box input[type="text"]{flex:1;padding:10px 45px 10px 20px;font-size:16px;background:transparent;color:#fff;border:none;outline:none;width:100%}
.clear-btn{position:absolute;right:55px;top:0;bottom:0;background:transparent;border:none;color:#aaa;font-size:18px;cursor:pointer;display:none;padding:0 12px;align-items:center;justify-content:center;z-index:10}
button.search-btn{background-color:#222;border:none;border-left:1px solid #303030;padding:8px 20px;cursor:pointer;display:flex;align-items:center;flex-shrink:0;height:100%}
.search-icon{fill:#fff;width:20px;height:20px;opacity:0.8}
.autocomplete-items{position:absolute;top:100%;left:15px;right:15px;background-color:#222;border:1px solid #303030;border-radius:15px;z-index:99;margin-top:-5px;max-height:200px;overflow-y:auto;display:none;box-shadow:0 4px 10px rgba(0,0,0,0.5)}
.autocomplete-item{padding:12px 20px;cursor:pointer;color:#fff;font-size:15px;border-bottom:1px solid #303030;display:flex;align-items:center}
.autocomplete-item:last-child{border-bottom:none}
.autocomplete-item:hover{background-color:#333}
.tabs{position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;width:100% !important;display:flex;background:#0f0f0f;border-top:1px solid #303030;z-index:9998 !important;justify-content:space-around;padding:12px 0;padding-bottom:calc(12px + env(safe-area-inset-bottom));transform:translateZ(0);-webkit-transform:translateZ(0)}
.tab{flex:1;display:flex;justify-content:center;align-items:center;cursor:pointer}
.tab svg{width:26px;height:26px;fill:#aaa;transition:fill 0.2s}
.tab.active svg{fill:#fff}
.app-view{display:none;padding-top:115px;padding-bottom:30px}
.app-view.active{display:block}
.video-card{position:relative;border-radius:12px;overflow:hidden;background:transparent;margin-bottom:20px}
.swipe-actions{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:space-between;z-index:1}
.action-bg{width:50%;height:100%;display:flex;align-items:center;padding:0 25px}
.action-bg.left{justify-content:flex-start}
.action-bg.right{justify-content:flex-end}
.action-bg svg{width:32px;height:32px;fill:#fff}
.swipe-content{position:relative;z-index:2;background-color:#0f0f0f;width:100%;transition:transform 0.25s ease-out}
.swipe-content.swiping{transition:none}
.thumbnail-container{position:relative;width:100%}
.thumbnail{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.duration-badge{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,0.85);color:#fff;font-size:12px;padding:3px 6px;border-radius:4px;font-weight:500;letter-spacing:0.5px}
.video-card-compact{display:flex;gap:12px;margin-bottom:12px;cursor:pointer;align-items:center}
.thumbnail-container-compact{position:relative;width:140px;flex-shrink:0;border-radius:8px;overflow:hidden;align-self:flex-start}
.thumbnail-compact{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.info-compact{display:flex;flex-direction:column;flex:1;overflow:hidden;padding-top:2px}
.title-compact{color:#fff;font-size:13px;font-weight:500;margin-bottom:4px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.channel-compact{color:#aaa;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.details{padding:12px 15px;display:flex;gap:12px;align-items:flex-start}
.avatar{width:36px;height:36px;border-radius:50%;background-color:#333;flex-shrink:0;object-fit:cover;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:16px;color:#fff}
.info{display:flex;flex-direction:column;flex:1;overflow:hidden}
.title{color:#fff;font-size:14px;font-weight:500;margin-bottom:4px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:5px}
.channel{color:#aaa;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta-info{color:#aaa;font-size:12px;margin-top:2px}
.dots-btn{background:none;border:none;cursor:pointer;padding:5px;margin:-5px}
.dots-btn svg{fill:#fff;width:20px;height:20px;opacity:0.8}
.msg{padding:20px;text-align:center;color:#aaa;font-size:14px}
.history-section{padding:15px}
.history-title{font-size:16px;font-weight:700;margin-bottom:15px;padding-bottom:5px;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center}
.history-query{display:inline-flex;align-items:center;background:#272727;padding:8px 16px;border-radius:20px;margin:0 8px 8px 0;cursor:pointer;font-size:14px}
.history-query span{margin-left:10px;color:#aaa;font-weight:bold;padding:0 2px;cursor:pointer}
#watch-view{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0f0f0f;z-index:1000;overflow-y:auto;padding-bottom:80px;transition:all 0.3s ease}
.sticky-player-wrapper{position:sticky;top:0;width:100%;background-color:#0f0f0f;z-index:201;border-bottom:1px solid #303030}
.player-container{width:100%;background:#000;position:relative}
#iframe-wrapper{width:100%;aspect-ratio:16/9;position:relative}
#iframe-wrapper iframe{position:absolute;top:0;left:0;width:100% !important;height:100% !important;border:none;display:block;pointer-events:auto}
.close-player-btn{position:absolute;top:10px;left:10px;background:rgba(0,0,0,0.6);color:#fff;border:none;width:35px;height:35px;border-radius:50%;font-size:18px;cursor:pointer;z-index:202;display:flex;justify-content:center;align-items:center}
.mini-overlay{display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:205;cursor:pointer}
.watch-details{padding:15px}
.watch-title{font-size:18px;font-weight:700;margin-bottom:6px;line-height:1.3}
.watch-meta{color:#aaa;font-size:13px;margin-bottom:15px;font-weight:500}
.channel-row{display:flex;align-items:center;gap:8px;border-top:1px solid #222;padding-top:15px;flex-wrap:wrap}
.channel-name{font-weight:500;font-size:14px;flex:1;min-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav-btn-player{background:#222;border:none;display:flex;align-items:center;gap:6px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;padding:8px 12px;border-radius:20px}
.fav-btn-player svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;transition:all 0.2s}
.fav-btn-player.is-fav{background:#007c91}
.fav-btn-player.is-fav svg{fill:#fff;stroke:#fff}
.suggestions-section{padding-top:5px;padding-bottom:30px}
.suggestions-header{padding:0 15px;font-weight:700;margin-bottom:15px;font-size:16px}
#watch-view.mini-mode{top:auto;left:auto;right:15px;bottom:calc(70px + env(safe-area-inset-bottom));width:220px;height:124px;background-color:transparent;overflow:visible;padding-bottom:0;z-index:950;border-radius:8px;box-shadow:0 15px 40px rgba(0,0,0,0.9);border:1px solid #333}
#watch-view.mini-mode .sticky-player-wrapper{background-color:transparent;border-bottom:none}
#watch-view.mini-mode .player-container{border-radius:8px;overflow:hidden;height:100%}
#watch-view.mini-mode .player-container::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.1);pointer-events:none}
#watch-view.mini-mode #iframe-wrapper iframe{border-radius:8px;pointer-events:none;width:100%;height:100%}
#watch-view.mini-mode .watch-details,#watch-view.mini-mode .suggestions-section{display:none}
#watch-view.mini-mode .mini-overlay{display:block}
#watch-view.mini-mode .close-player-btn{top:5px;right:5px;left:auto;width:26px;height:26px;background:rgba(0,0,0,0.8);border:1px solid #555;font-size:12px;font-weight:bold;color:#fff;z-index:206;border-radius:50%;display:flex;align-items:center;justify-content:center}
.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0}
.spinner{border:4px solid rgba(255,255,255,0.1);width:40px;height:40px;border-radius:50%;border-left-color:#007c91;animation:spin 1s linear infinite;margin-bottom:10px}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.action-sheet-backdrop{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:10010}
.action-sheet{position:fixed !important;bottom:-150%;left:0;width:100%;background:#222 !important;border-radius:15px 15px 0 0;z-index:10011;transition:bottom 0.3s cubic-bezier(0.25,0.8,0.25,1);padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.action-sheet.active{bottom:0}
.action-header{padding:15px 20px;font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.action-item{padding:15px 20px;display:flex;align-items:center;gap:15px;font-size:16px;cursor:pointer;color:#fff}
.action-item svg{width:24px;height:24px;fill:#fff;flex-shrink:0}
#playlist-modal-backdrop,#block-modal-backdrop{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:10015}
.playlist-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:360px;border-radius:15px;padding:20px;z-index:10016;display:none;box-shadow:0 10px 30px rgba(0,0,0,0.8);background:#1a1a1a !important;color:#fff}
.playlist-modal-title{font-size:18px;font-weight:700;margin-bottom:15px}
.playlist-option{padding:12px;border-radius:8px;margin-bottom:8px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:14px}
.new-pl-input-container{margin-top:15px;border-top:1px solid #333;padding-top:15px}
.playlist-card-badge{background:#007c91;color:#fff;padding:2px 8px;border-radius:12px;font-size:11px}
.sidebar-backdrop{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:1000}
.sidebar{position:fixed;top:0;left:-280px;width:280px;height:100%;z-index:1001;transition:left 0.3s cubic-bezier(0.25,0.8,0.25,1);display:flex;flex-direction:column;background:#1a1a1a !important}
.sidebar.active{left:0}
.sidebar-header{padding:25px 20px;display:flex;align-items:center;justify-content:space-between}
.sidebar-header-icon{width:40px;height:40px;background:#007c91;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:18px;color:#fff}
.sidebar-header-title{font-size:18px;font-weight:700;line-height:1.2;color:#fff}
.lang-switch{font-size:14px;font-weight:bold;color:#555}
.lang-switch span{cursor:pointer;padding:5px}
.lang-switch span.active{color:#007c91}
.sidebar-item{padding:16px 20px;display:flex;align-items:center;gap:20px;font-size:16px;font-weight:500;cursor:pointer;color:#eee}
.sidebar-item svg{fill:#aaa;width:24px;height:24px}
.sidebar-divider{height:1px;margin:10px 0;background:#303030}
    </style>
</head>
<body>

<div id="desktop-blocker">
    <svg viewBox="0 0 24 24" style="fill:#fff; width:64px; height:64px; margin-bottom:20px;"><path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>
    <h2 data-lang="desktop_title" style="margin-bottom: 10px; color:#fff;">Application Mobile</h2>
    <p data-lang="desktop_desc" style="color: #aaa; line-height: 1.5; max-width: 400px;">Night-Tube est conçue exclusivement pour les téléphones mobiles. Veuillez ouvrir ce lien sur votre smartphone.</p>
    <button onclick="document.getElementById('desktop-blocker').style.display='none'" style="margin-top:20px; padding:10px 20px; background:#222; color:#fff; border:1px solid #444; border-radius:8px; cursor:pointer;">Tester quand même</button>
</div>

<!-- LIAISON DES FICHIERS EXTERNES ICI -->
<link rel="stylesheet" href="style.css?v=1.0">

<div id="auth-view" style="display:none;">
    <div class="auth-box" id="login-box">
        <button class="auth-close" onclick="document.getElementById('auth-view').style.display='none';">&times;</button>
        <div class="auth-title" data-lang="login_title">Log In</div>
        <div id="login-error" class="auth-error"></div>
        <div id="g_id_onload" data-client_id="1084347352522-nnbj65poljef1tqhod0v7s5t5vplhsl6.apps.googleusercontent.com" data-callback="handleGoogleLogin" data-auto_prompt="false"></div>
        <div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="filled_black" data-text="continue_with" data-size="large" data-logo_alignment="left" style="display: flex; justify-content: center; margin-bottom: 15px; width: 100%;"></div>
        <div class="divider-container" data-lang="or_email">or with your email</div>
        <input type="email" id="log-email" class="auth-input" data-lang-placeholder="email_placeholder" placeholder="Email address">
        <input type="password" id="log-mdp" class="auth-input" data-lang-placeholder="pwd_placeholder" placeholder="Password">
        <div class="checkbox-container"><input type="checkbox" id="log-remember" checked><label for="log-remember" data-lang="stay_connected">Stay connected</label></div>
        <button class="auth-btn" onclick="apiConnexion()" data-lang="btn_login">Log In</button>
        <div class="auth-switch" onclick="basculerAuth('register')" data-lang="no_account">No account? <span>Sign Up</span></div>
    </div>
    <div class="auth-box" id="register-box" style="display:none;">
        <button class="auth-close" onclick="document.getElementById('auth-view').style.display='none';">&times;</button>
        <div class="auth-title" data-lang="reg_title">Sign Up (14 Days Free)</div>
        <div id="reg-error" class="auth-error"></div>
        <input type="text" id="reg-nom" class="auth-input" data-lang-placeholder="lname_placeholder" placeholder="Last Name">
        <input type="text" id="reg-prenom" class="auth-input" data-lang-placeholder="fname_placeholder" placeholder="First Name">
        <input type="text" id="reg-pays" class="auth-input" data-lang-placeholder="country_placeholder" placeholder="Country (e.g., US, UK, FR)">
        <input type="email" id="reg-email" class="auth-input" data-lang-placeholder="email_placeholder" placeholder="Email address">
        <input type="password" id="reg-mdp" class="auth-input" data-lang-placeholder="pwd_placeholder" placeholder="Password">
        <button class="auth-btn" onclick="apiInscription()" data-lang="btn_start_trial">Start my free trial</button>
        <div class="auth-switch" onclick="basculerAuth('login')" data-lang="has_account">Already have an account? <span>Log In</span></div>
    </div>
</div>

<div id="webview-popup">
    <div class="welcome-box">
        <div style="font-size:36px; margin-bottom:10px;">🚀</div>
        <div class="welcome-title" data-lang="req_install_title">Watch without ads</div>
        <div class="welcome-text" style="font-size: 14px; margin-bottom: 20px;" data-lang="req_install_desc">Leave Facebook to install the app.</div>
        
        <div class="instruction-text" id="webview-instruction-android" style="display:none;">
            <span data-lang="and_step1">👉 Tap <strong>⋮</strong></span><br><br>
            <span data-lang="and_step2">👉 <strong>Open in Chrome</strong></span>
        </div>
        
        <div class="instruction-text" id="webview-instruction-ios" style="display:none;">
            <span data-lang="ios_step1">👉 Tap the Safari icon</span>
        </div>
        
        <div class="divider-container" style="margin: 15px 0; font-size: 12px;" data-lang="or_divider">OR</div>
        <button class="copy-btn" id="btn-copy-link" onclick="copierLienApp()" data-lang="btn_copy_link">🔗 Copy app link</button>
        <button class="auth-btn" id="btn-got-it-webview" style="background:transparent; border:1px solid #555; color:#aaa; margin-top: 10px;" onclick="document.getElementById('webview-popup').style.display='none';" data-lang="btn_got_it">Got it</button>
    </div>
</div>

<div id="safari-popup">
    <div class="welcome-box">
        <div style="font-size:36px; margin-bottom:10px;">🍏</div>
        <div class="welcome-title" data-lang="safari_title">Install on iPhone</div>
        <div class="instruction-text" style="margin-bottom: 20px;" data-lang="safari_desc">
            1️⃣ Tap <strong>Share ⬆️</strong><br><br>2️⃣ Tap <strong>Add to Home Screen ➕</strong>
        </div>
        <button class="auth-btn" onclick="document.getElementById('safari-popup').style.display='none';" data-lang="btn_got_it">Got it</button>
    </div>
</div>

<div id="welcome-popup">
    <div class="welcome-box">
        <div style="width:60px; height:60px; background:#007c91; border-radius:50%; display:flex; align-items:center; justify-content:center; margin: 0 auto 20px;">
            <svg viewBox="0 0 24 24" style="width:34px; height:34px; fill:#fff;"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
        </div>
        <div class="welcome-title"><span data-lang="welcome_title">Welcome</span> <span id="welcome-name"></span></div>
        <div class="welcome-text" id="welcome-desc"></div>
        <button class="auth-btn" onclick="fermerWelcomePopup()" data-lang="btn_continue">Continue to app</button>
    </div>
</div>

<div id="payment-success-popup">
    <div class="welcome-box">
        <div style="width:60px; height:60px; background:#4caf50; border-radius:50%; display:flex; align-items:center; justify-content:center; margin: 0 auto 20px;">
            <svg viewBox="0 0 24 24" style="width:34px; height:34px; fill:#fff;"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
        </div>
        <div class="welcome-title" data-lang="pay_success_title">Payment Successful!</div>
        <div class="welcome-text" id="payment-success-desc" data-lang="pay_success_desc">Subscription activated.</div>
        <button class="auth-btn" onclick="fermerPaymentSuccess()" data-lang="btn_got_it">Got it</button>
    </div>
</div>

<div id="renewal-popup">
    <svg style="width:72px;height:72px;fill:#ff9800;margin-bottom:20px;" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
    <div style="font-size:24px; font-weight:700; margin-bottom:15px; color:#fff;" data-lang="renew_req_title">Subscription Required</div>
    <div style="color:#aaa; font-size:16px; margin-bottom:30px; max-width:90%; line-height: 1.5;" data-lang="renew_req_desc">To enjoy this feature and ad-free viewing, please renew your subscription.</div>
    <div id="paypal-button-container-renewal" style="width: 100%; max-width: 300px; min-height: 150px; margin-bottom: 20px;"></div>
    <button id="renewal-close-btn" onclick="fermerPopupRenouvellement()" data-lang="btn_close">Close</button>
</div>

<div id="sleep-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 999999;" onclick="desactiverModeNuit()"></div>

<div class="sidebar-backdrop" id="sidebar-backdrop" onclick="fermerMenuSidebar()"></div>
<div class="sidebar" id="sidebar">
    <div class="sidebar-header">
        <div style="display:flex; align-items:center; gap:15px;">
            <div class="sidebar-header-icon" id="sb-initial">?</div>
            <div class="sidebar-header-title">
                <div id="sb-prenom" style="font-size: 16px;">Guest</div>
                <div id="sb-nom" style="font-size: 13px; color: #aaa; font-weight: 400;">Not connected</div>
            </div>
        </div>
        <div class="lang-switch"><span id="lang-en" onclick="setLang('en')">EN</span> | <span id="lang-fr" onclick="setLang('fr')">FR</span></div>
    </div>
    
    <div class="sidebar-item" onclick="toggleTheme(); fermerMenuSidebar();"><svg viewBox="0 0 24 24"><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/></svg><span id="theme-text" data-lang="theme_light">Mode Clair</span></div>
    <div class="sidebar-divider"></div>
    <div class="sidebar-item" onclick="changerOnglet('home'); fermerMenuSidebar();"><svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg><span data-lang="menu_home">Home</span></div>
    <div class="sidebar-item" onclick="changerOnglet('account'); fermerMenuSidebar();"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg><span data-lang="menu_account">My Account</span></div>
    <div class="sidebar-item" onclick="changerOnglet('playlists'); fermerMenuSidebar();"><svg viewBox="0 0 24 24"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 9h-3v3h-2v-3H11V9h3V6h2v3h3v2z"/></svg><span data-lang="menu_playlists">My Playlists</span></div>
    <div class="sidebar-item" onclick="changerOnglet('favorites'); fermerMenuSidebar();"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><span data-lang="menu_fav">My Favorites</span></div>
    <div class="sidebar-item" onclick="changerOnglet('liked'); fermerMenuSidebar();"><svg viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg><span data-lang="menu_liked">Liked Videos</span></div>
    <div class="sidebar-item" onclick="changerOnglet('history'); fermerMenuSidebar();"><svg viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg><span data-lang="menu_history">History</span></div>
    <div class="sidebar-divider" id="install-divider" style="display:none;"></div>
    <div class="sidebar-item" id="install-btn" onclick="declencherInstallation()" style="display:none; color:#ffeb3b;"><svg viewBox="0 0 24 24" style="fill:#ffeb3b;"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg><span data-lang="menu_install">Install App</span></div>
    <div class="sidebar-divider"></div>
    <div class="sidebar-item" onclick="changerOnglet('blocked'); fermerMenuSidebar();"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg><span data-lang="menu_blocked">Blocked Videos</span></div>
    <div class="sidebar-divider"></div>
    <div class="sidebar-item" id="btn-logout-sidebar" onclick="apiDeconnexion()" style="color:#ff5252;"><svg viewBox="0 0 24 24" style="fill:#ff5252;"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg><span data-lang="menu_logout">Log Out</span></div>
</div>

<div class="header">
    <div class="header-top">
        <div class="logo-area" onclick="clicOngletAccueil()" style="cursor:pointer;"><img src="nt.png" alt="Night Tube"><span>Night Tube</span></div>
        <button class="menu-btn" onclick="ouvrirMenuSidebar()"><svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg></button>
    </div>
    <div class="search-container">
        <div class="search-box">
            <input type="text" id="q" data-lang-placeholder="search_placeholder" placeholder="Search YouTube" autocomplete="off">
            <button type="button" class="clear-btn" id="clear-search-btn" onclick="viderRecherche()">✕</button>
            <button type="button" class="search-btn" onclick="chercher();"><svg class="search-icon" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></button>
        </div>
        <div id="autocomplete-list" class="autocomplete-items"></div>
    </div>
</div>

<div id="home-view" class="app-view active">
    <div id="home-feed"><div class="loader-container"><div class="spinner"></div><div style="color:#888; font-size:14px;" data-lang="gen_rec">Loading...</div></div></div>
</div>
<div id="search-view" class="app-view"><div id="res"></div></div>

<div id="account-view" class="app-view">
    <div class="history-section">
        <div class="history-title" data-lang="menu_account">My Account</div>
        <div class="account-panel">
            <div class="account-panel-title" data-lang="acc_info_title">My Information</div>
            <div id="acc-msg" style="color:#007c91; font-size:13px; margin-bottom:10px; display:none;" data-lang="acc_saved">Profile updated!</div>
            <input type="text" id="acc-prenom" class="auth-input" data-lang-placeholder="fname_placeholder" placeholder="First Name">
            <input type="text" id="acc-nom" class="auth-input" data-lang-placeholder="lname_placeholder" placeholder="Last Name">
            <input type="text" id="acc-pays" class="auth-input" data-lang-placeholder="country_placeholder" placeholder="Country">
            <button class="auth-btn" style="padding: 10px; font-size: 14px;" onclick="modifierProfil()" data-lang="btn_save">Save changes</button>
        </div>
        <div class="account-panel">
            <div class="account-panel-title" data-lang="interests_title">Mes Centres d'intérêt</div>
            <div style="font-size:13px; color:#aaa; margin-bottom:15px; line-height:1.4;" data-lang="interests_desc">Aidez-nous à vous présenter la meilleure expérience en sélectionnant vos thèmes favoris.</div>
            <div id="interests-container" style="display:flex; flex-wrap:wrap; gap:8px;"></div>
            <button class="auth-btn" style="padding: 10px; font-size: 14px; margin-top:15px;" onclick="sauvegarderInterets()" data-lang="btn_save_interests">Enregistrer les thèmes</button>
        </div>
        <div class="account-panel">
            <div class="account-panel-title" data-lang="acc_sub_title">My Subscription</div>
            <div style="font-size:14px; color:#aaa; margin-bottom:5px;"><span data-lang="status">Status : </span><span id="acc-status" style="font-weight:bold;"></span></div>
            <div style="font-size:14px; color:#aaa; margin-bottom:15px;"><span data-lang="expiration">Expiration : </span><span id="acc-expiration" style="font-weight:bold; color:#007c91;">...</span></div>
            <button id="btn-show-pay" class="auth-btn" style="padding: 10px; font-size: 14px; background:transparent; border: 1px solid #007c91; color:#007c91;" onclick="afficherPaiement()" data-lang="btn_renew">Renew my subscription</button>
            <div id="payment-section" style="display:none; margin-top:15px; border-top: 1px solid #ddd; padding-top:15px;">
                <div style="font-size:14px; color:#aaa; margin-bottom:10px;" data-lang="pay_method">Choose your payment method (€4.99/month) :</div>
                <div id="paypal-button-container" style="min-height: 150px;"></div>
            </div>
        </div>
    </div>
</div>

<div id="history-view" class="app-view">
    <div class="history-section"><div class="history-title" data-lang="hist_recent">Recent searches</div><div id="search-history-list"></div></div>
    <div class="history-section"><div class="history-title" data-lang="hist_watched">Watched videos</div><div id="watch-history-list"></div></div>
</div>
<div id="favorites-view" class="app-view"><div class="history-section"><div class="history-title" data-lang="fav_title">My Favorites</div><div id="favorites-list"></div></div></div>
<div id="liked-view" class="app-view"><div class="history-section"><div class="history-title" data-lang="liked_title">Liked Videos</div><div id="liked-list"></div></div></div>
<div id="playlists-view" class="app-view">
    <div class="history-section"><div class="history-title"><span data-lang="pl_title">My Playlists</span><button class="auth-btn" style="width: auto; padding: 6px 12px; font-size: 12px;" onclick="ouvrirModalPlaylist(null)" data-lang="btn_new_pl">+ New</button></div><div id="playlists-list"></div></div>
</div>
<div id="blocked-view" class="app-view"><div class="history-section" style="padding-top: 10px;"><div id="blocked-list"></div></div></div>

<div id="watch-view">
    <div class="sticky-player-wrapper">
        <div class="player-container">
            <button class="close-player-btn" onclick="fermerVideo(event)">✕</button>
            <div class="mini-overlay" onclick="restaurerVideo(event)"></div>
            <div id="iframe-wrapper"></div>
        </div>
    </div>
    <div class="watch-details">
        <div class="watch-title" id="w-title"></div>
        <div class="watch-meta" id="w-meta"></div>
        <div class="channel-row">
            <div id="w-channel-logo"></div>
            <div class="channel-name" id="w-channel"></div>
            <button class="fav-btn-player" onclick="partagerVideo()"><svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg><span id="w-share-text" data-lang="share_btn">Share</span></button>
            <button class="fav-btn-player" id="w-like-btn" onclick="toggleLikeLecteur()"><svg viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/></svg><span id="w-like-text">Like</span></button>
            <button class="fav-btn-player" id="w-fav-btn" onclick="toggleFavoriLecteur()"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><span id="w-fav-text">Favorite</span></button>
        </div>
    </div>
    <div class="suggestions-section"><div class="suggestions-header" id="sug-header" data-lang="sug_title">Suggested videos</div><div id="suggestions-list"></div></div>
</div>

<div class="tabs">
    <div class="tab active" id="tab-home" onclick="clicOngletAccueil()"><svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg></div>
    <div class="tab" id="tab-search" onclick="changerOnglet('search')"><svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></div>
    <div class="tab" id="tab-playlists" onclick="changerOnglet('playlists')"><svg viewBox="0 0 24 24"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 9h-3v3h-2v-3H11V9h3V6h2v3h3v2z"/></svg></div>
    <div class="tab" id="tab-favorites" onclick="changerOnglet('favorites')"><svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></div>
    <div class="tab" id="tab-history" onclick="changerOnglet('history')"><svg viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg></div>
    <div class="tab" id="tab-sleep" onclick="activerModeNuit()"><svg viewBox="0 0 24 24"><path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/></svg></div>
</div>

<div class="action-sheet-backdrop" id="menu-backdrop" onclick="fermerMenuCarte()"></div>
<div class="action-sheet" id="menu-sheet">
    <div class="action-header" id="menu-title">...</div>
    <div class="action-item" onclick="actionOuvrirModalPlaylist()"><svg viewBox="0 0 24 24"><path d="M14 10H2v2h10v-2zm0-4H2v2h10V6zm-10 8h6v-2H4v2zm16-8v6h-3v2h3v6h2v-6h3v-2h-3V6h-2z"/></svg><span data-lang="sheet_add_pl">Add to a playlist</span></div>
    <div class="action-item" onclick="actionToggleFavori()"><svg id="menu-fav-icon" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg><span id="menu-fav-text" data-lang="sheet_add_fav">Add to favorites</span></div>
    <div class="action-item block-item" id="menu-block-item" onclick="actionBloquerVideo()"><svg id="menu-block-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg><span id="menu-block-text" data-lang="sheet_block_opt">Block options</span></div>
</div>

<div id="playlist-modal-backdrop" onclick="fermerModalPlaylist()"></div>
<div class="playlist-modal" id="playlist-modal">
    <div class="playlist-modal-title" data-lang="pl_save_in">Save in...</div>
    <div id="playlist-options-container"></div>
    <div class="new-pl-input-container">
        <input type="text" id="new-playlist-name" class="auth-input" data-lang-placeholder="pl_new_placeholder" placeholder="New playlist name..." style="margin-bottom:10px;">
        <button class="auth-btn" onclick="creerEtAjouterPlaylist()" data-lang="btn_create_add">Create and add</button>
    </div>
</div>

<div id="block-modal-backdrop" onclick="fermerModalBlocage()"></div>
<div class="playlist-modal" id="block-modal">
    <div class="playlist-modal-title" data-lang="block_opt_title">Block option</div>
    <div class="playlist-option" onclick="confirmerBlocage('video')"><span data-lang="block_vid">🚫 Stop suggesting this video</span></div>
    <div class="playlist-option" onclick="confirmerBlocage('chaine')"><span data-lang="block_chan">⛔ Block the entire channel</span></div>
    <div class="playlist-option" style="text-align:center; color:#aaa; justify-content:center; margin-top:10px; border: 1px solid #333;" onclick="fermerModalBlocage()" data-lang="btn_cancel">Cancel</div>
</div>
<script src="app.js?v=1.0"></script>
</body>
</html>


/* DESIGN DE LA PAGE CHAINE */
.channel-header { display: flex; align-items: center; padding: 20px 15px; background: #1a1a1a; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #333; }
.channel-header-back { background: none; border: none; color: #fff; font-size: 24px; margin-right: 15px; cursor: pointer; }
.channel-header-name { font-size: 18px; font-weight: 700; color: #fff; }
body.light-mode .channel-header { background: #fff; border-bottom: 1px solid #e0e0e0; }
body.light-mode .channel-header-back, body.light-mode .channel-header-name { color: #111; }
/* DESIGN PRO DE LA PAGE CHAINE */
.channel-cover { width: 100%; height: 120px; background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%); position: relative; }
.channel-header-back { position: absolute; top: 15px; left: 15px; background: rgba(0,0,0,0.5); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 10; display:flex; align-items:center; justify-content:center; backdrop-filter: blur(5px); }
.channel-header-info { display: flex; flex-direction: column; align-items: center; margin-top: -50px; padding: 0 15px 20px; border-bottom: 1px solid #303030; }
.channel-header-logo-wrapper { border: 4px solid #0f0f0f; border-radius: 50%; background: #0f0f0f; margin-bottom: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.channel-header-name { font-size: 24px; font-weight: 700; text-align: center; color:#fff; letter-spacing: -0.5px; margin-bottom: 5px;}
.channel-badge { background: #222; color: #aaa; font-size: 12px; padding: 5px 12px; border-radius: 20px; font-weight: 500; border: 1px solid #333; }

body.light-mode .channel-cover { background: linear-gradient(135deg, #ece9e6 0%, #ffffff 100%); border-bottom: 1px solid #ddd; }
body.light-mode .channel-header-info { border-bottom: 1px solid #e0e0e0; }
body.light-mode .channel-header-logo-wrapper { border-color: #f2f2f2; background: #f2f2f2; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
body.light-mode .channel-header-name { color: #111; }
body.light-mode .channel-badge { background: #f0f0f0; color: #555; border-color:#ccc; }





/* Bouton Play/Pause sur le mini-lecteur */
.mini-play-btn {
    display: none;
}
#watch-view.mini-mode .mini-play-btn {
    display: flex;
    position: absolute;
    top: 5px;
    right: 36px;
    width: 26px;
    height: 26px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #555;
    z-index: 206;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* --- LECTEUR MINIATURE 100% INTERACTIF YOUTUBE --- */

/* 1. On cache l'ancien bouton moche */
.mini-play-btn { display: none !important; }

/* 2. On désactive la vitre transparente pour libérer les clics vers YouTube */
#watch-view.mini-mode .mini-overlay {
    display: none !important;
}
#watch-view.mini-mode #iframe-wrapper iframe {
    pointer-events: auto !important;
}

/* 3. Design du nouveau bouton "Agrandir" en haut à gauche */
.expand-player-btn { 
    display: none !important; 
}
#watch-view.mini-mode .expand-player-btn {
    display: flex !important; /* Ajout du !important ici pour forcer l'affichage */
    position: absolute;
    top: 5px;
    left: 5px;
    width: 26px;
    height: 26px;
    background: rgba(0,0,0,0.8);
    border: 1px solid #555;
    z-index: 206;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


/* --- APERÇU COMMENTAIRES --- */
.comments-preview { background: #222; border-radius: 12px; padding: 12px 15px; margin: 15px; cursor: pointer; }
.comments-preview-header { margin-bottom: 8px; display: flex; align-items: center; }
.comments-preview-body { display: flex; align-items: center; gap: 10px; }
.avatar-small { width: 24px; height: 24px; border-radius: 50%; background: #007c91; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: #fff; overflow: hidden; }
.comments-preview-input { background: transparent; color: #aaa; font-size: 13px; flex: 1; }

/* --- PANNEAU COULISSANT COMMENTAIRES --- */
.sheet-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999999; }
.bottom-sheet { position: fixed; bottom: -100%; left: 0; width: 100%; height: 75vh; background: #0f0f0f; z-index: 1000000; border-radius: 15px 15px 0 0; transition: bottom 0.3s ease-out; display: flex; flex-direction: column; }
.bottom-sheet.active { bottom: 0; }
.sheet-header { padding: 10px 15px; border-bottom: 1px solid #333; display: flex; flex-direction: column; align-items: center; position: relative; }
.drag-handle { width: 40px; height: 4px; background: #555; border-radius: 2px; margin-bottom: 15px; }
.sheet-header-title { width: 100%; text-align: left; display: flex; align-items: center; }
.close-sheet-btn { position: absolute; right: 15px; top: 25px; background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; }
.sheet-filters { display: flex; gap: 10px; padding: 10px 15px; border-bottom: 1px solid #222; }
.filter-btn { background: #222; color: #fff; border: none; padding: 6px 12px; border-radius: 15px; font-size: 13px; cursor: pointer; }
.filter-btn.active { background: #fff; color: #000; }
.comments-list { flex: 1; overflow-y: auto; padding: 15px; }
.comments-input-area { display: flex; align-items: center; gap: 10px; padding: 10px 15px; border-top: 1px solid #333; background: #0f0f0f; }
#new-comment-input { flex: 1; background: #222; border: none; color: #fff; padding: 10px 15px; border-radius: 20px; font-size: 14px; outline: none; }
#send-comment-btn { background: none; border: none; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; }
.comment-item { display: flex; gap: 12px; margin-bottom: 20px; }
.comment-content { flex: 1; }
.comment-author { font-size: 13px; color: #aaa; margin-bottom: 4px; }
.comment-text { font-size: 14px; color: #fff; line-height: 1.4; }


#send-comment-btn svg {
    pointer-events: none;
}