@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

    /* Police de marque du site : Metronic for Blizzard (fichier hébergé localement).
       Plage de poids large (300–800) déclarée volontairement : on ne dispose que d'une
       seule graisse ("Book") dans ce fichier, donc on évite ainsi que le navigateur ne
       tente de fabriquer un faux gras quand un poids plus élevé est demandé ailleurs. */
    @font-face {
      font-family: 'Metronic for Blizzard';
      src: url('assets/fonts/metronic-for-blizzard.woff2') format('woff2'),
           url('assets/fonts/metronic-for-blizzard.woff') format('woff');
      font-weight: 300 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Metronic for Blizzard';
      src: url('assets/fonts/metronic-for-blizzard-bold.woff2') format('woff2'),
           url('assets/fonts/metronic-for-blizzard-bold.woff') format('woff');
      font-weight: 600 900;
      font-style: normal;
      font-display: swap;
    }

    /* ── HotS Palette (Nexus Theme) ── */
    :root {
      --bg-deep: #0d0a26;
      --bg-0: #131238;
      --bg-1: #191642;
      --bg-2: #201c50;
      --bg-3: #29245e;
      --bg-4: #332c6e;

      --gold: #f0b429;
      --gold-bright: #ffd873;
      --gold-dim: #a67c00;
      --gold-glow: rgba(240, 180, 41, 0.25);
      --gold-border: rgba(240, 180, 41, 0.5);
      --gold-soft: rgba(240, 180, 41, 0.08);

      --blue: #e2d8ff;
      --blue-bright: #f2ecff;
      --blue-glow: rgba(226, 216, 255, 0.25);
      --blue-soft: rgba(226, 216, 255, 0.05);
      --blue-border: rgba(226, 216, 255, 0.35);
      --blue-border-hover: rgba(226, 216, 255, 0.8);

      --text: #e0e6ed;
      --text-bright: #ffffff;
      --text-dim: #9aa5b5;
      --text-muted: #5c7a9a;

      --glass: linear-gradient(180deg, rgba(255 255 255 / .02), transparent);
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
      --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.95);
      
      --hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

      --radius-sm: 4px;
      --radius-md: 6px;
      --radius-lg: 8px;

      --t: 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
      --content-max: 1440px;
    }

    /* ── Reset ── */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'Metronic for Blizzard', 'Inter', system-ui, sans-serif;
      color: var(--text);
      background: var(--bg-deep);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      width: 100%;
      overflow-x: clip; /* Remplacement de hidden par clip pour autoriser la barre flottante */
    }

    /* ── Nexus Background Effect (OPTIMIZED) ── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 80% at 50% -20%, rgba(0, 229, 255, 0.12), transparent 60%),
        radial-gradient(ellipse 60% 60% at 10% 110%, rgba(176, 0, 255, 0.08), transparent 50%),
        radial-gradient(ellipse 60% 60% at 90% 110%, rgba(248, 183, 0, 0.08), transparent 50%),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 229, 255, 0.02) 2px, rgba(0, 229, 255, 0.02) 4px);
      pointer-events: none;
      z-index: 0;
      transform: translateZ(0);
      will-change: transform;
    }

    a { color: inherit; text-decoration: none; }
    button, input, select { font: inherit; color: inherit; }
    img { max-width: 100%; display: block; }
    ul { list-style: none; }

    /* ── Scrollbars ── */
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: var(--bg-deep); }
    ::-webkit-scrollbar-thumb { background: var(--blue-border); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--blue); }

  /* ── Layout (SAFE SIZING FOR MOBILE) ── */
    .page {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: var(--content-max);
      padding: 0 16px;
      margin: 16px auto 48px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      box-sizing: border-box;
    }

    /* ── Shared UI Panel ── */
    .panel {
      background: linear-gradient(180deg, rgba(17, 25, 41, 0.98), rgba(13, 19, 31, 1));
      border: 1px solid var(--blue-border);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      contain: paint;
      width: 100%;
      box-sizing: border-box;
    }

    /* ═══════════════════════════════
       HEADER
       ═══════════════════════════════ */
    .topbar {
      display: flex !important;
      position: relative;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 28px 24px;
      border-bottom: 2px solid var(--gold-dim);
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }

    /* Rattache visuellement la barre d'outils juste sous le header (annule le gap du .page),
       sans les envelopper dans un conteneur commun : le sticky de .toolbar doit rester
       relatif à .page (sinon il ne peut coller que dans les limites de son parent direct). */
    .topbar + .toolbar {
      margin-top: -16px;
      border-top: none;
      border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    }

    .home-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border: 1px solid var(--blue-border);
      border-radius: 4px;
      color: var(--blue);
      background: rgba(0, 229, 255, 0.05);
      text-decoration: none;
      transition: all var(--t);
      flex-shrink: 0;
    }

    .home-btn svg { width: 22px; height: 22px; }

    .home-btn:hover {
      color: var(--blue-bright);
      border-color: var(--blue-bright);
      background: rgba(0, 229, 255, 0.12);
      box-shadow: 0 0 12px var(--blue-glow);
    }

    .brand-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .eyebrow, .filter-chip, .role-badge, .card-head, .talent-level, .build-tab, .guide-video-kicker, .youtube-badge {
      font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 700;
    }

    .site-title {
      font-family: 'Metronic for Blizzard', 'Rajdhani', serif;
      font-size: clamp(30px, 5vw, 56px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: .02em;
      text-transform: uppercase;
      background: linear-gradient(to bottom, #fff, var(--gold-bright), var(--gold));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 10px rgba(248, 183, 0, 0.3));
      transform: translateZ(0);
    }

    .site-logo-img {
      display: block;
      max-height: 72px;
      width: auto;
      max-width: 100%;
    }

    .header-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .header-nav-link {
      display: inline-flex;
      align-items: center;
      height: 34px;
      padding: 0 18px;
      font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 700;
      font-size: 14px;
      color: var(--text-bright);
      text-decoration: none;
      background: rgba(0, 229, 255, 0.08);
      border: 1px solid var(--blue-border);
      border-radius: 2px;
      transition: all var(--t);
    }

    .header-nav-link:hover {
      color: var(--gold-bright);
      background: rgba(248, 183, 0, 0.12);
      border-color: var(--gold-border);
      box-shadow: 0 0 10px var(--gold-glow);
    }

    /* ── Header Actions (Lang switcher, bottom-right) ── */
    .header-actions {
      position: absolute;
      right: 16px;
      bottom: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    /* ── Social links (icônes seules, bottom-left) ── */
    .socials {
      position: absolute;
      left: 16px;
      bottom: 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      color: var(--text-dim);
      cursor: pointer;
      transition: color var(--t), text-shadow var(--t), transform var(--t);
    }
    .social-link:hover {
      color: var(--blue-bright);
      text-shadow: 0 0 10px var(--blue-glow);
      transform: translateY(-1px);
    }
    .social-link svg { width: 20px; height: 20px; }
    .social-link span { display: none; }

    /* ── Shared button ── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 28px;
      padding: 0 12px;
      border-radius: 2px;
      border: 1px solid var(--blue-border);
      background: var(--blue-soft);
      font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      transition: all var(--t);
    }
    .btn:hover {
      background: rgba(0, 229, 255, 0.15);
      border-color: var(--blue);
      color: var(--blue-bright);
      box-shadow: 0 0 10px var(--blue-glow);
    }

    /* ═══════════════════════════════
       TOOLBAR
       ═══════════════════════════════ */
    .toolbar {
      padding: 16px;
      display: grid;
      gap: 12px;
      position: -webkit-sticky;
      position: sticky;
      top: 16px;
      z-index: 50;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    .toolbar-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

    .search-wrap { position: relative; flex: 1 1 200px; min-width: 0; width: 100%; }

    .search {
      width: 100%;
      height: 44px;
      padding: 0 14px 0 44px;
      border-radius: 2px;
      border: 1px solid var(--blue-border);
      border-bottom: 2px solid var(--blue-border);
      background: rgba(0, 0, 0, 0.4);
      color: var(--text-bright);
      outline: none;
      transition: all var(--t);
      font-size: 16px; 
      font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
      font-weight: 600;
      letter-spacing: 0.05em;
      box-sizing: border-box;
    }
    .search::placeholder { color: var(--text-muted); text-transform: uppercase; }
    .search:focus {
      border-color: var(--blue);
      background: rgba(0, 229, 255, 0.05);
      box-shadow: 0 4px 15px var(--blue-glow);
    }

    .search-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      color: var(--blue);
      pointer-events: none;
    }

    .counter {
      height: 44px;
      padding: 0 20px;
      border-radius: 2px;
      border: 1px solid var(--blue-border);
      background: rgba(0, 0, 0, 0.4);
      display: inline-flex;
      align-items: center;
      font-size: 14px;
      color: var(--blue-bright);
      white-space: nowrap;
    }

    /* ── Role filters ── */
    .filters {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
      width: 100%;
    }
    .filters::-webkit-scrollbar { display: none; }

    .filter-chip {
      display: inline-flex;
      align-items: center;
      height: 40px; 
      padding: 0 24px;
      border-radius: 0;
      clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
      border: none;
      background: rgba(0, 229, 255, 0.1);
      border-bottom: 2px solid var(--blue-border);
      font-size: 14px;
      color: var(--text-dim);
      cursor: pointer;
      transition: all var(--t);
      white-space: nowrap;
    }
    .filter-chip:hover {
      background: rgba(0, 229, 255, 0.25);
      border-bottom-color: var(--blue-bright);
      color: var(--text-bright);
    }
    .filter-chip.active {
      background: linear-gradient(180deg, rgba(248, 183, 0, 0.1), rgba(248, 183, 0, 0.25));
      border-bottom: 2px solid var(--gold-bright);
      color: var(--gold-bright);
      text-shadow: 0 0 8px var(--gold-glow);
    }

    /* ═══════════════════════════════
       MAIN LAYOUT
       ═══════════════════════════════ */
    .layout {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 16px;
      align-items: start;
      width: 100%;
      min-width: 0;
    }

    .sidebar { padding: 18px; }
    .content { padding: 24px; position: relative; z-index: 5; min-width: 0; }

    .section-title {
      font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
      text-transform: uppercase;
      font-size: 24px;
      font-weight: 700;
      color: var(--gold-bright);
      letter-spacing: 0.05em;
      border-bottom: 1px solid var(--gold-border);
      padding-bottom: 6px;
      margin-bottom: 10px;
    }

    .section-note {
      color: var(--text-dim);
      font-size: 13px;
      line-height: 1.5;
      margin-bottom: 16px;
    }

    /* ── Hero list ── */
   .hero-list { display: grid; gap: 6px; width: 100%; }

    .hero-link {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 8px;
      border-radius: 2px;
      border: 1px solid transparent;
      border-left: 3px solid transparent;
      background: rgba(16, 22, 34, 0.6);
      text-align: left;
      cursor: pointer;
      transition: all var(--t);
      box-sizing: border-box;
    }
    .hero-link:hover {
      background: linear-gradient(90deg, rgba(0, 229, 255, 0.1), transparent);
      border-left-color: var(--blue-bright);
    }
    .hero-link.active {
      background: linear-gradient(90deg, rgba(248, 183, 0, 0.15), rgba(248, 183, 0, 0.02));
      border-color: var(--gold-border);
      border-left: 4px solid var(--gold-bright);
      box-shadow: inset 0 0 15px rgba(248, 183, 0, 0.05);
    }

   /* --- LE PORTRAIT (Le conteneur qui sert de bordure) --- */
.hero-link .portrait {
  width: 64px !important;  /* Taille légèrement augmentée pour la lisibilité */
  height: 64px !important;
  flex-shrink: 0;
  background: var(--blue-border); /* Couleur bordure par défaut (bleu) */
  clip-path: var(--hex-clip);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
  padding: 0 !important; /* On enlève le padding qui casse l'angle */
  position: relative;
}

/* --- L'IMAGE À L'INTÉRIEUR --- */
/* --- LE PORTRAIT (Le conteneur) --- */
.hero-link .portrait {
  width: 64px !important;
  height: 64px !important;
  flex-shrink: 0;
  background: var(--blue-border);
  clip-path: var(--hex-clip);
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
  position: relative;

  /* FIX ALIASING & BLUR : Force le rendu haute qualité en permanence */
  transform: translateZ(0); 
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

/* --- L'IMAGE (L'intérieur) --- */
.hero-link .portrait img {
  width: calc(100% - 4px); 
  height: calc(100% - 4px);
  object-fit: cover;
  clip-path: var(--hex-clip);
  background: var(--bg-deep);
  display: block;

  /* FIX ALIASING : Empêche l'effet escalier */
  image-rendering: -webkit-optimize-contrast; /* Pour la netteté */
  image-rendering: auto;
  
  /* FIX BLUR : Pour que l'image reste nette lors des scale(1.05) */
  transform: scale(1.001); /* Un micro-zoom force le moteur de rendu à rester en mode "précis" */
}

/* --- ÉTAT ACTIF (Rehgar sélectionné) --- */
.hero-link.active .portrait {
  background: var(--gold-bright) !important;
  filter: drop-shadow(0 0 8px var(--gold-glow));
  
  /* Utilisation d'un scale entier ou très proche pour éviter le flou */
  transform: scale(1.05) translateZ(0); 
}
    
/* --- ÉTAT ACTIF (Rehgar sélectionné) --- */
.hero-link.active .portrait {
  background: var(--gold-bright) !important; /* Bordure dorée */
  filter: drop-shadow(0 0 8px var(--gold-glow));
  transform: scale(1.05);
}

/* --- AJUSTEMENT VUE GRILLE (Pour ton test) --- */
.hero-list .hero-link {
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: center !important;
  gap: 8px !important;
}

.hero-list .hero-name {
  margin-top: 4px;
  font-size: 12px !important;
  color: var(--text-bright);
}

    .portrait.fallback::after, .detail-portrait.fallback::after, .talent-icon.fallback::after, .spell-icon.fallback::after {
      content: attr(data-fallback);
      width: 100%; height: 100%;
      display: grid; place-items: center;
      font-size: 14px; font-weight: 700;
      font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
      color: var(--gold-bright);
      background: var(--bg-3);
      clip-path: inherit;
    }

    .hero-meta { min-width: 0; }
    .hero-name { font-size: 15px; font-weight: 400; color: var(--text-bright); line-height: 1.2; font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif; letter-spacing: 0.05em; text-transform: uppercase; }
    .hero-role { font-size: 12px; color: var(--blue); font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; }

    .empty-state {
      padding: 32px;
      border-radius: var(--radius-sm);
      border: 1px dashed var(--blue-border);
      background: rgba(0, 229, 255, 0.02);
      color: var(--blue-bright);
      font-size: 14px;
      text-align: center;
      font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    /* ═══════════════════════════════
       HERO DETAIL
       ═══════════════════════════════ */
 .hero-header {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 24px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--blue-border);
      margin-bottom: 20px;
    }

/* --- GRAND PORTRAIT (L'encadré doré) --- */
.detail-portrait {
  width: 120px; 
  height: 120px; 
  /* Dégradé métallique HotS */
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dim));
  clip-path: var(--hex-clip);
  
  /* On remplace le padding par un alignement flex */
  padding: 0 !important; 
  display: flex !important;
  align-items: center;
  justify-content: center;
  
  filter: drop-shadow(0 0 15px var(--gold-glow));
}

/* --- L'IMAGE DÉTAIL --- */
.detail-portrait img { 
  /* Pour une bordure de 3px de chaque côté : 100% - 6px */
  width: calc(100% - 6px); 
  height: calc(100% - 6px); 
  object-fit: cover; 
  clip-path: var(--hex-clip);
  background: var(--bg-deep); /* Fond pour éviter les fuites de pixels */
}
    .detail-title {
      font-family: 'Metronic for Blizzard', 'Rajdhani', serif;
      font-size: clamp(28px, 5vw, 48px);
      font-weight: 900;
      line-height: 1;
      color: var(--text-bright);
      text-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 0 20px var(--blue-glow);
    }

    .role-badge {
      display: inline-flex;
      align-items: center;
      height: 28px;
      padding: 0 16px;
      margin-top: 12px;
      border-radius: 0;
      clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
      background: rgba(248, 183, 0, 0.15);
      border-bottom: 2px solid var(--gold);
      color: var(--gold-bright);
      font-size: 12px;
    }

    .detail-headline {
      margin-top: 12px;
      font-size: 14px;
      color: var(--text-dim);
      line-height: 1.6;
    }

    /* ── Meta cards ── */
    .meta-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 16px;
      margin-bottom: 24px;
      width: 100%;
      min-width: 0;
    }

    .card {
      border-radius: var(--radius-sm);
      border: 1px solid var(--blue-border);
      background: linear-gradient(180deg, rgba(20, 28, 44, 0.8), rgba(12, 18, 28, 0.9));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 5px 15px rgba(0,0,0,0.5);
      min-width: 0;
      width: 100%;
    }

    .card-head {
      padding: 12px 16px;
      border-bottom: 1px solid var(--blue-border);
      background: linear-gradient(90deg, rgba(0, 229, 255, 0.15), transparent);
      color: var(--blue-bright);
      font-size: 14px;
      text-shadow: 0 0 8px var(--blue-glow);
    }

    .card-body { 
      padding: 16px; 
      min-width: 0; 
      width: 100%; 
      box-sizing: border-box; 
    }
    .card-body p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.6; }

    /* ── Spells (HotS Square Look) ── */
    .spell-strip {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 10px;
      margin-top: 16px;
      width: 100%;
    }

    .spell-item { display: grid; justify-items: center; gap: 8px; min-width: 0; }

    .spell-trigger {
      width: 58px;
      height: 58px;
      border-radius: 4px;
      border: 2px solid var(--blue-border);
      background: var(--bg-deep);
      padding: 0;
      cursor: help;
      position: relative;
      transition: all var(--t);
      box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
      flex-shrink: 0;
    }
    .spell-trigger:hover, .spell-trigger:focus-visible {
      border-color: var(--gold-bright);
      box-shadow: 0 0 15px var(--gold-glow), inset 0 0 10px var(--gold-glow);
      outline: none;
      transform: translateY(-2px);
    }

    .spell-icon {
      width: 100%; height: 100%;
      border-radius: 2px;
      overflow: hidden;
      display: grid; place-items: center;
    }
    .spell-icon img { width: 100%; height: 100%; object-fit: cover; }

    .spell-key {
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      min-width: 24px;
      height: 20px;
      padding: 0 6px;
      border-radius: 2px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--gold-bright);
      background: #000;
      border: 1px solid var(--gold);
      pointer-events: none;
      box-shadow: 0 2px 4px rgba(0,0,0,0.8);
    }

    .spell-name { 
      font-size: 13px; 
      font-weight: 700; 
      color: var(--text-bright); 
      text-align: center; 
      text-transform: uppercase; 
      letter-spacing: 0.1em; 
      font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
      text-shadow: 0 2px 5px rgba(0,0,0,1), 0 0 10px rgba(0, 229, 255, 0.4);
    }

    /* ── Floating tooltip (Nexus Style) ── */
    .spell-portal { position: fixed; inset: 0; pointer-events: none; z-index: 30000; }

    .floating-tooltip {
      position: fixed;
      width: min(320px, calc(100vw - 24px));
      padding: 16px;
      border-radius: 2px;
      background: linear-gradient(180deg, #101622 0%, #0a0e17 100%);
      color: var(--text);
      border: 1px solid var(--gold-dim);
      box-shadow: 0 10px 40px rgba(0,0,0,0.9), 0 0 20px rgba(248, 183, 0, 0.1);
      z-index: 30001;
    }
    .floating-tooltip::after {
      content: ''; position: absolute; left: var(--arrow-left, 50%); transform: translateX(-50%);
      border-left: 8px solid transparent; border-right: 8px solid transparent;
    }
    .floating-tooltip[data-placement="top"]::after { top: 100%; border-top: 8px solid var(--gold-dim); }
    .floating-tooltip[data-placement="bottom"]::after { bottom: 100%; border-bottom: 8px solid var(--gold-dim); }

    .floating-tooltip-title {
      font-family: 'Metronic for Blizzard', 'Cinzel', serif;
      font-size: 16px;
      font-weight: 700;
      color: var(--gold-bright);
      border-bottom: 1px solid rgba(248, 183, 0, 0.2);
      padding-bottom: 6px;
      margin-bottom: 8px;
      text-shadow: 0 0 5px rgba(248, 183, 0, 0.3);
    }
    .floating-tooltip-body { font-size: 13px; line-height: 1.6; color: var(--text-dim); }
    .floating-demo { width: 100%; margin-top: 12px; border-radius: 2px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; border: 1px solid var(--blue-border); }
    .floating-demo iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }

    /* ═══════════════════════════════
       BUILD SECTION
       ═══════════════════════════════ */
    .build-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }

    .build-tab {
      position: relative;
      overflow: visible; 
      display: inline-flex;
      align-items: center;
      height: 40px;
      padding: 0 24px;
      border-radius: 0;
      clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
      border: none;
      background: rgba(0, 229, 255, 0.08);
      border-bottom: 2px solid var(--blue-border);
      font-size: 14px;
      color: var(--text-dim);
      cursor: pointer;
      transition: all var(--t);
    }
