@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, .site-update {
      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-nav-link.active {
      color: var(--gold-bright);
      background: linear-gradient(180deg, rgba(248, 183, 0, 0.1), rgba(248, 183, 0, 0.25));
      border-color: var(--gold-border);
      text-shadow: 0 0 8px var(--gold-glow);
    }

    /* ── Bandeau "Mise à jour du site" (header, sous la navigation) ── */
    /* Calé juste au-dessus des réseaux sociaux (eux-mêmes en absolu, bas-gauche) :
       16px du bas + 28px de hauteur d'icône + 8px d'écart = 52px. */
    /* La typographie (police, majuscules, graisse) vient de la règle partagée plus haut,
       comme les autres libellés du site. Ici on ne règle que la taille et les couleurs,
       reprises du cluster bas-gauche du header auquel ce bandeau appartient désormais.
       Le décalage à 20px aligne le texte sur le trait de l'icône Twitch et non sur le
       bord de son lien : l'icône fait 20px, centrée dans une zone cliquable de 28px. */
    .site-update {
      position: absolute;
      left: 20px;
      bottom: 52px;
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 2px 8px;
      max-width: calc(100% - 40px);
      font-size: 11px;
      color: var(--text-dim);
    }
    .site-update[hidden] { display: none; }
    .site-update-date { color: var(--text); white-space: nowrap; }

    /* ── 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);
}

    .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;
    }

    /* ── Minimap (page Cartes) ── */
    .bg-minimap-section {
      margin-bottom: 24px;
      text-align: center;
    }
    /* Simple conteneur de centrage : c'est la scène, en dessous, qui porte le cadre.
       Les points d'intérêt sont posés en pourcentage ; si le cadre était plus large
       que l'image (letterbox d'un object-fit), ils tomberaient tous à côté. */
    .bg-minimap-frame {
      line-height: 0;
    }
    .bg-minimap-stage {
      position: relative;
      display: inline-block;
      max-width: 100%;
      border: 1px solid var(--blue-border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: #000;
      box-shadow: var(--shadow);
    }
    .bg-minimap-stage img {
      display: block;
      width: auto;
      max-width: 100%;
      max-height: 520px;
    }
    .bg-minimap-caption {
      margin-top: 8px;
      font-size: 12px;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* ── 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; }

    /* ── Sélecteur de forme (héros à transformation) ── */
    .form-switcher {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 16px;
    }
    .form-switch-btn {
      height: 32px;
      padding: 0 16px;
      border-radius: var(--radius-sm, 6px);
      border: 1px solid var(--blue-border);
      background: rgba(0, 229, 255, 0.08);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      color: var(--text-dim);
      cursor: pointer;
      transition: all var(--t);
    }
    .form-switch-btn:hover { background: rgba(0, 229, 255, 0.2); color: var(--text-bright); }
    .form-switch-btn.active {
      background: linear-gradient(180deg, rgba(248, 183, 0, 0.1), rgba(248, 183, 0, 0.25));
      border-color: var(--gold-bright, #f8b700);
      color: var(--gold-bright, #f8b700);
    }

    /* ── 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); }

    /* ── Camps de mercenaires (page Cartes) ── */
    .camp-list { list-style: none; display: grid; gap: 12px; }
    .camp-item { display: flex; align-items: center; gap: 12px; }
    .camp-icon {
      flex-shrink: 0; width: 72px; aspect-ratio: 128 / 56;
      border: 1px solid var(--blue-border); border-radius: var(--radius-sm);
      background: #0d131f; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .camp-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .camp-text { color: var(--text-dim); font-size: 14px; line-height: 1.6; }
    .camp-text strong { color: var(--text-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%; }

    /* ── Rotation gratuite ── */
    /* Même bordure que les cartes du site : l'or y est réservé à la sélection. */
    .rotation-section {
      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);
      padding: 16px;
    }

    .rotation-date-range {
      text-align: center;
      color: var(--gold-bright);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 14px;
      font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
    }

    .rotation-hero-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
    }

    .rotation-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 76px;
      text-align: center;
      /* Les héros publiés sont des boutons : on neutralise le style natif. */
      padding: 0;
      border: none;
      background: none;
      font: inherit;
      color: inherit;
    }

    /* Le contour hexagonal reprend celui des portraits de la liste des héros. */
    .rotation-hero-portrait {
      width: 64px;
      height: 64px;
      background: var(--blue-border);
      clip-path: var(--hex-clip);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--t);
    }

    /* Un héros qui a sa fiche sur le site s'ouvre au clic et passe à l'or au survol,
       comme le portrait sélectionné dans la liste. Les autres restent inertes. */
    button.rotation-hero { cursor: pointer; }

    button.rotation-hero:hover .rotation-hero-portrait,
    button.rotation-hero:focus-visible .rotation-hero-portrait {
      background: var(--gold-bright);
      filter: drop-shadow(0 0 8px var(--gold-glow));
      transform: scale(1.05);
    }

    button.rotation-hero:hover .rotation-hero-name,
    button.rotation-hero:focus-visible .rotation-hero-name {
      color: var(--gold-bright);
    }

    button.rotation-hero:focus-visible {
      outline: 2px solid var(--gold-border);
      outline-offset: 3px;
    }

    .rotation-hero-portrait img {
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      object-fit: cover;
      clip-path: var(--hex-clip);
      background: var(--bg-deep);
      display: block;
    }

    .rotation-hero-name {
      margin-top: 6px;
      font-size: 12px;
      color: var(--text);
      line-height: 1.2;
    }

    .rotation-hero-level {
      font-size: 11px;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .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%; }
      /* En mobile les icônes sociales passent sur deux rangées : un décalage fixe
         provoquerait un chevauchement, on remet donc le bandeau dans le flux. */
      .site-update { position: static; width: 100%; max-width: 100%; justify-content: center; }
      
      .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%; }
    }

