/* assets/css/main.css - Modern YouTube Design System */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   THEME DESIGN SYSTEM (Dark / Light / Adaptive)
   ========================================================================== */

/* Dark Theme Tokens (Défaut & [data-theme="dark"]) */
:root,
[data-theme="dark"] {
    --bg-base: #09090b;
    --bg-surface: #121217;
    --bg-surface-elevated: #181820;
    --bg-surface-hover: #22222d;
    --bg-surface-active: #2b2b3a;
    
    --navbar-bg: rgba(9, 9, 11, 0.85);
    --categories-bar-bg: rgba(9, 9, 11, 0.95);
    --bottom-nav-bg: rgba(14, 14, 18, 0.96);
    --modal-overlay-bg: rgba(0, 0, 0, 0.75);
    
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-focus: rgba(255, 255, 255, 0.2);
    --border-accent: rgba(255, 42, 95, 0.4);
    
    --text-primary: #f4f4f6;
    --text-secondary: #9e9eb0;
    /* Au moins 4,5:1 sur --bg-base, --bg-surface et --bg-surface-elevated
       (WCAG AA) : l'ancien #65657a tombait à 3,1-3,5:1, alors qu'il porte le
       nombre de vues, les sous-titres et les textes d'aide. */
    --text-muted: #808094;
    --text-inverse: #09090b;
    
    --accent-red: #ff1e42;
    --accent-red-hover: #ff3355;
    --accent-red-glow: rgba(255, 30, 66, 0.35);
    --accent-red-subtle: rgba(255, 30, 66, 0.15);
    
    --accent-indigo: #6366f1;
    --accent-cyan: #06b6d4;
    
    --sidebar-width-expanded: 240px;
    /* 80px : à 72px, « Abonnements » débordait de sa case dans la barre réduite. */
    --sidebar-width-collapsed: 80px;
    --navbar-height: 60px;
    /* Retrait horizontal de .content-area. Les blocs pleine largeur (pied de
       page, mode cinéma) le compensent par une marge négative : ils doivent
       lire la même valeur, sinon ils débordent de l'écran. */
    --content-pad-x: 24px;
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    /* Utilisé par les cartes d'état (404, accès réservé, historique vide…) :
       sans définition, elles retombaient sur des coins carrés. */
    --radius-xl: 22px;
    --radius-full: 9999px;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 30px var(--accent-red-glow);
    
    --scrollbar-thumb: rgba(255, 255, 255, 0.12);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.22);
    
    --brand-text-gradient: linear-gradient(90deg, #ffffff 60%, var(--text-secondary) 100%);
    --chip-active-bg: #ffffff;
    --chip-active-color: #09090b;
    --card-thumb-placeholder: #181820;
    
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    color-scheme: dark;
}

/* Light Theme Tokens */
[data-theme="light"] {
    --bg-base: #f7f8fa;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #f0f2f5;
    --bg-surface-hover: #e6e8ec;
    --bg-surface-active: #dcdfe4;
    
    --navbar-bg: rgba(255, 255, 255, 0.88);
    --categories-bar-bg: rgba(247, 248, 250, 0.95);
    --bottom-nav-bg: rgba(255, 255, 255, 0.96);
    --modal-overlay-bg: rgba(15, 18, 28, 0.55);
    
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-focus: rgba(0, 0, 0, 0.22);
    --border-accent: rgba(255, 30, 66, 0.35);
    
    --text-primary: #0f1117;
    --text-secondary: #575a6e;
    --text-muted: #686b7f;
    --text-inverse: #ffffff;
    
    --accent-red: #ff1e42;
    --accent-red-hover: #e01235;
    --accent-red-glow: rgba(255, 30, 66, 0.25);
    --accent-red-subtle: rgba(255, 30, 66, 0.1);
    
    --accent-indigo: #4f46e5;
    --accent-cyan: #0891b2;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 24px var(--accent-red-glow);
    
    --scrollbar-thumb: rgba(0, 0, 0, 0.14);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
    
    --brand-text-gradient: linear-gradient(90deg, #0f1117 60%, var(--text-secondary) 100%);
    --chip-active-bg: #0f1117;
    --chip-active-color: #ffffff;
    --card-thumb-placeholder: #eaecee;
    
    color-scheme: light;
}

/* Fallback media-query système clair */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg-base: #f7f8fa;
        --bg-surface: #ffffff;
        --bg-surface-elevated: #f0f2f5;
        --bg-surface-hover: #e6e8ec;
        --bg-surface-active: #dcdfe4;
        
        --navbar-bg: rgba(255, 255, 255, 0.88);
        --categories-bar-bg: rgba(247, 248, 250, 0.95);
        --bottom-nav-bg: rgba(255, 255, 255, 0.96);
        --modal-overlay-bg: rgba(15, 18, 28, 0.55);
        
        --border-subtle: rgba(0, 0, 0, 0.08);
        --border-focus: rgba(0, 0, 0, 0.22);
        --border-accent: rgba(255, 30, 66, 0.35);
        
        --text-primary: #0f1117;
        --text-secondary: #575a6e;
        --text-muted: #686b7f;
        --text-inverse: #ffffff;
        
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
        
        --scrollbar-thumb: rgba(0, 0, 0, 0.14);
        --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
        
        --brand-text-gradient: linear-gradient(90deg, #0f1117 60%, var(--text-secondary) 100%);
        --chip-active-bg: #0f1117;
        --chip-active-color: #ffffff;
        
        color-scheme: light;
    }
}

/* Fluid Theme Transition Morphing */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                fill 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

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

html {
    font-size: 15px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Anti-animation au chargement de page */
body.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* Réservé au bureau : la classe est posée dès que la préférence existe,
   quelle que soit la largeur. Sur mobile, elle réduisait le tiroir à 80px
   et décalait tout le contenu d'autant vers la droite. */
@media (min-width: 769px) {
    html.sidebar-collapsed-instant .sidebar {
        width: var(--sidebar-width-collapsed) !important;
        padding: 12px 4px !important;
    }
    html.sidebar-collapsed-instant .content-area {
        margin-left: var(--sidebar-width-collapsed) !important;
    }
}

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

button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
    outline: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Layout App Container */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--navbar-height);
    background: var(--navbar-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 1000;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.menu-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.menu-toggle-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.5px;
}

/* Le glyphe « La Voile » se pose à même le fond : la lueur remplace le carré
   rouge qui l'enfermait, ce qui accroche l'œil sans ajouter une surface
   arrondie de plus à une barre qui n'en manque pas.

   La couleur passe par « color » et non « fill » : le SVG est tracé en
   currentColor, donc un conteneur peut le repeindre (en blanc sur un aplat
   rouge, par exemple) sans qu'on redéfinisse le chemin.

   Le glyphe n'est pas retourné en écriture de droite à gauche : la flèche dit
   ici le sens de lecture d'une vidéo, pas celui d'un texte, et un logo ne se
   met pas en miroir. */
.brand-mark {
    color: var(--accent-red);
    flex: none;
    filter: drop-shadow(0 0 10px var(--accent-red-glow));
    transition: filter var(--transition-fast), transform var(--transition-fast);
}

.brand-logo:hover .brand-mark,
.footer-brand-link:hover .brand-mark {
    filter: drop-shadow(0 0 16px var(--accent-red-glow));
    transform: translateX(1px);
}

.brand-text {
    background: var(--brand-text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent-red);
    background: var(--accent-red-subtle);
    padding: 2px 6px;
    border-radius: 4px;
    margin-inline-start: -4px;
    align-self: flex-start;
}

/* Nav Center: Search Bar */
.nav-center {
    flex: 1;
    max-width: 680px;
    margin: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.mobile-search-back-btn {
    display: none !important;
}

.search-form-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-box {
    width: 100%;
    height: 42px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full) 0 0 var(--radius-full);
    display: flex;
    align-items: center;
    padding: 0 16px;
    transition: all var(--transition-fast);
}

.search-input-box:focus-within {
    border-color: var(--accent-indigo);
    background: var(--bg-surface-elevated);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.search-input {
    width: 100%;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.search-input::placeholder {
    color: var(--text-muted);
}

.clear-search-btn {
    display: none;
    color: var(--text-muted);
    padding: 4px;
}
.clear-search-btn:hover {
    color: var(--text-primary);
}

.search-submit-btn {
    height: 42px;
    padding: 0 20px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-left: none;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.search-submit-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.voice-search-btn {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.voice-search-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--accent-red);
    box-shadow: 0 0 12px rgba(255, 30, 66, 0.2);
}

.voice-search-btn.listening {
    background: rgba(255, 30, 66, 0.15) !important;
    color: var(--accent-red) !important;
    border-color: var(--accent-red) !important;
    box-shadow: 0 0 16px rgba(255, 30, 66, 0.4) !important;
    animation: voiceButtonPulse 1.2s ease-in-out infinite alternate;
}

@keyframes voiceButtonPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* ==========================================================================
   VOICE SEARCH MODAL & INTERACTIVE AUDIO UX
   ========================================================================== */
.voice-search-card {
    max-width: 440px;
    text-align: center;
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg), 0 10px 40px rgba(0, 0, 0, 0.5);
    padding: 24px;
}

.voice-search-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px 8px;
}

.voice-mic-container {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.voice-mic-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-red), #e60026);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 4px 20px rgba(255, 30, 66, 0.45);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.voice-mic-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 26px rgba(255, 30, 66, 0.6);
}

.voice-mic-btn:active {
    transform: scale(0.96);
}

