/* ============================================
   SIDEBAR USER MENU - Menu utilisateur intégré
   ============================================ */

/* Footer de la sidebar (en bas) */
.sidebar-footer {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

/* Menu utilisateur */
.sidebar-user-menu {
    position: relative;
}

/* Trigger (élément cliquable) */
.sidebar-user-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    width: 100%;
}

.sidebar-user-trigger:hover {
    background: rgba(59, 130, 246, 0.1);
}

.sidebar-user-trigger.active {
    background: rgba(59, 130, 246, 0.15);
}

/* ✅ Avatar SIDEBAR - Bordure simple (SANS dégradé) */
.sidebar-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(59, 130, 246, 0.5) !important;
    object-fit: cover;
    flex-shrink: 0;
    background: none !important;
    background-clip: unset !important;
    background-origin: unset !important;
}

/* Infos utilisateur */
.sidebar-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sidebar-user-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-plan {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Flèche */
.sidebar-user-arrow {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.sidebar-user-trigger.active .sidebar-user-arrow {
    transform: rotate(180deg);
}

/* Dropdown (s'ouvre vers le haut) */
.sidebar-user-dropdown {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
}

.sidebar-user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Header du dropdown */
.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
}

/* ✅ Avatar DROPDOWN - Bordure simple (SANS dégradé) */
.user-dropdown-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 2px solid rgba(59, 130, 246, 0.5) !important;
    object-fit: cover;
    flex-shrink: 0;
    background: none !important;
    background-clip: unset !important;
    background-origin: unset !important;
}

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

.user-dropdown-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown-email {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Divider */
.user-dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0;
}

/* Links */
.user-dropdown-links {
    padding: 0.5rem;
}

.user-dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.user-dropdown-link:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #fff;
}

.user-dropdown-link i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.user-dropdown-link:hover i {
    color: #3b82f6;
}

/* Logout button */
.user-dropdown-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    border: none;
    background: transparent;
    color: #ef4444;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0 0 12px 12px;
    transition: all 0.3s ease;
    text-align: left;
}

.user-dropdown-logout:hover {
    background: rgba(239, 68, 68, 0.1);
}

.user-dropdown-logout i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

/* Sidebar collapsed (réduite) */
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .sidebar-user-arrow {
    display: none;
}

.sidebar.collapsed .sidebar-user-trigger {
    justify-content: center;
    padding: 0.75rem;
}

.sidebar.collapsed .sidebar-user-dropdown {
    left: calc(100% + 0.5rem);
    right: auto;
    bottom: 0;
    width: 280px;
    transform: translateX(-10px);
}

.sidebar.collapsed .sidebar-user-dropdown.active {
    transform: translateX(0);
}

/* Dark mode */
body.dark-mode .sidebar-user-dropdown {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .sidebar-user-trigger:hover {
    background: rgba(59, 130, 246, 0.15);
}

body.dark-mode .user-dropdown-divider {
    background: rgba(255, 255, 255, 0.08);
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .sidebar-footer {
        position: relative;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.75rem;
    }
    
    .sidebar-user-dropdown {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    
    .sidebar-user-dropdown.active {
        transform: translateY(0);
    }
}

/* Animation supplémentaire */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sidebar-user-dropdown.active {
    animation: slideUpFadeIn 0.3s ease;
}

/* ✅ PROTECTION GLOBALE - Tous les avatars SAUF .profile-avatar-large */
[data-user-photo]:not(.profile-avatar-large) {
    background: none !important;
    background-clip: unset !important;
    background-origin: unset !important;
    border: 2px solid rgba(59, 130, 246, 0.5) !important;
}

/* Header du dropdown */
.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
}

.user-dropdown-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

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

.user-dropdown-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown-email {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Divider */
.user-dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0;
}

/* Links */
.user-dropdown-links {
    padding: 0.5rem;
}

.user-dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.user-dropdown-link:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #fff;
}

.user-dropdown-link i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.user-dropdown-link:hover i {
    color: #3b82f6;
}

/* Logout button */
.user-dropdown-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    border: none;
    background: transparent;
    color: #ef4444;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0 0 12px 12px;
    transition: all 0.3s ease;
    text-align: left;
}

.user-dropdown-logout:hover {
    background: rgba(239, 68, 68, 0.1);
}

.user-dropdown-logout i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

/* Sidebar collapsed (réduite) */
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .sidebar-user-arrow {
    display: none;
}