/* --- LISTE DES CARTES (barre de gauche) ---
   La grille d'origine était taillée pour des noms de héros d'un seul mot : nom centré
   sous le portrait, tronqué à 80 pixels. Les noms de cartes sont longs — « Tombe de la
   reine araignée », « Sanctuaires infernaux » — et se retrouvaient tous coupés à
   « TOMBE DE… ». Une ligne par carte : portrait à gauche, nom complet à droite, sur
   deux lignes si besoin. */
.hero-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  justify-items: stretch;
}

.hero-list .hero-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100%;
  padding: 7px 10px !important;
  border: 1px solid transparent !important;
  border-left: 3px solid transparent !important;
  border-radius: var(--radius-sm);
  background: rgba(16, 22, 34, .55) !important;
  text-align: left;
}
.hero-list .hero-link:hover {
  background: linear-gradient(90deg, var(--blue-soft), transparent) !important;
  border-left-color: var(--blue-bright) !important;
}
.hero-list .hero-link.active {
  background: linear-gradient(90deg, rgba(240, 180, 41, .15), rgba(240, 180, 41, .02)) !important;
  border-color: var(--gold-border) !important;
  border-left-color: var(--gold-bright) !important;
  box-shadow: inset 0 0 15px rgba(240, 180, 41, .05) !important;
}

/* Assez grand pour reconnaître l'illustration, assez petit pour quinze lignes. */
.hero-list .portrait { width: 52px !important; height: 52px !important; }
.hero-list .hero-link:hover .portrait { transform: scale(1.06); }

.hero-list .hero-meta { flex: 1; min-width: 0; width: auto; text-align: left; }
.hero-list .hero-name-row { justify-content: flex-start !important; width: 100%; }

/* Le nom passe à la ligne plutôt que d'être coupé : c'est lui qu'on vient lire. */
.hero-list .hero-name {
  font-size: 13px !important;
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  line-height: 1.25;
  color: var(--text-bright);
}
.hero-list .hero-role,
.hero-list .build-count-badge { display: none !important; }

/* --- 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 */
}

/* ── Carte « Bugs connus » ─────────────────────────────────────────────────
   Placée sous la section des builds. Elle n'existe dans le DOM que si le héros
   a au moins un bug renseigné, d'où l'absence d'état vide ici. L'icône reprend
   .talent-trigger pour garder exactement le même survol que dans les builds. */
.issues-card {
    --issue-red: #ff6b5e;
    --issue-red-dim: rgba(255, 107, 94, 0.45);
    --issue-red-soft: rgba(255, 107, 94, 0.08);
    margin-bottom: 24px;
    border-color: var(--issue-red-dim);
}

/* La carte occupe une 3e colonne de l'en-tête, à droite du nom et de l'accroche.
   Sans bug, .with-issues n'est pas posée et l'en-tête garde ses deux colonnes. */
/* Le plancher de 300px sur la colonne du milieu tient le nom le plus long d'une seule
   pièce ("Alexstrasza" en corps 48) : c'est la carte qui rétrécit d'abord, jusqu'à 260px.
   Le plafond est large à dessein — plus la carte est large, moins la note descend, et
   plus la hauteur de l'en-tête reste proche de celle d'un héros sans carte. */
/* La 3e colonne reprend la largeur de la 2e colonne de .meta-grid (1.1fr .9fr, gouttière
   de 16px) : la carte des bugs tombe alors pile sur le bord gauche de la carte Conseils,
   juste en dessous. Quand la place manque, elle rétrécit jusqu'à 260px plutôt que de
   pousser le nom du héros hors de sa colonne — l'alignement cède avant la lisibilité. */
.hero-header.with-issues {
    grid-template-columns: 120px minmax(300px, 1fr) minmax(260px, calc((100% - 16px) * 0.45));
    align-items: start;
    /* La colonne de texte étant plus étroite, l'accroche passe souvent sur deux lignes :
       on récupère ces quelques pixels sur le bas de l'en-tête plutôt que sur le corps. */
    padding-bottom: 16px;
}

.hero-header .issues-card {
    margin-bottom: 0;
}

