/* Custom styles to match the design */
        .nav-btn {
            background-color: white;
            border: 1px solid #dee2e6;
            color: #495057;
            border-radius: 0.5rem;
            padding: 0.5rem 1rem;
            margin-right: 0.5rem;
            font-weight: 500;
        }
        
        .nav-btn.active {
            background-color: #3e9fef; 
            color: white;
            border-color: #3e9fef; 
        }
        
        .badge-number {
            background-color: #19408C;
            color: white;
            border-radius: 20%;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            margin-left: 0.5rem;
        }
        
        .news-card {
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            display: flex;
            gap: 1.5rem;
        }
        
        /* Styles pour les vignettes vidéo */
        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .news-image:hover .video-overlay {
            opacity: 1;
        }

        .video-overlay i {
            font-size: 48px;
            margin-bottom: 10px;
            color: #e74c3c;
        }

        .video-overlay span {
            font-size: 14px;
            font-weight: 600;
        }

        .video-thumbnail {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
        }

        .video-thumbnail i {
            font-size: 48px;
            margin-bottom: 10px;
            opacity: 0.8;
        }

        .news-image {
            flex: 0 0 300px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }

        .news-image-placeholder {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .news-category {
            background-color: #19408C;
            color: white;
            border-radius: 0.5rem;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            margin-right: 0.5rem;
            display: inline-block;
        }
        
        .news-date {
            color: #6c757d;
            font-size: 0.875rem;
            margin-right: 0.5rem;
        }
        
        .news-title {
            font-weight: bold;
            font-size: 1.25rem;
            margin: 0.5rem 0;
        }
        
        .news-content {
            color: #6c757d;
            margin: 0.5rem 0 1rem 0;
        }
        
        .news-author {
            color: #6c757d;
            font-size: 0.875rem;
            margin-right: 1rem;
            display: flex;
            align-items: center;
        }
        
        .news-author i {
            margin-right: 0.5rem;
        }
        
        .news-tag {
            background-color: white;
            border: 1px solid #dee2e6;
            border-radius: 1rem;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            margin-right: 0.5rem;
            display: inline-block;
        }
        
        .read-more {
            color: #19408C;
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
        }
        
        .read-more i {
            margin-left: 0.5rem;
        }
        
        .social-column {
            background-color: white;
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            padding: 1rem;
        }
        
        .social-post {
            padding: 1rem 0;
            border-bottom: 1px solid #dee2e6;
        }
        
        .social-post:last-child {
            border-bottom: none;
        }

        /* Styles pour les posts Facebook */
.facebook-image {
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    border-radius: 8px;
}

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

.social-post .btn-primary {
    background: #1877f2;
    border: none;
    padding: 5px 12px;
    font-size: 12px;
}

.social-post .btn-primary:hover {
    background: #166fe5;
}

.social-interaction {
    margin-left: 10px;
    font-size: 12px;
    color: #6c757d;
}

.social-interaction i {
    margin-right: 3px;
}
        
        .social-icon {
            width: 30px;
            height: 30px;
            border-radius: 20%;
             padding: 3%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.5rem;
        }
        
        .facebook-icon {
            background-color: #e3f2fd;
           
            color: #3b5998;
        }
        
        .twitter-icon {
            background-color: #e3f2fd;
            color: #1da1f2;
        }
        
        .youtube-icon {
            background-color: #ffebee;
            color: #ff0000;
        }
        
        .instagram-icon {
            background-color: #fce4ec;
            color: #e1306c;
        }
        
        .social-text {
            color: #495057;
            margin-bottom: 0.5rem;
        }
        
        .social-meta {
            color: #6c757d;
            font-size: 0.75rem;
            display: flex;
            align-items: center;
        }
        
        .social-interactions {
            margin-left: auto;
            display: flex;
            align-items: center;
        }
        
        .social-interaction {
            display: flex;
            align-items: center;
            margin-left: 1rem;
            color: #6c757d;
        }
        
        .social-interaction i {
            margin-right: 0.25rem;
        }
        
        .social-interaction.liked {
            color: #dc3545;
        }
        
        .social-interaction.comment {
            color: #6c757d;
        }
        
        /* Icons for date and time */
        .date-icon {
            margin-right: 0.25rem;
            color: #6c757d;
        }
        
        .time-icon {
            margin-right: 0.25rem;
            color: #6c757d;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .news-card {
                flex-direction: column;
            }
            
            .news-image-placeholder {
                width: 100%;
            }
        }