/**
 * ════════════════════════════════════════════════════════════════
 * ALPHAVAULT AI - COMMUNITY HUB STYLES
 * Design inspiré du News Terminal (gradients violets + glassmorphism)
 * 100% Responsive PC & Mobile
 * ════════════════════════════════════════════════════════════════
 */

/* ════════════════════════════════════════════════════════════════
   1. UTILITY CLASSES
   ════════════════════════════════════════════════════════════════ */

.gradient-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

.gradient-title i {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ✨ NOUVEAUTÉ: Bordures dégradées pour toutes les sections */
.gradient-border {
    position: relative;
    border: 2px solid transparent;
    background: var(--glass-bg);
    background-clip: padding-box;
}

.gradient-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* ✨ NOUVEAUTÉ: Titres de pages/sections en dégradé */
h1, h2, h3, h4, 
.section-title,
.post-detail-title,
.profile-name {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800;
}

/* ════════════════════════════════════════════════════════════════
   2. COMMUNITY HEADER STATS
   ════════════════════════════════════════════════════════════════ */

.community-header-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* ✨ Bordure dégradée pour les stat-cards */
.stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(102, 126, 234, 0.25);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-icon {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.stat-info {
    flex: 1;
}

.stat-value {
    font-size: 2.25rem;
    font-weight: 900;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ════════════════════════════════════════════════════════════════
   3. CHANNELS NAVIGATION
   ════════════════════════════════════════════════════════════════ */

.channels-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 4px 16px 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 126, 234, 0.4) transparent;
}

.channels-scroll::-webkit-scrollbar {
    height: 6px;
}

.channels-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.channels-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
}

.channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}

/* ✨ Bordure dégradée pour les channel-chips */
.channel-chip::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.channel-chip i {
    font-size: 1.1rem;
}

.channel-chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
}

.channel-chip.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.channel-chip.active::before {
    display: none;
}

.channel-chip.active i {
    color: white !important;
}

/* ════════════════════════════════════════════════════════════════
   4. ACTIONS BAR
   ════════════════════════════════════════════════════════════════ */

.actions-bar {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* ✅ CORRECTION : Bordure dégradée pour la barre de recherche */
.search-box {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 1.1rem;
    pointer-events: none;
    z-index: 2;
}

.search-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: 12px;
    color: var(--text-primary);
    transition: all 0.3s ease;
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    
    /* ✅ Bordure dégradée avec background-clip */
    background-image: 
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

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

.search-input:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
}

/* Dark mode */
body.dark-mode .search-input {
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.filter-buttons {
    display: flex;
    gap: 8px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    padding: 6px;
    border-radius: 12px;
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
}

/* ✨ Bordure dégradée pour filter-buttons */
.filter-buttons::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.filter-btn {
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.filter-btn:hover {
    color: var(--text-primary);
    background: rgba(102, 126, 234, 0.1);
}

.filter-btn.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.filter-btn.active i {
    color: white !important;
}

.create-post-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
    white-space: nowrap;
}

.create-post-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(102, 126, 234, 0.6);
}

.create-post-btn:active {
    transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════
   5. COMMUNITY LAYOUT (Posts + Sidebar)
   ════════════════════════════════════════════════════════════════ */

.community-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
}

.posts-section {
    min-width: 0;
}

.community-sidebar {
    position: sticky;
    top: 24px;
}

/* ════════════════════════════════════════════════════════════════
   6. POSTS GRID
   ════════════════════════════════════════════════════════════════ */

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

.post-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

/* ✨ Bordure dégradée pour post-cards */
.post-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.post-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.post-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 48px rgba(102, 126, 234, 0.3);
}

.post-card:hover::before {
    opacity: 1;
}

.post-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 20px 0 20px;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.post-channel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.post-actions {
    display: flex;
    gap: 6px;
}

.post-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid var(--glass-border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.post-action-btn:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: transparent;
    transform: scale(1.1);
}

.post-content {
    padding: 16px 20px 20px 20px;
    position: relative;
    z-index: 1;
}

.post-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-excerpt {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.post-tag {
    padding: 4px 10px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.post-tag:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    transform: scale(1.05);
}

.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--glass-border);
}

.post-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #667eea;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.post-date {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.post-stats {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.post-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.post-stat i {
    color: #667eea;
}

/* ════════════════════════════════════════════════════════════════
   7. SIDEBAR WIDGETS
   ════════════════════════════════════════════════════════════════ */

.featured-post {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* ✨ Bordure dégradée pour featured-posts */
.featured-post::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.featured-post:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
}

.featured-post-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-post-meta {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 600;
}

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

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* ✨ Bordure dégradée pour leaderboard-items */
.leaderboard-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.leaderboard-item:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
}