/* Trop à l'étroit pour trois colonnes : la carte repasse sous l'en-tête, pleine largeur.
   Les deux bornes correspondent aux largeurs où le panneau de détail descend sous ~840px
   et où la carte ne pourrait donc plus tomber sur le bord de la carte Conseils : en
   dessous de 930px, et dans la bande où la liste des héros reprend sa colonne latérale. */
@media (max-width: 929px), (min-width: 1181px) and (max-width: 1269px) {
    .hero-header.with-issues { grid-template-columns: 120px minmax(0, 1fr); }
    .hero-header.with-issues .issues-card { grid-column: 1 / -1; }
}

.issues-card .card-head {
    border-bottom-color: var(--issue-red-dim);
    background: linear-gradient(90deg, var(--issue-red-soft), transparent);
    color: var(--issue-red);
    text-shadow: 0 0 8px rgba(255, 107, 94, 0.3);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* Date du relevé, discrète : elle date la carte sans concurrencer le titre. */
.issues-date {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: none;
    white-space: nowrap;
}

/* Compteur dans le titre : il dit combien de bugs le carrousel contient, sans quoi
   rien ne signalerait qu'il y en a d'autres derrière celui qu'on lit. */
.issues-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-right: auto;
    margin-left: -4px;
    border-radius: 10px;
    background: var(--issue-red-dim);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-shadow: none;
}

/* Une seule diapo affichée. Le min-height fige la hauteur de la carte : sans lui,
   l'en-tête sauterait à chaque changement de bug selon la longueur de la note. */
.issues-carousel {
    display: flex;
    flex-direction: column;
    min-height: 66px;
}

/* La carte est posée dans l'en-tête, à côté d'un portrait de 120px : tout y est resserré
   pour que la page d'un héros à bugs garde à peu près la silhouette des autres. */
.hero-header .issues-card .card-head { padding: 9px 14px; font-size: 13px; }
.hero-header .issues-card .card-body { padding: 12px 14px; }
.hero-header .issues-card .issue-trigger { width: 44px; height: 44px; }
.hero-header .issues-card .issue-row { gap: 11px; }
.hero-header .issues-card .issue-name { font-size: 13px; margin-bottom: 2px; }
.hero-header .issues-card .issue-note { font-size: 13px; line-height: 1.5; }
.hero-header .issues-card .issues-nav { gap: 10px; padding-top: 6px; }
.hero-header .issues-card .issues-arrow { width: 20px; height: 20px; font-size: 10px; }
.hero-header .issues-card .issues-dot { width: 7px; height: 7px; }

.issue-slide { display: none; }
.issue-slide.is-active { display: block; }

.issue-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

/* Pied du carrousel : flèches de part et d'autre des pastilles. Repoussé en bas par
   le flex, il reste à la même place quelle que soit la longueur de la note. */
.issues-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
}

.issues-arrow {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(8, 12, 20, 0.75);
    border: 1px solid var(--issue-red-dim);
    color: var(--issue-red);
    font-size: 12px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all var(--t);
}

.issues-arrow:hover, .issues-arrow:focus-visible {
    background: var(--issue-red);
    border-color: var(--issue-red);
    color: #12060a;
    outline: none;
    box-shadow: 0 0 12px rgba(255, 107, 94, 0.4);
}

.issues-dots {
    display: flex;
    gap: 8px;
}

.issues-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    cursor: pointer;
    transition: all var(--t);
}

.issues-dot.is-active {
    background: var(--issue-red);
    box-shadow: 0 0 8px rgba(255, 107, 94, 0.5);
    transform: scale(1.2);
}

/* L'icône ne doit ni s'étirer ni se comprimer quand la note est longue. */
.issue-trigger {
    flex: 0 0 auto;
    margin-top: 2px;
}

.issue-text {
    min-width: 0;
    flex: 1;
}

.issue-name {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--text-bright);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.issue-level {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.issue-note {
    margin: 0;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .issue-row { gap: 10px; }
    .issue-trigger { width: 46px; height: 46px; }
    /* L'en-tête est centré en mobile : la carte, elle, reste pleine largeur et ferrée à gauche. */
    .hero-header.with-issues .issues-card { justify-self: stretch; width: 100%; text-align: left; }
}

/* ── Journal des changements ───────────────────────────────────────────────
   La bulle se pose à droite de la date de mise à jour, dans le même cluster
   bas-gauche du header. La fenêtre réutilise le fond et la croix de la
   lightbox vidéo pour que le site n'ait qu'un seul type de fenêtre. */
.site-update-bubble {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    transition: color var(--t), transform var(--t);
}

.site-update-bubble svg { width: 15px; height: 15px; display: block; }

.site-update-bubble:hover,
.site-update-bubble:focus-visible {
    color: var(--gold-bright);
    transform: scale(1.12);
    outline: none;
    filter: drop-shadow(0 0 6px var(--gold-glow));
}

/* Changements pas encore lus : la bulle bat en rouge jusqu'au premier clic. Le survol
   reprend la main sur la couleur, pour que le retour au clic reste lisible. */
.site-update-bubble.is-unread {
    color: #ff6b5e;
    animation: bubble-unread 1.6s ease-in-out infinite;
}

@keyframes bubble-unread {
    0%, 100% { opacity: 1;   filter: drop-shadow(0 0 0 rgba(255, 107, 94, 0)); }
    50%      { opacity: .45; filter: drop-shadow(0 0 7px rgba(255, 107, 94, .85)); }
}

/* Un visiteur qui a demandé moins d'animation garde le rouge, sans le battement. */
@media (prefers-reduced-motion: reduce) {
    .site-update-bubble.is-unread { animation: none; }
}

.changelog-modal {
    width: min(560px, 92vw);
    max-height: 78vh;
    overflow-y: auto;
    position: relative;
    z-index: 2;
    cursor: default;
    padding: 22px 24px 24px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--blue-border);
    background: linear-gradient(180deg, rgba(20, 28, 44, 0.96), rgba(12, 18, 28, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 60px rgba(0, 0, 0, 0.95);
}

.changelog-title {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold-dim);
    color: var(--gold-bright);
    font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 0 0 10px var(--gold-glow);
}

.changelog-entry + .changelog-entry {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--blue-border);
}