/* Pulsing Acoustic Rings */
.voice-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 30, 66, 0.25);
    pointer-events: none;
    opacity: 0;
}

.voice-mic-container.listening .voice-pulse-ring.ring-1 {
    animation: voicePulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.voice-mic-container.listening .voice-pulse-ring.ring-2 {
    animation: voicePulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite 0.6s;
}

.voice-mic-container.listening .voice-pulse-ring.ring-3 {
    animation: voicePulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite 1.2s;
}

@keyframes voicePulse {
    0% {
        transform: scale(0.65);
        opacity: 0.85;
    }
    100% {
        transform: scale(1.55);
        opacity: 0;
    }
}

/* Animated Soundwave Equalizer Bars */
.voice-waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 24px;
    margin-bottom: 14px;
}

.voice-waveform .bar {
    width: 3.5px;
    height: 6px;
    background: var(--accent-red);
    border-radius: 4px;
    transition: height 0.15s ease;
}

.voice-waveform.listening .bar-1 { animation: voiceWave 0.8s ease-in-out infinite alternate; }
.voice-waveform.listening .bar-2 { animation: voiceWave 0.6s ease-in-out infinite alternate 0.15s; }
.voice-waveform.listening .bar-3 { animation: voiceWave 1.0s ease-in-out infinite alternate 0.3s; }
.voice-waveform.listening .bar-4 { animation: voiceWave 0.7s ease-in-out infinite alternate 0.1s; }
.voice-waveform.listening .bar-5 { animation: voiceWave 0.9s ease-in-out infinite alternate 0.25s; }

@keyframes voiceWave {
    0% { height: 6px; opacity: 0.4; }
    100% { height: 24px; opacity: 1; }
}

.voice-status-text {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-red);
    margin-bottom: 8px;
}

.voice-transcript-preview {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
    word-break: break-word;
    margin-bottom: 12px;
}

.voice-transcript-preview.interim {
    color: var(--text-secondary);
    font-style: italic;
}

.voice-hint-text {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Live Search Suggestions Dropdown */
.search-suggestions-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 52px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 8px 0;
    display: none;
    z-index: 1100;
    backdrop-filter: blur(20px);
}

.search-suggestions-dropdown.active {
    display: block;
    animation: fadeInDown 0.15s ease-out;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}

.suggestion-item:hover, .suggestion-item.selected {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.suggestion-icon {
    color: var(--text-muted);
}

.suggestion-text {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 500;
}

.suggestion-type-badge {
    font-size: 0.72rem;
    padding: 2px 8px;
    background: var(--bg-surface-hover);
    border-radius: 4px;
    color: var(--text-muted);
}

/* Nav Right */
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.88rem;
    transition: all var(--transition-fast);
}

.btn-upload:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #ffffff;
    box-shadow: 0 0 16px var(--accent-red-glow);
    transform: translateY(-1px);
}

.nav-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    position: relative;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.nav-icon-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.notif-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--accent-red);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-base);
    box-shadow: 0 0 8px var(--accent-red);
}

.user-avatar-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.user-avatar-btn:hover {
    border-color: var(--accent-indigo);
    transform: scale(1.05);
}

.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
}

/* ==========================================================================
   THEME SWITCHER MENU & DROPDOWNS
   ========================================================================== */
.theme-menu-container {
    position: relative;
}

.theme-toggle-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    background: none;
    border: none;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.theme-toggle-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    transform: scale(1.05);
}

.theme-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 250px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: none;
    z-index: 1200;
    padding: 6px 0;
    animation: fadeInDown 0.15s ease-out;
}

.theme-dropdown-menu.active {
    display: block;
}

.theme-dropdown-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}

.theme-option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 16px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.theme-option-item:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.theme-option-item.active {
    color: var(--accent-red);
    font-weight: 700;
    background: var(--accent-red-subtle);
}

.theme-option-item.active:hover {
    color: var(--accent-red);
    background: var(--accent-red-subtle);
}

.theme-option-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-option-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.theme-option-check {
    opacity: 0;
    color: var(--accent-red);
    transition: opacity var(--transition-fast);
}

.theme-option-item.active .theme-option-check {
    opacity: 1;
}

.theme-current-badge {
    margin-inline-start: auto;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface-hover);
    color: var(--text-muted);
    font-weight: 600;
}

/* ==========================================================================
   LANGUAGE SELECTOR MENU & DROPDOWN
   ========================================================================== */
.lang-menu-container {
    position: relative;
}

.lang-toggle-btn {
    width: auto;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    gap: 4px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    background: none;
    border: none;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.lang-toggle-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    transform: scale(1.05);
}

.lang-flag-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.lang-code-current {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-primary);
}

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 230px;
    max-height: 380px;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: none;
    z-index: 1200;
    padding: 6px 0;
    animation: fadeInDown 0.15s ease-out;
}

.lang-dropdown-menu.active {
    display: block;
}

.lang-dropdown-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}

.lang-option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 16px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.lang-option-item:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.lang-option-item.active {
    color: var(--accent-red);
    font-weight: 700;
    background: var(--accent-red-subtle);
}

.lang-option-item.active:hover {
    color: var(--accent-red);
    background: var(--accent-red-subtle);
}

.lang-option-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lang-option-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.lang-flag-img {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2.5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-block;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.lang-option-item:hover .lang-flag-img {
    transform: scale(1.1);
}

.lang-option-name {
    font-size: 0.88rem;
}

.lang-option-check {
    color: var(--accent-red);
}

/* ==========================================================================
   DROPDOWNS (NOTIFICATIONS & USER MENU)
   ========================================================================== */
.notifications-dropdown-menu, .user-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(20px);
    display: none;
    z-index: 1200;
    animation: fadeInDown 0.15s ease-out;
}

.notifications-dropdown-menu.active, .user-dropdown-menu.active {
    display: block;
}

.notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 700;
    font-size: 0.95rem;
}

.notif-list {
    max-height: 360px;
    overflow-y: auto;
}

.notif-item {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast);
}

.notif-item:hover {
    background: var(--bg-surface-hover);
}

.notif-item.unread {
    background: rgba(99, 102, 241, 0.08);
}

.notif-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.notif-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.notif-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.user-dropdown-menu {
    width: 290px;
    padding: 8px 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: none;
    z-index: 1200;
}

.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.dropdown-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border-subtle);
}

.dropdown-user-details {
    flex: 1;
    min-width: 0;
}

.dropdown-user-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dropdown-user-handle {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.user-dropdown-item:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

/* ==========================================================================
   MODAL DIALOGS (AUTH & EDIT CHANNEL)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay-bg);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
}

.modal-overlay.active {
    display: flex;
    animation: modalFadeIn 0.2s ease-out;
}

.modal-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 460px;
    box-shadow: var(--shadow-md);
    padding: 24px;
    position: relative;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
}

.modal-close-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.1rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.modal-close-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.auth-tabs-header {
    display: flex;
    gap: 6px;
    background: var(--bg-base);
    padding: 4px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.auth-tab-btn {
    flex: 1;
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    text-align: center;
}

.auth-tab-btn:hover:not(.active) {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
}

.auth-tab-btn.active {
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* Styles globaux pour formulaires modales */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.form-label {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.form-control {
    width: 100%;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.92rem;
    outline: none;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:focus {
    border-color: var(--accent-red);
    background: var(--bg-surface);
    box-shadow: 0 0 0 3px var(--accent-red-subtle);
}

.auth-tab-pane {
    display: none;
}

.auth-tab-pane.active {
    display: block;
}

.demo-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    width: 100%;
    text-align: left;
    transition: all var(--transition-fast);
}

.demo-user-card:hover {
    border-color: var(--accent-red);
    background: var(--bg-surface-hover);
    transform: translateY(-1px);
}

.demo-user-card img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.main-wrapper {
    display: flex;
    margin-top: var(--navbar-height);
    min-height: calc(100vh - var(--navbar-height));
}

.sidebar {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width-expanded);
    background: var(--bg-base);
    border-right: 1px solid var(--border-subtle);
    padding: 12px 10px;
    overflow-y: auto;
    z-index: 900;
    transition: width var(--transition-normal);
}

.sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
    padding: 12px 4px;
}

.sidebar-section {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.sidebar-section:last-child {
    border-bottom: none;
}

.sidebar-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    padding: 8px 14px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar.collapsed .sidebar-section-title {
    display: none;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 42px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.92rem;
    transition: all var(--transition-fast);
    position: relative;
    white-space: nowrap;
}

.sidebar.collapsed .sidebar-nav-item {
    flex-direction: column;
    height: 56px;
    padding: 8px 2px;
    gap: 4px;
    font-size: 0.68rem;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.sidebar-nav-item:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

.sidebar-nav-item.active {
    background: var(--bg-surface-active);
    color: var(--text-primary);
    font-weight: 700;
}

.sidebar-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--accent-red);
    border-radius: 0 4px 4px 0;
}

.sidebar.collapsed .sidebar-nav-item.active::before {
    left: 2px;
    top: 4px;
    bottom: 4px;
}