.leaderboard-rank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.leaderboard-rank.top-1 {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.leaderboard-rank.top-2 {
    background: linear-gradient(135deg, #6b7280, #9ca3af);
}

.leaderboard-rank.top-3 {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

.leaderboard-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #667eea;
}

.leaderboard-info {
    flex: 1;
}

.leaderboard-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.leaderboard-points {
    font-size: 0.75rem;
    color: #667eea;
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   8. CREATE POST FORM
   ════════════════════════════════════════════════════════════════ */

.editor-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 16px;
    padding: 32px;
    position: relative;
}

/* ✨ Bordure dégradée pour editor-card */
.editor-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.form-section {
    margin-bottom: 28px;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.form-label i {
    color: #667eea;
}

.form-required {
    color: #ef4444;
    font-weight: 800;
}

.form-input,
.form-select {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 12px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    color: var(--text-primary);
    transition: all 0.3s ease;
    font-family: inherit;
}

/* ✨ Bordure dégradée pour inputs/selects */
.form-input,
.form-select {
    background-image: 
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
}

.char-counter {
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-top: 6px;
    font-weight: 600;
}

/* Tags Input */
.tags-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 12px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    min-height: 52px;
    transition: all 0.3s ease;
}

/* ✨ Bordure dégradée pour tags-input */
.tags-input-wrapper {
    background-image: 
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.tags-input-wrapper:focus-within {
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
}

.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
}

.tag-remove {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.tag-remove:hover {
    background: rgba(255, 255, 255, 0.2);
}

.tag-input {
    flex: 1;
    min-width: 150px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 4px;
    outline: none;
}

/* Upload Zone */
.upload-zone {
    border: 3px dashed transparent;
    background-clip: padding-box;
    border-radius: 16px;
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
}

/* ✨ Bordure dégradée pour upload-zone */
.upload-zone {
    background-image: 
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.upload-zone:hover {
    background: rgba(102, 126, 234, 0.05);
}

.upload-zone.drag-over {
    background: rgba(102, 126, 234, 0.1);
    transform: scale(1.02);
}

.upload-icon {
    font-size: 3rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.upload-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.upload-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.image-preview {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* ✨ Bordure dégradée pour image-preview */
.image-preview {
    background-image: 
        linear-gradient(white, white),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.image-remove:hover {
    background: #ef4444;
    transform: scale(1.1);
}

/* Form Buttons */
.btn-cancel {
    padding: 14px 32px;
    background: transparent;
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

/* ✨ Bordure dégradée pour btn-cancel */
.btn-cancel {
    background-image: 
        linear-gradient(transparent, transparent),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.btn-cancel:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.btn-publish {
    padding: 14px 32px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-publish:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(102, 126, 234, 0.6);
}

.btn-publish:active {
    transform: translateY(0);
}

.btn-publish:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-publish .spinner {
    display: none;
    animation: spin 1s linear infinite;
}

.btn-publish.loading .spinner {
    display: inline-block;
}

.btn-publish.loading span {
    display: none;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════
   9. POST DETAIL PAGE
   ════════════════════════════════════════════════════════════════ */

.post-detail {
    padding: 32px;
}

.post-detail-header {
    margin-bottom: 24px;
}

.post-detail-title {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 20px;
    line-height: 1.2;
}

.post-detail-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--glass-border);
}

.post-detail-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-primary);
    margin: 28px 0;
}

.post-detail-content h1,
.post-detail-content h2,
.post-detail-content h3 {
    margin-top: 32px;
    margin-bottom: 16px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.post-detail-content p {
    margin-bottom: 16px;
}

.post-detail-content code {
    background: rgba(102, 126, 234, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.post-detail-content pre {
    background: #1e293b;
    padding: 20px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 20px 0;
}

.post-detail-content pre code {
    background: none;
    padding: 0;
}

.post-detail-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.post-detail-images img {
    width: 100%;
    border-radius: 12px;
    border: 2px solid transparent;
    background-clip: padding-box;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* ✨ Bordure dégradée pour post-detail-images */
.post-detail-images img {
    background-image: 
        linear-gradient(white, white),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.post-detail-images img:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 36px rgba(102, 126, 234, 0.3);
}

/* Comments Section */
.comment-textarea {
    width: 100%;
    min-height: 120px;
    padding: 16px;
    border-radius: 12px;
    border: 2px solid transparent;
    background-clip: padding-box;
    background: var(--glass-bg);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    resize: vertical;
    font-family: inherit;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

/* ✨ Bordure dégradée pour textarea */
.comment-textarea {
    background-image: 
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.comment-textarea:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comment-item {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
}

/* ✨ Bordure dégradée pour comments */
.comment-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.comment-item:hover {
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

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

.comment-author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #667eea;
}

.comment-author-name {
    font-weight: 700;
    color: var(--text-primary);
}

.comment-date {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.comment-text {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ════════════════════════════════════════════════════════════════
   10. USER PROFILE
   ════════════════════════════════════════════════════════════════ */

.profile-header-card {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(102, 126, 234, 0.4);
    margin-bottom: 32px;
}

.profile-header-content {
    color: white;
}

.profile-avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-size: 3rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.profile-name {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 12px;
    color: white !important;
    -webkit-text-fill-color: white !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-bio {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.profile-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.profile-stat-item {
    text-align: center;
}

.profile-stat-value {
    font-size: 1.75rem;
    font-weight: 900;
    color: white !important;
}

.profile-stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.profile-badge {
    padding: 10px 20px;
    border-radius: 12px;
    color: white;
    font-weight: 800;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.user-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.user-post-item {
    background: var(--glass-bg);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

/* ✨ Bordure dégradée pour user-posts */
.user-post-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.user-post-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(102, 126, 234, 0.25);
}

.user-post-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.user-post-meta {
    display: flex;
    gap: 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
}

.user-post-meta i {
    color: #667eea;
}

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

.section-count {
    background: rgba(59, 130, 246, 0.2);
    padding: 6px 14px;
    border-radius: 12px;
    color: #60a5fa;
    font-weight: 800;
    font-size: 0.9rem;
}

/* ════════════════════════════════════════════════════════════════
   11. LOADING & EMPTY STATES
   ════════════════════════════════════════════════════════════════ */

.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    grid-column: 1 / -1;
}

.loading-spinner i {
    font-size: 3rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    grid-column: 1 / -1;
}

.empty-state i {
    font-size: 4rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   12. RESPONSIVE DESIGN
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .community-layout {
        grid-template-columns: 1fr 300px;
        gap: 24px;
    }
}

@media (max-width: 968px) {
    .community-layout {
        grid-template-columns: 1fr;
    }
    
    .community-sidebar {
        position: static;
        order: 2;
    }
    
    .posts-section {
        order: 1;
    }
}

@media (max-width: 768px) {
    /* Stats Grid */
    .community-header-stats {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
    }
    
    .stat-card {
        padding: 18px;
        gap: 14px;
    }
    
    .stat-icon {
        width: 56px;
        height: 56px;
        font-size: 1.6rem;
    }
    
    .stat-value {
        font-size: 1.8rem;
    }
    
    /* Actions Bar */
    .actions-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-box {
        width: 100%;
        min-width: unset;
    }
    
    .filter-buttons {
        width: 100%;
        justify-content: center;
    }
    
    .create-post-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* ✨ CORRECTION: Channels reste horizontal sur mobile */
    .channels-scroll {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
    }
    
    .channel-chip {
        flex-shrink: 0 !important;
    }
    
    /* Posts Grid */
    .posts-grid {
        grid-template-columns: 1fr;
    }
    
    /* Form */
    .editor-card {
        padding: 24px 20px;
    }
    
    .actions-bar {
        flex-direction: column-reverse;
        gap: 12px;
    }
    
    .btn-cancel,
    .btn-publish {
        width: 100%;
        justify-content: center;
    }
    
    /* Post Detail */
    .post-detail {
        padding: 24px 20px;
    }
    
    .post-detail-title {
        font-size: 2rem;
    }
    
    .post-detail-meta {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .post-detail-images {
        grid-template-columns: 1fr;
    }
    
    /* Profile */
    .profile-header-card {
        padding: 28px 20px;
    }
    
    .profile-name {
        font-size: 2rem;
    }
    
    .profile-stats {
        gap: 20px;
    }
    
    .user-posts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .community-header-stats {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        padding: 16px;
    }
    
    .filter-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .filter-btn {
        width: 100%;
        justify-content: center;
    }
    
    .post-detail-title {
        font-size: 1.6rem;
    }
    
    .profile-name {
        font-size: 1.6rem;
    }
    
    .image-preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* ✨ CORRECTION: Channels horizontal même sur petit mobile */
    .channels-scroll {
        display: flex !important;
        overflow-x: auto !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   13. DARK MODE SUPPORT
   ════════════════════════════════════════════════════════════════ */

body.dark-mode .stat-card,
body.dark-mode .channel-chip,
body.dark-mode .post-card,
body.dark-mode .featured-post,
body.dark-mode .leaderboard-item,
body.dark-mode .editor-card,
body.dark-mode .comment-item,
body.dark-mode .user-post-item {
    background: rgba(15, 23, 42, 0.8);
}

body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .search-input,
body.dark-mode .comment-textarea,
body.dark-mode .tags-input-wrapper,
body.dark-mode .upload-zone {
    background: rgba(15, 23, 42, 0.6);
}

body.dark-mode .filter-btn:hover {
    background: rgba(102, 126, 234, 0.2);
}

/* ✨ Bordures dégradées en dark mode */
body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .search-input,
body.dark-mode .comment-textarea,
body.dark-mode .tags-input-wrapper,
body.dark-mode .upload-zone {
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* ════════════════════════════════════════════════════════════════
   14. PARTICLES BACKGROUND FIX
   ════════════════════════════════════════════════════════════════ */

.particles-background,
#particles-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: 0.6;
}

body.dark-mode .particles-background,
body.dark-mode #particles-canvas {
    opacity: 0.3;
}

/* ════════════════════════════════════════════════════════════════
   15. UTILITY ANIMATIONS
   ════════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.post-card,
.stat-card,
.featured-post,
.leaderboard-item {
    animation: fadeIn 0.5s ease-out;
}

/* Stagger animation for grid items */
.posts-grid > .post-card:nth-child(1) { animation-delay: 0.05s; }
.posts-grid > .post-card:nth-child(2) { animation-delay: 0.1s; }
.posts-grid > .post-card:nth-child(3) { animation-delay: 0.15s; }
.posts-grid > .post-card:nth-child(4) { animation-delay: 0.2s; }
.posts-grid > .post-card:nth-child(5) { animation-delay: 0.25s; }
.posts-grid > .post-card:nth-child(6) { animation-delay: 0.3s; }

/* ════════════════════════════════════════════════════════════════
   🔧 CORRECTIONS - SECTIONS POSTS & SIDEBAR
   ════════════════════════════════════════════════════════════════ */

/* 1⃣ Section Title (Posts, Featured Posts, Top Contributors) */
.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 900;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
}

.section-title i {
    font-size: 1.6rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 2⃣ Sidebar Widgets (Featured Posts, Top Contributors) */
.sidebar-widget {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 28px;
    position: relative;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
}

/* Bordure dégradée pour widgets */
.sidebar-widget::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.sidebar-widget .section-title {
    font-size: 1.4rem;
    margin-bottom: 20px;
    padding-bottom: 12px;
}

/* 3⃣ Featured Posts - Corrections */
.featured-posts-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.featured-post {
    background: rgba(102, 126, 234, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 0 !important; /* Override existing margin */
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.featured-post::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.featured-post:hover {
    transform: translateX(6px);
    background: rgba(102, 126, 234, 0.1);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
}

/* Empty state pour Featured Posts */
.featured-posts-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
}

.featured-posts-empty i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.3;
    display: block;
}

/* 4⃣ Top Contributors - Corrections */
.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(102, 126, 234, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.leaderboard-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.leaderboard-item:hover {
    transform: translateX(6px);
    background: rgba(102, 126, 234, 0.1);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
}

/* ════════════════════════════════════════════════════════════════
   🔧 CORRECTIONS - POST DETAIL PAGE
   ════════════════════════════════════════════════════════════════ */

/* 1⃣ Post Detail Container */
.post-detail-container {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 20px;
    padding: 40px;
    margin: 24px 0;
    position: relative;
}

.post-detail-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* 2⃣ Post Detail Channel Badge (la barre cyan) - CORRECTION */
.post-detail-channel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.post-detail-channel i {
    font-size: 1.1rem;
    color: white !important;
}

/* 3⃣ Author Info Section - RESTRUCTURATION */
.post-detail-author {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 16px;
    border: 2px solid rgba(102, 126, 234, 0.1);
}

.post-detail-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid #667eea;
    flex-shrink: 0;
    object-fit: cover;
}

.post-detail-author-info {
    flex: 1;
}

.post-detail-author-name {
    font-size: 1.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}

.post-detail-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.post-detail-date i {
    color: #667eea;
}

/* 4⃣ Post Stats (likes, comments, views) */
.post-detail-stats {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.post-detail-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(102, 126, 234, 0.08);
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    border: 2px solid rgba(102, 126, 234, 0.15);
    transition: all 0.3s ease;
}

.post-detail-stat:hover {
    background: rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.post-detail-stat i {
    font-size: 1.1rem;
    color: #667eea;
}

/* 5⃣ Comments Section */
.comments-section {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 3px solid transparent;
    border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
}

.comments-section .section-title {
    font-size: 1.6rem;
}

/* ════════════════════════════════════════════════════════════════
   🎨 DARK MODE - CORRECTIONS
   ════════════════════════════════════════════════════════════════ */

body.dark-mode .sidebar-widget {
    background: rgba(15, 23, 42, 0.9);
}

body.dark-mode .post-detail-container {
    background: rgba(15, 23, 42, 0.9);
}

body.dark-mode .featured-post,
body.dark-mode .leaderboard-item {
    background: rgba(30, 41, 59, 0.6);
}

body.dark-mode .featured-post:hover,
body.dark-mode .leaderboard-item:hover {
    background: rgba(30, 41, 59, 0.8);
}

body.dark-mode .post-detail-author {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(102, 126, 234, 0.2);
}

body.dark-mode .post-detail-stat {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(102, 126, 234, 0.2);
}

/* ════════════════════════════════════════════════════════════════
   📱 RESPONSIVE - CORRECTIONS
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .sidebar-widget {
        padding: 20px;
    }
    
    .post-detail-container {
        padding: 24px 18px;
    }
    
    .post-detail-author {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    
    .post-detail-stats {
        gap: 12px;
    }
    
    .post-detail-stat {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 1.4rem;
    }
    
    .post-detail-channel {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
    
    .post-detail-stats {
        flex-direction: column;
        align-items: stretch;
    }
    
    .post-detail-stat {
        justify-content: center;
    }
}

/* État "liked" pour le bouton like */
.post-detail-stat.liked,
.post-detail-stat#likeBtn.liked {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border-color: transparent !important;
}

.post-detail-stat.liked i,
.post-detail-stat#likeBtn.liked i {
    color: white !important;
}

.post-detail-stat.liked:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4) !important;
}

/* ════════════════════════════════════════════════════════════════
   🔧 CORRECTION FINALE - SEARCH BAR GRADIENT BORDER
   ════════════════════════════════════════════════════════════════ */

.search-box {
    position: relative;
    flex: 1;
    min-width: 250px;
}

/* Wrapper avec bordure dégradée */
.search-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.search-input {
    width: 100% !important;
    padding: 14px 16px 14px 48px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 12px !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 0 !important;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 1.1rem;
    pointer-events: none;
    z-index: 2;
}

.search-input::placeholder {
    color: var(--text-tertiary) !important;
}

.search-input:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
}

/* Dark mode */
body.dark-mode .search-input {
    background: rgba(15, 23, 42, 0.6) !important;
}

/* ========================================
   TOP CONTRIBUTORS - EFFET HOVER CLIQUABLE
   ======================================== */
.leaderboard-item {
    cursor: pointer !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Effet de brillance au survol */
.leaderboard-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.leaderboard-item:hover::before {
    left: 100%;
}

/* Transformation au survol */
.leaderboard-item:hover {
    transform: translateX(8px) scale(1.02);
    background: rgba(59, 130, 246, 0.08) !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2) !important;
    border-left: 4px solid #3B82F6;
}

/* Effet au clic */
.leaderboard-item:active {
    transform: translateX(8px) scale(0.98);
}

/* Mise en évidence du nom au survol */
.leaderboard-item:hover .leaderboard-name {
    color: #3B82F6;
    font-weight: 700;
}

/* Animation de l'avatar au survol */
.leaderboard-item:hover .leaderboard-avatar {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.leaderboard-avatar {
    transition: all 0.3s ease;
}

/* Dark Mode */
body.dark-mode .leaderboard-item:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3) !important;
}

body.dark-mode .leaderboard-item:hover .leaderboard-name {
    color: #60A5FA;
}

/* ========================================
   STATISTIQUES DES POSTS - STYLE UNIFIÉ
   ======================================== */

/* Container des statistiques */
.post-stats,
.post-footer .post-stats,
.activity-stats,
.profile-post-stats {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 0.9rem;
    color: #64748b;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-left: 20px; /* ✅ AJOUTÉ : décalage vers la gauche */
}

/* Chaque statistique individuelle */
.post-stat,
.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(100, 116, 139, 0.08);
    transition: all 0.3s ease;
    font-weight: 600;
    cursor: default;
}

/* Icônes des statistiques */
.post-stat i,
.stat-item i {
    font-size: 0.95rem;
    opacity: 0.8;
}

/* Valeurs numériques */
.post-stat span,
.stat-item span {
    font-size: 0.9rem;
    font-weight: 700;
    color: #475569;
}

/* Hover effet */
.post-stat:hover,
.stat-item:hover {
    background: rgba(100, 116, 139, 0.12);
    transform: translateY(-2px);
}

/* Upvote - Couleur verte */
.post-stat.upvote-btn,
.stat-item.upvote {
    color: #10b981;
}

.post-stat.upvote-btn i,
.stat-item.upvote i {
    color: #10b981;
}

.post-stat.upvote-btn span,
.stat-item.upvote span {
    color: #059669;
}

.post-stat.upvote-btn:hover,
.stat-item.upvote:hover {
    background: rgba(16, 185, 129, 0.1);
    cursor: pointer;
}

/* Upvoted state */
.post-stat.upvoted,
.stat-item.upvoted {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

/* Comments - Couleur bleue */
.post-stat:has(.fa-comment),
.stat-item.comments {
    color: #3B82F6;
}

.post-stat:has(.fa-comment) i,
.stat-item.comments i {
    color: #3B82F6;
}

.post-stat:has(.fa-comment) span,
.stat-item.comments span {
    color: #2563EB;
}

/* Views - Couleur violette */
.post-stat:has(.fa-eye),
.stat-item.views {
    color: #8B5CF6;
}

.post-stat:has(.fa-eye) i,
.stat-item.views i {
    color: #8B5CF6;
}

.post-stat:has(.fa-eye) span,
.stat-item.views span {
    color: #7C3AED;
}

/* Timestamp - Couleur grise */
.post-stat:has(.fa-clock),
.stat-item.timestamp {
    color: #64748b;
    background: transparent;
    padding: 6px 0;
}

.post-stat:has(.fa-clock):hover,
.stat-item.timestamp:hover {
    background: transparent;
    transform: none;
}

/* Dark Mode */
body.dark-mode .post-stat,
body.dark-mode .stat-item {
    background: rgba(148, 163, 184, 0.1);
}

body.dark-mode .post-stat span,
body.dark-mode .stat-item span {
    color: #cbd5e1;
}

body.dark-mode .post-stat:hover,
body.dark-mode .stat-item:hover {
    background: rgba(148, 163, 184, 0.15);
}

body.dark-mode .post-stat.upvoted,
body.dark-mode .stat-item.upvoted {
    background: rgba(16, 185, 129, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .post-stats,
    .activity-stats,
    .profile-post-stats {
        gap: 12px;
        font-size: 0.85rem;
        margin-left: 11px; /* ✅ Décalage mobile ajusté */
    }
    
    .post-stat,
    .stat-item {
        padding: 5px 10px;
        gap: 5px;
    }
    
    .post-stat i,
    .stat-item i {
        font-size: 0.85rem;
    }
    
    .post-stat span,
    .stat-item span {
        font-size: 0.85rem;
    }
}

/* Animation au chargement */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.post-stat,
.stat-item {
    animation: fadeInUp 0.3s ease-out backwards;
}

.post-stat:nth-child(1) { animation-delay: 0.05s; }
.post-stat:nth-child(2) { animation-delay: 0.1s; }
.post-stat:nth-child(3) { animation-delay: 0.15s; }
.post-stat:nth-child(4) { animation-delay: 0.2s; }

/* ════════════════════════════════════════════════════════════════
   🔧 CORRECTION - SECTION COMMENTAIRES (POST DETAIL)
   ════════════════════════════════════════════════════════════════ */

/* 1⃣ Container principal des commentaires */
.comments-section {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 20px;
    padding: 40px;
    margin-top: 48px;
    position: relative;
}

/* Bordure dégradée */
.comments-section::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* 2⃣ Titre de la section */
.comments-section .section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 900;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
    position: relative;
    z-index: 1;
}

.comments-section .section-title i {
    font-size: 1.6rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 3⃣ Formulaire de commentaire */
.comment-form {
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

/* Textarea avec bordure dégradée (Override inline styles) */
.comment-textarea {
    width: 100% !important;
    min-height: 120px !important;
    padding: 16px !important;
    border-radius: 12px !important;
    border: none !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    resize: vertical !important;
    font-family: inherit !important;
    margin-bottom: 16px !important;
    transition: all 0.3s ease !important;
    position: relative;
    
    /* Bordure dégradée */
    background-image: 
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        linear-gradient(135deg, #667eea, #764ba2) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    border: 2px solid transparent !important;
}

.comment-textarea::placeholder {
    color: var(--text-tertiary) !important;
    font-weight: 600;
}

.comment-textarea:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
}

/* Dark mode textarea */
body.dark-mode .comment-textarea {
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)),
        linear-gradient(135deg, #667eea, #764ba2) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

/* 4⃣ Liste des commentaires */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
}

/* 5⃣ Commentaire individuel */
.comment-item {
    background: rgba(102, 126, 234, 0.04);
    backdrop-filter: blur(10px) saturate(180%);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Bordure dégradée subtile */
.comment-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.comment-item:hover {
    background: rgba(102, 126, 234, 0.08);
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
}

/* 6⃣ Header du commentaire */
.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.comment-author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #667eea;
    flex-shrink: 0;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.comment-author-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comment-author-name {
    font-weight: 800;
    font-size: 1rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.comment-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-weight: 600;
}

.comment-date i {
    font-size: 0.75rem;
    color: #667eea;
}

/* 7⃣ Texte du commentaire */
.comment-text {
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

/* 8⃣ Actions du commentaire (Upvote, Reply) */
.comment-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.comment-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(102, 126, 234, 0.08);
    border: 2px solid rgba(102, 126, 234, 0.15);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.comment-action-btn:hover {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
}

.comment-action-btn i {
    font-size: 0.85rem;
    color: #667eea;
}

/* Bouton Upvote actif */
.comment-action-btn.upvoted {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border-color: transparent;
}

.comment-action-btn.upvoted i {
    color: white;
}

/* Bouton Reply avec style distinct */
.comment-action-btn.reply-btn {
    background: transparent;
    border-color: rgba(102, 126, 234, 0.2);
}

.comment-action-btn.reply-btn:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: transparent;
}

.comment-action-btn.reply-btn:hover i {
    color: white;
}

/* 9⃣ État vide */
.comments-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
}

.comments-empty i {
    font-size: 3.5rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    opacity: 0.4;
    display: block;
}

.comments-empty p {
    font-size: 1.1rem;
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   🎨 DARK MODE - COMMENTAIRES
   ════════════════════════════════════════════════════════════════ */

body.dark-mode .comments-section {
    background: rgba(15, 23, 42, 0.9);
}

body.dark-mode .comment-item {
    background: rgba(30, 41, 59, 0.5);
}

body.dark-mode .comment-item:hover {
    background: rgba(30, 41, 59, 0.7);
}

body.dark-mode .comment-action-btn {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(102, 126, 234, 0.2);
}

body.dark-mode .comment-action-btn:hover {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(102, 126, 234, 0.3);
}

/* ════════════════════════════════════════════════════════════════
   📱 RESPONSIVE - COMMENTAIRES
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .comments-section {
        padding: 28px 20px;
    }
    
    .comments-section .section-title {
        font-size: 1.5rem;
    }
    
    .comment-item {
        padding: 20px;
    }
    
    .comment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .comment-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .comments-section {
        padding: 20px 16px;
    }
    
    .comment-avatar {
        width: 36px;
        height: 36px;
    }
    
    .comment-author-name {
        font-size: 0.95rem;
    }
    
    .comment-text {
        font-size: 0.95rem;
    }
    
    .comment-action-btn {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

/* ════════════════════════════════════════════════════════════════
   🔧 CORRECTIONS SUPPLÉMENTAIRES
   ════════════════════════════════════════════════════════════════ */

/* 1⃣ BOUTON "BACK TO COMMUNITY" - BORDURE DÉGRADÉE PERMANENTE */
.filter-btn {
    padding: 10px 18px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    position: relative;
    
    /* Bordure dégradée permanente */
    background-image: 
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.filter-btn i {
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.filter-btn:hover {
    transform: translateX(-4px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    background-image: 
        linear-gradient(135deg, #667eea, #764ba2),
        linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.filter-btn:hover i {
    -webkit-text-fill-color: white;
}

/* Dark mode */
body.dark-mode .filter-btn {
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

body.dark-mode .filter-btn:hover {
    background-image: 
        linear-gradient(135deg, #667eea, #764ba2),
        linear-gradient(135deg, #667eea, #764ba2);
}

/* 2⃣ ALIGNEMENT NOM + DATE SUR LA MÊME LIGNE */
.comment-author-details {
    display: flex;
    flex-direction: row !important; /* Changé de column à row */
    align-items: center !important;
    gap: 12px !important;
}

.comment-author-name {
    font-weight: 800;
    font-size: 1rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0; /* Supprime les marges */
}

.comment-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-weight: 600;
    margin: 0; /* Supprime les marges */
}

.comment-date i {
    font-size: 0.75rem;
    color: #667eea;
}

/* Séparateur visuel optionnel entre nom et date */
.comment-author-details::after {
    content: '•';
    color: var(--text-tertiary);
    font-weight: 700;
    opacity: 0.5;
    order: 1; /* Place le point entre le nom et la date */
}

.comment-author-name {
    order: 0;
}

.comment-date {
    order: 2;
}

/* Responsive - Revenir à column sur mobile si nécessaire */
@media (max-width: 480px) {
    .comment-author-details {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    
    .comment-author-details::after {
        display: none; /* Cache le séparateur sur mobile */
    }
}

/* ════════════════════════════════════════════════════════════════
   🔧 CREATE POST - BORDURES DÉGRADÉES DISCRÈTES UNIFORMES
   ════════════════════════════════════════════════════════════════ */

/* 1⃣ Container principal du formulaire */
.editor-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 32px;
    position: relative;
}

.editor-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

body.dark-mode .editor-card {
    background: rgba(15, 23, 42, 0.9);
}

/* 2⃣ Sections de formulaire - BORDURE DISCRÈTE */
.form-section {
    margin-bottom: 28px;
    padding: 20px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 12px;
    position: relative;
}

.form-section::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

/* Contenu au-dessus de la bordure */
.form-section > * {
    position: relative;
    z-index: 1;
}

/* 3⃣ Inputs et Selects - BORDURE DISCRÈTE */
.form-input,
.form-select {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: 12px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    color: var(--text-primary);
    transition: all 0.3s ease;
    font-family: inherit;
    position: relative;
}

.form-input::before,
.form-select::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
    opacity: 0.5;
}

body.dark-mode .form-input,
body.dark-mode .form-select {
    background: rgba(15, 23, 42, 0.6);
}

.form-input:focus,
.form-select:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
}

.form-input:focus::before,
.form-select:focus::before {
    opacity: 0.8;
}

/* 4⃣ Tags Input Wrapper - BORDURE DISCRÈTE */
.tags-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    min-height: 52px;
    transition: all 0.3s ease;
    position: relative;
}

.tags-input-wrapper::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
    opacity: 0.5;
}

body.dark-mode .tags-input-wrapper {
    background: rgba(15, 23, 42, 0.6);
}

.tags-input-wrapper:focus-within {
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
}

.tags-input-wrapper:focus-within::before {
    opacity: 0.8;
}

/* Contenu au-dessus */
.tags-input-wrapper > * {
    position: relative;
    z-index: 1;
}

/* 5⃣ Upload Zone - BORDURE DISCRÈTE */
.upload-zone {
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    position: relative;
}

.upload-zone::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
}

body.dark-mode .upload-zone {
    background: rgba(15, 23, 42, 0.6);
}

.upload-zone:hover::before {
    opacity: 0.8;
}

.upload-zone.drag-over {
    background: rgba(102, 126, 234, 0.05);
}

.upload-zone.drag-over::before {
    opacity: 1;
}

/* Contenu au-dessus */
.upload-zone > * {
    position: relative;
    z-index: 1;
}

/* 6⃣ Image Preview - BORDURE DISCRÈTE */
.image-preview {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    border: 2px solid transparent;
}

.image-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 0;
}

/* 7⃣ Markdown Editor (SimpleMDE) - BORDURE DISCRÈTE */
.CodeMirror {
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    background: var(--glass-bg) !important;
    position: relative;
}

.CodeMirror::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
    opacity: 0.5;
}

body.dark-mode .CodeMirror {
    background: rgba(15, 23, 42, 0.6) !important;
}

.CodeMirror-focused {
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
}

.CodeMirror-focused::before {
    opacity: 0.8;
}

/* SimpleMDE Toolbar */
.editor-toolbar {
    border: none !important;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2) !important;
    border-radius: 12px 12px 0 0 !important;
    background: rgba(102, 126, 234, 0.03) !important;
}

body.dark-mode .editor-toolbar {
    background: rgba(30, 41, 59, 0.3) !important;
    border-bottom-color: rgba(102, 126, 234, 0.3) !important;
}

/* ════════════════════════════════════════════════════════════════
   📱 RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .editor-card {
        padding: 24px 20px;
    }
    
    .form-section {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .editor-card {
        padding: 20px 16px;
    }
    
    .form-section {
        padding: 14px;
    }
}

/* ════════════════════════════════════════════════════════════
   COMMUNITY FILTERS DROPDOWN - STYLES COMPLETS
   ════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   HEADER DU DROPDOWN (Toujours visible)
   ────────────────────────────────────────────────────────── */

.community-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid var(--glass-border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 0;
    box-shadow: 0 8px 24px var(--glass-shadow);
}

.community-filters-header:hover {
    border-color: var(--ml-primary);
    box-shadow: 0 12px 36px var(--glass-shadow);
    transform: translateY(-2px);
}

.community-filters-header .section-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--ml-primary), var(--ml-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ──────────────────────────────────────────────────────────
   BOUTON TOGGLE (Flèche VIOLETTE) - ✅ CORRECTION FINALE
   ────────────────────────────────────────────────────────── */

.community-filters-toggle-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 2px solid var(--glass-border);
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.2);
    flex-shrink: 0;
}

/* ✅ FORCE la couleur violette (pas de background-clip) */
.community-filters-toggle-btn i,
.community-filters-toggle-btn i.fas {
    color: #667eea !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    transition: transform 0.3s ease, color 0.3s ease;
    font-size: 1.4rem;
    font-weight: 900;
}

.community-filters-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
    border-color: var(--ml-primary);
    background: white !important;
}

.community-filters-toggle-btn:hover i {
    color: #764ba2 !important;
}

.community-filters-toggle-btn:active {
    transform: scale(1.05);
}

/* Rotation de l'icône quand le dropdown est ouvert */
.community-filters-header:not(.collapsed) .community-filters-toggle-btn i {
    transform: rotate(180deg);
}

/* ──────────────────────────────────────────────────────────
   CONTAINER COLLAPSIBLE (Contenu du dropdown)
   ────────────────────────────────────────────────────────── */

.community-filters-content {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                margin-top 0.3s ease;
    opacity: 1;
    margin-top: 24px;
}

.community-filters-content.collapsed {
    max-height: 0 !important;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

/* ──────────────────────────────────────────────────────────
   WRAPPER POUR LES CHANNELS
   ────────────────────────────────────────────────────────── */

.channels-section-wrapper {
    position: relative;
    padding-bottom: 30px;
    margin-bottom: 0;
}

.subsection-title {
    font-size: 1.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--ml-primary), var(--ml-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.subsection-title i {
    background: linear-gradient(135deg, var(--ml-primary), var(--ml-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ──────────────────────────────────────────────────────────
   ANIMATIONS D'ENTRÉE (Fade In Up)
   ────────────────────────────────────────────────────────── */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.community-filters-content > * {
    animation: fadeInUp 0.4s ease-out backwards;
}

.community-filters-content > .community-header-stats {
    animation-delay: 0.05s;
}

.community-filters-content > .channels-section-wrapper {
    animation-delay: 0.1s;
}

/* ──────────────────────────────────────────────────────────
   BORDURES DÉGRADÉES ENTRE SOUS-SECTIONS
   ────────────────────────────────────────────────────────── */

/* Bordure sous les stats */
.community-filters-content > .community-header-stats {
    position: relative;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.community-filters-content > .community-header-stats::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(102, 126, 234, 0.15) 10%,
        rgba(118, 75, 162, 0.25) 50%,
        rgba(102, 126, 234, 0.15) 90%,
        transparent 100%
    );
    border-radius: 2px;
}

/* Effet hover sur la bordure */
.community-filters-content > .community-header-stats:hover::after {
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(102, 126, 234, 0.3) 10%,
        rgba(118, 75, 162, 0.45) 50%,
        rgba(102, 126, 234, 0.3) 90%,
        transparent 100%
    );
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

/* ──────────────────────────────────────────────────────────
   DARK MODE - Bouton Toggle
   ────────────────────────────────────────────────────────── */

body.dark-mode .community-filters-toggle-btn {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.3);
}

body.dark-mode .community-filters-toggle-btn i {
    background: linear-gradient(135deg, #a78bfa, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark-mode .community-filters-toggle-btn:hover {
    background: rgba(51, 65, 85, 0.95) !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
    border-color: #a78bfa;
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE DESIGN
   ────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .community-filters-header {
        padding: 18px 20px;
    }
    
    .community-filters-header .section-title {
        font-size: 1.2rem;
    }
    
    .community-filters-toggle-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .community-filters-content > .community-header-stats {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    
    .community-filters-content > .community-header-stats::after {
        height: 1px;
        background: linear-gradient(
            90deg, 
            transparent 0%, 
            rgba(102, 126, 234, 0.1) 20%,
            rgba(118, 75, 162, 0.15) 50%,
            rgba(102, 126, 234, 0.1) 80%,
            transparent 100%
        );
    }
    
    .subsection-title {
        font-size: 1rem;
    }
}

/* ──────────────────────────────────────────────────────────
   OPTIMISATIONS PERFORMANCES
   ────────────────────────────────────────────────────────── */

/* GPU Acceleration */
.community-filters-toggle-btn,
.community-filters-content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Préférence utilisateur : Réduire les animations */
@media (prefers-reduced-motion: reduce) {
    .community-filters-content,
    .community-filters-toggle-btn i {
        transition-duration: 0.01ms !important;
    }
    
    .community-filters-content > * {
        animation: none !important;
    }
}

/* ──────────────────────────────────────────────────────────
   HOVER EFFECTS (Desktop uniquement)
   ────────────────────────────────────────────────────────── */

@media (hover: hover) and (pointer: fine) {
    .community-filters-header:hover {
        box-shadow: 
            0 12px 36px var(--glass-shadow),
            0 0 0 1px rgba(102, 126, 234, 0.2);
    }
}

/* ──────────────────────────────────────────────────────────
   ÉTATS SPÉCIAUX
   ────────────────────────────────────────────────────────── */

/* État focus pour accessibilité */
.community-filters-toggle-btn:focus-visible {
    outline: 3px solid rgba(102, 126, 234, 0.5);
    outline-offset: 2px;
}

/* État désactivé (si nécessaire) */
.community-filters-toggle-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ══════════════════════════════════════════════════════════
   FIN DU DROPDOWN COMMUNITY FILTERS
   ══════════════════════════════════════════════════════════ */

   /* ============================================
   ALPHAVAULT AI - COMMUNITY CSS
   Styles complets pour la communauté
   Version: 2.0
   ============================================ */

/* ===== VARIABLES ===== */
:root {
    --glass-background: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(203, 213, 225, 0.3);
    --card-background: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --primary-gradient: linear-gradient(135deg, #3B82F6, #2563EB);
    --success-gradient: linear-gradient(135deg, #10B981, #059669);
    --danger-gradient: linear-gradient(135deg, #EF4444, #DC2626);
}

body.dark-mode {
    --glass-background: rgba(30, 41, 59, 0.95);
    --glass-border: rgba(255, 255, 255, 0.1);
    --card-background: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
}

/* ============================================
   POST IMAGES - UNIFORMISATION
   ============================================ */

.post-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin: 32px 0;
}

.post-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 66.67%; /* Ratio 3:2 */
    overflow: hidden;
    border-radius: 16px;
    background: var(--glass-background);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.post-image-wrapper:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.post-image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.post-image-wrapper:hover::before {
    opacity: 1;
}

.post-image-wrapper::after {
    content: '\f00e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 2.5rem;
    color: white;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.post-image-wrapper:hover::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.post-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-image-wrapper:hover img {
    transform: scale(1.08);
}

/* Une seule image - full width */
.post-images-grid:has(.post-image-wrapper:only-child) {
    grid-template-columns: 1fr;
    max-width: 800px;
}

.post-images-grid:has(.post-image-wrapper:only-child) .post-image-wrapper {
    padding-top: 56.25%; /* Ratio 16:9 */
}

/* Deux images */
.post-images-grid:has(.post-image-wrapper:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}

/* Dark mode */
body.dark-mode .post-image-wrapper {
    background: rgba(30, 41, 59, 0.6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.dark-mode .post-image-wrapper:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* ============================================
   IMAGE LIGHTBOX
   ============================================ */

.image-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: zoom-out;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.image-lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    animation: zoomIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.image-lightbox-close {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 1.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10001;
}

.image-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ============================================
   IMAGE PREVIEW (Create/Edit)
   ============================================ */

.image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.image-preview-item {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Ratio 1:1 */
    border-radius: 16px;
    overflow: hidden;
    background: var(--glass-background);
    border: 2px solid var(--glass-border);
    transition: all 0.3s ease;
}

.image-preview-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.image-preview-item.new-image {
    border-color: #10B981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

.image-preview-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.image-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    opacity: 0;
}

.image-preview-item:hover .image-remove-btn {
    opacity: 1;
}

.image-remove-btn:hover {
    background: rgba(220, 38, 38, 1);
    transform: scale(1.15) rotate(90deg);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.5);
}

.image-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--success-gradient);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================
   POST AUTHOR ACTIONS (Edit/Delete)
   ============================================ */

.post-author-actions {
    display: flex;
    gap: 8px;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 2px solid var(--glass-border);
    background: var(--glass-background);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.edit-btn:hover {
    background: var(--primary-gradient);
    border-color: #3B82F6;
    color: white;
}

.delete-btn:hover {
    background: var(--danger-gradient);
    border-color: #EF4444;
    color: white;
}

/* ============================================
   UPLOAD ZONE
   ============================================ */

.upload-zone {
    border: 3px dashed var(--glass-border);
    border-radius: 16px;
    padding: 48px 24px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background: var(--glass-background);
}

.upload-zone:hover {
    border-color: #3B82F6;
    background: rgba(59, 130, 246, 0.05);
}

.upload-zone.dragover {
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.1);
    transform: scale(1.02);
}

.upload-icon {
    font-size: 3rem;
    color: #3B82F6;
    margin-bottom: 16px;
}

.upload-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.upload-hint {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-publish, .btn-cancel {
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
}

.btn-publish {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.btn-publish:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

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

.btn-publish.loading .spinner {
    display: inline-block !important;
    animation: spin 1s linear infinite;
}

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

.btn-cancel {
    background: transparent;
    color: var(--text-secondary);
    border: 2px solid var(--glass-border);
}

.btn-cancel:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #EF4444;
    color: #EF4444;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.form-section {
    margin-bottom: 32px;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    font-size: 1rem;
}

.form-required {
    color: #EF4444;
}

.form-input, .form-select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 2px solid var(--glass-border);
    background: var(--glass-background);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input:focus, .form-select:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.char-counter {
    text-align: right;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 8px;
    font-weight: 600;
}

.char-counter.warning {
    color: #F59E0B;
}

.char-counter.error {
    color: #EF4444;
}

/* ============================================
   TAGS INPUT
   ============================================ */

.tags-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 2px solid var(--glass-border);
    background: var(--glass-background);
    min-height: 56px;
    transition: all 0.3s ease;
}

.tags-input-wrapper:focus-within {
    border-color: #3B82F6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-gradient);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.tag-remove {
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.tag-remove:hover {
    opacity: 1;
}

.tag-input {
    flex: 1;
    min-width: 200px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .post-images-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .post-image-wrapper {
        padding-top: 75%;
    }

    .image-lightbox-close {
        top: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
    }

    .image-preview-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 12px;
    }

    .upload-zone {
        padding: 32px 16px;
    }

    .btn-publish, .btn-cancel {
        width: 100%;
        justify-content: center;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ════════════════════════════════════════════════════════════════
   🎨 CORRECTIONS FINALES COMPLÈTES - POST DETAIL & COMMUNITY HUB
   Version avec correction des classes JavaScript
   ════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1⃣ CHANNEL BADGES - DESIGN UNIFIÉ (Posts + Community Hub)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Channel dans les cards de posts */
.post-channel,
.post-detail-channel {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
}

.post-channel i,
.post-detail-channel i {
    font-size: 1rem !important;
    color: white !important;
    background: none !important;
    -webkit-text-fill-color: white !important;
}

.post-channel:hover,
.post-detail-channel:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.6);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2⃣ CHANNELS NAVIGATION - DESIGN COMPLET (Community Hub)
   ✅ CORRECTION : Cibler .channel-card au lieu de .channel-chip
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Container des channels */
.channels-scroll {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 12px 4px 20px 4px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(102, 126, 234, 0.4) transparent !important;
    flex-wrap: nowrap !important;
}

.channels-scroll::-webkit-scrollbar {
    height: 8px !important;
}

.channels-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 10px !important;
}

.channels-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border-radius: 10px !important;
}

.channels-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2, #667eea) !important;
}

/* ✅ CHANNEL CARDS - Style gradient violet complet */
.channel-card,
.channel-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 24px !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 2px solid transparent !important;
    border-radius: 14px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    position: relative !important;
    
    /* Bordure dégradée violette */
    background-image: 
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        linear-gradient(135deg, #667eea, #764ba2) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

/* Icône du channel */
.channel-card .channel-icon,
.channel-chip .channel-icon {
    font-size: 1.5rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    filter: grayscale(0.2) !important;
    transition: all 0.3s ease !important;
}

/* Info du channel (nom + count) */
.channel-card .channel-info,
.channel-chip .channel-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
}

.channel-card .channel-name,
.channel-chip .channel-name {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    line-height: 1.2 !important;
}

.channel-card .channel-count,
.channel-chip .channel-count {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    opacity: 0.8 !important;
}

/* État hover */
.channel-card:hover,
.channel-chip:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.35) !important;
}

.channel-card:hover .channel-icon,
.channel-chip:hover .channel-icon {
    filter: grayscale(0) !important;
    transform: scale(1.15) rotate(-5deg) !important;
}

/* État actif du channel */
.channel-card.active,
.channel-chip.active {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5) !important;
}

.channel-card.active .channel-name,
.channel-card.active .channel-count,
.channel-chip.active .channel-name,
.channel-chip.active .channel-count {
    color: white !important;
}

.channel-card.active .channel-icon,
.channel-chip.active .channel-icon {
    filter: brightness(1.2) !important;
}

/* Dark mode pour channels */
body.dark-mode .channel-card,
body.dark-mode .channel-chip {
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)),
        linear-gradient(135deg, #667eea, #764ba2) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

body.dark-mode .channel-card:hover,
body.dark-mode .channel-chip:hover {
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)),
        linear-gradient(135deg, #667eea, #764ba2) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3⃣ BOUTONS LIKE / SHARE / SAVE - DISPOSITION HORIZONTALE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Container des actions principales - TOUJOURS EN LIGNE */
.post-detail-actions,
.post-actions-bar {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    padding: 24px 0 !important;
    border-top: 2px solid var(--glass-border) !important;
    margin-top: 32px !important;
}

/* Boutons Like, Share, Save - Style unifié */
.action-btn,
.like-btn,
.share-btn,
.save-btn,
#likeBtn,
#shareBtn,
#saveBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    flex: 1 !important;
    min-width: 0 !important;
    
    background-image: 
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        linear-gradient(135deg, #667eea, #764ba2) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

.action-btn i,
.like-btn i,
.share-btn i,
.save-btn i,
#likeBtn i,
#shareBtn i,
#saveBtn i {
    font-size: 1.1rem !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
}

.action-btn:hover,
.like-btn:hover,
.share-btn:hover,
.save-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3) !important;
}

.action-btn:hover i,
.like-btn:hover i,
.share-btn:hover i,
.save-btn:hover i {
    transform: scale(1.2) !important;
}

/* Like Button - Gradient vert */
.like-btn,
#likeBtn {
    background-image: 
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        linear-gradient(135deg, #10b981, #059669) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

.like-btn i,
#likeBtn i {
    color: #10b981 !important;
}

.like-btn:hover,
#likeBtn:hover {
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4) !important;
}

.like-btn.liked,
#likeBtn.liked,
.action-btn.liked {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.5) !important;
}

.like-btn.liked i,
#likeBtn.liked i,
.action-btn.liked i {
    color: white !important;
}

/* Share Button - Gradient bleu */
.share-btn,
#shareBtn {
    background-image: 
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        linear-gradient(135deg, #3b82f6, #2563eb) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

.share-btn i,
#shareBtn i {
    color: #3b82f6 !important;
}

.share-btn:hover,
#shareBtn:hover {
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4) !important;
}

/* Save Button - Gradient noir/gris */
.save-btn,
#saveBtn {
    background-image: 
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        linear-gradient(135deg, #1e293b, #334155) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

.save-btn i,
#saveBtn i {
    color: #1e293b !important;
}

.save-btn:hover,
#saveBtn:hover {
    box-shadow: 0 8px 24px rgba(30, 41, 59, 0.4) !important;
}

.save-btn.saved,
#saveBtn.saved,
.action-btn.saved {
    background: linear-gradient(135deg, #1e293b, #334155) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(30, 41, 59, 0.5) !important;
}

.save-btn.saved i,
#saveBtn.saved i,
.action-btn.saved i {
    color: white !important;
}

/* Dark mode pour actions */
body.dark-mode .like-btn,
body.dark-mode #likeBtn {
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)),
        linear-gradient(135deg, #10b981, #059669) !important;
}

body.dark-mode .share-btn,
body.dark-mode #shareBtn {
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)),
        linear-gradient(135deg, #3b82f6, #2563eb) !important;
}

body.dark-mode .save-btn,
body.dark-mode #saveBtn {
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)),
        linear-gradient(135deg, #475569, #64748b) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4⃣ BOUTON DELETE DANS LA SECTION COMMENTAIRES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.comment-delete-btn,
.delete-comment-btn,
.comment-action-btn.delete,
button[onclick*="deleteComment"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #ef4444 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    background-image: 
        linear-gradient(var(--glass-bg), var(--glass-bg)),
        linear-gradient(135deg, #ef4444, #dc2626) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

.comment-delete-btn i,
.delete-comment-btn i,
.comment-action-btn.delete i {
    font-size: 0.9rem !important;
    color: #ef4444 !important;
}

.comment-delete-btn:hover,
.delete-comment-btn:hover,
.comment-action-btn.delete:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.5) !important;
}

.comment-delete-btn:hover i,
.delete-comment-btn:hover i,
.comment-action-btn.delete:hover i {
    color: white !important;
}

body.dark-mode .comment-delete-btn,
body.dark-mode .delete-comment-btn,
body.dark-mode .comment-action-btn.delete {
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)),
        linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5⃣ POST HEADER ACTIONS (Edit, Delete)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.post-header-actions,
.post-action-buttons {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.post-action-btn,
.edit-post-btn,
.delete-post-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    border: 2px solid var(--glass-border) !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
}

.post-action-btn:hover {
    transform: translateY(-2px) scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25) !important;
}