.changelog-date {
    margin: 0 0 8px;
    color: var(--text-bright);
    font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.changelog-list {
    margin: 0;
    padding-left: 20px;
    list-style: square;
    display: grid;
    gap: 8px;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.6;
}

.changelog-list li::marker { color: var(--gold); }

@media (max-width: 640px) {
    .changelog-modal { padding: 18px 16px 20px; max-height: 82vh; }
    .changelog-title { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POINTS D'INTÉRÊT SUR LA MINIMAP (page Cartes)
   Chaque point est positionné en pourcentage de la scène, qui épouse l'image :
   il suit donc la minimap à toutes les tailles d'écran, sans recalcul en script.
   La couleur vient d'une variable posée par [data-type], partagée par le
   marqueur, la légende et l'en-tête du popup.
   ═══════════════════════════════════════════════════════════════════════════ */

.bg-hotspot[data-type="camp"],
.bg-legend-item[data-type="camp"],
.hotspot-kind[data-type="camp"]         { --pt-color: #ff9f43; --pt-glow: rgba(255, 159, 67, .45); }

.bg-hotspot[data-type="objectif"],
.bg-legend-item[data-type="objectif"],
.hotspot-kind[data-type="objectif"]     { --pt-color: var(--gold-bright); --pt-glow: var(--gold-glow); }

.bg-hotspot[data-type="batiment"],
.bg-legend-item[data-type="batiment"],
.hotspot-kind[data-type="batiment"]     { --pt-color: #b794f6; --pt-glow: rgba(183, 148, 246, .45); }

.bg-hotspot[data-type="tour"],
.bg-legend-item[data-type="tour"],
.hotspot-kind[data-type="tour"]         { --pt-color: #6ec6ff; --pt-glow: rgba(110, 198, 255, .45); }

.bg-hotspot[data-type="fontaine"],
.bg-legend-item[data-type="fontaine"],
.hotspot-kind[data-type="fontaine"]     { --pt-color: #5fd48a; --pt-glow: rgba(95, 212, 138, .45); }

.bg-hotspot[data-type="autre"],
.bg-legend-item[data-type="autre"],
.hotspot-kind[data-type="autre"]        { --pt-color: var(--blue); --pt-glow: var(--blue-glow); }

/* Les repères sont des points ronds. Deux calques superposés : celui du dessous fait
   un liseré sombre, celui du dessus, réduit à l'échelle, la pastille de couleur.
   Pastille pleine de la couleur du type, avec son symbole en sombre par-dessus, et
   sans battement permanent : vingt repères qui pulsaient ensemble se lisaient comme
   du bruit. */
.bg-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    padding: 0;
    display: grid;
    place-items: center;
    line-height: 0;
    border: 0;
    background: none;
    color: var(--pt-color, var(--blue));
    cursor: pointer;
    /* drop-shadow épouse la forme découpée, là où box-shadow dessinerait un rectangle. */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9)) drop-shadow(0 0 5px var(--pt-glow, var(--blue-glow)));
    transition: transform var(--t), color var(--t), opacity var(--t), visibility var(--t);
}
/* Une famille ouverte dans la liste ne laisse sur la carte que ses propres marqueurs. */
.bg-hotspot.is-filtered-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.bg-hotspot::before,
.bg-hotspot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
/* Le calque du dessous fait le liseré sombre, celui du dessus la pastille de couleur. */
.bg-hotspot::before { background: rgba(8, 12, 20, .92); transition: background var(--t); }
.bg-hotspot::after {
    background: var(--pt-color, var(--blue));
    transform: scale(.84);
}
/* Le symbole du type, sombre sur la pastille de couleur, au-dessus des deux calques. */
.bg-hotspot svg { position: relative; z-index: 1; width: 58%; height: 58%; color: #0b0f17; }

/* Survolée, la pastille grossit et son liseré s'éclaircit. */
.bg-hotspot:hover,
.bg-hotspot:focus-visible {
    outline: none;
    transform: translate(-50%, -50%) scale(1.35);
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9)) drop-shadow(0 0 10px var(--pt-glow, var(--blue-glow)));
}
.bg-hotspot:hover::before,
.bg-hotspot:focus-visible::before { background: #f4f6fb; }

/* La carte agrandie a la place pour des pastilles un peu plus grandes. */
.map-zoom-stage .bg-hotspot { width: 32px; height: 32px; }

/* ── Mode d'emploi sous la minimap : une consigne par geste, avec son icône ── */
.bg-minimap-help {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    margin: 12px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
    list-style: none;
    font-size: 12.5px;
    color: var(--text-muted);
}
.bg-minimap-help li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.bg-minimap-help svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--gold-dim);
}

/* ── Légende : seuls les types réellement posés sur la carte y figurent ── */
.bg-hotspot-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-top: 10px;
}
.bg-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .04em;
    /* Un bouton : un clic n'y laisse que ce type sur la carte. */
    font-family: inherit;
    background: none;
    border: 0;
    border-radius: 4px;
    padding: 3px 6px;
    cursor: pointer;
    transition: opacity var(--t), color var(--t), background var(--t);
}
/* Grisé quand un autre type est choisi, mais le survol le rallume : il reste cliquable. */
.bg-legend-item.is-dim { opacity: .35; }
.bg-legend-item:hover,
.bg-legend-item:focus-visible { color: var(--text); background: rgba(255, 255, 255, .06); outline: none; opacity: 1; }
.bg-legend-item.is-active { color: var(--gold-bright); background: rgba(255, 255, 255, .06); }
.bg-legend-dot {
    position: relative;
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
}
.bg-legend-dot::before,
.bg-legend-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
.bg-legend-dot::before { background: rgba(8, 12, 20, .92); }
.bg-legend-dot::after { background: var(--pt-color, var(--blue)); transform: scale(.7); }