/* Ajustement spécifique pour le badge Nouveau quand il est dans un onglet */
.build-tab .new-badge {
    bottom: -8px;       /* Positionné légèrement en dessous de la bordure basse */
    font-size: 9px;     /* Légèrement plus petit pour l'onglet */
    padding: 1px 5px;
    white-space: nowrap;
    z-index: 10;        /* Passe au dessus de tout */
}
    .build-tab:hover { background: rgba(0, 229, 255, 0.2); border-bottom-color: var(--blue-bright); color: var(--text-bright); }
    .build-tab.active {
      background: linear-gradient(180deg, rgba(248, 183, 0, 0.1), rgba(248, 183, 0, 0.25));
      border-bottom: 3px solid var(--gold-bright);
      color: var(--gold-bright);
      text-shadow: 0 0 8px var(--gold-glow);
    }

    .build-summary {
      margin-bottom: 20px;
      padding: 16px 20px;
      border-radius: 2px;
      border-left: 4px solid var(--gold-bright);
      background: linear-gradient(90deg, rgba(248, 183, 0, 0.15), rgba(248, 183, 0, 0.02));
      color: var(--text-bright);
      font-size: 14px;
      line-height: 1.6;
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
      min-width: 0;
      width: 100%;
      box-sizing: border-box;
    }

    .bullet-list { padding-left: 20px; list-style: square; display: grid; gap: 8px; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
    .bullet-list li::marker { color: var(--blue-bright); }

    /* ── Talent board (Hexagon Talents) ── */
    .talent-board-wrap { margin-bottom: 24px; overflow: hidden; width: 100%; min-width: 0; }

    .talent-board-scroller {
      position: relative;
      overflow-x: auto; overflow-y: visible;
      padding: 24px 4px 12px;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
      width: 100%;
    }
    .talent-board-scroller::-webkit-scrollbar { display: none; }
    .talent-board-scroller.is-centered { overflow-x: hidden; }

    /* Ligne décorative : positionnée par rapport au scroller (largeur fixe, 100%) et
       non plus par rapport au tableau lui-même (dont la largeur "fit-content" est calculée
       en même temps) — évite une dépendance circulaire qui perturbait le calcul sur Firefox. */
    .talent-board-scroller::before {
      content: ''; position: absolute;
      left: 60px; right: 60px; top: 98px; height: 3px;
      background: linear-gradient(90deg, transparent, var(--blue-bright), transparent);
      z-index: 0; pointer-events: none;
      box-shadow: 0 0 10px var(--blue-glow);
    }

    .talent-board-track {
      display: flex; gap: 12px; width: max-content; min-width: 100%; position: relative; align-items: flex-start; padding-inline: 4px;
    }
    .talent-board-scroller.is-centered .talent-board-track { width: fit-content; min-width: 0; margin-inline: auto; }

.talent-card {
      flex: 0 0 120px;
      min-width: 0;
      max-width: 120px;
      overflow: hidden;
      border: 1px solid var(--blue-border);
      border-radius: 4px;
      background: linear-gradient(180deg, rgba(20, 28, 44, 0.95), rgba(12, 18, 28, 0.98));
      padding: 12px 10px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px; text-align: center; position: relative; z-index: 1;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 15px rgba(0,0,0,0.6);
      height: 100%;
    }

    .talent-alternatives {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: center;
      margin-top: auto; 
      padding-top: 8px;
      border-top: 1px dashed rgba(0, 229, 255, 0.2);
      width: 100%;
    }
    .talent-alternatives-label {
      width: 100%;
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
      font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
      margin-bottom: 2px;
    }
    .talent-trigger.alt-talent {
      width: 30px;
      height: 30px;
      background: rgba(0, 229, 255, 0.2);
    }
    .talent-trigger.alt-talent:hover, .talent-trigger.alt-talent:focus-visible {
      background: var(--gold-bright);
      transform: scale(1.2);
    }

    .talent-level {
      height: 24px; padding: 0 12px;
      clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
      background: rgba(0, 229, 255, 0.15);
      color: var(--blue-bright);
      font-size: 13px;
      display: inline-flex; align-items: center; justify-content: center;
      position: relative; z-index: 2;
      border-bottom: 2px solid var(--blue);
    }

    .talent-trigger {
  width: 56px;
  height: 56px;
  background: var(--blue-border);
  clip-path: var(--hex-clip);
  padding: 2px;
  border: none;
  border-radius: 0;
  cursor: help;
  position: relative;
  transition: all var(--t);
  touch-action: manipulation;
}
    .talent-icon { width: 100%; height: 100%; background: var(--bg-deep); clip-path: var(--hex-clip); display: grid; place-items: center; }
    .talent-icon img { width: 100%; height: 100%; object-fit: cover; }
    
    .talent-trigger:hover, .talent-trigger:focus-visible {
      background: var(--gold-bright);
      transform: scale(1.15);
      outline: none;
      filter: drop-shadow(0 0 12px var(--gold-glow));
    }

    .talent-title-card { font-size: 13px; font-weight: 400; color: var(--text-bright); line-height: 1.3; font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif; letter-spacing: 0.05em; text-transform: uppercase; }

    /* ── Build Code ── */
    .build-code-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 24px;
      width: 100%;
    }
    .build-code-title {
      font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
      font-size: 13px;
      font-weight: 700;
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 8px;
      text-shadow: 0 0 5px rgba(248, 183, 0, 0.2);
      text-align: center;
    }
    .build-code-box {
      background: rgba(8, 12, 20, 0.8);
      border: 1px solid var(--blue-border);
      border-radius: 4px;
      padding: 10px 24px;
      color: var(--blue-bright);
      font-family: monospace;
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 4px 10px rgba(0,0,0,0.4);
      user-select: all;
      cursor: copy;
      transition: all var(--t);
      word-break: break-all;
      max-width: 100%;
      box-sizing: border-box;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .build-code-box:hover {
      border-color: var(--blue-bright);
      box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 4px 15px var(--blue-glow);
    }
    .build-code-box.is-copied {
  color: var(--gold-bright);
  border-color: var(--gold-bright);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 4px 15px var(--gold-glow);
}

.build-code-box.is-copy-error {
  color: #ff8f8f;
  border-color: rgba(255, 80, 80, 0.7);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 4px 15px rgba(255, 80, 80, 0.25);
}

    /* ── Videos ── */
    .videos-layout { 
      display: grid; 
      grid-template-columns: minmax(0, 1fr); 
      gap: 16px; 
      margin-bottom: 24px; 
      align-items: start; 
      width: 100%; 
      min-width: 0;
    }
    
    @media (min-width: 1061px) {
      .videos-layout.with-guide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    }
    
    .video-group { min-width: 0; width: 100%; }
    
    .combo-grid { 
      display: grid; 
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
      gap: 12px; 
      width: 100%; 
      min-width: 0;
    }

    .guide-video-card, .youtube-card {
      width: 100%; padding: 0;
      border: 1px solid var(--blue-border);
      border-radius: 4px;
      overflow: hidden;
      background: var(--bg-2);
      display: flex; flex-direction: column; text-align: left; color: inherit; cursor: pointer;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      box-sizing: border-box;
      max-width: 100%;
      min-width: 0;
    }
    .guide-video-card:hover, .youtube-card:hover, .youtube-card.is-previewing {
      border-color: var(--gold-bright);
      transform: translateY(-4px);
      box-shadow: 0 10px 30px rgba(248, 183, 0, 0.2), inset 0 0 15px rgba(248, 183, 0, 0.1);
      outline: none;
    }

    .guide-video-media, .youtube-thumb { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; width: 100%; flex-shrink: 0; }
    .guide-video-media img, .youtube-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; max-width: 100%; }
    .guide-video-card:hover .guide-video-media img, .youtube-card:hover .youtube-thumb img { transform: scale(1.05); }

    .guide-video-content { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
    .guide-video-kicker { font-size: 12px; color: var(--gold); }
    .guide-video-title { font-size: 15px; font-weight: 700; color: var(--text-bright); font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; overflow-wrap: break-word; }
    .guide-video-desc { color: var(--text-dim); font-size: 13px; line-height: 1.5; overflow-wrap: break-word; }
    .guide-video-cta { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--gold-bright); font-weight: 700; font-size: 12px; text-transform: uppercase; font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif; }

    .youtube-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 12, 20, 0.8)); z-index: 1; pointer-events: none; }
    
    .youtube-preview { position: absolute; inset: 0; z-index: 3; display: none; pointer-events: none; background: #000; }
    .youtube-preview iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
    .youtube-card.is-previewing .youtube-preview { display: block; }
    .youtube-card.is-previewing .youtube-thumb img, .youtube-card.is-previewing .youtube-play { opacity: 0; }
    .youtube-card.is-previewing .youtube-thumb::after { opacity: 0; }

    .youtube-play {
      position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
      width: 56px; height: 40px; border-radius: 4px;
      background: rgba(0, 229, 255, 0.85); box-shadow: 0 4px 15px rgba(0,0,0,0.6);
      z-index: 2; display: grid; place-items: center; transition: all var(--t);
    }
    .youtube-play::before { content: ''; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 16px solid #000; margin-left: 4px; }
    .youtube-card:hover .youtube-play { background: var(--gold-bright); transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 20px var(--gold-glow); }

    .youtube-badge {
      position: absolute; left: 10px; top: 10px; z-index: 4; display: inline-flex; align-items: center;
      height: 22px; padding: 0 10px; border-radius: 2px;
      background: rgba(0,0,0,0.8); border: 1px solid var(--blue-bright); color: var(--blue-bright);
      font-size: 10px; backdrop-filter: blur(4px);
    }

    .youtube-unavailable { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center; color: var(--text-muted); font-size: 12px; background: rgba(8, 12, 20, 0.8); padding: 12px; text-transform: uppercase; font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;}

    .combo-info { padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; flex-grow: 1; }
    .combo-title { font-size: 14px; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; overflow-wrap: break-word; font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; }
    .combo-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; overflow-wrap: break-word; }

    /* ---------- Carrousel de vidéos de build (survol / appui pour lire) ---------- */
    .combo-carousel { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
    .combo-slide { display: none; }
    .combo-slide.is-active { display: block; }
    .combo-slide-title {
      font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 0.06em;
      font-size: 15px; font-weight: 700; color: var(--gold); text-align: center;
      margin-bottom: 10px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .combo-stage {
      position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000;
      border: 1px solid var(--blue-border); border-radius: var(--radius-lg);
      overflow: hidden; cursor: default; pointer-events: none;
    }
    .combo-stage[data-empty] { pointer-events: none; }
    .combo-media, .combo-poster, .combo-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .combo-frame { z-index: 2; display: none; background: #000; }
    .combo-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
    .combo-stage.is-playing .combo-frame { display: block; }
    .combo-stage.is-playing .combo-poster { opacity: 0; }
    .combo-poster { transition: opacity .25s ease, transform .4s ease; }

    /* Les vidéos guide restent des liens cliquables vers la chaîne du créateur,
       contrairement aux vidéos de build (survol/appui uniquement, sans clic). */
    .combo-stage.guide-stage-link { pointer-events: auto; cursor: pointer; text-decoration: none; display: block; }
    .combo-stage.guide-stage-link:hover .combo-poster { transform: scale(1.05); }
    .video-duration-badge {
      position: absolute; bottom: 6px; right: 6px; z-index: 3;
      background: rgba(8, 9, 12, 0.85); color: #fff; font-size: 12px; font-weight: 600;
      padding: 2px 6px; border-radius: 4px; line-height: 1.4; font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
    }

    .combo-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 38px; height: 38px; border-radius: 50%; z-index: 5;
      background: rgba(8, 12, 20, 0.75); border: 1px solid var(--gold-border);
      color: var(--gold-bright); font-size: 14px; display: grid; place-items: center;
      cursor: pointer; transition: all var(--t); backdrop-filter: blur(4px);
    }
    .combo-nav:hover { background: var(--gold); color: #08090c; box-shadow: 0 0 18px var(--gold-glow); }
    .combo-nav.prev { left: -8px; }
    .combo-nav.next { right: -8px; }

    .combo-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
    .combo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); cursor: pointer; transition: all var(--t); }
    .combo-dot.is-active { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); transform: scale(1.2); }

    /* ── Lightbox ── */
    .video-overlay {
      display: none; position: fixed; inset: 0; background: rgba(8, 12, 20, 0.95);
      z-index: 9999; place-items: center; cursor: zoom-out; padding: 20px; backdrop-filter: blur(12px);
    }
    .video-overlay.active { display: grid; }

    .video-modal { width: min(1100px, 94vw); position: relative; z-index: 2; cursor: default; }
    .video-frame {
      width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #000;
      box-shadow: 0 20px 80px rgba(0,0,0,1), 0 0 30px var(--blue-glow); border: 1px solid var(--blue-border);
    }
    .video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

    .overlay-status { position: absolute; inset: 0; display: none; place-items: center; color: var(--text-bright); font-size: 14px; z-index: 1; font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; }
    .video-overlay.loading .overlay-status, .video-overlay.error .overlay-status { display: grid; }

    .overlay-status-box { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; border: 1px solid var(--blue-border); background: var(--bg-2); border-radius: 2px; }

    .overlay-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(0, 229, 255, 0.2); border-top-color: var(--blue-bright); animation: spin .8s linear infinite; }
    .video-overlay.error .overlay-spinner { display: none; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .close-overlay {
      position: absolute; top: 20px; right: 20px; width: 50px; height: 50px;
      background: rgba(0, 0, 0, 0.5); color: var(--text-bright); border-radius: 2px;
      display: grid; place-items: center; font-size: 32px; font-family: sans-serif;
      cursor: pointer; transition: all .2s; z-index: 10001; border: 1px solid var(--blue-border);
    }
    .close-overlay:hover { background: rgba(0, 229, 255, 0.2); border-color: var(--blue-bright); color: var(--blue-bright); box-shadow: 0 0 15px var(--blue-glow); }

    .hero-name-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      gap: 10px;
    }
    .build-count-badge {
      font-size: 10px;
      font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
      font-weight: 700;
      color: var(--blue-bright);
      background: rgba(0, 229, 255, 0.1);
      border: 1px solid var(--blue-border);
      padding: 1px 6px;
      border-radius: 4px;
      white-space: nowrap;
    }
    .hero-link.active .build-count-badge {
      color: var(--gold-bright);
      border-color: var(--gold-border);
      background: rgba(248, 183, 0, 0.1);
    }

    /* ═══════════════════════════════
       RESPONSIVE & MOBILE OPTIMIZATIONS
       ═══════════════════════════════ */
    @media (max-width: 1180px) {
      .topbar { flex-direction: column; }
      .layout { grid-template-columns: minmax(0, 1fr); width: 100%; }

      .hero-list {
        max-height: 300px;
        overflow-y: auto;
        padding-right: 8px;
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid var(--blue-border);
        border-radius: var(--radius-sm);
        padding: 8px;
      }
    }

    @media (max-width: 820px) {
      .meta-grid { grid-template-columns: minmax(0, 1fr); width: 100%; }
      .video-modal { width: 100%; }
    }