.edit-post-btn:hover,
.post-action-btn.edit:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    border-color: transparent !important;
    color: white !important;
}

.delete-post-btn:hover,
.post-action-btn.delete:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: transparent !important;
    color: white !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6⃣ RESPONSIVE DESIGN - OPTIMISATION MOBILE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
    .channel-card,
    .channel-chip {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
        gap: 10px !important;
    }
    
    .channel-card .channel-icon,
    .channel-chip .channel-icon {
        font-size: 1.3rem !important;
    }
    
    .channel-card .channel-name,
    .channel-chip .channel-name {
        font-size: 0.9rem !important;
    }
    
    .channel-card .channel-count,
    .channel-chip .channel-count {
        font-size: 0.75rem !important;
    }
    
    .post-detail-actions,
    .post-actions-bar {
        gap: 8px !important;
        padding: 20px 12px !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
    }
    
    .action-btn,
    .like-btn,
    .share-btn,
    .save-btn,
    #likeBtn,
    #shareBtn,
    #saveBtn {
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
        gap: 6px !important;
        min-width: 0 !important;
    }
    
    .action-btn i,
    .like-btn i,
    .share-btn i,
    .save-btn i {
        font-size: 1rem !important;
    }
    
    .comment-delete-btn,
    .delete-comment-btn {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .channel-card,
    .channel-chip {
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
        gap: 8px !important;
    }
    
    .channel-card .channel-icon,
    .channel-chip .channel-icon {
        font-size: 1.2rem !important;
    }
    
    .channel-card .channel-name,
    .channel-chip .channel-name {
        font-size: 0.85rem !important;
    }
    
    .channel-card .channel-count,
    .channel-chip .channel-count {
        font-size: 0.7rem !important;
    }
    
    .post-channel,
    .post-detail-channel {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
        gap: 6px !important;
    }
    
    .post-channel i,
    .post-detail-channel i {
        font-size: 0.9rem !important;
    }
    
    .post-detail-actions,
    .post-actions-bar {
        gap: 6px !important;
        padding: 16px 8px !important;
    }
    
    .action-btn,
    .like-btn,
    .share-btn,
    .save-btn {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
        gap: 5px !important;
        border-radius: 10px !important;
    }
    
    .action-btn i,
    .like-btn i,
    .share-btn i,
    .save-btn i {
        font-size: 0.95rem !important;
    }
    
    .action-btn span:not(.count),
    .like-btn span:not(.count),
    .share-btn span:not(.count),
    .save-btn span:not(.count) {
        display: none !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7⃣ ANIMATIONS & MICRO-INTERACTIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@keyframes likeAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.3) rotate(-10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.like-btn.liked i,
#likeBtn.liked i {
    animation: likeAnimation 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes saveAnimation {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-6px); }
    75% { transform: translateY(2px); }
}