/* ── Infobulle du point ──
   Même habillage que les infobulles de sorts de la page Builds : on réutilise
   .floating-tooltip (cadre, flèche, titre, corps) et on n'ajoute que la ligne de
   type et la capture. */
.hotspot-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pt-color, var(--blue));
}
.hotspot-kind svg { width: 14px; height: 14px; }

/* La capture garde ses proportions : .floating-demo impose du 16/9 aux démos de
   sorts, ce qui rognerait un bout d'écran de jeu. */
.hotspot-shot {
    width: 100%;
    margin-top: 12px;
    border: 1px solid var(--blue-border);
    border-radius: 2px;
    overflow: hidden;
    background: #000;
    line-height: 0;
}
.hotspot-shot img { display: block; width: 100%; height: auto; }

/* Une bulle qui porte une capture gagne un peu de large : à la largeur d'une
   infobulle de sort, l'image serait illisible. Sans capture, largeur identique
   aux sorts. Les navigateurs sans :has gardent simplement la largeur de base. */
.hotspot-tip:has(.hotspot-shot) { width: min(400px, calc(100vw - 24px)); }

/* Une carte seule sur sa rangée : sans ça elle garderait la demi-largeur de .meta-grid. */
.meta-grid.one-col { grid-template-columns: minmax(0, 1fr); }

/* Les deux cartes d'une rangée partagent leur bas. Résumé et Vidéos ont des hauteurs
   voisines sans être égales : laissées à leur hauteur propre, l'écart de quelques
   pixels se lit comme un défaut d'alignement plutôt que comme une intention.
   Le corps occupe la place restante, pour que la carte étirée ne finisse pas sur un vide. */
.meta-grid:not(.one-col) > .card { display: flex; flex-direction: column; }
.meta-grid:not(.one-col) > .card > .card-body { flex: 1; display: flex; flex-direction: column; }
/* Sans vidéo, le bloc « aucune vidéo » se centre au lieu de rester collé en haut. */
.meta-grid:not(.one-col) > .card > .card-body > .empty-state { margin-block: auto; }

/* Les conseils sont le contenu dont la longueur varie le plus. Sur toute la largeur,
   une liste d'une seule colonne donnerait des lignes trop longues à lire et une carte
   inutilement haute : on la répartit sur deux colonnes. */
.tips-card .bullet-list {
    display: block;
    columns: 2;
    column-gap: 34px;
}
.tips-card .bullet-list li {
    /* Un conseil coupé en deux d'une colonne à l'autre serait illisible. */
    break-inside: avoid;
    margin-bottom: 10px;
}
@media (max-width: 640px) {
    .tips-card .bullet-list { columns: 1; }
}