@media (max-width: 640px) {
      .combo-nav.prev { left: 6px; }
      .combo-nav.next { right: 6px; }
      .combo-carousel { max-width: 100%; }
      .page { width: 100%; max-width: 100%; padding: 0 12px; margin: 8px auto 16px; box-sizing: border-box; }
      .topbar, .toolbar, .sidebar, .content { padding: 14px; width: 100%; box-sizing: border-box; }
      
      .toolbar { top: 8px; } /* Ajuste l'espacement flottant sur petit écran */
      
      .topbar { text-align: center; }
      .home-btn { width: 38px; height: 38px; }
      .home-btn svg { width: 19px; height: 19px; }
      .brand-block { justify-items: center; text-align: center; }
      .site-title { font-size: clamp(28px, 8vw, 36px); text-align: center; }
      .header-actions { justify-content: center; flex-direction: column-reverse; align-items: center; width: 100%; }
      .socials { justify-content: center; width: 100%; }
      
      .hero-header { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; }
      .detail-portrait { width: 100px; height: 100px; margin: 0 auto; }
      .detail-title { font-size: 28px; }
      .role-badge { margin: 12px auto 0 auto; }
      
      .social-link { flex: 1 1 calc(50% - 4px); justify-content: center; }
      
      .spell-strip { 
        display: flex; 
        flex-wrap: nowrap; 
        overflow-x: auto; 
        gap: 16px; 
        justify-content: flex-start; 
        padding: 4px 4px 20px 4px; 
        scrollbar-width: thin !important;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        box-sizing: border-box;
      }
      .spell-strip::-webkit-scrollbar { display: block !important; height: 4px; }
      .spell-strip::-webkit-scrollbar-thumb { background: var(--blue-bright); border-radius: 4px; }
      .spell-item { flex: 0 0 60px; min-width: 60px; }
      .spell-trigger { width: 50px; height: 50px; }
      
      .videos-layout { display: flex; flex-direction: column; width: 100%; }
      .videos-layout.with-guide { display: flex; flex-direction: column; width: 100%; }
      .combo-grid { display: flex; flex-direction: column; width: 100%; gap: 16px; }
      .guide-video-card, .youtube-card { width: 100%; max-width: 100%; box-sizing: border-box; }
      
      .build-tabs { flex-wrap: wrap; justify-content: center; }
      .build-tab { padding: 0 16px; font-size: 13px; height: 36px; }
      
      .talent-board-track { gap: 8px; }
      .talent-card { flex-basis: 104px; max-width: 104px; padding: 10px 8px 12px; }
      .talent-board-scroller::before { left: 52px; right: 52px; top: 96px; }
      .talent-board-scroller { scrollbar-width: thin !important; padding-bottom: 20px; }
      .talent-board-scroller::-webkit-scrollbar { display: block !important; height: 4px; }
      .talent-board-scroller::-webkit-scrollbar-thumb { background: var(--blue-bright); border-radius: 4px; }
      
      .guide-video-content, .combo-info { padding: 12px; }
      .guide-video-title, .combo-title { font-size: 14px; }
      .guide-video-desc, .combo-desc { font-size: 12px; }
      
      .youtube-play { width: 48px; height: 34px; }
      .close-overlay { top: 10px; right: 10px; }
    }

    @media (max-width: 520px) {
      .social-link { flex: 1 1 100%; }
    }