.save-btn.saved i,
#saveBtn.saved i {
    animation: saveAnimation 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(102, 126, 234, 0); }
}

.action-btn:active,
.like-btn:active,
.share-btn:active,
.save-btn:active {
    animation: pulseGlow 0.6s ease-out !important;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.channel-card,
.channel-chip {
    animation: slideInRight 0.4s ease-out backwards !important;
}

.channel-card:nth-child(1),
.channel-chip:nth-child(1) { animation-delay: 0.05s !important; }
.channel-card:nth-child(2),
.channel-chip:nth-child(2) { animation-delay: 0.1s !important; }
.channel-card:nth-child(3),
.channel-chip:nth-child(3) { animation-delay: 0.15s !important; }
.channel-card:nth-child(4),
.channel-chip:nth-child(4) { animation-delay: 0.2s !important; }
.channel-card:nth-child(5),
.channel-chip:nth-child(5) { animation-delay: 0.25s !important; }
.channel-card:nth-child(6),
.channel-chip:nth-child(6) { animation-delay: 0.3s !important; }
.channel-card:nth-child(7),
.channel-chip:nth-child(7) { animation-delay: 0.35s !important; }
.channel-card:nth-child(8),
.channel-chip:nth-child(8) { animation-delay: 0.4s !important; }
.channel-card:nth-child(9),
.channel-chip:nth-child(9) { animation-delay: 0.45s !important; }
.channel-card:nth-child(10),
.channel-chip:nth-child(10) { animation-delay: 0.5s !important; }
.channel-card:nth-child(11),
.channel-chip:nth-child(11) { animation-delay: 0.55s !important; }
.channel-card:nth-child(12),
.channel-chip:nth-child(12) { animation-delay: 0.6s !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8⃣ OPTIMISATIONS PERFORMANCES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.channel-card,
.channel-chip,
.action-btn,
.like-btn,
.share-btn,
.save-btn {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
}

@media (prefers-reduced-motion: reduce) {
    .channel-card,
    .channel-chip,
    .action-btn,
    .like-btn,
    .share-btn,
    .save-btn {
        transition-duration: 0.01ms !important;
        animation: none !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎯 FIN DES CORRECTIONS COMPLÈTES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

   /* ════════════════════════════════════════════════════════════════
   🔧 CORRECTION - BOUTON SAVE CHANGES SANS ROTATION
   ════════════════════════════════════════════════════════════════ */

/* Désactiver l'animation de rotation du spinner */
.btn-publish .spinner,
.btn-publish.loading .spinner,
.btn-save-changes .spinner,
.btn-save-changes.loading .spinner,
button[type="submit"] .spinner,
button[type="submit"].loading .spinner {
    animation: none !important;
    display: inline-block !important;
}

/* Désactiver fa-spin sur tous les boutons de soumission */
.btn-publish .fa-spin,
.btn-save-changes .fa-spin,
button[type="submit"] .fa-spin,
.loading .fa-spin {
    animation: none !important;
}

/* Alternative : Animation pulse subtile au lieu de spin */
@keyframes buttonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.btn-publish.loading,
.btn-save-changes.loading,
button[type="submit"].loading {
    opacity: 0.8 !important;
    cursor: wait !important;
    position: relative !important;
}

/* Animation pulse pour l'icône (au lieu de spin) */
.btn-publish.loading i,
.btn-save-changes.loading i,
button[type="submit"].loading i {
    animation: buttonPulse 1.5s ease-in-out infinite !important;
}

/* Option : Garder l'icône complètement statique */
.btn-publish.loading i.static,
.btn-save-changes.loading i.static,
button[type="submit"].loading i.static {
    animation: none !important;
}

/* Désactiver toutes les animations de rotation globalement */
@keyframes spin {
    to { transform: rotate(0deg) !important; }
}

/* Force l'arrêt de fa-spin sur les boutons */
.btn-publish i.fa-spinner,
.btn-save-changes i.fa-spinner,
button[type="submit"] i.fa-spinner {
    animation: none !important;
    transform: none !important;
}

/* État loading avec texte changé (optionnel) */
.btn-publish.loading::before,
.btn-save-changes.loading::before {
    content: attr(data-loading-text) !important;
}

/* Masquer le texte original pendant le loading */
.btn-publish.loading span:not(.spinner),
.btn-save-changes.loading span:not(.spinner) {
    opacity: 0.7 !important;
}

/* ════════════════════════════════════════════════════════════════
   🎨 STYLE ALTERNATIF - Barre de progression au lieu de spinner
   ════════════════════════════════════════════════════════════════ */

/* Container du bouton avec barre de progression */
.btn-publish.loading::after,
.btn-save-changes.loading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 0 0 12px 12px;
    animation: progressBar 2s ease-in-out forwards;
}

@keyframes progressBar {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/* Désactiver la barre de progression si non souhaitée */
.btn-publish.loading.no-progress::after,
.btn-save-changes.loading.no-progress::after {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   🔗 MODAL DE PARTAGE SOCIAL - DESIGN PREMIUM AVEC FORÇAGE iOS
   ════════════════════════════════════════════════════════════════ */

/* Modal container - FORÇAGE BRUTAL */
.share-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 10000 !important;
    display: none !important; /* Caché par défaut */
    align-items: center !important;
    justify-content: center !important;
    padding: 20px;
    margin: 0 !important;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.share-modal.active {
    display: flex !important; /* Visible quand actif */
    opacity: 1;
    pointer-events: all;
}

/* Overlay sombre - FORÇAGE BRUTAL */
.share-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    animation: fadeIn 0.3s ease-out;
    z-index: 1;
    cursor: pointer;
}

/* Modal content */
.share-modal-content {
    position: relative !important;
    z-index: 2;
    width: 95%;
    max-width: 850px;
    max-height: 85vh;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    margin: 0 auto !important;
    
    /* Fond blanc cassé OPAQUE avec glassmorphism */
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    
    border-radius: 24px;
    box-shadow: 
        0 24px 80px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset,
        0 8px 32px rgba(102, 126, 234, 0.2);
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Bordure dégradée violette */
    border: 2px solid transparent;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.98)),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    
    /* FIX iOS scroll */
    -webkit-overflow-scrolling: touch;
    overflow: visible;
}

/* Dark mode */
body.dark-mode .share-modal-content {
    background: rgba(30, 41, 59, 0.98) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    
    background-image: 
        linear-gradient(rgba(30, 41, 59, 0.98), rgba(30, 41, 59, 0.98)),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    
    box-shadow: 
        0 24px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 8px 32px rgba(102, 126, 234, 0.3);
}

/* Header */
.share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px;
    border-bottom: 2px solid rgba(203, 213, 225, 0.3);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px 24px 0 0;
    flex-shrink: 0;
}

body.dark-mode .share-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.6);
}

