/* =============================================================
   Badges de type de profil — Lykhubs
   Réutilisable natif + sites marque blanche (wl/)

   Classe « lk-user-badge » + modificateurs, pour éviter TOUT
   conflit avec les classes existantes (suggestion-badge,
   grid-badge, epg-pin__badge, badge-hub, Bootstrap .badge…).

   Convention de couleurs basée sur l'existant (css/style.css) :
     - Pro     = or    (historique : suggestion-badge-pro)
     - Membre  = rouge Lykhubs (historique : suggestion-badge-perso)
     - Artiste = violet
     - Étudiant = bleu

   Usage :
     <span class="lk-user-badge lk-user-badge--pro">Pro</span>
     <span class="lk-user-badge lk-user-badge--membre">Membre</span>
     <span class="lk-user-badge lk-user-badge--artiste">Artiste</span>
     <span class="lk-user-badge lk-user-badge--etudiant">Étudiant</span>
     <span class="lk-user-badge lk-user-badge--default">…</span>   (autres type_compte)

   Tailles :  .lk-user-badge--sm   .lk-user-badge--lg

   Personnalisation marque blanche : surcharger les variables
   --lkub-*-from / --lkub-*-to / --lkub-*-text sur un conteneur
   parent ou sur l'élément lui-même (les variables sont déclarées
   sur .lk-user-badge, pas sur :root → aucune fuite dans la page).
   ============================================================= */

.lk-user-badge {
  /* Variables scopées au badge (pas sur :root → zéro fuite) */
  --lkub-pro-from:      #ffd700;
  --lkub-pro-to:        #ffb300;
  --lkub-pro-text:      #000000;

  --lkub-membre-from:   #e40046;
  --lkub-membre-to:     #ff6b6b;
  --lkub-membre-text:   #ffffff;

  --lkub-artiste-from:  #9333ea;
  --lkub-artiste-to:    #c084fc;
  --lkub-artiste-text:  #ffffff;

  --lkub-etudiant-from: #2563eb;
  --lkub-etudiant-to:   #38bdf8;
  --lkub-etudiant-text: #ffffff;

  --lkub-default-bg:    rgba(228, 0, 70, 0.12);
  --lkub-default-text:  #e40046;

  /* Mise en forme — valeurs explicites pour résister au CSS hérité */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  margin: 0;
  padding: 3px 8px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.2px;
  text-transform: none;
  text-decoration: none;
  border: 0;
  border-radius: 8px;
  white-space: nowrap;
  vertical-align: middle;
  color: #fff;
}

/* Tailles */
.lk-user-badge.lk-user-badge--sm { padding: 2px 6px;  font-size: 9px;  border-radius: 4px; }
.lk-user-badge.lk-user-badge--lg { padding: 5px 11px; font-size: 12px; border-radius: 10px; }

/* --- Variantes par type de compte --- */

.lk-user-badge.lk-user-badge--pro {
  background: linear-gradient(135deg, var(--lkub-pro-from) 0%, var(--lkub-pro-to) 100%);
  color: var(--lkub-pro-text);
}

.lk-user-badge.lk-user-badge--membre {
  background: linear-gradient(135deg, var(--lkub-membre-from) 0%, var(--lkub-membre-to) 100%);
  color: var(--lkub-membre-text);
}

.lk-user-badge.lk-user-badge--artiste {
  background: linear-gradient(135deg, var(--lkub-artiste-from) 0%, var(--lkub-artiste-to) 100%);
  color: var(--lkub-artiste-text);
}

.lk-user-badge.lk-user-badge--etudiant {
  background: linear-gradient(135deg, var(--lkub-etudiant-from) 0%, var(--lkub-etudiant-to) 100%);
  color: var(--lkub-etudiant-text);
}

.lk-user-badge.lk-user-badge--default {
  background: var(--lkub-default-bg);
  color: var(--lkub-default-text);
}

/* =============================================================
   Anneau (bordure) d'avatar assorti au type de compte.
   À poser sur l'élément qui porte la bordure de l'avatar
   (ex. .contact-avatar). Couleurs alignées sur les badges.

   Usage :
     <div class="contact-avatar lk-avatar-ring lk-avatar-ring--pro">…</div>
   ============================================================= */

.lk-avatar-ring {
  --lkar-pro:      #ffb300;
  --lkar-membre:   #e40046;
  --lkar-artiste:  #9333ea;
  --lkar-etudiant: #2563eb;
  --lkar-default:  #e9ecef;
  border-style: solid;
  border-width: 3px;
  border-color: var(--lkar-default);
}
.lk-avatar-ring.lk-avatar-ring--pro      { border-color: var(--lkar-pro); }
.lk-avatar-ring.lk-avatar-ring--membre   { border-color: var(--lkar-membre); }
.lk-avatar-ring.lk-avatar-ring--artiste  { border-color: var(--lkar-artiste); }
.lk-avatar-ring.lk-avatar-ring--etudiant { border-color: var(--lkar-etudiant); }

/* Conteneur + badge d'un avatar rendu par le composant PHP lk_user_avatar().
   Le badge se pose en bas à droite de l'avatar (liseré blanc). */
.lk-avatar-wrap { position: relative; flex-shrink: 0; display: inline-flex; }
.lk-avatar-badge {
  position: absolute; bottom: 2px; right: -4px; z-index: 3;
  box-shadow: 0 0 0 1px #fff;
}