.sidebar-nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.channel-sub-avatar {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.sidebar.collapsed .channel-sub-avatar {
    width: 22px;
    height: 22px;
}

.live-dot {
    width: 6px;
    height: 6px;
    background: var(--accent-red);
    border-radius: var(--radius-full);
    margin-inline-start: auto;
    box-shadow: 0 0 8px var(--accent-red);
}

.sidebar.collapsed .live-dot {
    display: none;
}

/* Main Content Area */
.content-area {
    flex: 1;
    margin-left: var(--sidebar-width-expanded);
    padding: 16px var(--content-pad-x) 60px;
    transition: margin-left var(--transition-normal);
    min-width: 0;
}

.sidebar.collapsed ~ .content-area {
    margin-left: var(--sidebar-width-collapsed);
}

/* ==========================================================================
   CATEGORY CHIPS BAR
   ========================================================================== */
.categories-bar-wrapper {
    position: sticky;
    top: var(--navbar-height);
    background: var(--categories-bar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 800;
    margin: -16px -24px 20px -24px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.category-scroll-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0;
}

.category-scroll-container::-webkit-scrollbar {
    display: none;
}

.category-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Les puces sont des <a> : sans cela, le soulignement par défaut du lien
       réapparaîtrait sous chaque libellé de catégorie. */
    text-decoration: none;
    padding: 7px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.category-chip:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    border-color: var(--border-focus);
}

.category-chip.active {
    background: var(--chip-active-bg);
    color: var(--chip-active-color);
    border-color: var(--chip-active-bg);
}

/* ==========================================================================
   VIDEO GRID & CARDS
   ========================================================================== */
/* 280px et non 300px : avec la barre latérale dépliée, un écran de 1280px
   n'affichait que deux colonnes de miniatures géantes dès qu'il restait moins
   de 936px de contenu. Trois colonnes tiennent désormais à partir de 876px. */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px 18px;
}

.video-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: var(--radius-lg);
    transition: transform var(--transition-fast);
    position: relative;
}

.video-thumbnail-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg-surface-elevated);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.video-thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-card:hover .video-thumbnail-img {
    transform: scale(1.04);
}

.video-duration-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.82);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    backdrop-filter: blur(4px);
}

.video-preview-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-fast);
    display: flex;
    align-items: flex-end;
    padding: 10px;
    pointer-events: none;
    z-index: 3;
}

.video-card:hover .video-preview-overlay {
    opacity: 1;
}

/* Vidéo de prévisualisation au survol de la miniature */
.card-hover-preview-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    background: #000;
}

.card-hover-preview-video.active {
    opacity: 1;
}

.card-preview-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent-red);
    box-shadow: 0 0 6px var(--accent-red-glow);
    width: 0%;
    z-index: 4;
    pointer-events: none;
    transition: width 0.1s linear;
}

.video-card-details {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

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

.video-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-fast);
}

.video-card:hover .video-title {
    color: var(--accent-red);
}

.channel-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 2px;
}

.channel-name-row:hover {
    color: var(--text-primary);
}

.verified-icon {
    color: var(--text-muted);
    width: 14px;
    height: 14px;
}

.video-meta-row {
    color: var(--text-muted);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.video-tags-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.video-tag-pill {
    font-size: 0.72rem;
    color: var(--accent-indigo);
    background: rgba(99, 102, 241, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.video-tag-pill:hover {
    background: rgba(99, 102, 241, 0.22);
}

/* ==========================================================================
   HASHTAG / SEARCH / CATEGORY HEADERS
   ========================================================================== */
/* Contenu réservé aux lecteurs d'écran : retiré de la mise en page sans être
   retiré de l'arbre d'accessibilité, contrairement à display:none ou à
   l'attribut hidden. Sert au <h1> de la page d'accueil, qui n'affiche aucun
   titre de section. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.section-header-banner {
    background: linear-gradient(135deg, var(--bg-surface-elevated) 0%, var(--bg-surface) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.section-header-banner::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--accent-red-glow) 0%, transparent 70%);
    pointer-events: none;
}

/* La taille vivait dans un style inline sur chaque vue : la règle mobile plus
   bas ne pouvait donc jamais s'appliquer, et « Résultats pour « … » » passait
   sur trois lignes à 360px. Elle est désormais définie ici seulement. */
.banner-title {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.banner-title > svg {
    flex-shrink: 0;
}

.banner-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

.toast {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 12px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    animation: toastSlideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast.success {
    border-left: 4px solid #10b981;
}

.toast.error {
    border-left: 4px solid var(--accent-red);
}

.toast.info {
    border-left: 4px solid var(--accent-indigo);
}

@keyframes toastSlideIn {
    from {
        transform: translateY(100%) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
    }
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments & Modern Mobile UX */
/* La barre se réduit d'office sous 1200px (et non plus 992px) : entre les
   deux, la barre dépliée ne laissait place qu'à deux colonnes de vidéos. Le
   bouton menu ouvre alors le guide complet en surcouche (cf. initSidebar). */
@media (max-width: 1200px) {
    .sidebar {
        width: var(--sidebar-width-collapsed);
        padding: 12px 4px;
    }
    .sidebar .sidebar-section-title {
        display: none;
    }
    .sidebar .sidebar-nav-item {
        flex-direction: column;
        height: 56px;
        padding: 8px 2px;
        gap: 4px;
        font-size: 0.68rem;
        justify-content: center;
    }
    .content-area {
        margin-left: var(--sidebar-width-collapsed);
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   SMARTPHONE & TABLET (<= 768px)
   Drawer Navigation, Fixed Bottom Bar, Edge-to-Edge Experience
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Safe Area and Touch Defaults */
    :root {
        --navbar-height: 52px;
        --content-pad-x: 12px;
    }

    body {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* Navbar Mobile */
    .navbar {
        padding: 0 12px;
        height: var(--navbar-height);
    }

    .brand-logo {
        font-size: 1.15rem;
        gap: 6px;
    }

    .brand-badge {
        display: none;
    }

    .nav-upload-desktop {
        display: none !important;
    }

    .mobile-search-toggle-btn {
        display: flex !important;
    }

    .nav-center {
        display: none;
    }

    /* Navbar in Mobile Search Active Mode */
    .navbar.mobile-search-active .nav-left,
    .navbar.mobile-search-active .nav-right {
        display: none !important;
    }

    .navbar.mobile-search-active .nav-center {
        display: flex !important;
        flex: 1;
        max-width: 100%;
        margin: 0;
        padding: 0;
        align-items: center;
        gap: 8px;
        height: 100%;
    }

    .mobile-search-back-btn {
        display: none;
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        border-radius: var(--radius-full);
        color: var(--text-primary);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: background var(--transition-fast), color var(--transition-fast);
    }

    .mobile-search-back-btn:hover,
    .mobile-search-back-btn:active {
        background: var(--bg-surface-hover);
        color: var(--text-primary);
    }

    .navbar.mobile-search-active .mobile-search-back-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Mobile Drawer Sidebar */
    .mobile-drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1050;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-drawer-backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 14px 10px 14px;
        border-bottom: 1px solid var(--border-subtle);
        margin-bottom: 8px;
    }

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        max-width: 82vw !important;
        z-index: 1100 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: none !important;
        border-right: 1px solid var(--border-subtle) !important;
        background: var(--bg-surface) !important;
        padding: 0 10px 24px 10px !important;
        overflow-y: auto !important;
    }

    .sidebar.mobile-open {
        transform: translateX(0) !important;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.9) !important;
    }

    .sidebar .sidebar-section-title {
        display: block !important;
    }

    .sidebar .sidebar-nav-item {
        flex-direction: row !important;
        height: 44px !important;
        padding: 0 14px !important;
        gap: 16px !important;
        font-size: 0.9rem !important;
        justify-content: flex-start !important;
    }

    /* Content Area Layout */
    .content-area {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 12px var(--content-pad-x) calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Fixed Bottom Navigation Bar */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(54px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--bottom-nav-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--border-subtle);
        z-index: 950;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
    }

    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 0.65rem;
        font-weight: 600;
        flex: 1;
        height: 100%;
        transition: all 0.15s ease;
        user-select: none;
    }

    .bottom-nav-item:active {
        transform: scale(0.9);
    }

    .bottom-nav-item.active {
        color: var(--text-primary);
        font-weight: 700;
    }

    .bottom-nav-item.active .bottom-nav-icon {
        color: var(--accent-red);
        stroke-width: 2.5;
        filter: drop-shadow(0 0 8px rgba(255, 30, 66, 0.5));
    }

    .bottom-nav-icon {
        width: 21px;
        height: 21px;
    }

    .bottom-nav-create-circle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent-red), #e60026);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 12px rgba(255, 30, 66, 0.45);
        margin-bottom: 2px;
        transition: transform 0.15s ease;
    }

    .bottom-nav-create-btn:active .bottom-nav-create-circle {
        transform: scale(0.9);
    }

    .bottom-nav-avatar {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        object-fit: cover;
        border: 1.5px solid transparent;
    }

    .bottom-nav-item.active .bottom-nav-avatar {
        border-color: var(--accent-red);
        box-shadow: 0 0 6px rgba(255, 30, 66, 0.4);
    }

    /* Grids & Cards */
    .video-grid {
        grid-template-columns: 1fr;
        gap: 20px 0;
    }

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

    .trending-scroll-track {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Bottom Sheet Modals */
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        max-height: 90vh;
        overflow-y: auto;
        padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px)) 16px !important;
        border-bottom: none !important;
        animation: slideUpModal 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    @keyframes slideUpModal {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Toast Notification Position */
    .toast-container {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        right: 12px;
        left: 12px;
        max-width: calc(100% - 24px);
    }

    .toast {
        width: 100%;
        max-width: 100%;
    }

    /* Dropdowns clamped within screen */
    .notifications-dropdown-menu,
    .user-dropdown-menu {
        position: fixed;
        top: calc(var(--navbar-height) + 6px);
        right: 10px;
        left: 10px;
        width: auto !important;
        max-width: calc(100vw - 20px);
    }

    /* Bannières de section mobile */
    .section-header-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }

    .banner-title {
        font-size: 1.25rem;
        gap: 8px;
    }

    .banner-title > svg {
        width: 22px;
        height: 22px;
    }

    .banner-subtitle {
        font-size: 0.8rem;
    }

    /* Onglets défilables horizontalement */
    .auth-tabs-header {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .auth-tabs-header::-webkit-scrollbar {
        display: none;
    }

    .auth-tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    /* Tableaux avec défilement horizontal fluide */
    table {
        min-width: 600px;
    }

    .table-responsive,
    [style*="overflow-x"] {
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 520px) and (max-width: 768px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
    }
    .trending-scroll-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 769px) {
    .mobile-search-toggle-btn,
    .mobile-search-back-btn {
        display: none !important;
    }
    .mobile-bottom-nav {
        display: none !important;
    }
    .sidebar-mobile-header {
        display: none !important;
    }
    .mobile-drawer-backdrop {
        display: none !important;
    }
}

/* ==========================================================================
   HOMEPAGE & RECOMMENDATIONS MODERN SYSTEM
   ========================================================================== */
.home-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

/* Les puces prennent toute la place que le tri leur laisse. */
.home-filter-bar .category-scroll-container,
.home-filter-bar .chip-scroller {
    flex: 1 1 auto;
    min-width: 0;
}

/* Barre collante sous la navigation, comme sur les grandes plateformes : on
   change de catégorie sans remonter en haut du fil. Elle déborde du retrait
   de .content-area pour couvrir les cartes qui défilent dessous. */
@media (min-width: 769px) {
    .home-filter-bar {
        position: sticky;
        top: var(--navbar-height);
        z-index: 800;
        margin: -16px calc(-1 * var(--content-pad-x)) 24px;
        padding: 12px var(--content-pad-x);
        background: var(--categories-bar-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

/* Menu de tri : un déclencheur, et les trois tris en liste déroulante. */
.feed-sort-menu {
    position: relative;
    flex-shrink: 0;
}

.feed-sort-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.feed-sort-trigger:hover,
.feed-sort-menu.open .feed-sort-trigger {
    background: var(--bg-surface-hover);
    border-color: var(--border-focus);
}

.feed-sort-trigger > svg:first-child {
    color: var(--text-secondary);
}

.feed-sort-chevron {
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.feed-sort-menu.open .feed-sort-chevron {
    transform: rotate(180deg);
}

.feed-sort-wrapper {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 1200;
    min-width: 220px;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    animation: fadeInDown 0.15s ease-out;
}

.feed-sort-menu.open .feed-sort-wrapper {
    display: flex;
}

.feed-sort-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: start;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.feed-sort-btn:hover {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
}

.feed-sort-btn.active {
    color: var(--text-primary);
    font-weight: 700;
}

.feed-sort-btn.active svg {
    color: var(--accent-red);
}

.feed-sort-check {
    margin-inline-start: auto;
    opacity: 0;
}

.feed-sort-btn.active .feed-sort-check {
    opacity: 1;
}

/* Bouton « Mélanger » : relance un tirage du fil (cf. includes/feed_algo.php) */
.feed-shuffle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 13px;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.feed-shuffle-btn[hidden] {
    display: none;
}

.feed-shuffle-btn:hover {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
    border-color: var(--border-focus);
}

.feed-shuffle-btn svg {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feed-shuffle-btn:hover svg {
    transform: rotate(180deg);
    color: var(--accent-red);
}

.feed-shuffle-btn.is-spinning {
    pointer-events: none;
    opacity: 0.65;
}

.feed-shuffle-btn.is-spinning svg {
    animation: feed-shuffle-spin 0.8s linear infinite;
}

@keyframes feed-shuffle-spin {
    to { transform: rotate(360deg); }
}

/* Sections éditoriales */
.home-section {
    margin-bottom: 36px;
}

.home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 12px;
}

.home-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.home-section-title svg {
    color: var(--accent-red);
}

.home-section-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-red);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.home-section-link:hover {
    opacity: 0.85;
    text-decoration: underline;
}

.home-section-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    background: var(--bg-surface);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-subtle);
}

.video-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px 14px;
}

/* Tendances Horizontal Track */
.trending-scroll-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

@media (min-width: 1024px) {
    .trending-scroll-track {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trending-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 10px;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.trending-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 30, 66, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.trending-thumb-link {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg-surface-elevated);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: block;
}

.trending-thumb-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.trending-card:hover .trending-thumb-link img {
    transform: scale(1.04);
}

.trending-rank {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trending-card:nth-child(1) .trending-rank {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #000;
    border: none;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.5);
}

.trending-card:nth-child(2) .trending-rank {
    background: linear-gradient(135deg, #e0e0e0, #9e9e9e);
    color: #000;
    border: none;
}

.trending-card:nth-child(3) .trending-rank {
    background: linear-gradient(135deg, #cd7f32, #8b4513);
    color: #fff;
    border: none;
}

.trending-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trending-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trending-title:hover {
    color: var(--accent-red);
}

.trending-channel {
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.trending-channel:hover {
    color: var(--text-primary);
}

.trending-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Bouton Charger Plus */
.load-more-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 36px;
    margin-bottom: 20px;
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 32px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.btn-load-more:hover:not(:disabled) {
    background: var(--bg-surface-elevated);
    border-color: var(--accent-red);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 30, 66, 0.2);
}

.btn-load-more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.load-more-count {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

/* ==========================================================================
   Spinners & Loaders System
   ========================================================================== */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.95);
    }
}

.spinner,
.spinner-sm,
.btn-spinner,
.load-more-spinner {
    display: inline-block;
    box-sizing: border-box;
    transform-origin: center center;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
    vertical-align: middle;
}

.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    margin-inline-end: 8px;
}

.spinner-sm {
    border-radius: 50%;
}

/* État vide du feed */
.feed-empty-state {
    text-align: center;
    padding: 70px 20px;
    color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-lg);
    max-width: 520px;
    margin: 20px auto;
}

.feed-empty-state svg {
    color: var(--accent-red);
    margin-bottom: 14px;
}

.feed-empty-state h3 {
    color: var(--text-primary);
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.feed-empty-state p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 18px;
}

/* ==========================================================================
   CHANNEL PAGE RESPONSIVE SYSTEM
   ========================================================================== */
.channel-banner-box {
    width: 100%;
    height: 180px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 18px;
    background: var(--bg-surface-elevated);
    position: relative;
}

.channel-banner-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channel-banner-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #181820, #2b2b3a);
    background-image: url('/assets/img/default-banner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.channel-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding: 0 4px;
}

.channel-main-profile {
    display: flex;
    align-items: center;
    gap: 18px;
}

.channel-page-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bg-surface);
    flex-shrink: 0;
}

