:root {
    --primary-color: #00d664;
    --bg-main: #050505;
    --bg-card: #101010;
    --bg-hover: #1a1a1a;
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(20, 20, 20, 0.7);
}

/* FEATURE 13: VRAI MODE OLED (Noirs absolus) */
body.oled-mode {
    --bg-main: #000000;
    --bg-card: #000000;
    --bg-hover: #111111;
}

body { 
    background-color: var(--bg-main); 
    color: #e5e5e5;
    overflow-x: hidden; 
    transition: background-color 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

/* FEATURE 3: CURSEUR PERSONNALISÉ */
body.custom-cursor, 
body.custom-cursor a, 
body.custom-cursor button {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%2300d664" stroke="black" stroke-width="1"><path d="M12 0L24 12L14 12L14 24L10 24L10 12L0 12L12 0Z"/></svg>') 12 12, auto !important;
}

/* FEATURE 4: NAVIGATION CLAVIER (Focus Visible) */
:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* UTILS SCROLLBAR */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; border: 2px solid var(--bg-main); }
::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ANIMATIONS & TRANSITIONS */
.animate-fade-in { animation: fadeScale 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes fadeScale { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }

/* GLASSMORPHISM 2.0 */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.glass-panel {
    background: #151515;
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* SKELETON SCREENS (Loading) */
.skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
    border-radius: 4px;
}
@keyframes skeletonLoading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* CINEMA MODE */
body.cinema-mode #navbar, 
body.cinema-mode #episodesGrid, 
body.cinema-mode .parallax-card { opacity: 0.1; transition: opacity 1s ease; filter: grayscale(100%); }
body.cinema-mode #heroSection { opacity: 1; filter: none; z-index: 50; }

/* ZEN MODE */
body.zen-active #playerHeader,
body.zen-active #playerSidebar,
body.zen-active #playerInfo {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.98);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
body.zen-active #videoContainer {
    box-shadow: 0 0 100px rgba(0,0,0,0.9);
    z-index: 50;
    border-color: transparent;
    transition: all 0.6s ease;
}

/* WIPE & OVERLAYS */
#wipeOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary-color); z-index: 9999; transform: translateX(-100%); pointer-events: none; }
.animate-wipe { animation: wipeAnim 1.2s cubic-bezier(0.8, 0, 0.2, 1) forwards; }
@keyframes wipeAnim { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* WATCHED INDICATOR */
.watched-badge { position: absolute; top: 10px; right: 10px; background: var(--primary-color); color: black; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 30; box-shadow: 0 2px 10px rgba(0,0,0,0.8); font-weight: bold; }

/* TOGGLE SWITCHES */
.toggle-checkbox:checked { right: 0; border-color: var(--primary-color); }
.toggle-checkbox:checked + .toggle-label { background-color: var(--primary-color); }
.toggle-checkbox:focus + .toggle-label { box-shadow: 0 0 0 3px rgba(255,255,255,0.3); }

/* PLAYER & VIDEO */
.video-zoomed { transform: scale(1.35); }
.video-container { transition: transform 0.3s ease; overflow: hidden; background: #000; }
.preview-video { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.group:hover .preview-video { display: block; }
body.eco-mode .preview-video { display: none !important; }

/* TOAST */
#toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: #1a1a1a; border: 1px solid var(--primary-color); color: white; padding: 14px 28px; border-radius: 50px; opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; gap: 12px; z-index: 9999; box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* UI HIDDEN (Auto-Hide Feature) */
body.ui-hidden { cursor: none !important; }
body.ui-hidden * { cursor: none !important; }

/* ============================================================
   FIX #14 : LOADER SPINNER — était référencé dans le HTML (#videoLoader > .loader)
   mais jamais défini ici. Ajout du spinner.
   ============================================================ */
.loader {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: loaderSpin 0.7s linear infinite;
}
@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}