/* profilstyle.css - Styles de personnalisation de profil et amis */

/* =========================================
   1. FORMES DE L'AVATAR (8 au choix)
   ========================================= */
.avatar-shape-circle {
    border-radius: 9999px; /* Cercle parfait */
}

.avatar-shape-square {
    border-radius: 8px; /* Carré légèrement arrondi */
}

.avatar-shape-hexagon {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border-radius: 0;
}

.avatar-shape-shield {
    clip-path: polygon(50% 0%, 100% 0, 100% 70%, 50% 100%, 0 70%, 0 0);
    border-radius: 0;
}

.avatar-shape-pentagon {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    border-radius: 0;
}

.avatar-shape-octagon {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    border-radius: 0;
}

.avatar-shape-diamond {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    border-radius: 0;
}

.avatar-shape-star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border-radius: 0;
}

/* =========================================
   2. FORMES DES CARTES D'INFORMATION (8 distinctes)
   ========================================= */

/* 1. Classique : Arrondis normaux */
.card-shape-classic {
    border-radius: 0.5rem; 
}

/* 2. Brutal : Carré parfait avec une grosse bordure d'accentuation à gauche */
.card-shape-sharp {
    border-radius: 0;
    border-left-width: 6px; 
}

/* 3. Cyber : Gros coins coupés asymétriques (très futuriste) */
.card-shape-cyber {
    clip-path: polygon(25px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 25px);
    border-radius: 0;
}

/* 4. Organique (Feuille) : Diagonale avec de gros arrondis */
.card-shape-leaf {
    border-radius: 2rem 0.25rem 2rem 0.25rem;
}

/* 5. Dossier : Apparence de dossier "Top Secret" (encoche en haut à gauche) */
.card-shape-folder {
    clip-path: polygon(0 0, 35% 0, 42% 12px, 100% 12px, 100% 100%, 0 100%);
    border-radius: 0;
}

/* 6. Incliné : Effet de vitesse (parallélogramme) */
.card-shape-slant {
    clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
    border-radius: 0;
}

/* 7. Octogone : Les 4 coins sont coupés nets */
.card-shape-octagon {
    clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
    border-radius: 0;
}

/* 8. Terminal : Forme de flèche pointant vers la droite */
.card-shape-terminal {
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
    border-radius: 0;
}

/* =========================================
   3. ANIMATIONS UTILES (ex: Liste d'amis)
   ========================================= */
.friend-item-enter {
    animation: fadeInSlide 0.3s ease-out forwards;
}

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