.channel-page-title {
    font-size: 1.55rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.25;
}

.channel-page-meta {
    color: var(--text-muted);
    font-size: 0.86rem;
    margin-top: 2px;
}

.channel-page-description {
    color: var(--text-secondary);
    font-size: 0.86rem;
    margin-top: 6px;
    max-width: 650px;
}

/* Bouton d'abonnement : présent sur la page chaîne comme sous le lecteur, il
   est décrit ici plutôt que dans player.css, qui n'est chargé que sur /watch. */
.btn-subscribe {
    height: 38px;
    padding: 0 20px;
    background: var(--text-primary);
    color: var(--bg-surface);
    border-radius: var(--radius-full);
    font-size: 0.88rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.btn-subscribe:hover {
    background: var(--text-secondary);
    color: var(--bg-surface);
    transform: translateY(-1px);
}

.btn-subscribe.subscribed {
    background: var(--bg-surface-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    box-shadow: none;
}

.btn-subscribe.subscribed:hover {
    background: var(--bg-surface-hover);
    color: var(--accent-red);
    border-color: rgba(255, 30, 66, 0.3);
}

.channel-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 768px) {
    .channel-banner-box {
        height: 115px;
        border-radius: var(--radius-md);
        margin-bottom: 12px;
    }

    .channel-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 20px;
    }

    .channel-main-profile {
        gap: 14px;
    }

    .channel-page-avatar {
        width: 60px;
        height: 60px;
    }

    .channel-page-title {
        font-size: 1.25rem;
    }

    .channel-page-meta {
        font-size: 0.78rem;
    }

    .channel-page-description {
        font-size: 0.8rem;
    }

    .channel-page-actions {
        width: 100%;
    }

    .channel-page-actions .btn-upload,
    .channel-page-actions .btn-subscribe {
        flex: 1;
        justify-content: center;
    }
}

/* ==========================================================================
   IMAGE CUSTOMIZATION & UPLOAD DROPZONES SYSTEM
   ========================================================================== */
.custom-banner-uploader {
    position: relative;
    width: 100%;
    margin-bottom: 18px;
}

.custom-banner-preview-box {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(135deg, #1e1e28, #2d2d3d);
    border: 2px dashed rgba(255, 255, 255, 0.18);
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-banner-preview-box:hover,
.custom-banner-preview-box.dragover {
    border-color: var(--accent-red);
    background: rgba(239, 68, 68, 0.08);
}

.custom-banner-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.custom-banner-preview-box.has-image .custom-banner-preview-img {
    display: block;
}

.custom-banner-placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    text-align: center;
    padding: 12px;
    pointer-events: none;
}

.custom-banner-preview-box.has-image .custom-banner-placeholder-content {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--transition-fast);
    justify-content: center;
}

