/* ============================================================================
   WOW OFFICIAL ICONS - Class & Role Icons
   Utilise les icônes officielles de WoW depuis WoWHead CDN
   ============================================================================ */

/* ============================================================================
   ICÔNES DE CLASSE (Officielles WoW)
   ============================================================================ */
.class-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Icônes de classes depuis WoWHead (format: class-{id}) */
.class-icon.warrior,
.class-icon.guerrier {
  background-image: url('https://wow.zamimg.com/images/wow/icons/medium/classicon_warrior.jpg');
}

.class-icon.paladin {
  background-image: url('https://wow.zamimg.com/images/wow/icons/medium/classicon_paladin.jpg');
}

.class-icon.hunter,
.class-icon.chasseur {
  background-image: url('https://wow.zamimg.com/images/wow/icons/medium/classicon_hunter.jpg');
}

.class-icon.rogue,
.class-icon.voleur {
  background-image: url('https://wow.zamimg.com/images/wow/icons/medium/classicon_rogue.jpg');
}

.class-icon.priest,
.class-icon.pretre,
.class-icon.prêtre {
  background-image: url('https://wow.zamimg.com/images/wow/icons/medium/classicon_priest.jpg');
}

.class-icon.death-knight,
.class-icon.deathknight,
.class-icon.chevalier-de-la-mort {
  background-image: url('https://wow.zamimg.com/images/wow/icons/medium/classicon_deathknight.jpg');
}

.class-icon.shaman,
.class-icon.chaman {
  background-image: url('https://wow.zamimg.com/images/wow/icons/medium/classicon_shaman.jpg');
}

.class-icon.mage {
  background-image: url('https://wow.zamimg.com/images/wow/icons/medium/classicon_mage.jpg');
}

.class-icon.warlock,
.class-icon.demoniste,
.class-icon.démoniste {
  background-image: url('https://wow.zamimg.com/images/wow/icons/medium/classicon_warlock.jpg');
}

.class-icon.monk,
.class-icon.moine {
  background-image: url('https://wow.zamimg.com/images/wow/icons/medium/classicon_monk.jpg');
}

.class-icon.druid,
.class-icon.druide {
  background-image: url('https://wow.zamimg.com/images/wow/icons/medium/classicon_druid.jpg');
}

.class-icon.demon-hunter,
.class-icon.demonhunter,
.class-icon.chasseur-de-demons,
.class-icon.chasseur-de-démons {
  background-image: url('https://wow.zamimg.com/images/wow/icons/medium/classicon_demonhunter.jpg');
}

.class-icon.evoker,
.class-icon.evocateur,
.class-icon.évocateur {
  background-image: url('https://wow.zamimg.com/images/wow/icons/medium/classicon_evoker.jpg');
}

/* Icône par défaut si classe inconnue */
.class-icon.unknown {
  background-image: url('https://wow.zamimg.com/images/wow/icons/medium/inv_misc_questionmark.jpg');
}

/* ============================================================================
   ICÔNES DE RÔLE (Tank, Heal, DPS)
   ============================================================================ */
.role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 6px;
  vertical-align: middle;
}

.role-icon.tank {
  background-image: url('https://wow.zamimg.com/images/wow/icons/small/icon_protecter.jpg');
  /* Icône alternative: https://wow.zamimg.com/images/wow/icons/small/inv_shield_06.jpg */
}

.role-icon.heal {
  background-image: url('https://wow.zamimg.com/images/wow/icons/small/spell_nature_healingtouch.jpg');
  /* Icône alternative: https://wow.zamimg.com/images/wow/icons/small/spell_holy_flashheal.jpg */
}

.role-icon.dps {
  background-image: url('https://wow.zamimg.com/images/wow/icons/small/inv_sword_27.jpg');
  /* Icône alternative: https://wow.zamimg.com/images/wow/icons/small/ability_dualwield.jpg */
}

/* ============================================================================
   ICÔNES PLUS GRANDES POUR LE HEADER
   ============================================================================ */