.sidebar.collapsed .sidebar-user-trigger {
    justify-content: center;
    padding: 0.75rem;
}

.sidebar.collapsed .sidebar-user-dropdown {
    left: calc(100% + 0.5rem);
    right: auto;
    bottom: 0;
    width: 280px;
    transform: translateX(-10px);
}

.sidebar.collapsed .sidebar-user-dropdown.active {
    transform: translateX(0);
}

/* Dark mode */
body.dark-mode .sidebar-user-dropdown {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .sidebar-user-trigger:hover {
    background: rgba(59, 130, 246, 0.15);
}

body.dark-mode .user-dropdown-divider {
    background: rgba(255, 255, 255, 0.08);
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .sidebar-footer {
        position: relative;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.75rem;
    }
    
    .sidebar-user-dropdown {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    
    .sidebar-user-dropdown.active {
        transform: translateY(0);
    }
}

/* Animation supplémentaire */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sidebar-user-dropdown.active {
    animation: slideUpFadeIn 0.3s ease;
}

/* ============================================
   RESPONSIVE - BOUTONS PROFIL (MOBILE)
   ============================================ */

/* Tablettes et smartphones (≤768px) */
@media (max-width: 768px) {
    
    /* ✅ Bouton "Edit" (section Personal Information) */
    .btn-edit {
        font-size: 0.8125rem !important; /* 13px */
        padding: 0.5rem 0.875rem !important;
        min-width: auto !important;
    }
    
    .btn-edit i {
        font-size: 0.875rem !important;
        margin-right: 4px !important;
    }
    
    /* ✅ Boutons "Unfollow" dans la liste Following */
    .btn-unfollow,
    .following-item .btn-secondary,
    .follower-item .btn-secondary {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.875rem !important;
        min-width: auto !important;
    }
    
    /* ✅ Boutons "Remove" dans la liste Followers */
    .btn-remove-follower,
    .btn-remove {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.875rem !important;
        min-width: auto !important;
    }
    
    /* ✅ Tous les boutons dans les cartes de profil utilisateur */
    .user-profile-card .btn-secondary,
    .user-profile-card .btn-primary,
    .user-profile-card button {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.875rem !important;
    }
    
    /* ✅ Icônes dans ces boutons */
    .btn-unfollow i,
    .btn-remove-follower i,
    .btn-remove i,
    .user-profile-card button i {
        font-size: 0.875rem !important;
        margin-right: 4px !important;
    }
    
    /* ✅ Boutons de sécurité (pour référence) */
    .btn-secondary {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.875rem !important;
    }
    
    /* ✅ Ajustement des actions dans les sections */
    .section-header .btn-edit {
        white-space: nowrap;
    }
}

/* Smartphones (≤480px) - Réduction supplémentaire */
@media (max-width: 480px) {
    
    /* ✅ Réduction maximale pour petits écrans */
    .btn-edit,
    .btn-unfollow,
    .btn-remove-follower,
    .btn-remove,
    .user-profile-card .btn-secondary,
    .user-profile-card .btn-primary,
    .following-item .btn-secondary,
    .follower-item .btn-secondary {
        font-size: 0.75rem !important; /* 12px */
        padding: 0.4rem 0.75rem !important;
        gap: 0.25rem !important;
    }
    
    /* ✅ Icônes réduites */
    .btn-edit i,
    .btn-unfollow i,
    .btn-remove-follower i,
    .btn-remove i,
    .user-profile-card button i {
        font-size: 0.8125rem !important;
        margin-right: 3px !important;
    }
    
    /* ✅ Masquer le texte "Edit" et garder juste l'icône (optionnel) */
    .btn-edit span {
        display: none;
    }
    
    .btn-edit i {
        margin-right: 0 !important;
    }
    
    /* ✅ Section header responsive */
    .section-header {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
    
    .section-header .btn-edit {
        align-self: flex-end;
    }
}

/* Très petits écrans (≤360px) - Optimisation maximale */
@media (max-width: 360px) {
    
    /* ✅ Boutons ultra-compacts */
    .btn-edit,
    .btn-unfollow,
    .btn-remove-follower,
    .btn-remove,
    .user-profile-card button {
        font-size: 0.6875rem !important; /* 11px */
        padding: 0.375rem 0.625rem !important;
    }
    
    /* ✅ Icônes ultra-réduites */
    .btn-edit i,
    .btn-unfollow i,
    .btn-remove-follower i,
    .btn-remove i {
        font-size: 0.75rem !important;
    }
}

/* ============================================
   CARTES UTILISATEUR (Following/Followers) - MOBILE
   ============================================ */

@media (max-width: 768px) {
    
    /* ✅ Si les cartes utilisateur ont cette structure */
    .user-card,
    .following-card,
    .follower-card {
        padding: 0.875rem !important;
    }
    
    /* ✅ Adaptation de la disposition */
    .user-card-actions,
    .following-card-actions,
    .follower-card-actions {
        gap: 0.5rem !important;
    }
    
    /* ✅ Boutons dans les cartes */
    .user-card button,
    .following-card button,
    .follower-card button {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.875rem !important;
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    
    /* ✅ Disposition verticale sur très petits écrans */
    .user-card-actions,
    .following-card-actions,
    .follower-card-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .user-card button,
    .following-card button,
    .follower-card button {
        width: 100%;
        font-size: 0.75rem !important;
        padding: 0.5rem !important;
    }
}

/* ============================================
   FIX TEMPORAIRE - BOUTONS FOLLOWING/FOLLOWERS
   ============================================ */

/* Ciblage par ID des listes */
@media (max-width: 768px) {
    
    /* ✅ TOUS les boutons dans ces sections */
    #followingList button,
    #followersList button {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.875rem !important;
        min-width: auto !important;
        max-width: fit-content !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }
    
    /* ✅ Conteneur parent des cartes */
    #followingList > div,
    #followersList > div {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
        padding: 0.875rem !important;
    }
    
    /* ✅ Infos utilisateur (à gauche) */
    #followingList > div > div:first-child,
    #followersList > div > div:first-child {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* ✅ Bouton (à droite) */
    #followingList > div > button,
    #followersList > div > button {
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }
}

@media (max-width: 480px) {
    #followingList button,
    #followersList button {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.75rem !important;
    }
}