.custom-banner-preview-box.has-image:hover .custom-banner-placeholder-content,
.custom-banner-preview-box.has-image.dragover .custom-banner-placeholder-content {
    opacity: 1;
}

.custom-uploader-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-uploader-action {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-fast);
}

.btn-uploader-action:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    border-color: var(--border-focus);
}

.btn-uploader-action.danger {
    color: var(--accent-red);
}

.btn-uploader-action.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
    border-color: var(--accent-red);
}

/* Avatar Upload Section */
.custom-avatar-profile-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.custom-avatar-uploader {
    position: relative;
    width: 86px;
    height: 86px;
    flex-shrink: 0;
}

.custom-avatar-preview-box {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    cursor: pointer;
    background: var(--bg-surface-elevated);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.custom-avatar-preview-box:hover,
.custom-avatar-preview-box.dragover {
    border-color: var(--accent-red);
    transform: scale(1.03);
}

.custom-avatar-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.custom-avatar-overlay-badge {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    color: #fff;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.custom-avatar-preview-box:hover .custom-avatar-overlay-badge,
.custom-avatar-preview-box.dragover .custom-avatar-overlay-badge {
    opacity: 1;
}

.custom-avatar-details {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Drawer pour URLs externes */
.custom-url-drawer {
    display: none;
    margin-top: 8px;
    padding: 10px;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    animation: fadeInDown 0.15s ease-out;
}

.custom-url-drawer.active {
    display: block;
}

/* Boutons de personnalisation intégrés à la page de chaîne */
.channel-banner-box {
    position: relative;
}

.btn-channel-edit-overlay-banner {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(18, 18, 24, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    z-index: 10;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.btn-channel-edit-overlay-banner:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
}

.channel-avatar-edit-wrap {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.btn-channel-edit-overlay-avatar {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity var(--transition-fast);
    border: none;
    cursor: pointer;
}

.channel-avatar-edit-wrap:hover .btn-channel-edit-overlay-avatar {
    opacity: 1;
}

/* Modale large pour la personnalisation */
.modal-card.modal-card-customization {
    max-width: 580px;
}

/* ==========================================================================
   RTL (RIGHT-TO-LEFT) SUPPORT FOR ARABIC (ar)
   ========================================================================== */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--border-subtle);
}

[dir="rtl"] .main-wrapper {
    padding-left: 0;
    padding-right: var(--sidebar-width);
}

[dir="rtl"] .main-wrapper.sidebar-collapsed {
    padding-left: 0;
    padding-right: var(--sidebar-width-collapsed);
}

@media (max-width: 1024px) {
    [dir="rtl"] .main-wrapper,
    [dir="rtl"] .main-wrapper.sidebar-collapsed {
        padding-right: 0;
    }
}

[dir="rtl"] .nav-left {
    flex-direction: row-reverse;
}

[dir="rtl"] .search-form-container .search-input {
    padding-left: 44px;
    padding-right: 18px;
}

[dir="rtl"] .lang-dropdown-menu,
[dir="rtl"] .theme-dropdown-menu,
[dir="rtl"] .user-dropdown-menu,
[dir="rtl"] .notifications-dropdown-menu {
    right: auto;
    left: 0;
}

[dir="rtl"] .sidebar-link-icon {
    margin-right: 0;
    margin-left: 14px;
}

/* ==========================================================================
   GLOBAL SITE FOOTER
   ========================================================================== */
.site-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    margin-top: 56px;
    margin-inline: calc(-1 * var(--content-pad-x));
    margin-bottom: -60px;
    width: calc(100% + 2 * var(--content-pad-x));
    padding: 40px 32px 28px;
    color: var(--text-secondary);
    box-sizing: border-box;
}

.footer-inner-container {
    max-width: 1280px;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr;
    gap: 36px 24px;
    margin-bottom: 36px;
}

.footer-col-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 800;
}

.footer-brand-tagline {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    max-width: 360px;
}

.footer-badge-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.footer-pill-badge {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    color: var(--text-muted);
}

.footer-col-title {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links-list a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color var(--transition-fast), transform var(--transition-fast);
    display: inline-block;
}

.footer-links-list a:hover {
    color: var(--accent-indigo);
    transform: translateX(3px);
}

.footer-bottom-bar {
    border-top: 1px solid var(--border-subtle);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-bottom-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-bottom-links a:hover {
    color: var(--text-primary);
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

@media (max-width: 600px) {
    /* Les marges négatives valaient -16px ici (et -24px de 601 à 768px)
       alors que le contenu n'est retiré que de 12px sur mobile : le pied de
       page dépassait de chaque côté, et la page devenait défilable à
       l'horizontale. Elles suivent désormais --content-pad-x. */
    .site-footer {
        padding: 30px 16px 80px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   LEGAL PAGES & CMS DOCUMENT VIEWER
   ========================================================================== */
.legal-page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0 40px;
    width: 100%;
}

.legal-page-header-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.legal-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.legal-breadcrumbs a {
    color: var(--text-secondary);
    text-decoration: none;
}

.legal-breadcrumbs a:hover {
    color: var(--accent-indigo);
}

.crumb-sep {
    color: var(--text-muted);
    opacity: 0.5;
}

.crumb-current {
    color: var(--text-primary);
    font-weight: 600;
}

.legal-header-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.legal-page-main-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 10px 0;
    line-height: 1.25;
}

.legal-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.meta-badge {
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
}

.meta-badge-version {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.meta-badge-draft {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.legal-action-btn {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.legal-action-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    border-color: var(--border-focus);
}

.legal-admin-edit-btn {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.08);
}

.legal-content-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: flex-start;
}

/* Sidebar Sommaire (TOC) */
.legal-toc-sidebar {
    position: sticky;
    top: 76px;
}

.legal-toc-sticky-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.legal-toc-header {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.legal-toc-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legal-toc-nav .toc-item a {
    color: var(--text-secondary);
    text-decoration: none;
    display: block;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 0.84rem;
    line-height: 1.4;
    transition: all var(--transition-fast);
}

.legal-toc-nav .toc-sub-item a {
    color: var(--text-muted);
    text-decoration: none;
    display: block;
    padding: 4px 8px 4px 16px;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.35;
    transition: all var(--transition-fast);
}

.legal-toc-nav a:hover,
.legal-toc-nav a.active {
    color: var(--accent-indigo);
    background: rgba(99, 102, 241, 0.08);
    font-weight: 700;
}

.legal-other-links-box {
    border-top: 1px solid var(--border-subtle);
    padding-top: 12px;
}

.legal-other-links-title {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.legal-other-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legal-other-links-list a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.legal-other-links-list a.active {
    color: var(--accent-indigo);
    font-weight: 700;
    background: rgba(99, 102, 241, 0.08);
}

.legal-other-links-list a:hover {
    color: var(--text-primary);
}

.legal-support-card {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    padding: 12px;
}

.support-card-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--accent-red);
    margin-bottom: 4px;
}

.support-card-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0 0 8px 0;
}

.support-card-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    background: var(--accent-red);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 4px;
}

/* Article Légal Principal */
.legal-main-article {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 36px 40px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.legal-document-body {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.8;
}

.legal-document-body h2 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 36px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
    scroll-margin-top: 80px;
}

.legal-document-body h2:first-child {
    margin-top: 0;
}

.legal-document-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 24px 0 12px 0;
    scroll-margin-top: 80px;
}

.legal-document-body p {
    margin: 0 0 16px 0;
    color: var(--text-secondary);
}

.legal-document-body ul,
.legal-document-body ol {
    margin: 0 0 18px 0;
    padding-inline-start: 24px;
    color: var(--text-secondary);
}

.legal-document-body li {
    margin-bottom: 6px;
}

.legal-document-body a {
    color: var(--accent-indigo);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-callout {
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 0.92rem;
    line-height: 1.6;
}

.legal-callout-info {
    background: rgba(59, 130, 246, 0.08);
    border-left: 4px solid #3b82f6;
    color: var(--text-primary);
}

.legal-callout-warning {
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid #f59e0b;
    color: var(--text-primary);
}

.legal-table-wrapper {
    overflow-x: auto;
    margin: 20px 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}

.legal-table th {
    background: var(--bg-surface-elevated);
    padding: 12px 16px;
    font-weight: 700;
    border-bottom: 1px solid var(--border-subtle);
}

.legal-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.legal-article-footer {
    border-top: 1px solid var(--border-subtle);
    padding-top: 24px;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.legal-footer-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legal-footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
}

.legal-footer-links a:hover {
    color: var(--text-primary);
}

@media (max-width: 900px) {
    .legal-content-grid {
        grid-template-columns: 1fr;
    }
    .legal-toc-sidebar {
        display: none;
    }
    .legal-main-article {
        padding: 24px 20px;
    }
}

/* ==========================================================================
   REPORT PORTAL & REASONS GRID
   ========================================================================== */
.report-page-container {
    max-width: 820px;
    margin: 0 auto;
    padding: 10px 0 40px;
    width: 100%;
}

.report-form-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 32px 36px;
    box-shadow: var(--shadow-md);
}

.report-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 20px;
}

