/* ============================================================
   lkhb-avatar — Avatar utilisateur réutilisable
   ------------------------------------------------------------
   Composant partagé pour afficher l'avatar d'un utilisateur,
   avec fallback en initiales colorées quand il n'a pas de photo.

   Préfixe "lkhb-" volontairement spécifique pour éviter tout
   conflit avec d'autres styles du projet.

   Usage :
     <link rel="stylesheet" href="/assets/css/lk-avatar.css">

     <!-- Avec photo -->
     <img src="..." class="lkhb-avatar" alt="">

     <!-- Sans photo : initiales -->
     <span class="lkhb-avatar lkhb-avatar-initials">MD</span>

   Tailles optionnelles : .lkhb-avatar--sm (32px), défaut 40px, .lkhb-avatar--lg (56px)
   ============================================================ */

.lkhb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.lkhb-avatar--sm { width: 32px; height: 32px; }
.lkhb-avatar--lg { width: 56px; height: 56px; }

/* Fallback initiales : rond coloré avec motif de fines rayures diagonales */
.lkhb-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e40046; /* rouge Lykhubs (surchargeable inline) */
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 0,
        rgba(255, 255, 255, 0.15) 1.5px,
        transparent 1.5px,
        transparent 7px
    );
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid #eee;
    line-height: 1;
    overflow: hidden;
}

.lkhb-avatar-initials.lkhb-avatar--sm { font-size: 0.72rem; }
.lkhb-avatar-initials.lkhb-avatar--lg { font-size: 1.1rem; }