/* --- TEST VUE GRILLE (Avec nom au-dessus du portrait) --- */
.hero-list {
  display: grid !important;
  /* On élargit un peu les colonnes pour laisser de la place aux noms */
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; 
  gap: 16px 8px !important; /* Plus d'espace vertical entre les rangées */
  justify-items: center;
}

.hero-list .hero-link {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  
  /* L'astuce magique pour inverser l'ordre image/texte ! */
  display: flex !important;
  flex-direction: column-reverse !important; 
  align-items: center !important;
  gap: 4px !important;
}

/* On cache le rôle et le nombre de builds pour ne pas surcharger */
.hero-list .hero-role, 
.hero-list .build-count-badge {
  display: none !important;
}

/* On centre le nom et on l'empêche de déborder si c'est un nom très long */
.hero-list .hero-meta {
  width: 100%;
  text-align: center;
}

.hero-list .hero-name-row {
  justify-content: center !important;
  width: 100%;
}

.hero-list .hero-name {
  font-size: 13px !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Rajoute "..." si le nom est trop long (ex: Deckard Cain) */
  max-width: 80px; 
}

/* Le portrait */
.hero-list .portrait {
  width: 60px !important;
  height: 60px !important;
}

.hero-list .hero-link:hover .portrait {
  transform: scale(1.1);
}