.report-icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: var(--accent-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.report-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.report-subtitle {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.report-target-preview {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-bottom: 24px;
}

.target-badge {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.target-item-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.target-thumb {
    width: 90px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
}

.target-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.target-main-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.target-sub-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    gap: 8px;
    align-items: center;
}

.target-comment-box {
    width: 100%;
    background: rgba(0, 0, 0, 0.15);
    padding: 10px 14px;
    border-radius: 6px;
    border-left: 3px solid var(--accent-red);
}

.comment-author-badge {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.comment-text-preview {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-style: italic;
}

.report-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.form-label .req {
    color: var(--accent-red);
}

.form-hint {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.form-select-control,
.form-input-control,
.form-textarea-control {
    width: 100%;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-family: inherit;
    transition: all var(--transition-fast);
}

.form-select-control:focus,
.form-input-control:focus,
.form-textarea-control:focus {
    outline: none;
    border-color: var(--accent-indigo);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.reason-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.reason-option-card {
    position: relative;
    display: block;
    cursor: pointer;
}

.reason-option-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.reason-card-content {
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all var(--transition-fast);
}

.reason-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.reason-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reason-text strong {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.reason-text span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.reason-option-card:hover .reason-card-content {
    border-color: var(--border-focus);
    background: var(--bg-surface-hover);
}

.reason-option-card input[type="radio"]:checked + .reason-card-content {
    border-color: var(--accent-red);
    background: rgba(239, 68, 68, 0.08);
    box-shadow: 0 0 0 1px var(--accent-red);
}

.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.report-alert-box {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
}

.report-submit-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 20px;
    margin-top: 10px;
}

.btn-cancel-report {
    background: var(--bg-surface-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    padding: 0 20px;
    height: 44px;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-submit-report {
    background: var(--accent-red);
    color: #fff;
    border: none;
    padding: 0 28px;
    height: 44px;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
}

.btn-submit-report:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

.report-success-view {
    text-align: center;
    padding: 40px 20px;
}

.success-icon-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 18px;
}

.comment-report-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
}

.comment-report-btn:hover {
    color: var(--accent-red);
}

@media (max-width: 600px) {
    .report-form-card {
        padding: 20px 16px;
    }
    .form-row-2col {
        grid-template-columns: 1fr;
    }
    .report-header {
        flex-direction: column;
    }
}

/* ==========================================================================
   AGE GATE (+18) — calque posé sur la page réelle, floutée en arrière-plan
   ========================================================================== */
html.age-gate-locked,
body.age-gate-locked {
    overflow: hidden !important;
    height: 100vh !important;
    touch-action: none;
}

.age-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    /* Le site reste reconnaissable derrière : on le floute et on l'assombrit
       juste assez pour que la carte domine, sans le masquer. */
    background:
        radial-gradient(ellipse at center, rgba(9, 9, 11, 0.35) 0%, rgba(9, 9, 11, 0.78) 100%);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    animation: age-gate-fade-in 0.35s ease both;
}

.age-gate-overlay.active {
    display: flex;
}

.age-gate-overlay.is-leaving {
    animation: age-gate-fade-out 0.35s ease forwards;
    pointer-events: none;
}

.age-gate-overlay.is-leaving .age-gate-card {
    animation: age-gate-card-out 0.35s ease forwards;
}

.age-gate-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: 32px 28px 24px;
    box-sizing: border-box;
    text-align: center;
    color: var(--text-primary, #f4f4f6);
    background: color-mix(in srgb, var(--bg-surface, #121217) 88%, transparent);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 20px;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    animation: age-gate-card-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

/* Liseré d'accent en haut de la carte */
.age-gate-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 24px;
    right: 24px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-red, #ff1e42), transparent);
}

/* Le logo reprend exactement celui de la navbar (.brand-logo, .brand-mark,
   .brand-text, .brand-badge) ; seul le centrage change. */
.age-gate-brand {
    justify-content: center;
    margin-bottom: 22px;
    user-select: none;
}

.age-gate-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 2px solid var(--accent-red, #ff1e42);
    background: var(--accent-red-subtle, rgba(255, 30, 66, 0.15));
    color: var(--accent-red, #ff1e42);
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.age-gate-title {
    margin: 0 0 8px;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.4px;
    text-wrap: balance;
    color: var(--text-primary, #f4f4f6);
}

.age-gate-desc {
    margin: 0 0 24px;
    font-size: 0.93rem;
    line-height: 1.55;
    text-wrap: pretty;
    color: var(--text-secondary, #a1a1aa);
}

.age-gate-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Le bouton de confirmation est l'unique élément en couleur d'accent : grand,
   lumineux, il appelle le clic. */
.btn-age-confirm {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 0 24px;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(180deg, var(--accent-red-hover, #ff3355), var(--accent-red, #ff1e42));
    color: #fff;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.1px;
    cursor: pointer;
    box-shadow:
        0 10px 28px var(--accent-red-glow, rgba(255, 30, 66, 0.35)),
        0 1px 0 rgba(255, 255, 255, 0.25) inset;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
    animation: age-gate-pulse 2.4s ease-in-out 1s infinite;
}

.btn-age-confirm svg {
    flex: none;
    transition: transform 0.2s ease;
}

.btn-age-confirm:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow:
        0 14px 36px var(--accent-red-glow, rgba(255, 30, 66, 0.35)),
        0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

.btn-age-confirm:hover svg {
    transform: translateX(3px);
}

.btn-age-confirm:active {
    transform: translateY(0) scale(0.98);
}

.btn-age-confirm:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 3px;
}

/* La sortie existe, mais ne rivalise pas : un simple lien. */
.btn-age-exit {
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--text-muted, #71717a);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}

.btn-age-exit:hover {
    color: var(--text-secondary, #a1a1aa);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn-age-exit:focus-visible {
    outline: 2px solid var(--text-muted, #71717a);
    outline-offset: 2px;
}

.age-gate-note {
    margin: 16px 0 0;
    font-size: 0.78rem;
    color: var(--text-muted, #71717a);
}

@keyframes age-gate-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes age-gate-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes age-gate-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes age-gate-card-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: scale(0.97); }
}

@keyframes age-gate-pulse {
    0%, 100% { box-shadow: 0 10px 28px var(--accent-red-glow, rgba(255, 30, 66, 0.35)), 0 0 0 0 rgba(255, 30, 66, 0.45); }
    50% { box-shadow: 0 10px 28px var(--accent-red-glow, rgba(255, 30, 66, 0.35)), 0 0 0 10px rgba(255, 30, 66, 0); }
}

@media (max-width: 480px) {
    .age-gate-card {
        padding: 28px 20px 20px;
        border-radius: 18px;
    }
    .age-gate-title {
        font-size: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .age-gate-overlay,
    .age-gate-card,
    .btn-age-confirm,
    .age-gate-overlay.is-leaving,
    .age-gate-overlay.is-leaving .age-gate-card {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ==========================================================================
   Accessibilité & pagination — ajouts issus de l'audit (A11Y-01, PERF-02)
   ========================================================================== */

/* Lien d'évitement : masqué jusqu'à la prise de focus au clavier */
/* Le lien d'évitement se cache VERS LE HAUT, pas vers la gauche : un
   `left: -9999px` déborde de 10 000px du côté scrollable en RTL (arabe), ce qui
   étirait toute la page mobile — navbar, tiroir et barre du bas — sur 1560px de
   large et la faisait défiler horizontalement. */
.skip-to-content {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    transform: translateY(-120%);
    z-index: 10000;
    padding: 12px 20px;
    background: var(--accent-red, #ff1e42);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    border-end-end-radius: var(--radius-md, 8px);
}
.skip-to-content:focus {
    transform: translateY(0);
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* Cible du lien d'évitement : pas de contour permanent sur le conteneur */
#main-content:focus {
    outline: none;
}

/* Le grand bouton de lecture est désormais atteignable au clavier */
.player-big-play-btn:focus-visible {
    outline: 3px solid var(--accent-red, #ff1e42);
    outline-offset: 4px;
}

/* Navigation entre les pages de résultats */
.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 32px 0 8px;
    flex-wrap: wrap;
}
.pagination-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
    background: var(--bg-surface, #17171c);
    color: var(--text-primary, #f4f4f5);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.pagination-link:hover {
    background: var(--bg-surface-elevated, #1f1f26);
    border-color: var(--accent-red, #ff1e42);
}
.pagination-link:focus-visible {
    outline: 2px solid var(--accent-red, #ff1e42);
    outline-offset: 2px;
}
.pagination-link.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}
.pagination-status {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-muted, #a1a1aa);
    font-variant-numeric: tabular-nums;
    min-width: 60px;
    text-align: center;
}

/* Respect de la préférence système « animations réduites » */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Texte d'aide sous un champ de formulaire (règle de mot de passe, limites…).
   Rattaché au champ par aria-describedby pour être lu par les lecteurs d'écran. */
.form-hint {
    margin-top: 5px;
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* ==========================================================================
   NAVIGATION MOBILE : RÉGLAGES DANS LE TIROIR & CTA D'AUTHENTIFICATION RÉDUIT
   La navbar mobile ne fait que 52px de haut : on y garde le strict minimum
   (menu, logo, recherche, compte) et on déplace thème + langue dans le tiroir
   latéral, où il y a la place de les afficher en toutes lettres.
   ========================================================================== */

/* Le bloc de réglages rapides n'existe que dans le tiroir mobile : sur desktop
   les mêmes contrôles sont déjà dans la navbar. */
.sidebar-quick-settings {
    display: none;
}

/* CTA « Se connecter / Créer un compte » : pleine largeur sur desktop. */
.btn-auth-cta {
    background: linear-gradient(135deg, var(--accent-red), #e60026);
    border-color: transparent;
    color: #ffffff;
    padding: 0 20px;
}

.btn-auth-cta:hover {
    color: #ffffff;
}

@media (max-width: 768px) {
    /* Thème et langue quittent la navbar : ils vivent désormais dans le tiroir. */
    .nav-right .theme-menu-container,
    .nav-right .lang-menu-container {
        display: none !important;
    }

    /* CTA d'authentification réduit à une pastille ronde de la taille des
       autres icônes de la navbar. Le libellé reste accessible via aria-label. */
    .btn-auth-cta {
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0 !important;
        border-radius: var(--radius-full);
        justify-content: center;
        box-shadow: 0 2px 10px rgba(255, 30, 66, 0.35);
    }

    .btn-auth-cta .btn-auth-cta-label {
        display: none;
    }

    .btn-auth-cta svg {
        width: 18px;
        height: 18px;
    }

    /* Réglages rapides du tiroir */
    .sidebar-quick-settings {
        display: block;
        padding-top: 4px;
    }

    .sidebar-quick-settings .sidebar-section-title {
        margin-top: 10px;
    }

    /* Sélecteur de thème en segments : les trois modes visibles d'un coup,
       sans dropdown imbriqué dans un tiroir déjà en surcouche. */
    .sidebar-theme-segment {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 0 10px;
    }

    .sidebar-theme-segment .sidebar-theme-opt {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
        min-height: 60px;
        padding: 9px 4px;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: var(--bg-surface-hover);
        color: var(--text-secondary);
        font-size: 0.72rem;
        font-weight: 600;
        text-align: center;
        line-height: 1.2;
    }

    .sidebar-theme-segment .sidebar-theme-opt svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .sidebar-theme-segment .sidebar-theme-opt.active {
        border-color: var(--accent-red);
        background: var(--accent-red-subtle);
        color: var(--accent-red);
        font-weight: 700;
    }

    .sidebar-theme-segment .sidebar-theme-opt:active {
        transform: scale(0.96);
    }

    /* Sélecteur de langue en pastilles drapeau + code ISO */
    .sidebar-lang-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0 10px;
    }

    .sidebar-lang-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 10px;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-full);
        background: var(--bg-surface-hover);
        color: var(--text-secondary);
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.4px;
        text-decoration: none;
    }

    .sidebar-lang-chip .lang-flag-img {
        width: 18px;
        height: 13px;
        border-radius: 2px;
        object-fit: cover;
    }

    .sidebar-lang-chip.active {
        border-color: var(--accent-red);
        background: var(--accent-red-subtle);
        color: var(--accent-red);
    }

    /* Barre inférieure : la pastille « Créer » poussait son libellé hors de la
       barre (36px de pastille + marge + texte > 53px utiles), et les libellés
       longs comme « Se connecter » débordaient sur le bord de l'écran. */
    .bottom-nav-create-circle {
        width: 32px;
        height: 32px;
        margin-bottom: 0;
    }

    .bottom-nav-item {
        min-width: 0;
        padding: 0 2px;
    }

    .bottom-nav-item > span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* En RTL le tiroir doit glisser depuis la droite. Les règles mobiles
       ci-dessus imposent `left: 0 !important`, ce qui entrait en conflit avec le
       `right: 0` du bloc RTL : le tiroir arabe s'ouvrait à cheval sur le bord
       gauche, amputé d'une soixantaine de pixels. */
    [dir="rtl"] .sidebar {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%) !important;
        border-right: 1px solid var(--border-subtle) !important;
        border-left: none !important;
    }

    [dir="rtl"] .sidebar.mobile-open {
        transform: translateX(0) !important;
    }
}

/* ==========================================================================
   SAISIE DE TEXTE SUR MOBILE — PAS DE ZOOM AU FOCUS
   Safari iOS zoome automatiquement sur tout champ dont la `font-size` est
   inférieure à 16px, et ne dézoome pas en sortie : la page reste décalée.
   Comme `html` est à 15px, même `1rem` passait sous le seuil — tous les champs
   du site étaient concernés (13,2 à 14,3px selon les écrans).
   La valeur est en pixels (pas en rem) et forcée : c'est un plancher qui ne
   doit pas être repris par une règle de composant, et main.css est chargé AVANT
   player.css et studio.css, qui l'emporteraient sinon à spécificité égale.
   Le zoom par pincement reste disponible — on ne touche pas au viewport.
   Les trois conditions sont en OU : un iPhone avec un pointeur Bluetooth apparié
   déclare `hover: hover` et `pointer: fine`, la largeur sert alors de filet.
   ========================================================================== */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   ERGONOMIE — FOCUS CLAVIER, DÉFILEMENT DES PUCES, FILTRES MOBILES, ÉTATS
   Passe d'ergonomie transversale : elle ne fait que reprendre les tokens
   ci-dessus et n'introduit aucune nouvelle couleur.
   ========================================================================== */

/* Focus clavier visible. Le reset global des boutons retire tout contour
   (`outline: none`) : sans cette règle, une navigation au clavier ne montrait
   jamais où l'on se trouvait. `:focus-visible` ne s'allume pas au clic souris
   ni au toucher, le rendu habituel reste donc inchangé. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--accent-red);
    outline-offset: 2px;
}

.video-thumbnail-wrapper:focus-visible,
.rec-video-card:focus-visible {
    outline-offset: 3px;
    border-radius: var(--radius-md);
}

/* Une fenêtre ouverte fige la page derrière elle (cf. initGlobalUx). */
html.modal-scroll-lock,
html.modal-scroll-lock body {
    overflow: hidden;
}

/* La croix des champs `type=search` ferait doublon avec le bouton du site. */
.search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* ── Défilement des puces de catégories ───────────────────────────────── */
.chip-scroller {
    position: relative;
    min-width: 0;
    display: flex;
}

.chip-scroller .category-scroll-container {
    flex: 1;
    min-width: 0;
    scroll-snap-type: x proximity;
}

.chip-scroller .category-chip {
    scroll-snap-align: start;
}

.home-filter-bar .chip-scroller {
    flex: 1 1 auto;
    min-width: 0;
}

.home-filter-bar .chip-scroller .category-scroll-container {
    min-width: 0;
}

/* Fondu sur chaque bord qui cache encore des puces. */
.chip-scroller.can-scroll-end .category-scroll-container {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.chip-scroller.can-scroll-start .category-scroll-container {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 56px);
            mask-image: linear-gradient(to right, transparent, #000 56px);
}
.chip-scroller.can-scroll-start.can-scroll-end .category-scroll-container {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
[dir="rtl"] .chip-scroller.can-scroll-end .category-scroll-container {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
            mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
}
[dir="rtl"] .chip-scroller.can-scroll-start .category-scroll-container {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 56px);
            mask-image: linear-gradient(to left, transparent, #000 56px);
}
[dir="rtl"] .chip-scroller.can-scroll-start.can-scroll-end .category-scroll-container {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 56px, #000 calc(100% - 56px), transparent);
            mask-image: linear-gradient(to left, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}

/* Flèches : souris uniquement — au doigt, le glissement suffit. */
.chip-scroll-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.chip-scroll-arrow:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-focus);
}
.chip-scroll-arrow--start { inset-inline-start: 0; }
.chip-scroll-arrow--end { inset-inline-end: 0; }
[dir="rtl"] .chip-scroll-arrow svg { transform: scaleX(-1); }

@media (hover: hover) and (pointer: fine) {
    .chip-scroller.can-scroll-start .chip-scroll-arrow--start,
    .chip-scroller.can-scroll-end .chip-scroll-arrow--end {
        display: inline-flex;
    }
}

/* ── Page de lecture ──────────────────────────────────────────────────── */
.description-category-link {
    color: var(--accent-indigo);
}
.description-category-link:hover {
    text-decoration: underline;
}

.video-description-box.is-expandable .description-text-content.collapsed {
    cursor: pointer;
}

.description-toggle-btn[hidden] {
    display: none;
}

.comments-empty-hint {
    padding: 20px 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Les boutons Annuler / Commenter n'apparaissent qu'au moment d'écrire,
   comme sur les grandes plateformes : au repos, la zone se réduit au champ. */
.comment-form[data-logged-in="1"] .comment-form-actions {
    display: none;
}
.comment-form[data-logged-in="1"]:focus-within .comment-form-actions,
.comment-form[data-logged-in="1"]:has(.comment-textarea:not(:placeholder-shown)) .comment-form-actions {
    display: flex;
}

/* Hors connexion, le champ n'est qu'une invitation à se connecter. */
.comment-form[data-logged-in="0"] .comment-form-actions {
    display: none;
}
.comment-form[data-logged-in="0"] .comment-textarea {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comment-form[data-logged-in="0"] .comment-textarea:hover {
    border-bottom-color: var(--border-focus);
}

/* ── Page introuvable (pages éditoriales) ─────────────────────────────── */
.legal-page-container {
    padding: 24px 0 40px;
}

.legal-not-found-card {
    max-width: 560px;
    margin: 24px auto;
    padding: 48px 32px;
    text-align: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.legal-not-found-card .not-found-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-red);
    background: var(--accent-red-subtle);
    border: 1px solid var(--border-accent);
}

.legal-not-found-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 26px;
}

.legal-not-found-card code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-surface-elevated);
    color: var(--text-primary);
}

.legal-not-found-card .not-found-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.legal-not-found-card .not-found-actions .btn-upload {
    display: inline-flex;
    height: 42px;
    padding: 0 22px;
}

/* ── Filtres de tri de la recherche ───────────────────────────────────── */
.search-sort-pills {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Mobile : filtres compacts ────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Accueil : puces, tri et mélange sur une seule rangée. Les tris
       occupaient une seconde rangée à eux seuls — près de 100px avant la
       première vidéo. Tri et mélange se réduisent à une icône. */
    .home-filter-bar {
        gap: 8px;
        padding-bottom: 10px;
        margin-bottom: 14px;
    }

    .feed-sort-trigger {
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
        position: relative;
    }
    .feed-sort-trigger-text,
    .feed-sort-chevron {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    /* Réduit à une icône, le déclencheur ne dit plus quel tri est actif :
       une pastille signale un tri autre que celui par défaut. */
    .feed-sort-menu:not([data-sort="recommended"]) .feed-sort-trigger::after {
        content: '';
        position: absolute;
        top: 6px;
        inset-inline-end: 6px;
        width: 7px;
        height: 7px;
        border-radius: var(--radius-full);
        background: var(--accent-red);
    }

    .feed-shuffle-btn {
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
        padding: 0;
        justify-content: center;
    }
    /* Icône seule : le libellé reste lu par les lecteurs d'écran. */
    .feed-shuffle-btn span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    /* Recherche : les tris défilent au lieu d'être coupés au bord. */
    .search-sort-pills {
        align-self: stretch;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -16px;
        padding-inline: 16px;
    }
    .search-sort-pills::-webkit-scrollbar {
        display: none;
    }
    .search-sort-pills .category-chip {
        padding: 6px 11px;
        font-size: 0.8rem;
    }

    .legal-not-found-card {
        padding: 36px 20px;
    }
}

/* ── RTL : décalage du contenu du côté de la barre latérale ──────────────
   Le bloc RTL plus haut vise `.main-wrapper`, qui n'existe pas : en arabe, la
   zone de contenu gardait sa marge à gauche alors que la barre latérale passe
   à droite — la grille glissait sous la barre et un vide restait à gauche. */
[dir="rtl"] .content-area {
    margin-left: 0;
    margin-right: var(--sidebar-width-expanded);
    transition: margin-right var(--transition-normal);
}
[dir="rtl"] .sidebar.collapsed ~ .content-area {
    margin-left: 0;
    margin-right: var(--sidebar-width-collapsed);
}
html.sidebar-collapsed-instant[dir="rtl"] .content-area {
    margin-left: 0 !important;
    margin-right: var(--sidebar-width-collapsed) !important;
}
@media (max-width: 1200px) {
    [dir="rtl"] .content-area {
        margin-left: 0;
        margin-right: var(--sidebar-width-collapsed);
    }
}
@media (max-width: 768px) {
    [dir="rtl"] .content-area,
    html.sidebar-collapsed-instant[dir="rtl"] .content-area {
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   BARRE RÉDUITE (« RAIL ») & GUIDE EN SURCOUCHE
   La barre réduite affichait toutes les sections — catégories, chaînes,
   liens légaux — en colonnes de 60px où chaque libellé était tronqué
   (« ature & Voyag »). Elle ne garde plus que la navigation principale ;
   le guide complet s'ouvre en surcouche par le bouton menu. Les règles
   restent au-dessus de 768px : le tiroir mobile a les siennes, et la classe
   `collapsed` posée par le cookie ne doit pas le vider.
   ========================================================================== */
@media (min-width: 769px) {
    .sidebar.collapsed .sidebar-section--extended {
        display: none;
    }

    /* Sans marge latérale : « Abonnements » mesure 69px, la case 71px. */
    .sidebar.collapsed .sidebar-nav-item {
        height: auto;
        min-height: 60px;
        padding: 8px 0;
    }

    /* Deux lignes au plus, coupées entre les mots : « Vidéos « J'aime » »
       tient sans ellipse. */
    .sidebar.collapsed .sidebar-nav-item > span {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        hyphens: auto;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Guide ouvert en surcouche (barre réduite d'office, ou page de lecture). */
    .app-container .sidebar.guide-open,
    .app-container .sidebar.sidebar--overlay {
        width: var(--sidebar-width-expanded) !important;
        padding: 12px 10px !important;
    }

    .sidebar.guide-open {
        z-index: 1100;
        background: var(--bg-surface);
        box-shadow: var(--shadow-lg);
    }

    .sidebar.guide-open .sidebar-section--extended,
    .sidebar.sidebar--overlay .sidebar-section--extended {
        display: block;
    }

    .sidebar.guide-open .sidebar-section-title,
    .sidebar.sidebar--overlay .sidebar-section-title {
        display: block;
    }

    .sidebar.guide-open .sidebar-nav-item,
    .sidebar.sidebar--overlay .sidebar-nav-item {
        flex-direction: row;
        justify-content: flex-start;
        height: 42px;
        min-height: 0;
        padding: 0 14px;
        gap: 16px;
        font-size: 0.92rem;
        border-radius: var(--radius-md);
    }

    .sidebar.guide-open .sidebar-nav-item > span,
    .sidebar.sidebar--overlay .sidebar-nav-item > span {
        display: inline;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: start;
    }

    .sidebar.guide-open .sidebar-nav-item.active::before,
    .sidebar.sidebar--overlay .sidebar-nav-item.active::before {
        left: 0;
        top: 8px;
        bottom: 8px;
    }

    .sidebar.guide-open .channel-sub-avatar,
    .sidebar.sidebar--overlay .channel-sub-avatar {
        width: 24px;
        height: 24px;
    }

    /* Page de lecture : le guide attend hors écran, le contenu prend toute
       la largeur. `visibility` retire aussi ses liens de l'ordre de
       tabulation tant qu'il est fermé. */
    .sidebar.sidebar--overlay {
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--transition-normal), visibility 0s linear 0.25s;
    }

    .sidebar.sidebar--overlay.guide-open {
        transform: none;
        visibility: visible;
        transition: transform var(--transition-normal), visibility 0s;
    }

    [dir="rtl"] .sidebar.sidebar--overlay:not(.guide-open) {
        transform: translateX(100%);
    }

    /* [dir] : doit l'emporter sur la marge RTL de la barre réduite d'office. */
    html[dir] .sidebar--overlay ~ .content-area {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Le voile du tiroir mobile sert aussi ici, sous la barre de navigation
       pour que le bouton menu reste cliquable. */
    .mobile-drawer-backdrop.active {
        display: block !important;
        position: fixed;
        inset: var(--navbar-height) 0 0 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1050;
        animation: guideBackdropIn 0.2s ease-out;
    }
}

@keyframes guideBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .sidebar:not(.guide-open) .sidebar-section--extended {
        display: none;
    }

    .sidebar:not(.guide-open) .sidebar-nav-item {
        height: auto;
        min-height: 60px;
        padding: 8px 0;
    }

    .sidebar:not(.guide-open) .sidebar-nav-item > span {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        hyphens: auto;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ==========================================================================
   LISIBILITÉ & CIBLES TACTILES
   ========================================================================== */
/* Libellés de la barre inférieure : 9,75px, sous le seuil de lecture
   confortable sur téléphone. */
@media (max-width: 768px) {
    .bottom-nav-item {
        font-size: 0.72rem;
    }

    /* Les liens du bas de page répétaient ceux des colonnes juste au-dessus,
       et leurs puces « • » restaient orphelines en fin de ligne. */
    .footer-bottom-links {
        display: none;
    }
}

/* Au doigt, les pastilles #hashtag des cartes ne faisaient que 18px de haut. */
@media (pointer: coarse) {
    .video-tags-preview {
        gap: 6px;
    }

    .video-tag-pill {
        padding: 4px 9px;
        border-radius: 6px;
    }
}

/* Tablette et petit portable : la recherche et les puces manquaient de place.
   « Mélanger » garde son infobulle et son libellé pour les lecteurs d'écran ;
   le drapeau suffit à désigner la langue. */
@media (min-width: 769px) and (max-width: 1200px) {
    .feed-shuffle-btn {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .feed-shuffle-btn span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .lang-code-current {
        display: none;
    }

    .nav-center {
        margin: 0 12px;
    }
}

/* Le bouton « Se connecter » de la barre inférieure est un <button> : sans
   hauteur de ligne commune, son libellé tombait 2px plus bas que les liens. */
@media (max-width: 768px) {
    .bottom-nav-item {
        line-height: 1.25;
    }
}

/* ==========================================================================
   Boutons Favoris (1-Click LocalStorage UX & Rétention)
   ========================================================================== */
.btn-card-fav {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transform: scale(0.85);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.video-card:hover .btn-card-fav,
.btn-card-fav.active {
    opacity: 1;
    transform: scale(1);
}

.btn-card-fav:hover {
    background: rgba(255, 30, 66, 0.9);
    border-color: #ff1e42;
    transform: scale(1.1);
}

.btn-card-fav.active {
    background: var(--accent-red, #ff1e42);
    border-color: var(--accent-red, #ff1e42);
    color: #ffffff;
}

.btn-card-fav.active svg {
    fill: currentColor;
}

@media (max-width: 768px) {
    .btn-card-fav {
        opacity: 0.9;
        transform: scale(1);
    }
}

/* Page Watch Favoris */
.btn-fav-watch.active {
    background: rgba(255, 30, 66, 0.15) !important;
    border-color: var(--accent-red, #ff1e42) !important;
    color: var(--accent-red, #ff1e42) !important;
}

.btn-fav-watch.active svg {
    fill: currentColor;
}

/* Page /liked Vue Client LocalStorage */
.fav-card-wrapper {
    position: relative;
}

.fav-remove-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    transition: all 0.2s ease;
}

.fav-remove-btn:hover {
    background: var(--accent-red, #ff1e42);
    color: #ffffff;
    transform: scale(1.1);
}