.community-layout {
    display: flex;
    gap: 20px; /* Space between sidebar and main content */
    /* background-color: #f0f8ff; /* Removed debugging background color */
}

.community-sidebar {
    flex: 0 0 30%; /* 30% width for sidebar */
    max-width: 30%;
    position: sticky;
    top: 90px; /* Ajusté pour la hauteur de la navbar */
    height: fit-content;
    /* border: 1px solid red; /* Removed debugging border */
}

.community-main-content {
    flex: 1; /* Takes up remaining space */
    min-width: 0; /* Allow content to shrink */
    /* border: 1px solid blue; /* Removed debugging border */
}

/* Responsive adjustments */
@media (max-width: 992px) { /* For smaller screens, stack them */
    .community-layout {
        flex-direction: column;
    }
    .community-sidebar,
    .community-main-content {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
}

.avatar-small {

    width: 20px;

    height: 20px;

    object-fit: cover;

    border-radius: 50%;

}



.fade-out-alert {

  animation: fadeOut 0.5s ease-in-out 2s forwards;

}



@keyframes fadeOut {

  from {

    opacity: 1;

    transform: scale(1);

    max-height: 100px; /* Initial height */

  }

  to {

    opacity: 0;

    transform: scale(0.9);

    max-height: 0;

    padding-top: 0;

    padding-bottom: 0;

    margin-top: 0;

    margin-bottom: 0;

    border: none;

    overflow: hidden;

  }

}

/* Effet de survol pro sur les cartes */
.post-card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-card-hover:hover {
    border-color: #888; /* Légère bordure au survol */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; /* Ombre plus douce */
    transform: translateY(-1px); /* Léger soulèvement */
}

/* Bouton fantôme pour le widget de création */
.btn-ghost {
    background: transparent;
    border: none;
    color: #6c757d;
    transition: background 0.2s;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}
.btn-ghost:hover {
    background-color: #e9ecef;
    color: #000;
}

/* --- SIDEBAR MODERNE --- */



/* Style des liens de navigation */
.sidebar-link {
    color: #495057; /* Gris foncé doux */
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 24px; /* Arrondi complet (Pill shape) */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

/* Au survol */
.sidebar-link:hover {
    background-color: #e9ecef; /* Gris très clair */
    color: #000;
    text-decoration: none; /* Pas de soulignement moche */
}

/* Lien Actif (Page courante) */
.sidebar-link.active {
    background-color: #e7f1ff; /* Bleu très clair */
    color: #0d6efd; /* Bleu Bootstrap */
    font-weight: 600;
}
.sidebar-link.active i {
    color: #0d6efd;
}

/* Séparateur subtil */
.sidebar-divider {
    border-top: 1px solid #dee2e6;
    opacity: 0.5;
    margin-left: 16px;
    margin-right: 16px;
}

/* Petit effet zoom sur les badges de tendance */
.hover-scale {
    transition: transform 0.2s;
}
.hover-scale:hover {
    transform: scale(1.05);
    background-color: #e2e6ea !important; /* Gris un peu plus foncé au survol */
}

/* --- INDICATEURS DE CHARGEMENT HTMX --- */

/* 1. Effet de transparence automatique */
/* S'applique à n'importe quel élément qui a la classe .htmx-request (ajouté par HTMX) */
.htmx-request {
    opacity: 0.5;
    pointer-events: none; /* Empêche de cliquer 2 fois */
    transition: opacity 0.2s ease;
    cursor: wait;
}

/* 2. Spinner personnalisé pour les boutons */
/* On cache le spinner par défaut */
.htmx-indicator {
    display: none;
}
/* On l'affiche quand la requête est en cours (.htmx-request) */
.htmx-request .htmx-indicator {
    display: inline-block;
}
/* On peut aussi cacher le texte du bouton pendant le chargement si on veut */
.htmx-request .btn-text {
    display: none;
}

/* --- PROFILE TABS (Style Moderne) --- */

.profile-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 600;
    padding: 12px 20px;
    background: transparent;
}

.profile-tabs .nav-link:hover {
    color: #000;
    border-color: #e9ecef;
}

.profile-tabs .nav-link.active {
    color: #000;
    border-bottom: 3px solid #0d6efd; /* Bleu actif */
    background: transparent;
}

/* Ajustement de la bannière sur mobile */
@media (max-width: 576px) {
    .profile-cover {
        height: 100px !important;
    }
    .rounded-circle.border-4 {
        width: 80px !important;
        height: 80px !important;
    }
}

/* --- BANNIÈRE DE COMMUNAUTÉ --- */
.community-banner {
    height: 150px;
    /* Dégradé par défaut */
    background: linear-gradient(90deg, #6610f2 0%, #6f42c1 100%);
}

/* Si une image est présente, on l'utilise */
.community-banner.has-bg-image {
    background-image: var(--bg-image);
    background-position: center;
    background-size: cover;
}

/* --- DÉGRADÉS POUR LES CARTES DE SUJETS (EXPLORE) --- */
.topic-card {
    transition: transform 0.2s ease;
}
.topic-card:hover {
    transform: scale(1.03);
}
.text-shadow {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.topic-gradient-1 { background: linear-gradient(135deg, #6f42c1 0%, #000 150%); }
.topic-gradient-2 { background: linear-gradient(135deg, #0d6efd 0%, #000 150%); }
.topic-gradient-3 { background: linear-gradient(135deg, #198754 0%, #000 150%); }
.topic-gradient-4 { background: linear-gradient(135deg, #fd7e14 0%, #000 150%); }
.topic-gradient-5 { background: linear-gradient(135deg, #d63384 0%, #000 150%); }
.topic-gradient-6 { background: linear-gradient(135deg, #20c997 0%, #000 150%); }


/* --- FIX CARROUSEL --- */
/* Rendre les flèches de navigation bien visibles */
.carousel-control-prev, .carousel-control-next {
    width: 5%; /* Zone de clic plus large */
    background-color: rgba(0, 0, 0, 0.3); /* Fond semi-transparent noir */
}

.carousel-control-prev:hover, .carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.6); /* Plus sombre au survol */
}

/* S'assurer que les indicateurs (petits traits en bas) sont visibles */
.carousel-indicators [data-bs-target] {
    background-color: #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .8;
}

/* Force les icônes du carrousel en noir/gris foncé */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1) grayscale(100); 
}