@media (max-width: 640px) {
    .bg-hotspot { width: 24px; height: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LISTE DES POINTS ET AGRANDISSEMENT DE LA CARTE (page Cartes)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Liste des points sous la minimap ──
   Le même contenu que les infobulles, mais en clair : atteignable au doigt sans viser
   un marqueur de 32 pixels, parcourable au clavier, et présent dans le document plutôt
   que réservé au survol.
   Regroupée par type et repliée : trois ou quatre lignes au repos au lieu d'une par
   point. Le détail vit dans le groupe, pas derrière un second dépli — une ouverture
   suffit pour lire. */
.card-count { color: var(--text-dim); font-weight: 400; }

.point-list { display: grid; gap: 6px; }

.point-group[data-type="camp"]     { --pt-color: #ff9f43; --pt-glow: rgba(255, 159, 67, .45); }
.point-group[data-type="objectif"] { --pt-color: var(--gold-bright); --pt-glow: var(--gold-glow); }
.point-group[data-type="batiment"] { --pt-color: #b794f6; --pt-glow: rgba(183, 148, 246, .45); }
.point-group[data-type="tour"]     { --pt-color: #6ec6ff; --pt-glow: rgba(110, 198, 255, .45); }
.point-group[data-type="fontaine"] { --pt-color: #5fd48a; --pt-glow: rgba(95, 212, 138, .45); }
.point-group[data-type="autre"]    { --pt-color: var(--blue); --pt-glow: var(--blue-glow); }

/* Ouverte, la famille prend sa couleur : un filet à gauche, un fond à peine teinté et
   un cadre de la même teinte. On voit d'un coup d'œil quelles familles sont choisies
   — elles sont aussi celles qui restent sur la carte. */
.point-group {
    position: relative;
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-sm);
    background: rgba(8, 12, 20, .45);
    overflow: hidden;
    transition: border-color var(--t), background var(--t);
}
.point-group::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--pt-color, var(--blue));
    opacity: 0;
    transition: opacity var(--t);
}
.point-group[open] {
    border-color: color-mix(in srgb, var(--pt-color, var(--blue)) 45%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--pt-color, var(--blue)) 10%, rgba(8, 12, 20, .6)),
        rgba(8, 12, 20, .45) 160px);
}
.point-group[open]::before { opacity: 1; }
.point-group > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    user-select: none;
    transition: background var(--t);
}
.point-group > summary::-webkit-details-marker { display: none; }
.point-group > summary:hover { background: color-mix(in srgb, var(--pt-color, var(--blue)) 10%, transparent); }
.point-group > summary:focus-visible { outline: 2px solid var(--gold-border); outline-offset: -2px; }

/* La même pastille que les points de la carte — couleur du type, symbole sombre,
   liseré foncé — pour relier les deux d'un coup d'œil. */
.point-badge {
    position: relative;
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    line-height: 0;
    filter: drop-shadow(0 0 4px var(--pt-glow, var(--blue-glow)));
    transition: filter var(--t);
}
.point-badge::before,
.point-badge::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
.point-badge::before { background: rgba(8, 12, 20, .92); transition: background var(--t); }
.point-badge::after { background: var(--pt-color, var(--blue)); transform: scale(.84); }
.point-badge svg { position: relative; z-index: 1; width: 58%; height: 58%; color: #0b0f17; }
/* Famille choisie : le liseré s'éclaircit, comme un point survolé sur la carte. */
.point-group[open] .point-badge { filter: drop-shadow(0 0 7px var(--pt-glow, var(--blue-glow))); }
.point-group[open] .point-badge::before { background: #f4f6fb; }

.point-group-name {
    color: var(--text-bright);
    font-size: 14px;
    font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    min-width: 0;
}
.point-group-count {
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid var(--pt-color, var(--blue-border));
    color: var(--pt-color, var(--text-dim));
    font-size: 11px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: background var(--t), color var(--t);
}
.point-group[open] .point-group-count { background: var(--pt-color, var(--blue)); color: #0b0f17; }
.point-chevron { flex: 0 0 auto; color: var(--text-dim); font-size: 11px; transition: transform var(--t), color var(--t); }
.point-group[open] .point-chevron { transform: rotate(90deg); color: var(--pt-color, var(--gold)); }

/* Deux colonnes dès qu'il y a la place : cinq camps tiennent alors en trois rangées
   plutôt qu'en cinq. */
.point-group-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px 12px;
    padding: 2px 10px 10px 13px;
}

/* Une fiche par point — ou par série de points identiques, dont chaque emplacement
   devient une pastille. Au repos elle reste sobre ; survolée (ou allumée depuis la
   carte), elle prend la couleur du type. */
.point-item {
    min-width: 0;
    padding: 10px 12px 11px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .025);
    /* Survoler allume le marqueur correspondant : le curseur doit l'annoncer. */
    cursor: pointer;
    transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
/* .is-echo est posé quand on survole le marqueur sur la carte : le lien joue dans
   les deux sens, et le même habillage sert aux deux. */
.point-item:hover,
.point-item.is-echo {
    background: color-mix(in srgb, var(--pt-color, var(--blue)) 11%, rgba(8, 12, 20, .55));
    border-color: color-mix(in srgb, var(--pt-color, var(--blue)) 55%, transparent);
    box-shadow: inset 3px 0 0 var(--pt-color, var(--blue));
}
.point-item-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}
/* En casse normale : en capitales, « Camp de siège — géants, haut gauche » devenait
   un bloc difficile à lire sur deux lignes. */
.point-item .point-name {
    margin: 0;
    min-width: 0;
    color: var(--text-bright);
    font-size: 14.5px;
    font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.3;
}
.point-item-count {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--pt-color, var(--text-dim));
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Les emplacements d'une série : chacun allume son seul marqueur au survol. */
.point-locs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 8px;
}
.point-loc {
    display: inline-block;
    padding: 3px 9px 4px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--pt-color, var(--blue)) 45%, transparent);
    background: color-mix(in srgb, var(--pt-color, var(--blue)) 8%, transparent);
    color: var(--text);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    transition: background var(--t), color var(--t), border-color var(--t);
}
.point-loc::first-letter { text-transform: uppercase; }
.point-loc:hover,
.point-loc.is-echo {
    background: var(--pt-color, var(--blue));
    border-color: var(--pt-color, var(--blue));
    color: #0b0f17;
}