.class-icon-large {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   HOVER EFFECTS
   ============================================================================ */
.class-icon:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

.role-icon:hover {
  transform: scale(1.15);
  transition: transform 0.2s ease;
}

/* ============================================================================
   ICÔNES DE RACE (Officielles WoW)
   ============================================================================ */
.race-icon,
.race-icon-dynamic {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Style pour les icônes dynamiques */
.race-icon-dynamic {
  cursor: help;
  position: relative;
}

/* Races Alliance */
.race-icon.human { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_human_male.jpg'); }
.race-icon.dwarf { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_dwarf_male.jpg'); }
.race-icon.night-elf { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_nightelf_male.jpg'); }
.race-icon.gnome { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_gnome_male.jpg'); }
.race-icon.draenei { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_draenei_male.jpg'); }
.race-icon.worgen { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_worganhead.jpg'); }
.race-icon.void-elf { background-image: url('https://wow.zamimg.com/images/wow/icons/large/ability_racial_entropicembrace.jpg'); }
.race-icon.lightforged-draenei { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_alliedrace_lightforgeddraenei.jpg'); }
.race-icon.dark-iron-dwarf { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_alliedrace_darkiroندwarf.jpg'); }
.race-icon.kul-tiran { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_boss_zuldazar_manceroy_mestrah.jpg'); }
.race-icon.mechagnome { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_alliedrace_mechagnome.jpg'); }

/* Races Horde */
.race-icon.orc { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_character_orc_male.jpg'); }
.race-icon.undead { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_character_undead_male.jpg'); }
.race-icon.tauren { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_character_tauren_male.jpg'); }
.race-icon.troll { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_character_troll_male.jpg'); }
.race-icon.blood-elf { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_character_bloodelf_male.jpg'); }
.race-icon.goblin { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_goblinhead.jpg'); }
.race-icon.nightborne { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_alliedrace_nightborne.jpg'); }
.race-icon.highmountain-tauren { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_alliedrace_highmountaintauren.jpg'); }
.race-icon.maghar-orc { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_alliedrace_magharorc.jpg'); }
.race-icon.zandalari-troll { background-image: url('https://wow.zamimg.com/images/wow/icons/large/ability_racial_pterrordax.jpg'); }
.race-icon.vulpera { background-image: url('https://wow.zamimg.com/images/wow/icons/large/ability_racial_nosefortrouble.jpg'); }

/* Races Neutres */
.race-icon.pandaren { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_pandaren_female.jpg'); }
.race-icon.dracthyr { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/ability_racial_soar.jpg'); }

/* Noms français des races */
.race-icon.humain { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_human_male.jpg'); }
.race-icon.nain { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_dwarf_male.jpg'); }
.race-icon.elfe-de-la-nuit { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_nightelf_male.jpg'); }
.race-icon.gnome { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_gnome_male.jpg'); }
.race-icon.draenei { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_draenei_male.jpg'); }
.race-icon.worgen { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_worganhead.jpg'); }
.race-icon.orc { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_orc_male.jpg'); }
.race-icon.mort-vivant { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_undead_male.jpg'); }
.race-icon.tauren { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_tauren_male.jpg'); }
.race-icon.troll { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_troll_male.jpg'); }
.race-icon.elfe-de-sang { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_bloodelf_male.jpg'); }
.race-icon.gobelin { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_goblinhead.jpg'); }
.race-icon.pandaren { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/achievement_character_pandaren_female.jpg'); }
.race-icon.dracthyr { background-image: url('https://wow.zamimg.com/images/wow/icons/medium/ability_racial_soar.jpg'); }

/* Races alliées (Noms français) */
.race-icon.troll-zandalari,
.race-icon.zandalari { background-image: url('https://wow.zamimg.com/images/wow/icons/large/ability_racial_pterrordax.jpg'); }
.race-icon.vulperin,
.race-icon.vulperine { background-image: url('https://wow.zamimg.com/images/wow/icons/large/ability_racial_nosefortrouble.jpg'); }
.race-icon.elfe-du-vide { background-image: url('https://wow.zamimg.com/images/wow/icons/large/ability_racial_entropicembrace.jpg'); }
.race-icon.draenei-forge-par-la-lumiere,
.race-icon.draenei-sancteforge { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_alliedrace_lightforgeddraenei.jpg'); }
.race-icon.nain-sombrefer,
.race-icon.sombrinier { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_alliedrace_darkiroندwarf.jpg'); }
.race-icon.kultirassien,
.race-icon.kul-tirassien { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_boss_zuldazar_manceroy_mestrah.jpg'); }
.race-icon.mechagnome,
.race-icon.meca-gnome { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_alliedrace_mechagnome.jpg'); }
.race-icon.sacrenuit,
.race-icon.fils-de-la-nuit { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_alliedrace_nightborne.jpg'); }
.race-icon.tauren-de-haut-roc,
.race-icon.tauren-de-hauteroche { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_alliedrace_highmountaintauren.jpg'); }
.race-icon.orc-maghar { background-image: url('https://wow.zamimg.com/images/wow/icons/large/achievement_alliedrace_magharorc.jpg'); }

/* ============================================================================
   TOOLTIPS (Affichage au survol)
   ============================================================================ */
.class-icon[title],
.role-icon[title],
.race-icon[title] {
  cursor: help;
  position: relative;
}

/* Style du tooltip */
.class-icon::after,
.role-icon::after,
.race-icon::after,
.race-icon-dynamic::after {
  content: attr(title);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.95);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.class-icon:hover::after,
.role-icon:hover::after,
.race-icon:hover::after,
.race-icon-dynamic:hover::after {
  opacity: 1;
}

/* Flèche du tooltip */
.class-icon::before,
.role-icon::before,
.race-icon::before {
  content: '';
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.95);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.class-icon:hover::before,
.role-icon:hover::before,
.race-icon:hover::before {
  opacity: 1;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
  .class-icon {
    width: 24px;
    height: 24px;
  }

  .role-icon {
    width: 20px;
    height: 20px;
  }
}

/* ============================================================================
   LOADING STATE (si l'image ne charge pas)
   ============================================================================ */
.class-icon::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  border-radius: 4px;
}

/* ============================================================================
   BORDER GLOW (effet classe)
   ============================================================================ */
.class-icon.warrior { border: 2px solid rgba(199, 156, 110, 0.5); }
.class-icon.paladin { border: 2px solid rgba(245, 140, 186, 0.5); }
.class-icon.hunter { border: 2px solid rgba(171, 212, 115, 0.5); }
.class-icon.rogue { border: 2px solid rgba(255, 245, 105, 0.5); }
.class-icon.priest { border: 2px solid rgba(255, 255, 255, 0.5); }
.class-icon.death-knight,
.class-icon.deathknight,
.class-icon.chevalier-de-la-mort { border: 2px solid rgba(196, 31, 59, 0.5); }
.class-icon.shaman { border: 2px solid rgba(0, 112, 222, 0.5); }
.class-icon.mage { border: 2px solid rgba(64, 199, 235, 0.5); }
.class-icon.warlock { border: 2px solid rgba(135, 135, 237, 0.5); }
.class-icon.monk { border: 2px solid rgba(0, 255, 150, 0.5); }
.class-icon.druid { border: 2px solid rgba(255, 125, 10, 0.5); }
.class-icon.demon-hunter,
.class-icon.demonhunter { border: 2px solid rgba(163, 48, 201, 0.5); }
.class-icon.evoker { border: 2px solid rgba(51, 147, 127, 0.5); }