@media (max-width: 360px) {
    #followingList button,
    #followersList button {
        font-size: 0.6875rem !important;
        padding: 0.375rem 0.625rem !important;
    }
}

/* ============================================
   PAGINATION - Design Discret & Responsive
   ============================================ */

   .pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    grid-column: 1 / -1; /* Prend toute la largeur de la grille */
}

body.dark-mode .pagination-wrapper {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: transparent;
    padding: 8px 12px;
    border-radius: 12px;
    transition: all 0.3s ease;
    margin: 0 auto; /* Force le centrage */
}

/* Boutons Previous/Next */
.pagination-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    background: rgba(102, 126, 234, 0.05);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

body.dark-mode .pagination-btn {
    background: rgba(102, 126, 234, 0.08);
    border-color: rgba(102, 126, 234, 0.3);
    color: var(--text-secondary);
}

.pagination-btn:hover:not(:disabled) {
    background: rgba(102, 126, 234, 0.12);
    border-color: rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}

body.dark-mode .pagination-btn:hover:not(:disabled) {
    background: rgba(102, 126, 234, 0.15);
    color: var(--text-primary);
}

.pagination-btn:active:not(:disabled) {
    transform: translateY(0);
}

.pagination-btn:disabled {
    background: transparent;
    border-color: rgba(148, 163, 184, 0.2);
    color: var(--text-tertiary);
    cursor: not-allowed;
    opacity: 0.4;
}

body.dark-mode .pagination-btn:disabled {
    border-color: rgba(100, 116, 139, 0.2);
}

.pagination-btn i {
    font-size: 0.75rem;
}

/* Info (Page X of Y) */
.pagination-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0 12px;
}

body.dark-mode .pagination-info {
    color: var(--text-tertiary);
}

.pagination-text,
.pagination-items {
    white-space: nowrap;
}

.pagination-text strong,
.pagination-items strong {
    color: var(--text-primary);
    font-weight: 700;
}

body.dark-mode .pagination-text strong,
body.dark-mode .pagination-items strong {
    color: var(--text-secondary);
}

.pagination-separator {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    opacity: 0.5;
}

/* ============================================
   GRILLE - 3 COLONNES MAXIMUM (PC)
   ============================================ */

#activityContent,
.user-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ✅ EXACTEMENT 3 colonnes */
    gap: 20px;
    width: 100%;
}