.point-item p { margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.6; }
.point-shots { display: grid; gap: 6px; margin-top: 9px; }
.point-shot {
    border: 1px solid var(--blue-border);
    border-radius: 2px;
    overflow: hidden;
    background: #000;
    line-height: 0;
}
.point-shot img { display: block; width: 100%; height: auto; }

/* Survoler un point de la liste allume son marqueur sur la carte. Il bat plutôt que de
   seulement grossir : à 28 pixels sur une carte de 573, un agrandissement seul se
   remarquait à peine. */
@keyframes bg-hotspot-echo {
    0%, 100% { transform: translate(-50%, -50%) scale(1.4); }
    50%      { transform: translate(-50%, -50%) scale(1.85); }
}
.bg-hotspot.is-echo {
    animation: bg-hotspot-echo .9s ease-in-out infinite;
    z-index: 2;
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 12px var(--gold-glow));
}
.bg-hotspot.is-echo::before { background: var(--gold-bright); }
@media (prefers-reduced-motion: reduce) {
    .bg-hotspot.is-echo {
        animation: none;
        transform: translate(-50%, -50%) scale(1.4);
    }
}

/* ── Agrandissement de la minimap ──
   Les images font 5 000 à 8 000 pixels de large pour huit cents à l'écran : sans
   agrandissement, le terrain reste illisible. Les marqueurs étant posés en
   pourcentage, ils suivent l'image sans le moindre recalcul. */
.bg-minimap-stage.is-zoomable { cursor: zoom-in; }

.map-zoom-overlay {
    display: none;
    position: fixed;
    inset: 0;
    /* Sous le portail des infobulles (30000), qui doit rester visible par-dessus. */
    z-index: 9990;
    padding: 24px;
    place-items: center;
    background: rgba(8, 12, 20, .94);
    backdrop-filter: blur(10px);
    cursor: zoom-out;
}
.map-zoom-overlay.active { display: grid; }

.map-zoom-stage {
    cursor: default;
    max-width: 96vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .95);
}
/* Lève le plafond de hauteur de la minimap de fiche : tout l'intérêt est d'y voir plus grand. */
.map-zoom-stage img { max-width: 96vw; max-height: 88vh; }

.map-zoom-close {
    position: fixed;
    top: 16px; right: 20px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    font-size: 15px;
    border-radius: 50%;
    border: 1px solid var(--blue-border);
    background: rgba(8, 12, 20, .8);
    color: var(--text-dim);
    cursor: pointer;
    transition: all var(--t);
}
.map-zoom-close:hover { color: var(--gold-bright); border-color: var(--gold-border); }

/* ── Vue 3D (bêta) : bouton sur la minimap, avertissement, vue plein écran ── */
.bg-vue3d-btn {
    position: absolute;
    bottom: 10px; right: 10px;
    z-index: 4;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px;
    font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
    color: var(--gold-bright);
    background: rgba(8, 12, 20, .82);
    border: 1px solid var(--gold-border);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: all var(--t);
}
.bg-vue3d-btn svg { width: 16px; height: 16px; }
.bg-vue3d-btn:hover { background: rgba(240, 180, 41, .16); border-color: var(--gold); box-shadow: 0 0 16px var(--gold-glow); }
.bg-vue3d-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.bg-vue3d-beta {
    padding: 2px 6px;
    font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    color: #0b0f17; background: var(--gold);
    border-radius: 999px;
}