.share-modal-header h3 {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.share-modal-header h3 i {
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.share-modal-close {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 2px solid rgba(203, 213, 225, 0.3);
    background: rgba(255, 255, 255, 0.8);
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

body.dark-mode .share-modal-close {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

.share-modal-close:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: transparent;
    color: white;
    transform: scale(1.1) rotate(90deg);
}

/* Body */
.share-modal-body {
    padding: 32px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow-y: auto;
    flex: 1;
}

body.dark-mode .share-modal-body {
    background: rgba(15, 23, 42, 0.4);
}

/* Platforms grid */
.share-platforms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.share-platform-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(203, 213, 225, 0.3);
    border-radius: 16px;
    text-decoration: none;
    color: #1e293b;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

body.dark-mode .share-platform-btn {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.share-platform-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.2));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.share-platform-btn:hover::before {
    opacity: 1;
}

.share-platform-btn:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.platform-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.share-platform-btn:hover .platform-icon {
    transform: scale(1.2) rotate(-5deg);
}

/* Platform colors */
.share-platform-btn.whatsapp:hover {
    border-color: #25D366;
}
.share-platform-btn.whatsapp .platform-icon {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.share-platform-btn.instagram:hover {
    border-color: #E4405F;
}
.share-platform-btn.instagram .platform-icon {
    background: linear-gradient(135deg, #833AB4, #E4405F, #FD1D1D);
}

.share-platform-btn.twitter:hover {
    border-color: #000000;
}
.share-platform-btn.twitter .platform-icon {
    background: linear-gradient(135deg, #000000, #333333);
}

.share-platform-btn.linkedin:hover {
    border-color: #0A66C2;
}
.share-platform-btn.linkedin .platform-icon {
    background: linear-gradient(135deg, #0A66C2, #004182);
}

.share-platform-btn.facebook:hover {
    border-color: #1877F2;
}
.share-platform-btn.facebook .platform-icon {
    background: linear-gradient(135deg, #1877F2, #0C63D4);
}

.share-platform-btn.telegram:hover {
    border-color: #0088CC;
}
.share-platform-btn.telegram .platform-icon {
    background: linear-gradient(135deg, #0088CC, #006699);
}

.share-platform-btn.email:hover {
    border-color: #667eea;
}
.share-platform-btn.email .platform-icon {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Share link section */
.share-link-section {
    padding-top: 24px;
    border-top: 2px solid rgba(203, 213, 225, 0.3);
}

body.dark-mode .share-link-section {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.share-link-wrapper {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.share-link-input {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid rgba(203, 213, 225, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    transition: all 0.3s ease;
}

body.dark-mode .share-link-input {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.share-link-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

.share-copy-btn {
    padding: 14px 28px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.share-copy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
}

.share-copy-btn:active {
    transform: translateY(0);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ════════════════════════════════════════════════════════════════
   📱 RESPONSIVE MOBILE - FORÇAGE BRUTAL iOS
   ════════════════════════════════════════════════════════════════ */

/* Tablette (768px et moins) */
@media (max-width: 768px) {
    /* ✅ FORÇAGE BRUTAL CONTAINER */
    .share-modal {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        display: none !important;
        padding: 15px !important;
        margin: 0 !important;
    }

    .share-modal.active {
        display: grid !important;
        place-items: center !important;
    }

    /* ✅ FORÇAGE BRUTAL OVERLAY */
    .share-modal-overlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    /* ✅ FORÇAGE BRUTAL CONTENT */
    .share-modal-content {
        position: static !important;
        width: 95% !important;
        max-width: none !important;
        max-height: 88vh !important;
        max-height: 88dvh !important;
        margin: 0 !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    .share-modal-header {
        padding: 22px 24px;
    }

    .share-modal-header h3 {
        font-size: 1.3rem;
        gap: 10px;
    }

    .share-modal-close {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        min-width: 44px;
        min-height: 44px;
    }

    .share-modal-body {
        padding: 24px 20px;
    }

    .share-platforms {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .share-platform-btn {
        padding: 18px 12px;
        font-size: 0.85rem;
        gap: 10px;
        min-height: 48px;
    }

    .platform-icon {
        width: 50px;
        height: 50px;
        font-size: 1.6rem;
    }

    .share-link-input {
        font-size: 16px !important;
        padding: 12px 16px;
    }

    .share-copy-btn {
        padding: 12px 24px;
        font-size: 0.9rem;
        min-height: 48px;
    }
}

/* Mobile (600px et moins) */
@media (max-width: 600px) {
    .share-modal {
        padding: 10px !important;
    }

    .share-modal.active {
        display: grid !important;
        place-items: center !important;
    }

    .share-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px;
        max-height: 90vh !important;
        max-height: 90dvh !important;
    }

    .share-modal-header {
        padding: 18px 20px;
        position: sticky;
        top: 0;
        z-index: 10;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    body.dark-mode .share-modal-header {
        background: rgba(30, 41, 59, 0.95);
    }

    .share-modal-header h3 {
        font-size: 1.15rem;
        gap: 8px;
    }

    .share-modal-header h3 i {
        font-size: 1rem;
    }

    .share-modal-close {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .share-modal-body {
        padding: 20px 16px;
    }

    .share-platforms {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 24px;
    }

    .share-platform-btn {
        padding: 16px 10px;
        font-size: 0.8rem;
        gap: 8px;
        border-radius: 14px;
    }

    .platform-icon {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
        border-radius: 12px;
    }

    .share-link-section {
        padding-top: 20px;
    }

    .share-link-wrapper {
        flex-direction: column;
        gap: 10px;
    }

    .share-link-input {
        width: 100%;
        font-size: 16px !important;
        padding: 12px 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .share-copy-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 0.9rem;
    }
}

/* Très petit mobile (420px et moins) */
@media (max-width: 420px) {
    .share-modal {
        padding: 8px !important;
    }

    .share-modal-content {
        border-radius: 18px;
        max-height: 92vh !important;
        max-height: 92dvh !important;
    }

    .share-modal-header {
        padding: 16px 18px;
    }

    .share-modal-header h3 {
        font-size: 1.05rem;
        gap: 6px;
    }

    .share-modal-body {
        padding: 18px 14px;
    }

    .share-platforms {
        gap: 10px;
    }

    .share-platform-btn {
        padding: 14px 8px;
        font-size: 0.75rem;
        gap: 6px;
    }

    .platform-icon {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }

    .share-copy-btn {
        padding: 12px 18px;
        font-size: 0.85rem;
    }
}

/* iPhone SE / petits écrans (375px et moins) */
@media (max-width: 375px) {
    .share-modal-header h3 {
        font-size: 1rem;
    }

    .share-platforms {
        gap: 8px;
    }

    .share-platform-btn {
        padding: 12px 6px;
        font-size: 0.7rem;
    }

    .platform-icon {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }
}

/* Landscape mobile (orientation paysage) */
@media (max-width: 768px) and (orientation: landscape) {
    .share-modal {
        padding: 8px !important;
    }

    .share-modal-content {
        max-height: 88vh !important;
        max-height: 88dvh !important;
    }

    .share-modal-header {
        padding: 14px 20px;
    }

    .share-modal-body {
        padding: 18px;
    }

    .share-platforms {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .share-platform-btn {
        padding: 12px 8px;
        font-size: 0.75rem;
    }

    .platform-icon {
        width: 38px;
        height: 38px;
        font-size: 1.2rem;
    }
}

/* Safe area pour iPhone X et plus (notch) */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .share-modal {
            padding-left: max(10px, env(safe-area-inset-left)) !important;
            padding-right: max(10px, env(safe-area-inset-right)) !important;
            padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
        }
    }
}

/* Amélioration du touch sur mobile (désactiver hover) */
@media (hover: none) and (pointer: coarse) {
    .share-platform-btn:hover {
        transform: none;
        box-shadow: none;
    }

    .share-platform-btn:active {
        transform: scale(0.98);
    }

    .platform-icon {
        transition: none;
    }

    .share-platform-btn:active .platform-icon {
        transform: scale(0.95);
    }

    .share-modal-close:hover {
        transform: none;
    }

    .share-modal-close:active {
        transform: scale(0.95);
    }
}

/* ✅ FIX iOS Safari - Classe sur body pour bloquer scroll */
body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* ════════════════════════════════════════════════════════════════
   ✅ FIN DU CSS MODAL DE PARTAGE
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   NEWSLETTER BUTTON - COMMUNITY HUB (FULL WIDTH)
   ════════════════════════════════════════════════════════════════ */

#adminNewsletterSection {
    margin-bottom: 24px;
}

.newsletter-btn-container {
    max-width: 100%;
}

.newsletter-generate-btn-full {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.newsletter-generate-btn-full::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.newsletter-generate-btn-full:hover::before {
    left: 100%;
}

.newsletter-generate-btn-full:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.newsletter-generate-btn-full:active {
    transform: translateY(0);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.newsletter-generate-btn-full .btn-icon-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.newsletter-generate-btn-full .btn-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: white;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.newsletter-generate-btn-full .btn-content {
    text-align: left;
}

.newsletter-generate-btn-full .btn-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
    margin-bottom: 4px;
    line-height: 1.2;
    letter-spacing: 0.3px;
}

.newsletter-generate-btn-full .btn-subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.newsletter-generate-btn-full .btn-action {
    display: flex;
    align-items: center;
    gap: 16px;
}

.newsletter-generate-btn-full .btn-badge {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    backdrop-filter: blur(10px);
}

.newsletter-generate-btn-full .btn-arrow {
    font-size: 1.4rem;
    color: white;
    opacity: 0.9;
    transition: transform 0.3s ease;
}

.newsletter-generate-btn-full:hover .btn-arrow {
    transform: translateX(6px);
    opacity: 1;
}

/* Dark Mode */
body.dark-mode .newsletter-generate-btn-full {
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

body.dark-mode .newsletter-generate-btn-full:hover {
    box-shadow: 0 8px 28px rgba(102, 126, 234, 0.5);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .newsletter-generate-btn-full {
        padding: 16px 20px;
    }
    
    .newsletter-generate-btn-full .btn-icon {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }
    
    .newsletter-generate-btn-full .btn-icon-wrapper {
        gap: 14px;
    }
    
    .newsletter-generate-btn-full .btn-title {
        font-size: 1rem;
    }
    
    .newsletter-generate-btn-full .btn-subtitle {
        font-size: 0.8rem;
    }
    
    .newsletter-generate-btn-full .btn-badge {
        display: none; /* Masquer le badge sur mobile */
    }
}

@media (max-width: 480px) {
    .newsletter-generate-btn-full {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .newsletter-generate-btn-full .btn-icon-wrapper {
        width: 100%;
        justify-content: center;
    }
    
    .newsletter-generate-btn-full .btn-content {
        text-align: center;
    }
    
    .newsletter-generate-btn-full .btn-action {
        justify-content: center;
    }
}

/* ============================================
   PRIVATE CHAT MODAL - Premium Design
   ============================================ */

/* Modal Overlay */
.chat-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

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

/* Modal Content */
.chat-modal-content {
    background: var(--background-primary, #ffffff);
    border-radius: 24px;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: modalSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .chat-modal-content {
    background: var(--background-secondary, #1e293b);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Chat Header */
.chat-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 24px 24px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.chat-header button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.chat-header button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Messages Container */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--background-tertiary, #f8fafc);
    scroll-behavior: smooth;
}

body.dark-mode .chat-messages {
    background: var(--background-tertiary, #0f172a);
}

/* Scrollbar Premium */
.chat-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.3);
    border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.5);
}

/* Message Bubble */
.chat-message {
    display: flex;
    margin-bottom: 0.5rem;
}

.chat-message.own {
    justify-content: flex-end;
}

.chat-message.other {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 70%;
    padding: 0.875rem 1.125rem;
    border-radius: 18px;
    position: relative;
    word-wrap: break-word;
    animation: messageSlideIn 0.3s ease;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.own-bubble {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.other-bubble {
    background: var(--background-primary, #ffffff);
    color: var(--text-primary, #1e293b);
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color, #e2e8f0);
}

body.dark-mode .other-bubble {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #f8fafc);
    border-color: rgba(255, 255, 255, 0.1);
}

.message-text {
    margin: 0 0 0.375rem 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    word-break: break-word;
}

.message-time {
    font-size: 0.75rem;
    opacity: 0.75;
    font-weight: 500;
}

/* Input Wrapper */
.chat-input-wrapper {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--background-primary, #ffffff);
    border-radius: 0 0 24px 24px;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-shrink: 0;
}

body.dark-mode .chat-input-wrapper {
    border-top-color: rgba(255, 255, 255, 0.1);
    background: var(--background-secondary, #1e293b);
}

/* Input Field */
.chat-input {
    flex: 1;
    padding: 0.875rem 1.125rem;
    border: 2px solid transparent;
    border-radius: 16px;
    background: rgba(102, 126, 234, 0.05);
    color: var(--text-primary, #1e293b);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

body.dark-mode .chat-input {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #f8fafc);
}

.chat-input:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.chat-input::placeholder {
    color: var(--text-tertiary, #94a3b8);
}

/* Send Button */
.chat-send-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.chat-send-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.chat-send-btn:active {
    transform: scale(0.95);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .chat-modal-content {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        height: 100vh;
    }
    
    .chat-header {
        border-radius: 0;
    }
    
    .chat-input-wrapper {
        border-radius: 0;
    }
    
    .message-bubble {
        max-width: 85%;
    }
}

/* ════════════════════════════════════════════════════════════════
   💬 MODAL DE SÉLECTION D'UTILISATEUR (Share Post as Message)
   ════════════════════════════════════════════════════════════════ */

/* Style du bouton Private Message dans la modal de partage */
.share-platform-btn.private-message .platform-icon {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
}

.share-platform-btn.private-message:hover {
    border-color: #667eea !important;
}

/* Modal de sélection d'utilisateur */
.share-message-modal .share-modal-content {
    max-width: 650px;
}

/* Search wrapper */
.user-search-wrapper {
    position: relative;
    margin-bottom: 24px;
}

.user-search-wrapper .search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.1rem;
    pointer-events: none;
    z-index: 2;
}

.user-search-input {
    width: 100%;
    padding: 16px 18px 16px 52px !important;
    border: 2px solid transparent !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
        linear-gradient(135deg, #667eea, #764ba2) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

body.dark-mode .user-search-input {
    background-image: 
        linear-gradient(rgba(30, 41, 59, 0.9), rgba(30, 41, 59, 0.9)),
        linear-gradient(135deg, #667eea, #764ba2) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

.user-search-input::placeholder {
    color: #94a3b8 !important;
    font-weight: 600;
}

.user-search-input:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2) !important;
}

/* Users list wrapper */
.users-list-wrapper {
    max-height: 450px;
    overflow-y: auto;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.5);
    padding: 12px;
}

body.dark-mode .users-list-wrapper {
    background: rgba(15, 23, 42, 0.5);
}

.users-list-wrapper::-webkit-scrollbar {
    width: 8px;
}

.users-list-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.users-list-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
}

.users-select-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* User select item */
.user-select-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)),
        linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

body.dark-mode .user-select-item {
    background-image: 
        linear-gradient(rgba(30, 41, 59, 0.95), rgba(30, 41, 59, 0.95)),
        linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.user-select-item:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)),
        linear-gradient(135deg, #667eea, #764ba2);
}

body.dark-mode .user-select-item:hover {
    background-image: 
        linear-gradient(rgba(30, 41, 59, 0.95), rgba(30, 41, 59, 0.95)),
        linear-gradient(135deg, #667eea, #764ba2);
}

/* Avatar */
.user-select-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.user-select-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid #667eea;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: transform 0.3s ease;
}

.user-select-item:hover .user-select-avatar {
    transform: scale(1.1) rotate(-3deg);
}

/* Info */
.user-select-info {
    flex: 1;
    min-width: 0;
}

.user-select-name {
    font-size: 1rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-select-email {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Send button */
.user-select-send-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.user-select-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

.user-select-send-btn:active {
    transform: scale(0.98);
}

/* ════════════════════════════════════════════════════════════════
   📨 SHARED POST BUBBLE - VERSION MINIMALISTE
   ════════════════════════════════════════════════════════════════ */

/* Container du message partagé */
.shared-post-message .chat-message-bubble {
    max-width: 360px !important;
    padding: 0 !important;
}

/* Bulle principale - Style carte compacte */
.shared-post-bubble {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #667eea !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s ease !important;
}

body.dark-mode .shared-post-bubble {
    background: #1e293b !important;
    border-color: #334155 !important;
    border-left-color: #667eea !important;
}

.shared-post-bubble:hover {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
}

/* Header - Badge "Shared Post" */
.shared-post-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(102, 126, 234, 0.08);
    border-bottom: 1px solid rgba(102, 126, 234, 0.15);
}

body.dark-mode .shared-post-header {
    background: rgba(102, 126, 234, 0.15);
    border-bottom-color: rgba(102, 126, 234, 0.25);
}

.shared-post-header i {
    font-size: 0.85rem;
    color: #667eea;
}

.shared-post-header span {
    font-size: 0.7rem;
    font-weight: 700;
    color: #667eea;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Contenu cliquable */
.shared-post-content {
    padding: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.shared-post-content:hover {
    background: rgba(102, 126, 234, 0.03);
}

body.dark-mode .shared-post-content:hover {
    background: rgba(102, 126, 234, 0.08);
}

/* Titre du post - 2 lignes max */
.shared-post-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

body.dark-mode .shared-post-title {
    color: #f1f5f9;
}

/* Excerpt - MASQUÉ (on ne l'affiche plus) */
.shared-post-excerpt {
    display: none !important;
}

/* Métadonnées - Auteur + Date en ligne */
.shared-post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

body.dark-mode .shared-post-meta {
    color: #94a3b8;
}

.shared-post-author {
    display: flex;
    align-items: center;
    gap: 5px;
}

.shared-post-author i {
    font-size: 0.7rem;
    color: #667eea;
}

/* Bouton "View Post" - Simple lien */
.shared-post-view-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: #f8fafc;
    color: #667eea !important;
    text-align: center;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    border-top: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

body.dark-mode .shared-post-view-btn {
    background: #0f172a;
    border-top-color: #334155;
}

.shared-post-view-btn:hover {
    background: #667eea;
    color: white !important;
}

.shared-post-view-btn i {
    margin-left: 4px;
    font-size: 0.75rem;
}

/* ════════════════════════════════════════════════════════════════
   📱 RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .shared-post-message .chat-message-bubble {
        max-width: 300px !important;
    }
    
    .shared-post-title {
        font-size: 0.9rem;
    }
    
    .shared-post-meta {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .shared-post-message .chat-message-bubble {
        max-width: 260px !important;
    }
    
    .shared-post-content {
        padding: 12px;
    }
    
    .shared-post-title {
        font-size: 0.85rem;
        margin-bottom: 8px;
    }
}

/* ════════════════════════════════════════════════════════════════
   ✅ FIN SHARED POST BUBBLE
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   🎉 SUCCESS TOAST NOTIFICATION
   ════════════════════════════════════════════════════════════════ */

.success-toast {
    position: fixed;
    top: 100px;
    right: -400px;
    z-index: 100000;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 18px 24px;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.5);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.success-toast.show {
    right: 30px;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 1rem;
}

.toast-content i {
    font-size: 1.4rem;
}

/* ════════════════════════════════════════════════════════════════
   📱 RESPONSIVE DESIGN
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .user-select-item {
        padding: 14px 16px;
        gap: 12px;
    }
    
    .user-select-avatar {
        width: 44px;
        height: 44px;
    }
    
    .user-select-name {
        font-size: 0.95rem;
    }
    
    .user-select-email {
        font-size: 0.8rem;
    }
    
    .user-select-send-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
    
    .user-select-send-btn span {
        display: none;
    }
    
    .shared-post-bubble {
        padding: 14px !important;
    }
    
    .shared-post-title {
        font-size: 1rem;
    }
    
    .success-toast.show {
        right: 20px;
        left: 20px;
        width: calc(100% - 40px);
    }
}

@media (max-width: 480px) {
    .users-list-wrapper {
        max-height: 350px;
    }
    
    .user-select-item {
        padding: 12px 14px;
    }
    
    .user-select-avatar {
        width: 40px;
        height: 40px;
    }
    
    .user-select-name {
        font-size: 0.9rem;
    }
    
    .user-select-send-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
    }
    
    .shared-post-bubble {
        padding: 12px !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   ✅ FIN DES AJOUTS CSS
   ════════════════════════════════════════════════════════════════ */

   /* ============================================
   BOOKMARK BUTTON STYLES
   ============================================ */

.bookmark-btn.saved {
    background: linear-gradient(135deg, #F59E0B, #F97316) !important;
    color: white !important;
    border-color: #F59E0B !important;
}

.bookmark-btn.saved:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
}

.bookmark-btn i {
    transition: transform 0.3s ease;
}

.bookmark-btn.saved i {
    transform: scale(1.2);
}