/* On retire l'effet de sélection "barre jaune" qui ne marche qu'en liste */
.hero-list .hero-link.active {
  box-shadow: none !important;
}
.hero-list .hero-link:hover .portrait {
  transform: scale(1.1);
}
/* --- DATE DE MISE A JOUR --- */
.build-date {
  font-size: 12px;
  color: var(--text-color, white);
  font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.build-date svg { 
  width: 14px; 
  height: 14px; 
  color: var(--gold-dim); 
}

/* ==========================================================================
   SÉLECTEUR DE LANGUE (Drapeaux - dans le header)
   ========================================================================== */
.lang-switcher {
    display: flex;
    gap: 8px;
}

.lang-btn {
    width: 26px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--blue-border);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t);
    border-radius: 2px;
    overflow: hidden;
    opacity: 0.8;
    flex-shrink: 0;
    text-decoration: none;
}

.lang-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lang-btn:hover {
    transform: scale(1.05);
    opacity: 1;
    border-color: var(--blue-bright);
    box-shadow: 0 0 10px var(--blue-glow);
}
.new-badge {
    position: absolute;
    bottom: -6px; /* Fait dépasser le badge légèrement en bas du portrait */
    left: 50%;
    transform: translateX(-50%); /* Permet de centrer parfaitement le badge */
    background-color: #1c7534;
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Ajoute une petite ombre pour le détacher de l'image */
    z-index: 5;
    pointer-events: none; /* Empêche le badge de bloquer le clic sur le portrait */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   BOUTON RETOUR EN HAUT
   ========================================================================== */
#backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: var(--bg-2);
    border: 1px solid var(--blue-border);
    color: var(--blue-bright);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* Apparaît quand on scrolle vers le bas */
#backToTop.is-visible {
    opacity: 1;
    visibility: visible;
}

#backToTop:hover {
    background: rgba(0, 229, 255, 0.15);
    border-color: var(--blue-bright);
    box-shadow: 0 0 15px var(--blue-glow);
    transform: translateY(-3px);
}
/* Nouveau conteneur pour permettre au badge de dépasser */
.build-tab-wrapper {
    position: relative;
    display: inline-block;
}

/* On s'assure que le badge sur l'onglet est bien au-dessus */
.build-tab-wrapper .new-badge {
    bottom: -10px; /* Ajustez cette valeur pour le descendre plus ou moins */
    z-index: 10;
    pointer-events: none; /* Évite de gêner le clic sur l'onglet */
}

/* Optionnel : ajuster légèrement la taille si besoin */
.build-tab-wrapper .new-badge {
    font-size: 0.55rem;
    padding: 2px 5px;
}
/* On crée une base commune pour les badges de liste */
.list-badge {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 5;
    pointer-events: none;
    white-space: nowrap;
}

/* Le badge Nouveau reste vert */
.new-badge {
    background-color: #1c7534;
}

/* Le badge Mis à jour sera bleu cyan pour le différencier */
.updated-badge {
    background-color: #0076a3; /* Un bleu sombre qui ressort bien */
}