.profile-container {
    max-width: 700px;
    margin: var(--space-8) auto;
}

.profile-header {
    text-align: center;
    background: var(--bg-card);
    border-radius: var(--radius-card);
    padding: var(--space-6) var(--space-4);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar-container {
    margin-bottom: var(--space-2);
    position: relative;
}

#profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary);
    box-shadow: var(--shadow);
}

#avatar-fallback {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-weight: 600;
    box-shadow: var(--shadow);
}

.profile-header h1 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text);
    margin: var(--space-2) 0 var(--space-1);
}

.profile-header p {
    color: var(--text-light);
    font-size: 1rem;
}

.links-grid {
    display: grid;
    gap: var(--space-4);
}

.profile-link {
    display: block;
    background: var(--bg-card);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
    color: var(--text);
}

.profile-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    text-decoration: none;
}

.profile-link h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-1);
    color: var(--primary);
}

.profile-link p {
    color: var(--text-light);
    margin-bottom: 0;
}

/* Message si aucun lien */
.no-links {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-light);
    font-style: italic;
}

/* Skeletons */
.skeleton-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    margin: 0 auto;
}

.skeleton-username {
    width: 150px;
    height: 2rem;
    background: #e0e0e0;
    border-radius: var(--radius-input);
    margin: var(--space-2) auto;
    animation: shimmer 1.5s infinite;
}

.skeleton-bio {
    width: 200px;
    height: 1rem;
    background: #e0e0e0;
    border-radius: var(--radius-input);
    margin: 0 auto;
    animation: shimmer 1.5s infinite;
}

.skeleton-link {
    height: 100px;
    background: #e0e0e0;
    border-radius: var(--radius-card);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-card {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    height: 100px;
    border-radius: var(--radius-card);
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}