.vue3d-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9995;
    place-items: center;
    padding: 24px;
    background: rgba(8, 12, 20, .9);
    backdrop-filter: blur(10px);
}
.vue3d-overlay.active { display: grid; }
.vue3d-overlay[data-etape="vue"] { padding: 0; background: #0b0f17; }
html.vue3d-ouverte, html.vue3d-ouverte body { overflow: hidden; }
/* Le bouton « remonter » de la page passerait par-dessus la vue 3D. */
html.vue3d-ouverte #backToTop { display: none; }

.vue3d-dialogue {
    position: relative;
    width: min(460px, 100%);
    padding: 26px 26px 22px;
    text-align: left;
    background: var(--bg-2);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.vue3d-dialogue h3 { margin: 0 0 12px; color: var(--gold-bright); font-size: 19px; }
.vue3d-dialogue p { margin: 0 0 10px; color: var(--text); line-height: 1.55; }
.vue3d-badge {
    position: absolute; top: 14px; right: 14px;
    padding: 3px 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #0b0f17; background: var(--gold);
    border-radius: 999px;
}
.vue3d-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.vue3d-actions button {
    padding: 9px 16px;
    font: inherit; font-size: 14px; font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--t);
}
.vue3d-secondaire { color: var(--text-dim); background: transparent; border: 1px solid var(--blue-border); }
.vue3d-secondaire:hover { color: var(--text-bright); border-color: var(--blue-border-hover); }
.vue3d-principal { color: #0b0f17; background: var(--gold); border: 1px solid var(--gold); }
.vue3d-principal:hover { background: var(--gold-bright); box-shadow: 0 0 16px var(--gold-glow); }

.vue3d-cadre { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0b0f17; }
/* La barre de la vue 3D occupe le coin haut gauche : la croix reste à droite, un peu
   plus bas que celle de l'agrandissement pour ne pas chevaucher ses boutons. */
.vue3d-fermer { top: 12px; right: 14px; z-index: 2; }


/* ── La carte et ses points, côte à côte ──
   Survoler un point allume son marqueur : encore faut-il voir les deux en même temps.
   Empilés, le marqueur se retrouvait souvent hors de l'écran. La carte prend la plus
   grande part — c'est elle qu'on lit —, la liste occupe la colonne de gauche. */
.bg-map-row {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 16px;
    margin-bottom: 24px;
    /* Hauteurs très différentes d'une carte à l'autre : chacune garde la sienne plutôt
       que de creuser un vide dans l'autre. */
    align-items: start;
}
/* Sans minimap, la liste reprend toute la largeur. */
.bg-map-row.no-map { grid-template-columns: minmax(0, 1fr); }
.bg-map-row > .bg-minimap-section { margin-bottom: 0; }

/* La liste ne fait pas grandir la rangée indéfiniment : passé la hauteur maximale
   d'une minimap, elle défile sur place et la carte reste en vue. */
.bg-map-row .point-list {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
}
/* Une seule colonne de points : la colonne de gauche est trop étroite pour deux. */
.bg-map-row .point-group-body { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1040px) {
    .bg-map-row { grid-template-columns: minmax(0, 1fr); }
    /* Empilés, la carte repasse devant : c'est l'ancrage visuel de la fiche. */
    .bg-map-row > .bg-minimap-section { order: -1; margin-bottom: 16px; }
    .bg-map-row .point-list { max-height: none; overflow-y: visible; }
    .bg-map-row .point-group-body { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* Ajustements propres à la disposition côte à côte : la carte est plus petite qu'en
   pleine largeur, les repères y prenaient proportionnellement trop de place. */
.bg-map-row .bg-hotspot { width: 24px; height: 24px; }

/* Dans une colonne de moins de 400 px, une capture par point transforme la liste en
   colonne interminable. Elle reste accessible dans l'infobulle du marqueur — et
   réapparaît plus bas, quand la liste occupe toute la largeur. */
.bg-map-row .point-shots { display: none; }

@media (max-width: 1040px) {
    .bg-map-row .bg-hotspot { width: 28px; height: 28px; }
    .bg-map-row .point-shots { display: grid; }
}

/* Bandeau et légende sous la carte agrandie : les repères y sont de plusieurs couleurs,
   sans légende on ne sait pas ce qu'on regarde. La hauteur maximale de l'image baisse
   d'autant, pour que l'ensemble tienne dans l'écran. */
.map-zoom-inner {
    display: grid;
    justify-items: center;
    gap: 10px;
    cursor: zoom-out;
}
.map-zoom-stage img { max-height: 76vh; }
.map-zoom-inner .bg-minimap-caption { margin-top: 0; }

/* ═══════════════════════════════
   PIED DE PAGE
   Dernier enfant de .page : il reste dans la colonne centrale, à la même
   largeur que les autres panneaux. Rempli par renderBgFooter() pour
   suivre la langue choisie.
   ═══════════════════════════════ */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 14px 16px;
    text-align: center;
}
.footer-note { color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    font-family: 'Metronic for Blizzard', 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-bright);
    text-decoration: none;
    background: var(--gold-soft);
    border: 1px solid var(--gold-border);
    border-radius: 2px;
    transition: all var(--t);
}
.footer-link:hover {
    background: var(--gold-glow);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
    box-shadow: 0 0 12px var(--gold-glow);
}
.footer-link svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* Colonne de droite de .layout : contenu + pied de page empilés. Sans ce
   conteneur, le pied de page est un enfant de .page et se cale sous la colonne
   la plus haute — la liste des cartes — loin sous le contenu. */
.layout-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Cartes en ranked (accueil) : même tuile que la rotation des héros, un peu plus
   large pour des noms comme « Tombe de la reine araignée ». */
.rotation-hero.ranked-map { width: 96px; }