/**
 * Nom du fichier : avatar-normalization.css
 * Description    : Normalisation des photos utilisateurs (cercles parfaits)
 * Auteur         : Renaldo Galofaro
 * Note           : Extrait de bulma-bootstrap-fix.css lors de la migration Bulma → Bootstrap 5
 */

/* ============================================
   NORMALISATION DES PHOTOS UTILISATEURS
   ============================================ */

/* Photos de profil standardisées à 80x80px - CERCLES PARFAITS */
.profile-avatar,
.user-avatar,
.rounded-circle[width="80"],
img[width="80"][height="80"] {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    border: 2px solid #e9ecef !important;
    transition: all 0.3s ease !important;
    display: block !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

.profile-avatar:hover,
.user-avatar:hover,
.rounded-circle[width="80"]:hover,
img[width="80"][height="80"]:hover {
    border-color: #007bff !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0,123,255,0.3) !important;
}

/* Conteneur pour les suggestions de relations - CERCLES PARFAITS */
.card .rounded-circle {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 2px solid #e9ecef !important;
    margin: 0 auto !important;
    display: block !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

/* Photos dans les listes d'utilisateurs - CERCLES PARFAITS */
.user-list-item img,
.connection-item img,
.suggestion-item img {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    border: 2px solid #e9ecef !important;
    display: block !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

/* Photos plus petites (40px) pour les éléments compacts - CERCLES PARFAITS */
.avatar-sm,
.user-avatar-sm {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    border: 1px solid #e9ecef !important;
    display: block !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

/* Photos moyennes (60px) - CERCLES PARFAITS */
.avatar-md,
.user-avatar-md {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    border: 2px solid #e9ecef !important;
    display: block !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

/* Photos grandes (120px) pour les profils détaillés - CERCLES PARFAITS */
.avatar-lg,
.user-avatar-lg {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    border: 3px solid #e9ecef !important;
    display: block !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

/* Correction spécifique pour les cartes de suggestions - CERCLES PARFAITS */
.card.shadow-sm img.rounded-circle {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 auto 15px auto !important;
    display: block !important;
    border: 2px solid #e9ecef !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

/* Placeholder pour les images manquantes - CERCLE PARFAIT */
.avatar-placeholder {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: bold !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

/* ============================================
   RÈGLE UNIVERSELLE POUR CERCLES PARFAITS
   ============================================ */

/* Règle ultra-spécifique pour FORCER les cercles parfaits */
img.rounded-circle,
.rounded-circle img,
[class*="avatar"] img,
img[class*="avatar"],
.card img.rounded-circle,
.suggestion-item img,
.user-list img,
.profile img {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* Forcer la géométrie carrée pour tous les avatars */
img[width="80"][height="80"],
img.rounded-circle[width="80"],
.card .rounded-circle {
    clip-path: circle(40px at center) !important;
    border-radius: 50% !important;
}