/* Grands écrans (>1400px) - Toujours 3 colonnes */
@media (min-width: 1400px) {
    #activityContent,
    .user-posts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

/* Écrans moyens (1024px - 1399px) - 3 colonnes */
@media (min-width: 1024px) and (max-width: 1399px) {
    #activityContent,
    .user-posts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* Tablettes (768px - 1023px) - 2 colonnes */
@media (min-width: 768px) and (max-width: 1023px) {
    #activityContent,
    .user-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* Smartphones (≤767px) - 1 colonne */
@media (max-width: 767px) {
    #activityContent,
    .user-posts-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0;
        margin: 0;
    }
}

/* ============================================
   RESPONSIVE MOBILE - PAGINATION
   ============================================ */

/* Tablettes (≤1024px) */
@media (max-width: 1024px) {
    .pagination-wrapper {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    .pagination-controls {
        margin: 0 auto;
    }
    
    .pagination-info {
        gap: 8px;
        padding: 0 8px;
        font-size: 0.8125rem;
    }
    
    .pagination-btn {
        padding: 8px 14px;
        font-size: 0.8125rem;
    }
}

/* Tablettes et smartphones (≤768px) */
@media (max-width: 768px) {
    .pagination-wrapper {
        margin-top: 24px;
        padding-top: 16px;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .pagination-controls {
        flex-wrap: wrap;
        gap: 12px;
        padding: 8px;
        justify-content: center !important;
        max-width: 100%;
        width: auto;
        margin: 0 auto !important;
    }
    
    .pagination-btn {
        padding: 10px 16px;
        font-size: 0.8125rem;
        flex: 0 0 auto;
        min-width: 100px;
    }
    
    .pagination-info {
        flex: 1 0 100%;
        flex-direction: row;
        justify-content: center !important;
        gap: 8px;
        text-align: center;
        padding: 4px 0;
        font-size: 0.8125rem;
        order: -1; /* Mettre les infos au-dessus */
    }
    
    .pagination-separator {
        display: inline-block;
    }
    
    /* Réduire les textes sur mobile */
    .pagination-items {
        display: none; /* Masquer "Showing X-Y of Z" sur mobile */
    }
}

/* Smartphones (≤480px) */
@media (max-width: 480px) {
    .pagination-wrapper {
        margin-top: 20px;
        padding-top: 12px;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .pagination-controls {
        gap: 10px;
        padding: 8px;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        margin: 0 auto !important;
    }
    
    .pagination-btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 10px 12px;
        font-size: 0.75rem;
        min-width: 80px;
        max-width: 120px;
    }
    
    .pagination-btn span {
        display: none; /* Masquer "Previous" et "Next" */
    }
    
    .pagination-btn i {
        margin: 0 !important;
        font-size: 0.875rem;
    }
    
    .pagination-info {
        font-size: 0.75rem;
        gap: 6px;
        padding: 2px 0;
        width: 100%;
        justify-content: center !important;
        text-align: center !important;
    }
    
    .pagination-separator {
        display: none;
    }
}

/* Très petits smartphones (≤360px) */
@media (max-width: 360px) {
    .pagination-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .pagination-controls {
        padding: 6px 4px;
        gap: 8px;
    }
    
    .pagination-btn {
        padding: 8px 10px;
        font-size: 0.6875rem;
        max-width: 100px;
        min-width: 70px;
    }
    
    .pagination-info {
        font-size: 0.6875rem;
    }
    
    .pagination-text strong,
    .pagination-items strong {
        font-weight: 600;
    }
}

/* ============================================
   ANIMATION D'ENTRÉE (Optimisée)
   ============================================ */

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

.user-post-item {
    animation: fadeInUp 0.35s ease-out;
}

.user-post-item:nth-child(1) { animation-delay: 0.04s; }
.user-post-item:nth-child(2) { animation-delay: 0.08s; }
.user-post-item:nth-child(3) { animation-delay: 0.12s; }
.user-post-item:nth-child(4) { animation-delay: 0.16s; }
.user-post-item:nth-child(5) { animation-delay: 0.20s; }
.user-post-item:nth-child(6) { animation-delay: 0.24s; }

/* Désactiver les animations sur mobile pour meilleures performances */
@media (max-width: 768px) {
    .user-post-item {
        animation: none;
    }
}

/* ============================================
   DARK MODE - Ajustements supplémentaires
   ============================================ */

body.dark-mode .pagination-wrapper {
    border-top-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .pagination-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .pagination-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(102, 126, 234, 0.4);
}

body.dark-mode .pagination-btn:disabled {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.05);
}

/* ============================================
   PHOTO DE PROFIL - Bordure dégradée bleu/violet
   ============================================ */

   .profile-header-card img[alt*="Avatar"],
   .profile-header-card img[class*="avatar"],
   .profile-avatar-large,
   img[data-user-photo] {
       border: 4px solid transparent !important;
       background: linear-gradient(white, white) padding-box,
                   linear-gradient(135deg, #667eea 0%, #764ba2 100%) border-box !important;
       border-radius: 50% !important;
       box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3) !important;
   }
   
   /* Dark mode - Ajuster le fond intérieur */
   body.dark-mode .profile-header-card img[alt*="Avatar"],
   body.dark-mode .profile-header-card img[class*="avatar"],
   body.dark-mode .profile-avatar-large,
   body.dark-mode img[data-user-photo] {
       background: linear-gradient(#0f172a, #0f172a) padding-box,
                   linear-gradient(135deg, #667eea 0%, #764ba2 100%) border-box !important;
   }
   
   /* Effet HOVER (optionnel) */
   .profile-header-card img[alt*="Avatar"]:hover,
   .profile-header-card img[class*="avatar"]:hover,
   .profile-avatar-large:hover {
       box-shadow: 0 12px 48px rgba(102, 126, 234, 0.5),
                   0 0 40px rgba(118, 75, 162, 0.3) !important;
       transform: scale(1.03);
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   /* ============================================
      BOUTONS D'ACTION PUBLIC PROFILE - MOBILE
      ============================================ */
   
   /* Empêcher le retour à la ligne des boutons d'action */
   .profile-header-card [style*="display: flex"][style*="gap: 12px"] {
       flex-wrap: nowrap !important;
   }
   
   @media (max-width: 768px) {
       
       /* ✅ Container des boutons - UNE SEULE LIGNE */
       .profile-header-card > div > div[style*="display: flex"][style*="gap: 12px"],
       .profile-header-content [style*="display: flex"][style*="gap: 12px"] {
           display: flex !important;
           flex-direction: row !important;
           flex-wrap: nowrap !important;
           gap: 6px !important;
           justify-content: center !important;
           align-items: center !important;
           width: 100% !important;
           overflow-x: auto !important;
           padding-bottom: 4px !important;
           -webkit-overflow-scrolling: touch;
       }
       
       /* ✅ Boutons individuels - Taille optimisée */
       .profile-header-card .create-post-btn,
       .profile-header-content .create-post-btn {
           flex: 1 1 0 !important;
           min-width: 0 !important;
           max-width: none !important;
           padding: 10px 8px !important;
           font-size: 0 !important; /* Masque le texte */
           white-space: nowrap !important;
           justify-content: center !important;
           position: relative !important;
       }
       
       /* ✅ Icônes visibles et agrandies */
       .profile-header-card .create-post-btn i,
       .profile-header-content .create-post-btn i {
           font-size: 1.125rem !important;
           margin: 0 !important;
       }
       
       /* ✅ Bouton Follow/Unfollow spécifique */
       .profile-header-card button#followBtn,
       .profile-header-content button#followBtn {
           font-size: 0 !important;
       }
       
       .profile-header-card button#followBtn i,
       .profile-header-content button#followBtn i {
           font-size: 1.125rem !important;
           margin: 0 !important;
       }
       
       /* ✅ Lien LinkedIn spécifique */
       .profile-header-card a[href*="linkedin"],
       .profile-header-content a[href*="linkedin"] {
           font-size: 0 !important;
       }
       
       .profile-header-card a[href*="linkedin"] i,
       .profile-header-content a[href*="linkedin"] i {
           font-size: 1.125rem !important;
           margin: 0 !important;
       }
       
       /* ✅ Scrollbar horizontale discrète */
       .profile-header-card [style*="display: flex"][style*="gap: 12px"]::-webkit-scrollbar,
       .profile-header-content [style*="display: flex"][style*="gap: 12px"]::-webkit-scrollbar {
           height: 4px;
       }
       
       .profile-header-card [style*="display: flex"][style*="gap: 12px"]::-webkit-scrollbar-track,
       .profile-header-content [style*="display: flex"][style*="gap: 12px"]::-webkit-scrollbar-track {
           background: rgba(0, 0, 0, 0.05);
           border-radius: 4px;
       }
       
       .profile-header-card [style*="display: flex"][style*="gap: 12px"]::-webkit-scrollbar-thumb,
       .profile-header-content [style*="display: flex"][style*="gap: 12px"]::-webkit-scrollbar-thumb {
           background: rgba(102, 126, 234, 0.4);
           border-radius: 4px;
       }
       
       body.dark-mode .profile-header-card [style*="display: flex"][style*="gap: 12px"]::-webkit-scrollbar-track,
       body.dark-mode .profile-header-content [style*="display: flex"][style*="gap: 12px"]::-webkit-scrollbar-track {
           background: rgba(255, 255, 255, 0.05);
       }
       
       body.dark-mode .profile-header-card [style*="display: flex"][style*="gap: 12px"]::-webkit-scrollbar-thumb,
       body.dark-mode .profile-header-content [style*="display: flex"][style*="gap: 12px"]::-webkit-scrollbar-thumb {
           background: rgba(102, 126, 234, 0.6);
       }
   }
   
   /* Très petits écrans (≤480px) */
   @media (max-width: 480px) {
       
       .profile-header-card .create-post-btn,
       .profile-header-content .create-post-btn {
           padding: 9px 6px !important;
       }
       
       .profile-header-card .create-post-btn i,
       .profile-header-content .create-post-btn i {
           font-size: 1rem !important;
       }
   }
   
   /* Très très petits écrans (≤360px) */
   @media (max-width: 360px) {
       
       .profile-header-card .create-post-btn,
       .profile-header-content .create-post-btn {
           padding: 8px 5px !important;
       }
       
       .profile-header-card .create-post-btn i,
       .profile-header-content .create-post-btn i {
           font-size: 0.95rem !important;
       }
   }

/* ============================================
   BOUTONS PUBLIC PROFILE - TAILLE IDENTIQUE (MOBILE)
   ============================================ */

   @media (max-width: 768px) {
    
    /* ✅ Container des boutons - Force 3 colonnes égales */
    .profile-header-card > div > div[style*="display: flex"][style*="gap: 12px"],
    .profile-header-content [style*="display: flex"][style*="gap: 12px"] {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 20px !important;
        padding: 0 !important;
    }
    
    /* ✅ Tous les boutons - Taille identique garantie */
    .profile-header-card .create-post-btn,
    .profile-header-content .create-post-btn,
    .profile-header-card button#followBtn,
    .profile-header-content button#followBtn,
    .profile-header-card a[href*="linkedin"],
    .profile-header-content a[href*="linkedin"],
    .profile-header-card button,
    .profile-header-content button,
    .profile-header-card a.create-post-btn,
    .profile-header-content a.create-post-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
        padding: 12px 8px !important;
        font-size: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 46px !important; /* ✅ Hauteur fixe identique */
        box-sizing: border-box !important;
    }
    
    /* ✅ Icônes centrées et visibles */
    .profile-header-card .create-post-btn i,
    .profile-header-content .create-post-btn i,
    .profile-header-card button#followBtn i,
    .profile-header-content button#followBtn i,
    .profile-header-card a[href*="linkedin"] i,
    .profile-header-content a[href*="linkedin"] i {
        font-size: 1.25rem !important;
        margin: 0 !important;
    }
}

/* Smartphones (≤480px) */
@media (max-width: 480px) {
    
    .profile-header-card .create-post-btn,
    .profile-header-content .create-post-btn,
    .profile-header-card button,
    .profile-header-content button,
    .profile-header-card a.create-post-btn,
    .profile-header-content a.create-post-btn {
        padding: 10px 6px !important;
        height: 44px !important;
    }
    
    .profile-header-card .create-post-btn i,
    .profile-header-content .create-post-btn i,
    .profile-header-card button i,
    .profile-header-content button i,
    .profile-header-card a.create-post-btn i,
    .profile-header-content a.create-post-btn i {
        font-size: 1.125rem !important;
    }
}

/* Très petits smartphones (≤360px) */
@media (max-width: 360px) {
    
    .profile-header-card .create-post-btn,
    .profile-header-content .create-post-btn,
    .profile-header-card button,
    .profile-header-content button,
    .profile-header-card a.create-post-btn,
    .profile-header-content a.create-post-btn {
        padding: 9px 5px !important;
        height: 42px !important;
    }
    
    .profile-header-card .create-post-btn i,
    .profile-header-content .create-post-btn i,
    .profile-header-card button i,
    .profile-header-content button i,
    .profile-header-card a.create-post-btn i,
    .profile-header-content a.create-post-btn i {
        font-size: 1rem !important;
    }
}