:root {
  /* Fond site */
  --fond-voile: 0.74;
  --fond-vignette: 0.55;
  --fond-contraste: 1.02;
  --fond-saturation: 1.05;

  /* Layout */
  --header-h: clamp(96px, 12vh, 140px);
  --filters-stack-h: 92px;
  --filters-stack-gap: 90px;
  --filters-center-x: 50%;
  --filters-gap: 24px;
  --filters-card-w: 48vw;

  /* NC — Legacy colors */
  --nc-accent: rgba(0, 200, 255, 0.85);
  --nc-accent-soft: rgba(0, 200, 255, 0.22);
  --nc-gold: rgba(191, 174, 129, 0.9);
  --nc-hud-r: rgba(255, 70, 90, 0.95);
  --nc-hud-b: rgba(70, 170, 255, 0.95);
  --nc-hud-p: rgba(190, 90, 255, 0.95);
  --nc-panel: rgba(10, 16, 32, 0.62);
  --nc-panel-strong: rgba(10, 16, 32, 0.82);
  --nc-border: rgba(140, 190, 255, 0.18);
  --nc-border-strong: rgba(0, 200, 255, 0.34);
  --nc-shadow: 0 12px 34px rgba(0,0,0,0.38);
  --nc-shadow-soft: 0 8px 22px rgba(0,0,0,0.28);
  --nc-radius: 16px;
  --nc-radius-in: 12px;
  --nc-focus: 0 0 0 3px rgba(0, 200, 255, 0.22), 0 0 20px rgba(0, 200, 255, 0.18);

  /* NX — Filters Premium */
  --nx-filters-max: 920px;
  --nx-filters-gap: 24px;
  --nx-card-pad-y: 10px;
  --nx-card-pad-x: 12px;
  --nx-notch-w: 74px;
  --nx-notch-h: 22px;
  --nx-pill-pad-y: 7px;
  --nx-pill-pad-x: 12px;
  --nx-pill-font: 13px;

  /* NX — Signature colors */
  --nx-bg-0: #05060d;
  --nx-bg-1: #0b0c1a;
  --nx-bg-2: #111329;
  --nx-violet-1: #7246ff;
  --nx-violet-2: #9a6bff;
  --nx-gold-1: #c8a45b;
  --nx-gold-2: #f1d08a;
  --nx-border-cold: rgba(120, 140, 220, 0.48);
  --nx-border-warm: rgba(203, 168, 92, 0.6);
  --nx-shadow-strong: 0 14px 32px rgba(4, 6, 16, 0.78);
  --nx-shadow-soft: 0 8px 20px rgba(58, 24, 110, 0.32);
  --nx-glow-violet: 0 0 18px rgba(125, 80, 255, 0.32);
  --nx-radius: 14px;
  --nx-radius-lg: 18px;
  --nx-transition: 180ms ease;
  --nx-section-bg:
    radial-gradient(120% 140% at 20% 0%, rgba(120, 75, 255, 0.18) 0%, rgba(5, 7, 18, 0) 58%),
    linear-gradient(180deg, #0c0d1c 0%, #070812 60%, #04040a 100%);
  --nx-surface-bg:
    linear-gradient(180deg, rgba(20, 18, 38, 0.96) 0%, rgba(10, 11, 24, 0.98) 100%);
  --nx-surface-bg-strong:
    linear-gradient(180deg, rgba(24, 20, 46, 0.98) 0%, rgba(12, 12, 28, 0.99) 100%);
  --nx-surface-veil:
    radial-gradient(140% 160% at 0% 0%, rgba(120, 85, 255, 0.2) 0%, rgba(0, 0, 0, 0) 60%);
  --nx-noise:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 3px);
  --nx-focus: rgba(186, 144, 255, 0.9);
}

/* NX — Scrollbars hidden (scroll still works) */
html, body { scrollbar-width: none; }
html, body { -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; }
html, body { overflow: hidden !important; height: 100%; }



.header-nexus {
  /* Positionnement */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0;
  width: 100%;
  z-index: 50000;
  pointer-events: auto !important;

  /* Layout grid (nexusSignature) */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  box-sizing: border-box;

  /* Dimensions */
  height: auto;
  min-height: clamp(36px, 6vh, 40px);
  overflow: visible;
  isolation: isolate;

  /* Variables header */
  --nx-draft-size: clamp(56px, 8vw, 72px);
  --nx-rail-mask-pad: 2px;
  --nx-rail-gap: calc(var(--nx-draft-size) + 4px);
  --nx-rail-gap-inner: var(--nx-draft-size);

  /* Apparence */
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(4, 6, 16, .6);

  /* Performance */
  transform: translate3d(0,-95px, 0);
  will-change: transform;
}

.header-nexus * {
  pointer-events: auto !important;
}

/* navLogo (picture+img) transparent aux events — sa zone (x:114-275) couvre Focus/FAQ. */
#navLogo,
#navLogo img {
  pointer-events: none !important;
}

/* Tap target logo : vrai élément DOM injecté par JS (.navLogo-tap-target).
   88px centré entre Focus (x≤150) et FAQ (x≥240). Compatible tous navigateurs. */
.navLogo-tap-target {
  position: absolute;
  width: 88px;
  height: 44px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 2;
}

/* ligneSousHeader couvre physiquement la zone des boutons nav (Focus/FAQ).
   Le conteneur passe les events ; ses enfants (Search, Draft, Login) restent
   cliquables via la règle .header-nexus * ci-dessus. */
.ligneSousHeader {
  pointer-events: none !important;
}

/* .header-nexus.scrolled{
  background:url("/assets/images/backgroundHeaderDesktop.webp") center / cover no-repeat;
  background-position: center calc(50% + 56px);
  border-bottom-color: rgba(140, 190, 255, 0.22);
} */

.header-nexus > picture:first-of-type {
  display: flex;
  align-items: center;
 
}


/* Console debug (opt-in) */
/* console.log('[NX][HEADER] metrics', { headerH: document.querySelector('.header-nexus')?.offsetHeight, logoW: document.querySelector('.header-nexus > picture:first-of-type img')?.getBoundingClientRect?.().width, searchW: document.getElementById('barreRecherche')?.getBoundingClientRect?.().width }); */

.header-nexus > picture:first-of-type:focus-within {
  outline: none;
  /* Remove visible focus ring on mobile - it creates a large tap area border */
}

/* Logo tap area - limit to actual logo size */
@media (max-width: 768px) {
  .header-nexus,
  .header-nexus.scrolled {
    background-position: 0% 0%;
  }

  .header-nexus > picture:first-of-type {
    -webkit-tap-highlight-color: transparent;
  }
  .header-nexus > picture:first-of-type:focus-within {
    box-shadow: none;
  }
}

.navsections {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 24px);
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(px, 1.6vw, 18px);
  flex: 0 0 auto;
}

.nav-left { justify-content: flex-end; }
.nav-right { justify-content: flex-start; }

.nav-left {
  position: relative;
}

@media (min-width: 901px) {
  .nav-left::after {
    content: "";
    position: absolute;
    right: calc(-0.5 * clamp(16px, 3vw, 32px));
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: linear-gradient(180deg, rgba(0, 200, 255, 0), rgba(0, 200, 255, 0.28), rgba(0, 200, 255, 0));
    opacity: 0.6;
    pointer-events: none;
  }
}

.header-nexus .logo-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-nexus .logo-center img {
  height: 28px;
  width: auto;
  display: block;
  cursor: pointer;
}

.header-nexus .tabsection {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(20px, 2.4vh, 36px);
  padding: clamp(4px, 1.2vh, 8px) clamp(8px, 2vw, 14px);
  min-width: clamp(72px, 18vw, 88px);

  color: rgba(255,255,255,0.90);
  background: rgba(6, 9, 22, 0.68);
  border: 1px solid rgba(0, 200, 255, 0.28);
  border-radius: 10px;
  font-size: clamp(0.68rem, 0.6rem + 0.4vw, 0.95rem);
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 160ms ease, color 160ms ease, background 160ms ease, opacity 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.header-nexus .tabsection:hover{
  color:#fff;
  background: rgba(0, 200, 255, 0.14);
  border-color: rgba(0, 200, 255, 0.55);
  transform: translateY(-1px);
  text-shadow: 0 0 10px rgba(0, 200, 255, 0.65);
  box-shadow: 0 4px 16px rgba(0,0,0,0.50), 0 0 12px rgba(0, 200, 255, 0.18);
}

.header-nexus .tabsection[hidden] {
  display: inline-flex !important;
  visibility: hidden !important;
}

.header-nexus .tabsection:focus-visible{
  outline: none;
  box-shadow: var(--nc-focus);
  background: rgba(0, 200, 255, 0.10);
  text-shadow: 0 0 8px rgba(0, 180, 255, 0.7);
}

.header-nexus .tabsection[aria-current="page"]{
  color: #f3ecdc;
  border-color: rgba(203, 168, 92, 0.65);
  background: rgba(18, 20, 36, 0.78);
  box-shadow: inset 0 0 0 1px rgba(203, 168, 92, 0.45);
}

.header-nexus .tabsection[aria-current="page"]::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,200,255,0), var(--nc-accent), rgba(0,200,255,0));
  opacity: 0.95;
}

.header-nexus a {
  color: #aaa;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem; /* Texte plus petit */
}

.header-nexus a:hover,
.header-nexus a:focus-visible {
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 180, 255, 0.7);
  outline: none;
}

#barreRecherche {
  flex: 1 1 360px;
  min-width: 220px;
  max-width: 520px;
  margin: 0 clamp(6px, 1.6vw, 16px);
}

#championSearch {
  width: 100%;
  min-width: 0;
  height: clamp(36px, 3.4vh, 38px);
  padding: 0 12px 0 36px;
  font-size: clamp(0.85rem, 0.82rem + 0.2vw, 0.95rem);
  border-radius: 10px;
  border: 1px solid rgba(191, 174, 129, 0.55);
  background: rgba(16, 24, 44, 0.72);
  color: #ffffff;
  margin: 0;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.20);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='rgba(191,174,129,0.85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px 50%;
  background-size: 16px 16px;
}
#championSearch:focus{
  outline:none;
}
#championSearch:focus-visible{
  box-shadow: var(--nc-focus), inset 0 0 0 1px rgba(0,0,0,0.20);
  border-color: rgba(0, 200, 255, 0.55);
}

/* Draft button — style unifié */
#btnOpenDraft,
#btnOpenDraft.btn-draft {
  width: var(--nx-draft-size);
  height: var(--nx-draft-size);
  padding: 0;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(120, 140, 220, 0.6);
  background-color: #0f1324;
  background-image: url("/assets/images/Button Draft.webp");
  background-size: 300% auto;
  background-position: 50% 48%;
  background-repeat: no-repeat;
  box-shadow: 0 12px 26px rgba(4, 6, 16, 0.7), 0 0 16px rgba(130, 90, 255, 0.35), inset 0 0 0 1px rgba(203, 168, 92, 0.6);
  color: transparent;
  font-size: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

#btnOpenDraft::before,
#btnOpenDraft.btn-draft::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(120, 160, 255, 0.22) 0%,
    rgba(130, 90, 255, 0.14) 32%,
    rgba(0, 0, 0, 0) 70%
  );
  mix-blend-mode: screen;
}

#btnOpenDraft:hover,
#btnOpenDraft.btn-draft:hover {
  transform: translateY(-1px) scale(1.01);
  border-color: rgba(120, 160, 255, 0.65);
  box-shadow:
    0 12px 24px rgba(4, 6, 16, 0.68),
    0 0 14px rgba(120, 160, 255, 0.22),
    0 0 18px rgba(130, 90, 255, 0.20),
    inset 0 0 0 1px rgba(120, 160, 255, 0.35);
}

#btnOpenDraft:hover::before,
#btnOpenDraft.btn-draft:hover::before {
  opacity: 1;
}

#btnOpenDraft:active,
#btnOpenDraft.btn-draft:active {
  transform: translateY(0px) scale(0.99);
}

#btnOpenDraft:focus-visible {
  outline: 2px solid var(--nx-focus);
  outline-offset: 3px;
}

#btnLogin.btn-login, #btnLogin{
  min-height: clamp(36px, 3.4vh, 38px);
  width: clamp(36px, 3.4vh, 38px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(191, 174, 129, 0.4);
  background: rgba(10, 16, 32, 0.65);
  color: #eaf2ff;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

#btnLogin:hover{
  background: rgba(10, 16, 32, 0.85);
  border-color: rgba(191, 174, 129, 0.7);
}

#btnLogin:focus-visible{
  outline:none;
  box-shadow: var(--nc-focus);
}

#btnLogin[data-nx-logged] {
  width: auto;
  min-width: unset;
  height: clamp(36px, 3.4vh, 38px);
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
#btnLogin[data-nx-logged]::before {
  display: none;
}



.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(191, 174, 129, 0.4);
  background: rgba(10, 16, 32, 0.65);
  color: #eaf2ff;
  cursor: pointer;
  /* Optimisation: utiliser transform/opacity au lieu de background */
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: rgba(10, 16, 32, 0.85);
  border-color: rgba(191, 174, 129, 0.7);
  outline: none;
}

.nav-toggle__icon {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

.nav-toggle__icon span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.header-nexus.nav-open .nav-toggle__icon span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.header-nexus.nav-open .nav-toggle__icon span:nth-child(2) {
  opacity: 0;
}

.header-nexus.nav-open .nav-toggle__icon span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.navsections[hidden] {
  display: none !important;
}

@media (max-width: 1200px) {
  .header-nexus {
    gap: clamp(10px, 2.5vw, 26px);
  }
}

@media (max-width: 900px) {
  .header-nexus {
    /* Valeur de base mobile/tablette — à ajuster si besoin */
    transform: translate3d(0, -40px, 0);
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px clamp(14px, 5vw, 22px);
  }

  .header-nexus > picture:first-of-type {
    order: 1;
    border-radius: 10px;
  }

  .header-nexus > picture:first-of-type img {
    width: clamp(78px, 24vw, 100px);
  }


  #btnLogin {
    order: 3;
  }

  .header-nexus .nav-toggle {
    display: inline-flex;
    order: 4;
    justify-self: end;
  }

  #barreRecherche {
    order: 1;
    justify-self: stretch;
    width: 100%;
    margin: 0;
  }

  #championSearch {
    font-size: 15px;
  }

  .header-nexus .navsections {
    order: 5;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(120, 120, 255, 0.22);
    max-height: none;
    overflow: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .header-nexus.nav-open .navsections {
    opacity: 1;
  }

  .header-nexus .nav-left,
  .header-nexus .nav-right {
    display: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .header-nexus.nav-open .nav-left,
  .header-nexus.nav-open .nav-right {
    display: flex;
  }

  .header-nexus .logo-center {
    display: none;
  }

  .header-nexus .tabsection {
    width: 100%;
    text-align: center;
    background: rgba(6, 10, 24, 0.72);
    backdrop-filter: blur(6px);
  }

  .header-nexus.nav-open .tabsection {
    background: rgba(6, 10, 24, 0.80);
  }
}

@media (min-width: 769px) {
  #mobileLight {
    display: none !important;
  }
}

@media (max-width: 720px) {
  html.mobile-light-active,
  body.mobile-light-active {
    overflow: auto;
  }
}

@media (max-width: 600px) {
  .header-nexus.nav-open .navsections {
    flex-direction: row;
    justify-content: space-between;
  }

  .header-nexus.nav-open .nav-left,
  .header-nexus.nav-open .nav-right {
    width: auto;
    flex: 1 1 0;
  }

  .header-nexus.nav-open .nav-left {
    justify-content: flex-start;
  }

  .header-nexus.nav-open .nav-right {
    justify-content: flex-end;
  }
}

/* No-burger mode: always show nav sections on mobile */
body.no-burger .nav-toggle,
body.no-burger .header-nexus .nav-toggle {
  display: none !important;
}

body.no-burger .header-nexus .navsections {
  flex-direction: row !important;
  border-top: none !important;
}

body.no-burger .header-nexus .nav-left,
body.no-burger .header-nexus .nav-right {
  display: flex !important;
  width: auto !important;
  flex-wrap: nowrap !important;
}

body.no-burger .header-nexus .tabsection {
  width: auto !important;
  text-align: center !important;
}

@media (max-width: 768px) {
  /* Hard isolate desktop-only elements on mobile */
  #hubOverlay,
  .hud,
  #viewport {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* Allow hubPanel to display on mobile when opened from mobile hub */
  #hubPanel[hidden] {
    display: none !important;
  }

  #hubPanel:not([hidden]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* MobileLight is the only visual source */
  body.mobile-light-active #mobileLight {
    display: flex;
    position: fixed;
    top: var(--header-h, 128px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    background: radial-gradient(
      circle at top,
      rgba(21, 38, 85, 0.85),
      #050914 65%
    );
  }

  body:not(.mobile-light-active) #mobileLight {
    display: none;
  }

  body.meta-open #sceneWrapper,
  body.meta-open #carouselOrbite,
  body.meta-open #championSVG {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* =========================
     NX FIX — HEADER MOBILE
     Prevents logo/nav overlap + reduces height
     ========================= */

  :root {
    --header-h: 72px;
  }

  .header-nexus {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 8px;
    height: auto;
    min-height: 48px;
    z-index: 12;
  }

  .ligneSousHeader {
    /* Ajuste la hauteur de la sous-ligne ici si elle écarte trop */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
  }

  #navLogo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    flex-shrink: 0;
  }

  #navLogo img {
    display: block;
  }

  .navsections {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    gap: 6px;
    padding: 0;
  }

  .navsections .nav-left,
  .navsections .nav-right {
    display: flex;
    gap: 6px;
  }

  .navsections .tabsection {
    line-height: 1;
    border-radius: 10px;
    white-space: nowrap;
  
   
  }

  /* NX FIX — Nav buttons closer to logo on mobile */
  #primaryNav.navsections {
    --nav-col-gap: 8px;
    --nav-btn-gap: 6px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* NX FIX — Neutralise le système caméra sur mobile */
  #sceneWrapper {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #svgWrapper {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    overflow: hidden !important;
    padding-top: var(--header-h, 72px);
    box-sizing: border-box;
  }

  /* NX FIX — Carousel = scroll container on mobile */
  #carouselOrbite {
    position: relative !important;
    height: calc(100dvh - var(--header-h, 72px)) !important;
    min-height: auto !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding: 22px 16px 24px !important;
    left: auto !important;
    top: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  #carouselOrbite.carousel-tiles {
    display: block !important;
  }

  #carouselOrbite.carousel-tiles .portal {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
  }

  #carouselOrbite.carousel-tiles .track {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    height: auto !important;
    max-height: none !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    padding-bottom: 24px !important;
  }

  #carouselOrbite.carousel-tiles .slide {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: 3 / 2;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }

  #carouselOrbite.carousel-tiles .slide:nth-child(n) {
    justify-self: unset;
    align-self: unset;
  }

  #carouselOrbite.carousel-tiles .slide-tilt,
  #carouselOrbite.carousel-tiles .slide-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  #carouselOrbite.carousel-tiles .vignettehud {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Kill only the scale hover on img, keep translateY on picture */
  #carouselOrbite.carousel-tiles img.vignettehudimg {
    transform: none !important;
  }

  /* =========================================
     NX FIX — Champion List mobile
     ========================================= */

  /* Fond transparent (laisse le body background) */
  #championList.liste-champions {
    background: transparent !important;
    backdrop-filter: none !important;
  }

  /* Liste : pleine page, scroll, bulles plus grosses */
  body.mobile-list-active #championList.liste-champions {
    position: fixed !important;
    top: var(--header-h, 72px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - var(--header-h, 72px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px 24px !important;
    --cols: 5;
    --gap: 10px;
    --thumb: calc((100vw - 24px - (var(--cols) - 1) * var(--gap)) / var(--cols));
    grid-template-columns: repeat(var(--cols), var(--thumb)) !important;
    grid-auto-rows: var(--thumb) !important;
    justify-content: center;
    align-content: start;
  }

  /* Filtres visibles quand la liste est active */
  body.mobile-list-active #filtersStack {
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: calc(var(--header-h, 72px) + 4px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10002;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: 96vw;
  }

  body.mobile-list-active #filtersStack #rolesWrapper,
  body.mobile-list-active #filtersStack #tierWrapper {
    width: auto !important;
    padding: 4px 8px !important;
    gap: 6px;
  }

  body.mobile-list-active #filtersStack .filtres,
  body.mobile-list-active #filtersStack .tier-filter {
    padding: 4px 10px;
    font-size: 0.7rem;
    min-height: 28px;
  }

  /* Décaler la liste sous les filtres */
  body.mobile-list-active #championList.liste-champions {
    top: calc(var(--header-h, 72px) + 52px) !important;
    max-height: calc(100dvh - var(--header-h, 72px) - 52px) !important;
  }
}

@media (max-width: 600px) {
  :root {
    --header-h: 44px;
  }

  .header-nexus,
  .header-nexus.scrolled {
    background-position: 56% 50%;
  }

  .header-nexus {
    gap: 4px;
    padding: 4px 6px;
    min-height: 40px;
  }

  .header-nexus .nav-toggle {
    width: 30px;
    height: 30px;
  }

  #barreRecherche {
    margin-top: 0;
  }

  #championSearch {
    padding: 5px 6px;
    font-size: 12px;
    height: 28px;
  }

  .header-nexus .navsections {
    gap: 3px;
  }

  .header-nexus .nav-left,
  .header-nexus .nav-right {
    gap: 3px;
  }

  .header-nexus .tabsection {
    min-height: 30px;
    min-width: 68px;
    padding: 4px 8px;
    font-size: 0.68rem;
  }
}

@media (max-width: 480px) {
  :root {
    --header-h: 40px;
  }

  .header-nexus,
  .header-nexus.scrolled {
    background-position: 60% 50%;
  }

  .header-nexus {
    gap: 3px;
    padding: 4px 5px;
    min-height: 36px;
  }

  /* Nav grid rules → see consolidated block below */

  #championSearch {
    height: 26px;
    font-size: 11px;
    padding: 4px 6px;
  }

  .header-nexus .tabsection {
    width: auto;
    max-width: 200px;
    min-height: 24px;
    min-width: 0;
    padding: 2px 6px;
    font-size: 0.6rem;
    line-height: 1.1;
  }
}

@media (max-width: 360px) {
  :root {
    --header-h: 36px;
  }

  .header-nexus,
  .header-nexus.scrolled {
    background-position: 62% 50%;
  }

  .header-nexus {
    padding: 3px 4px;
  }

  #championSearch {
    height: 24px;
    font-size: 10px;
  }

  .header-nexus .tabsection {
    max-width: 180px;
    min-height: 22px;
    padding: 2px 5px;
    font-size: 0.56rem;
  }
}

/* Centre : layout command bar */
/* Nav gaps — modifier uniquement ces deux variables */
#primaryNav.navsections {
  --nav-col-gap: clamp(10px, 2.4vw, 22px); /* gap entre nav-left / logo / nav-right */
  --nav-btn-gap: 10px;                      /* gap entre boutons dans un groupe */

  width: min(760px, 90vw);
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--nav-col-gap);
  padding-top: clamp(32px, 12vh, 160px);
  padding-bottom: 16px;
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  margin: 0 auto;
}

@media (max-width: 1100px) and (min-width: 769px) {
  #primaryNav.navsections {
    --nav-col-gap: 24px;
  }

  #primaryNav .nav-left {
    padding-right: 6px;
  }

  #primaryNav .nav-right {
    padding-left: 6px;
  }
}

/* nav blocks */
#primaryNav .nav-left,
#primaryNav .nav-right {
  display: flex;
  align-items: center;
  gap: var(--nav-btn-gap, 10px);
  white-space: nowrap;
}

#primaryNav .nav-left {
  grid-column: 1;
  justify-content: flex-start;
  justify-self: start;
}

#primaryNav .nav-right {
  grid-column: 3;
  justify-content: flex-end;
  justify-self: end;
}

/* Search centered + clamped width */
#barreRecherche {
  width: 100%;
  max-width: clamp(380px, 44vw, 560px);
  justify-self: center;
}

#championSearch {
  width: 100%;
}



#btnLogin {
  margin-left: 8px;
}



/* Mobile safety: keep search usable */
@media (max-width: 720px) {
  #barreRecherche {
    max-width: 100%;
  }
}

/* ===== HUD header – mobile nav (single authoritative block) ===== */
.header-nexus #primaryNav.navsections {
  width: 100%;
}

@media (max-width: 480px) {
  /* Header = 3-column grid with logo centered */
  .header-nexus {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
  }

  #navLogo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  /* Nav overlay = 3-column grid, center spacer = logo */
  .header-nexus #primaryNav.navsections {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(40px, 34vw, 90px) minmax(0, 1fr) !important;
    align-items: center !important;
    border-top: none !important;
    transform: translateY(20px) !important;
    column-gap: 0 !important;
  }

  /* Both sides: flex, fill their column */
  .header-nexus #primaryNav .nav-left,
  .header-nexus #primaryNav .nav-right {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .header-nexus #primaryNav .nav-left {
    grid-column: 1 !important;
    justify-self: stretch !important;
  }

  .header-nexus #primaryNav .nav-right {
    grid-column: 3 !important;
    justify-self: stretch !important;
  }

  /* All buttons = same width, text contained */
  .header-nexus #primaryNav .tabsection {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .header-nexus > .ligneSousHeader {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Si "Meta" est hors du #primaryNav et pousse visuellement le centre,
   on limite légèrement la largeur max de search pour garder l'équilibre */
.header-nexus #barreRecherche {
  max-width: clamp(340px, 40vw, 520px);
}


#championImage,
#videoChamp {
  display: none;
}

.deroulant-wrapper {
  margin-top: 1rem;
}

.deroulant-toggle {
  width: 100%;
  background-color: #bfae81;
  color: #0a162f;
  padding: 10px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  /* Pas de transition pour éviter animation non-composée */
}

.deroulant-toggle:hover {
  background-color: #e0cf9b;
}

.deroulant-content {
  display: none;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 10px;
  margin-top: 6px;
  border-radius: 6px;
}

.interface-wr {
  position: relative;
  width: 360px;
  height: 360px;
  margin: 40px auto;
  background-color: #0a1125;
  border-radius: 50%;
}

.skill, .main-attack {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #222;
  border: 2px solid #555;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.skill img, .main-attack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-attack {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border: 2px solid #88f;
  box-shadow: 0 0 10px #88f;
}

.skill-left.skill-1 { top: 40px; left: 20px; }
.skill-left.skill-2 { top: 100px; left: 10px; }
.skill-left.skill-3 { top: 160px; left: 10px; }
.skill-left.skill-4 { top: 220px; left: 20px; }

.skill-right.skill-1 { top: 40px; right: 20px; }
.skill-right.skill-2 { top: 100px; right: 10px; }
.skill-right.skill-3 { top: 160px; right: 10px; }
.skill-right.skill-4 { top: 220px; right: 20px; }

.champion-ring {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 10, 20, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#coreChampion {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 20px #44f;
}

#coreChampion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.counter-ring-item {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  background: #111;
  transition: transform 0.5s ease, opacity 0.5s ease;
  pointer-events: auto;
  z-index: 2;
}

.counter-ring-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.counter-ring-item.strong {
  border: 3px solid #4caf50;
  box-shadow: 0 0 8px #4caf50;
}

.counter-ring-item.weak {
  border: 3px solid #f44336;
  box-shadow: 0 0 8px #f44336;
}

.connector-line {
  position: absolute;
  height: 2px;
  background-color: #aaa;
  transform-origin: left center;
  transition: width 0.5s ease;
  z-index: 1;
}

.connector-line.strong {
  background-color: #4caf50;
}

.connector-line.weak {
  background-color: #f44336;
}

.close-ring {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 28px;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  z-index: 10;
  pointer-events: auto;
}

.counter-ring-item {
  transform-origin: center center;
}

#championSVG {
  position: absolute;
  outline: 1px dashed lime; /* Debug visuel */
  z-index: 15000 !important; /* au-dessus de la liste; < hubPanel (20000) */
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none; /* Laisse la liste de champions cliquable */
}

#championSVG .centerchampion,
#championSVG .counter-img,
#championSVG .hub-hit,
#championSVG .hub-label,
#championSVG .hub-label * {
  pointer-events: auto;
}

#svgWrapper {
  /*
    ⚠️ Garder ce wrapper gigantesque et sans clipping : les panneaux (#ncRightPanel,
    #ncLeftPanel, etc.) sont positionnés en dehors de la vue courante via
    camera-lite.js. Si un masquage est nécessaire, applique-le sur un conteneur
    plein écran (ex. #sceneWrapper) plutôt qu'ici.
  */
  --nc-camera-gap: 106px; /* ↔️ synchronisé avec state.gap dans camera-lite.js */
  --nc-camera-min-span: 6000px; /* ✅ garde l'amplitude desktop historique */
  --nc-camera-span-x: calc(3 * 100vw + var(--nc-camera-gap) * 2);
  --nc-camera-span-y: calc(3 * 100vh + var(--nc-camera-gap) * 2);
  --nc-camera-width: max(var(--nc-camera-span-x), var(--nc-camera-min-span));
  --nc-camera-height: max(var(--nc-camera-span-y), var(--nc-camera-min-span));
  position: absolute;
  width: var(--nc-camera-width);
  height: var(--nc-camera-height);
  left: calc(50% - var(--nc-camera-width) / 2);
  top: calc(50% - var(--nc-camera-height) / 2);
  transform-origin: center center;
  will-change: transform;
  z-index: 2;
  /* Enable interactions for children on mobile (taps on champions/carrousel) */
  pointer-events: auto;
  background-color: transparent;
  overflow: visible;
  border: none;
  /* Masquer jusqu'au positionnement caméra pour éviter le CLS */
  visibility: hidden;
}
#svgWrapper.nc-camera-ready {
  visibility: visible;
}




#sceneWrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: visible!important;
  left: 0;
  top: 0;
  z-index: 2;   /* ← au-dessus du fond */
  background: transparent;
  isolation: isolate;
}

#sceneWrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
  pointer-events: none;
}


#scrollArea {
  width: 100%;
  height: 100%;
  overflow: auto; /* ✅ Scroll uniquement ici */
}



img.clone-anim {
  position: absolute !important;
  z-index: 9999 !important;
  transition: transform 0.8s ease-in-out !important;
  pointer-events: none;
  box-shadow: 0 0 8px red; /* debug visuel */
}

.clone-anim {
  position: absolute;
  z-index: 99999;
  transition: transform 0.6s ease;
  pointer-events: none;
}

#championSVG image {
  border-radius: 10px;
  z-index: 99999 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

img.zooming-out { opacity: 0; transition: opacity 0.3s; }


/* Suppression de toute bordure, outline, shadow sur les images SVG */
.counter-img,
.center-img,
svg image {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  stroke: none !important;
}


#championList, /* ← au cas où l'élément n'ait pas la classe */
#championList.liste-champions {
  background: transparent;
  position: absolute;
  left: 50%;
  top: calc(
    50% + var(--header-h) / 2 + (var(--filters-stack-h) / 2) + var(--filters-stack-gap) - 200px
  ) !important; /* force le décalage */
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: grid;
  justify-content: center;
  justify-items: center;
  align-content: start;
  gap: var(--gap);
  pointer-events: auto !important;
  box-sizing: border-box;

  --gap: 14px;
  --cols: 20;
  --rows: 7;
  --available-h: calc(100vh - var(--header-h, 64px) - var(--filters-stack-h, 124px));
  --available-h: calc(100dvh - var(--header-h, 64px) - var(--filters-stack-h, 124px));
  --thumb: min(
    90px,
    calc((100vw - (var(--cols) - 1) * var(--gap)) / var(--cols)),
    calc((var(--available-h) - (var(--rows) - 1) * var(--gap)) / var(--rows))
  );
  width: min(
    calc(var(--cols) * var(--thumb) + (var(--cols) - 1) * var(--gap)),
    calc(100vw - 16px)
  );
  height: var(--available-h);
  max-height: var(--available-h);
  overflow: hidden;
  grid-template-columns: repeat(var(--cols), var(--thumb));
  grid-auto-rows: var(--thumb);
}

#championList.liste-champions.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.champion-list-loader {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(8, 14, 30, 0.78);
  border: 1px solid rgba(130, 170, 255, 0.25);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.champion-list-loader__spinner {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: rgba(255, 255, 255, 0.95);
  animation: champion-list-loader-spin 0.85s linear infinite;
}

.champion-list-loader__text {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.88rem, 0.82rem + 0.25vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

@keyframes champion-list-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* La liste doit “réserver” la place du filtre fixed */
#mobileLight{
  padding-top: calc(var(--filters-stack-h, 124px) + 18px);
}

/* 
#championList[hidden] {
  display: none !important;
} */

/* Ensure Draft panel hides when [hidden] is set */
#paneldraft[hidden] { display: none !important; }

/* Vignettes (champions) */
#championList.liste-champions img {
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
  cursor: pointer;
  pointer-events: auto !important;
}

/* Mobile long-press feedback before opening hub */
#championList.liste-champions img.hub-pressing {
  transform: scale(1.06);
  transition: transform 140ms ease;
}

/* ===== HUD ring (liste champions) — noir / dore (desktop only) ===== */
/* Look: anneau premium + bevel sombre + glow dore discret (type LoL client) */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  #championList.liste-champions {
    overflow: visible;
  }

  /* Wrapper ideal si tes vignettes sont en <picture> */
  #championList.liste-champions picture {
    position: relative;
    display: block;
    width: var(--thumb, 54px);
    height: var(--thumb, 54px);
    border-radius: 999px;
    isolation: isolate;
    transform: translateZ(0);
    will-change: transform, filter;
  }

  /* Anneau externe: noir + dore (conic) */
  #championList.liste-champions picture::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 999px;

    /* Dore en arcs + zones sombres (effet "metal ring") */
    background:
      conic-gradient(
        from 210deg,
        rgba(220, 200, 140, 0.98) 0deg,
        rgba(170, 145, 90, 0.70) 18deg,
        rgba(10, 12, 18, 0.98) 54deg,
        rgba(210, 185, 120, 0.90) 92deg,
        rgba(10, 12, 18, 0.98) 136deg,
        rgba(185, 155, 100, 0.72) 208deg,
        rgba(220, 200, 140, 0.98) 360deg
      ),
      conic-gradient(
        from 30deg,
        rgba(255, 255, 255, 0.18) 0deg,
        rgba(255, 255, 255, 0.00) 18deg,
        rgba(0, 0, 0, 0.20) 54deg,
        rgba(255, 255, 255, 0.10) 92deg,
        rgba(0, 0, 0, 0.25) 140deg,
        rgba(255, 255, 255, 0.12) 200deg,
        rgba(255, 255, 255, 0.18) 360deg
      );

    /* On "vide" le centre pour ne garder que l'anneau */
    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 5px),
      #000 calc(100% - 4px)
    );
    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - 5px),
      #000 calc(100% - 4px)
    );

    box-shadow:
      0 0 0 1px rgba(255,255,255,0.10) inset,
      0 0 0 1px rgba(0,0,0,0.75),
      0 6px 14px rgba(0,0,0,0.55),
      0 12px 24px rgba(0,0,0,0.35);

    opacity: 0.96;
    transform: rotate(0deg);
    transition: transform 220ms ease, opacity 220ms ease, box-shadow 220ms ease;
    pointer-events: none;
  }

  /* Anneau interne + micro "shine" (verre) */
  #championList.liste-champions picture::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 999px;
    pointer-events: none;

    background:
      radial-gradient(circle at 28% 22%, rgba(255,255,255,0.16), transparent 42%),
      radial-gradient(circle at 70% 78%, rgba(191, 174, 129, 0.12), transparent 56%),
      radial-gradient(circle at 50% 50%, rgba(10,12,18,0.35), transparent 62%);

    /* Lisere externe sombre + lisere interne subtil */
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.65),
      0 0 0 1px rgba(255,255,255,0.06) inset;

    opacity: 0.55;
    mix-blend-mode: screen;
    transition: opacity 220ms ease;
  }

  /* Portrait: bevel sombre + cerclage interne */
  #championList.liste-champions picture img,
  #championList.liste-champions img {
    position: relative;
    z-index: 1;
    border-radius: 999px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.08),
      0 0 0 2px rgba(0,0,0,0.70);
  }

  /* Hover: lift + glow dore (pas flashy) */
  #championList.liste-champions picture:hover {
    transform: translateY(-2px) scale(1.055);
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.40));
  }

  #championList.liste-champions picture:hover::before {
    transform: rotate(16deg);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.08) inset,
      0 0 0 1px rgba(0,0,0,0.70),
      0 0 14px rgba(191, 174, 129, 0.18),
      0 0 22px rgba(191, 174, 129, 0.10),
      0 12px 22px rgba(0,0,0,0.45);
    opacity: 1;
  }

  #championList.liste-champions picture:hover::after {
    opacity: 0.72;
  }

  /* Fallback si pas de <picture> (moins parfait mais dore quand meme) */
  #championList.liste-champions img:hover {
    transform: translateY(-2px) scale(1.05);
    filter: drop-shadow(0 0 14px rgba(191, 174, 129, 0.14));
    outline: 2px solid rgba(191, 174, 129, 0.20);
    outline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #championList.liste-champions picture,
  #championList.liste-champions img {
    transition: none !important;
  }
}

/* Responsive : cols/rows ajustés pour remplir l'écran sans scroll */
@media (max-width: 1280px) { #championList.liste-champions { --cols: 14; --rows: 12; } }
@media (max-width: 1024px) { #championList.liste-champions { --cols: 12; --rows: 14; } }
@media (max-width: 720px)  { #championList.liste-champions { --cols: 10; --rows: 17; } }
@media (max-width: 560px)  { #championList.liste-champions { --cols: 8; --rows: 21; } }

@media (max-width: 720px) {
  #championList.is-mobile-hidden {
    display: none !important;
  }
}

@media (max-width: 600px) {
  #championList.liste-champions {
    /*
     * UX optimisée : affiche TOUS les champions sans scroll
     * ~168 champions = 12 colonnes x 14 lignes
     * Taille calculée dynamiquement pour remplir l'écran disponible
     */
    --cols: 12;
    --gap: 3px;
    /* Calcul dynamique : (hauteur dispo - gaps) / nb lignes */
    --available-h: calc(100vh - var(--header-h, 48px) - 16px);
    --available-h: calc(100dvh - var(--header-h, 48px) - 16px);
    --rows: 14; /* ~168 champions / 12 cols */
    --thumb: min(
      calc((100vw - 16px - (var(--cols) - 1) * var(--gap)) / var(--cols)),
      calc((var(--available-h) - (var(--rows) - 1) * var(--gap)) / var(--rows))
    );

    position: fixed;
    top: calc(var(--header-h, 96px) + var(--filters-stack-h, 50px) + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0;
    transform: none !important;
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--thumb));
    grid-auto-rows: var(--thumb);
    justify-content: center;
    justify-items: center;
    align-content: start;
    gap: var(--gap);
    width: 100% !important;
    max-width: 100%;
    height: calc(100vh - var(--header-h, 96px) - var(--filters-stack-h, 50px) - 8px);
    height: calc(100dvh - var(--header-h, 96px) - var(--filters-stack-h, 50px) - 8px);
    margin: 0 auto;
    padding: 8px;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
  }

  #championList.liste-champions img {
    width: var(--thumb);
    height: var(--thumb);
    min-width: 24px; /* Taille minimum lisible */
    min-height: 24px;
    border-radius: 50%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  /* Effet hover/touch pour meilleure UX */
  #championList.liste-champions img:active {
    transform: scale(1.15);
    box-shadow: 0 0 8px rgba(191, 174, 129, 0.6);
    z-index: 10;
  }
}

/* Très petits écrans (< 400px) - plus de colonnes pour tout afficher */
@media (max-width: 400px) {
  #championList.liste-champions {
    --cols: 10;
    --rows: 17; /* 168 / 10 ≈ 17 */
    --gap: 2px;
  }
}

/* === LANDSCAPE BLOCKER — overlay plein écran === */
#landscapeBlocker {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #0a0e1a;
  color: #bfae81;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: 'Barlow', sans-serif;
  font-size: 1.1rem;
  text-align: center;
  padding: 24px;
}
#landscapeBlocker .rotate-icon {
  font-size: 3rem;
  animation: rotateHint 2s ease-in-out infinite;
}
@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}
@media (max-width: 900px) and (orientation: landscape) {
  #landscapeBlocker { display: flex; }
}


image.centerchampion{
    cursor: pointer;
  pointer-events: auto !important;
}

/* =====================
   Carrousel Orbite (styles neutres)
   ===================== */
#carouselOrbite {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: calc(var(--header-h, 96px) + 12px) 0 0;
  margin: 0;
  display: block;
  /* visibility héritée de #svgWrapper (hidden → visible via .nc-camera-ready) */
  pointer-events: auto;
  box-sizing: border-box;
  background: transparent;
  isolation: isolate;
}

/* Empêche le carrousel de capter les clics au-dessus du header */
#carouselOrbite {
  margin-top: var(--header-h, 96px);
  padding-top: 0;
  z-index: 1;
}

#carouselOrbite::before {
  top: var(--header-h, 96px);
}

#carouselOrbite::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
  pointer-events: none;
}

#carouselOrbite .portal,
#carouselOrbite .track,
#carouselOrbite .slide {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

.fond-nc::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
}

.fond-nc::after{
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: none;
  mix-blend-mode: normal;
  opacity: 0.9;
}

/* =====================
   Carrousel — Colonnes (desktop)
   ===================== */
#carouselOrbite:not(.carousel-tiles) .portal {
  --visible: 4;
  --gap: clamp(14px, 1.4vw, 22px);
  --tileDur: 160ms;
  --tileEase: cubic-bezier(.2,.8,.2,1);
  --tileLift: -4px;
  --cBlue: rgba(80,170,255,.95);
  --cViolet: rgba(180,90,255,.95);
  --cRed: rgba(255,90,70,.95);
  width: min(1820px, 98vw);
  margin: 0 auto;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 28px) clamp(26px, 3vw, 42px);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}

#carouselOrbite:not(.carousel-tiles) .track {
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  width: 100%;
  transform: translate3d(calc(var(--offset, 0px) + var(--bias, 0px)), 0, 0);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  transform-style: preserve-3d;
  justify-content: center;
}

#carouselOrbite:not(.carousel-tiles) .slide {
  flex: 0 0 min(
    calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible)),
    calc((100vh - var(--header-h, 96px) - 100px) * 0.75)
  );
  aspect-ratio: 3 / 4;
  display: flex;
}

/* Desktop guardrail: keep portal content inside visible viewport */
@media (min-width: 901px) {
  #carouselOrbite {
    height: calc(100dvh - var(--nx-header-bottom, var(--header-h, 96px)));
    max-height: calc(100dvh - var(--nx-header-bottom, var(--header-h, 96px)));
    overflow: hidden;
  }

  #carouselOrbite .portal {
    max-height: 100%;
    overflow: hidden;
  }

  #carouselOrbite:not(.carousel-tiles) .slide {
    max-height: 100%;
  }

  #carouselOrbite:not(.carousel-tiles) .slide-tilt,
  #carouselOrbite:not(.carousel-tiles) .slide-content,
  #carouselOrbite:not(.carousel-tiles) .vignettehud {
    max-height: 100%;
  }
}

#carouselOrbite:not(.carousel-tiles) .slide-tilt,
#carouselOrbite:not(.carousel-tiles) .slide-content,
#carouselOrbite:not(.carousel-tiles) .vignettehud {
  width: 100%;
  height: 100%;
}

#carouselOrbite:not(.carousel-tiles) .slide-tilt {
  --tilt-y: 0deg;
  --tilt-z: 0deg;
  --tilt-y-translate: 0px;
  --tile-lift: 0px;
  transform: translateY(calc(var(--tilt-y-translate) + var(--tile-lift))) rotateY(var(--tilt-y)) rotateZ(var(--tilt-z));
  transform-style: preserve-3d;
  transition: transform var(--tileDur) var(--tileEase), filter var(--tileDur) var(--tileEase);
  will-change: transform, filter;
}

#carouselOrbite:not(.carousel-tiles) .vignettehud {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(10, 12, 20, 0.92);
  border: 1px solid rgba(171, 92, 255, 0.35);
  transition: none;
  box-shadow:
    0 0 0 1px rgba(171, 92, 255, 0.25) inset,
    0 0 18px rgba(171, 92, 255, 0.22),
    0 20px 50px rgba(0, 0, 0, 0.45);
}

/* === Hover/focus premium cues === */
#carouselOrbite:not(.carousel-tiles) .vignettehud::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, var(--cBlue), var(--cViolet), var(--cRed), var(--cViolet), var(--cBlue));
  opacity: 0;
  transform: translateX(-30%);
  transition: opacity var(--tileDur) var(--tileEase), transform var(--tileDur) var(--tileEase);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

#carouselOrbite:not(.carousel-tiles) .vignettehud::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--tileDur) var(--tileEase);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 28px rgba(120,90,255,.18);
}

#carouselOrbite:not(.carousel-tiles) picture.vignettehudimg {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex: 0 0 auto;
}

#carouselOrbite:not(.carousel-tiles) picture.vignettehudimg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 8, 14, 0) 45%, rgba(6, 8, 14, 0.55) 70%, rgba(6, 8, 14, 0.85) 100%);
  opacity: 0.25;
  transition: opacity var(--tileDur) var(--tileEase);
  pointer-events: none;
}

#carouselOrbite:not(.carousel-tiles) img.vignettehudimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  transition: transform var(--tileDur) var(--tileEase), filter var(--tileDur) var(--tileEase);
  will-change: transform, filter;
}

#carouselOrbite:not(.carousel-tiles) .vignettehudbarre {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 10px 18px 14px;
  background: rgba(8, 10, 18, 0.94);
  transform: translateY(0);
  opacity: 1;
  transition: transform var(--tileDur) var(--tileEase), opacity var(--tileDur) var(--tileEase);
  will-change: transform, opacity;
  z-index: 2;
}

#carouselOrbite:not(.carousel-tiles) .vignettehudbarre > *{
  opacity: 0.9;
  transform: translateY(0);
  transition: transform var(--tileDur) var(--tileEase), opacity var(--tileDur) var(--tileEase), filter var(--tileDur) var(--tileEase);
  will-change: transform, opacity, filter;
}

#carouselOrbite:not(.carousel-tiles) .vignettehudtags {
  justify-content: center;
  gap: 8px;
}

#carouselOrbite:not(.carousel-tiles) .vignettehudtag {
  font-size: clamp(0.8rem, 0.7rem + 0.45vw, 1.05rem);
  letter-spacing: 0.2em;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(8, 10, 18, 0.65);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

#carouselOrbite:not(.carousel-tiles) .vignettehudtitre {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

#carouselOrbite:not(.carousel-tiles) .vignettehudtexte {
  font-size: clamp(0.82rem, 0.76rem + 0.25vw, 0.95rem);
  opacity: 0.65;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

#carouselOrbite:not(.carousel-tiles) .vignettehudspotlight {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 2px;
}

#carouselOrbite:not(.carousel-tiles) .vignettehudspotlighticon {
  width: clamp(40px, 2.8vw, 56px);
  height: clamp(40px, 2.8vw, 56px);
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(120, 170, 255, 0.2);
  background: rgba(8, 10, 18, 0.9);
}

#carouselOrbite:not(.carousel-tiles) .slide {
  transition: transform var(--tileDur) var(--tileEase), opacity var(--tileDur) var(--tileEase);
}

#carouselOrbite .slide {
  cursor: pointer;
}

#carouselOrbite:not(.carousel-tiles) .slide.is-center {
  transform: scale(1.04);
}

#carouselOrbite:not(.carousel-tiles) .slide.is-near {
  transform: scale(0.98);
  opacity: 0.9;
}

#carouselOrbite:not(.carousel-tiles) .slide.is-far {
  transform: scale(0.94);
  opacity: 0.75;
}

/* Léger tilt + centre bien mis en valeur */
#carouselOrbite:not(.carousel-tiles) .slide.is-left .slide-tilt {
  --tilt-y: 8deg;
  --tilt-z: -1.2deg;
  --tilt-y-translate: 4px;
}

#carouselOrbite:not(.carousel-tiles) .slide.is-right .slide-tilt {
  --tilt-y: -8deg;
  --tilt-z: 1.2deg;
  --tilt-y-translate: 4px;
}

#carouselOrbite:not(.carousel-tiles) .slide.is-center .slide-tilt {
  --tilt-y: 0deg;
  --tilt-z: 0deg;
  --tilt-y-translate: -6px;
}

#carouselOrbite:not(.carousel-tiles) .slide:hover .slide-tilt,
#carouselOrbite:not(.carousel-tiles) .slide:active .slide-tilt,
#carouselOrbite:not(.carousel-tiles) .slide:focus-visible .slide-tilt,
#carouselOrbite:not(.carousel-tiles) .slide:focus-within .slide-tilt,
#carouselOrbite:not(.carousel-tiles) .slide.is-active .slide-tilt {
  --tile-lift: var(--tileLift);
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.45));
}

#carouselOrbite:not(.carousel-tiles) .slide:hover img.vignettehudimg,
#carouselOrbite:not(.carousel-tiles) .slide:active img.vignettehudimg,
#carouselOrbite:not(.carousel-tiles) .slide:focus-visible img.vignettehudimg,
#carouselOrbite:not(.carousel-tiles) .slide:focus-within img.vignettehudimg,
#carouselOrbite:not(.carousel-tiles) .slide.is-active img.vignettehudimg {
  transform: scale(1.03);
  filter: contrast(1.06) saturate(1.06);
}

#carouselOrbite:not(.carousel-tiles) .slide:hover picture.vignettehudimg::after,
#carouselOrbite:not(.carousel-tiles) .slide:active picture.vignettehudimg::after,
#carouselOrbite:not(.carousel-tiles) .slide:focus-visible picture.vignettehudimg::after,
#carouselOrbite:not(.carousel-tiles) .slide:focus-within picture.vignettehudimg::after,
#carouselOrbite:not(.carousel-tiles) .slide.is-active picture.vignettehudimg::after {
  opacity: 0.85;
}
#carouselOrbite:not(.carousel-tiles) .slide:hover .vignettehud::before,
#carouselOrbite:not(.carousel-tiles) .slide:active .vignettehud::before,
#carouselOrbite:not(.carousel-tiles) .slide:focus-visible .vignettehud::before,
#carouselOrbite:not(.carousel-tiles) .slide:focus-within .vignettehud::before,
#carouselOrbite:not(.carousel-tiles) .slide.is-active .vignettehud::before {
  opacity: 1;
  transform: translateX(0%);
}

#carouselOrbite:not(.carousel-tiles) .slide:hover .vignettehud::after,
#carouselOrbite:not(.carousel-tiles) .slide:active .vignettehud::after,
#carouselOrbite:not(.carousel-tiles) .slide:focus-visible .vignettehud::after,
#carouselOrbite:not(.carousel-tiles) .slide:focus-within .vignettehud::after,
#carouselOrbite:not(.carousel-tiles) .slide.is-active .vignettehud::after {
  opacity: 1;
}

#carouselOrbite:not(.carousel-tiles) .slide:hover .vignettehudbarre,
#carouselOrbite:not(.carousel-tiles) .slide:active .vignettehudbarre,
#carouselOrbite:not(.carousel-tiles) .slide:focus-visible .vignettehudbarre,
#carouselOrbite:not(.carousel-tiles) .slide:focus-within .vignettehudbarre,
#carouselOrbite:not(.carousel-tiles) .slide.is-active .vignettehudbarre {
  opacity: 1;
  transform: translateY(0);
}

#carouselOrbite:not(.carousel-tiles) .slide:hover .vignettehudbarre > *,
#carouselOrbite:not(.carousel-tiles) .slide:active .vignettehudbarre > *,
#carouselOrbite:not(.carousel-tiles) .slide:focus-visible .vignettehudbarre > *,
#carouselOrbite:not(.carousel-tiles) .slide:focus-within .vignettehudbarre > *,
#carouselOrbite:not(.carousel-tiles) .slide.is-active .vignettehudbarre > * {
  opacity: 1;
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

#carouselOrbite:not(.carousel-tiles) .slide:hover .vignettehud,
#carouselOrbite:not(.carousel-tiles) .slide:active .vignettehud,
#carouselOrbite:not(.carousel-tiles) .slide:focus-visible .vignettehud,
#carouselOrbite:not(.carousel-tiles) .slide:focus-within .vignettehud {
  box-shadow:
    0 0 0 1px rgba(171, 92, 255, 0.25) inset,
    0 0 18px rgba(171, 92, 255, 0.22),
    0 20px 50px rgba(0, 0, 0, 0.45);
}

#carouselOrbite:not(.carousel-tiles) .slide:focus-visible {
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  #carouselOrbite:not(.carousel-tiles) .slide,
  #carouselOrbite:not(.carousel-tiles) .slide-tilt,
  #carouselOrbite:not(.carousel-tiles) img.vignettehudimg,
  #carouselOrbite:not(.carousel-tiles) .vignettehud::before,
  #carouselOrbite:not(.carousel-tiles) .vignettehud::after,
  #carouselOrbite:not(.carousel-tiles) .vignettehudbarre {
    transition: none !important;
  }
}

@media (max-width: 1500px) {
  #carouselOrbite:not(.carousel-tiles) .portal { --visible: 3; }
}

@media (max-width: 1200px) {
  #carouselOrbite:not(.carousel-tiles) .portal { --visible: 2; }
}

@media (max-width: 900px) {
  #carouselOrbite:not(.carousel-tiles) .portal { --visible: 1; }
}

/* Grille 2x2 neutre pour les 4 vignettes */
#carouselOrbite.carousel-tiles {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  --tile-gap: clamp(26px, 4vw, 52px);
  --tile-size: 90%;
  background-color: #000 !important;
  background-image: none !important;
}

#carouselOrbite.carousel-tiles .portal {
  display: flex;
  width: min(900px, 84vw);
  height: min(80%, 580px);
  max-height: 100%;
  background: transparent;
}

#carouselOrbite.carousel-tiles .track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--tile-gap);
  padding: 0;
  width: 100%;
  height: 100%;
}

#carouselOrbite.carousel-tiles .slide {
  display: block;
  width: var(--tile-size);
  height: var(--tile-size);
}

#carouselOrbite.carousel-tiles .slide:nth-child(1) { justify-self: start; align-self: start; }
#carouselOrbite.carousel-tiles .slide:nth-child(2) { justify-self: end;   align-self: start; }
#carouselOrbite.carousel-tiles .slide:nth-child(3) { justify-self: start; align-self: end; }
#carouselOrbite.carousel-tiles .slide:nth-child(4) { justify-self: end;   align-self: end; }

@media (max-width: 900px) {
  #carouselOrbite.carousel-tiles .portal {
    width: min(860px, 90vw);
    height: min(58vh, 480px);
  }
}

@media (max-width: 600px) {
  #carouselOrbite.carousel-tiles .portal {
    width: min(720px, 94vw);
    height: min(52vh, 420px);
  }

  #carouselOrbite.carousel-tiles {
    --tile-gap: clamp(14px, 4vw, 24px);
    --tile-size: 94%;
  }
}

/* =========================================================
   NX PATCH — Home tiles: remplir la largeur fenêtre (desktop)
   ========================================================= */

/* Desktop patch désactivé — taille contrôlée par .portal width/height */


/* (ancien bloc landscape mobile supprimé — remplacé par #landscapeBlocker) */

body #mobileLight {
  display: none;
}


.champion-img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  clip-path: circle(50% at 50% 50%);
}


/* --- TITRES PREMIUM --- */
h1, h2, h3 {
  font-family: 'Barlow', 'Orbitron', 'Montserrat', Arial, sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px #00fff422;
  color: #e5e9ff;
}

/* =========================================
   NX — Filters Premium Clean (override)
   ========================================= */
#filtersStack.filters-stack,
#filtersStack {
  position: fixed;
  left: var(--filters-center-x, 50vw);
  transform: translateX(-50%);
  transform-origin: top center;
  top: calc(var(--header-h, 96px) + 40px);
  z-index: 10001;
  pointer-events: auto;
  width: max-content;
  max-width: 92vw;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  display: grid;
  grid-template-columns: auto auto;
  align-items: start;
  justify-content: center;
  gap: var(--nx-filters-gap);
}

#filtersStack[data-visible="0"] {
  visibility: hidden;
  pointer-events: none;
}

#filtersStack[data-visible="1"] {
  visibility: visible;
  pointer-events: auto;
}

#rolesWrapper,
#tierWrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 10px;
  padding: var(--nx-card-pad-y) var(--nx-card-pad-x) calc(var(--nx-card-pad-y) + 2px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 14, 28, 0.58), rgba(6, 8, 16, 0.46));
  border: 1px solid rgba(180, 160, 255, 0.14);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
}

#rolesWrapper,
#tierWrapper{
  width: var(--filters-card-w, 420px);
  max-width: 46vw;
}

#rolesWrapper::before,
#tierWrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--nx-notch-w);
  height: var(--nx-notch-h);
  transform: translate(-50%, -50%);
  background: var(--nx-section-bg, rgba(0, 0, 0, 0.82));
  border: 1px solid rgba(180, 160, 255, 0.18);
  border-radius: 999px;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

#rolesWrapper::after,
#tierWrapper::after {
  position: absolute;
  top: 0;
  left: 50%;
  height: var(--nx-notch-h);
  transform: translate(-50%, -52%);
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 224, 210, 0.88);
  text-shadow: 0 0 12px rgba(120, 190, 255, 0.18);
}

#rolesWrapper::after { content: "LANE"; }
#tierWrapper::after  { content: "TIERS"; }

#rolesWrapper button,
#tierWrapper button {
  padding: var(--nx-pill-pad-y) var(--nx-pill-pad-x);
  border-radius: 999px;
  font-size: var(--nx-pill-font);
  font-weight: 600;
  line-height: 1;
  border: 1px solid rgba(180, 160, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 224, 210, 0.86);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 10px 16px rgba(0, 0, 0, 0.25);
  transition: transform 160ms ease, filter 160ms ease, background 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}

#rolesWrapper button:hover,
#tierWrapper button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  border-color: rgba(160, 190, 255, 0.22);
}

#rolesWrapper button.active,
#tierWrapper button.active,
#rolesWrapper button.is-active,
#tierWrapper button.is-active,
#rolesWrapper button[aria-pressed="true"],
#tierWrapper button[aria-pressed="true"] {
  background: linear-gradient(90deg, rgba(0, 190, 255, 0.22), rgba(255, 70, 170, 0.14));
  border-color: rgba(0, 190, 255, 0.28);
  color: rgba(232, 224, 210, 0.95);
  box-shadow:
    0 14px 22px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

@media (max-width: 768px) {
  /* Filters visible by default on mobile - hidden only when explicitly set */
  #filtersStack {
    visibility: visible;
    pointer-events: auto;
  }

  #filtersStack[data-visible="0"] {
    visibility: hidden;
    pointer-events: none;
  }

  /* Meta section - padding top pour éviter d'être cachée par le header fixe */
  #sectionMeta.is-active,
  body.meta-open #sectionMeta {
    padding-top: calc(var(--header-h, 128px) + 16px);
  }
}

@media (max-width: 820px) {
  :root {
    --filters-stack-h: 60px;
  }

  #filtersStack.filters-stack,
  #filtersStack {
    grid-template-columns: 1fr 1fr;
    width: min(96vw, 400px);
    gap: 6px;
    top: calc(var(--header-h, 96px) + 8px);
  }

  #rolesWrapper,
  #tierWrapper {
    width: 100%;
    max-width: 100%;
    padding: 6px 8px 8px;
    gap: 4px;
    border-radius: 12px;
  }

  #rolesWrapper::before,
  #tierWrapper::before {
    display: none;
  }

  #rolesWrapper::after,
  #tierWrapper::after {
    font-size: 9px;
    height: 16px;
    padding: 0 8px;
  }

  #rolesWrapper button,
  #tierWrapper button {
    padding: 4px 8px;
    font-size: 11px;
  }
}

@media (max-width: 600px) {
  :root {
    --nx-card-pad-y: 4px;
    --nx-card-pad-x: 6px;
    --nx-pill-pad-y: 3px;
    --nx-pill-pad-x: 6px;
    --nx-pill-font: 10px;
    --nx-notch-w: 48px;
    --nx-notch-h: 14px;
    --filters-stack-h: 50px;
  }

  #filtersStack.filters-stack,
  #filtersStack {
    width: min(98vw, 360px);
    gap: 4px;
    top: calc(var(--header-h, 96px) + 4px);
  }

  #rolesWrapper,
  #tierWrapper {
    flex-wrap: nowrap;
    gap: 3px;
    padding: 4px 6px 6px;
    border-radius: 10px;
  }

  #rolesWrapper::after,
  #tierWrapper::after {
    font-size: 8px;
    height: 14px;
    padding: 0 6px;
  }

  #rolesWrapper button,
  #tierWrapper button {
    padding: 3px 5px;
    font-size: 9px;
    border-radius: 6px;
  }
}

body.draftouvert #filtersStack {
  display: none !important;
}

/* ↓ Réduction d’opacité des champions non sélectionnés */
#championList.blur-fort .champion-image {
  opacity: 0.3;
  transition: opacity 0.25s ease, filter 0.25s ease;
}

/* ↓ Champion remis en avant au survol */
#championList.blur-fort .champion-image:hover {
  opacity: 1;
  filter: brightness(1.1); /* +10% de lumière */
  z-index: 2;
}

.counter-img.hub-video   {
  color:#e8f0ff ;
  background-color : white ; }
.counter-img.hub-builds  { color:#bfae81; }
.counter-img.hub-protips { color:#00fff7; }
.counter-img.hub-synergy { color:#79a7ff; }
.counter-img.hub-stats   { color:#e2e8f0; }
/* hub-counters utilise son propre dégradé dans le SVG */

/* Scroll margin pour sections sous header fixe */
#sectionMeta,
#focusSection,
#faqSection,
.sectionmeta,
.focus-section {
  scroll-margin-top: calc(var(--header-h, 96px) + 16px);
}

.sectionmeta { display: none; }

/* Focus/FAQ should align flush with fixed header (no extra gap) */
#focusSection,
#faqSection {
  scroll-margin-top: var(--header-h, 96px);
}

/* Focus/FAQ hors flux pour éviter le scroll global */
#focusSection,
#faqSection {
  position: absolute;
  inset: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

#focusSection:not(.focus-mounted) { opacity: 0; pointer-events: none; }
#faqSection:not(.faq-mounted) { opacity: 0; pointer-events: none; }

#focusSection.focus-mounted,
#faqSection.faq-mounted,
body.isFocusView #focusSection,
body.isFaqView #faqSection {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - var(--nx-header-bottom, var(--header-h, 96px)) - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  pointer-events: auto;
  box-sizing: border-box;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

.focus-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  padding: 4px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  color: #efeaff;
  font-family: "Barlow", "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#focusSection {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(97, 63, 199, 0.35) 0%, rgba(10, 11, 26, 0) 62%),
    radial-gradient(100% 130% at 0% 100%, rgba(203, 168, 92, 0.18) 0%, rgba(9, 10, 24, 0) 60%),
    linear-gradient(180deg, rgba(8, 9, 20, 0.98) 0%, rgba(6, 7, 18, 0.99) 100%);
}

#faqSection {
  background:
    radial-gradient(130% 140% at 100% 0%, rgba(64, 104, 180, 0.18) 0%, rgba(8, 10, 20, 0) 60%),
    linear-gradient(180deg, rgba(8, 10, 22, 0.98) 0%, rgba(5, 7, 16, 0.99) 100%);
}

.focus-section__shell {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 10px;
  border: 1px solid rgba(128, 146, 236, 0.36);
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(114, 70, 255, 0.22) 0%, rgba(15, 17, 36, 0) 62%),
    linear-gradient(180deg, rgba(16, 16, 38, 0.96) 0%, rgba(8, 10, 24, 0.98) 100%);
  box-shadow: 0 20px 44px rgba(2, 5, 14, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 8px;
  display: grid;
  gap: 14px;
  box-sizing: border-box;
}

.focus-section__head {
  display: grid;
  gap: 8px;
}

.focus-section__titre {
  margin: 0;
  font-size: clamp(1.18rem, 0.96rem + 1vw, 1.9rem);
  letter-spacing: 0.03em;
  color: #f5f1ff;
}

.focus-section__texte {
  margin: 0;
  max-width: 92ch;
  color: rgba(233, 227, 255, 0.84);
  line-height: 1.5;
}

.focus-section__body {
  display: grid;
  gap: 12px;
}

.focus-section__lead {
  margin: 0;
  color: rgba(227, 220, 248, 0.9);
  line-height: 1.45;
}

.focus-topic-slot {
  display: grid;
  gap: 14px;
}

.focus-topic-slot__loading {
  border-radius: 14px;
  border: 1px dashed rgba(191, 174, 129, 0.38);
  background: rgba(9, 11, 25, 0.62);
  padding: 14px;
  color: rgba(234, 227, 249, 0.78);
  font-size: 0.92rem;
}

.focus-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.focus-section__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(191, 174, 129, 0.24), rgba(114, 70, 255, 0.2));
  border: 1px solid rgba(191, 174, 129, 0.64);
  color: #f3ebd8;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.focus-section__cta:hover,
.focus-section__cta:focus-visible {
  background: linear-gradient(135deg, rgba(191, 174, 129, 0.36), rgba(114, 70, 255, 0.28));
  box-shadow: 0 10px 26px rgba(5, 6, 15, 0.46), 0 0 16px rgba(191, 174, 129, 0.2);
  transform: translateY(-1px);
}

.focus-smolder {
  display: grid;
  gap: 14px;
}

.fs-hero,
.fs-card {
  border: 1px solid rgba(126, 142, 224, 0.32);
  border-radius: 16px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(101, 73, 186, 0.2) 0%, rgba(12, 14, 32, 0) 64%),
    linear-gradient(180deg, rgba(19, 21, 46, 0.94) 0%, rgba(10, 12, 28, 0.97) 100%);
  box-shadow: 0 10px 24px rgba(4, 8, 19, 0.48);
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.fs-hero {
  padding: 16px;
  display: grid;
  gap: 10px;
}

.fs-hero__top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid rgba(128, 146, 236, 0.48);
  background: rgba(7, 12, 27, 0.68);
  color: rgba(236, 231, 255, 0.9);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  text-transform: uppercase;
}

.fs-chip--patch {
  border-color: rgba(191, 174, 129, 0.6);
  color: #efdfba;
}

.fs-hero h3 {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 0.85vw, 1.85rem);
  color: #f8f4ff;
}

.fs-subtitle,
.fs-summary,
.fs-note {
  margin: 0;
  line-height: 1.45;
}

.fs-subtitle {
  color: rgba(220, 207, 255, 0.86);
  font-size: 0.9rem;
}

.fs-summary {
  color: rgba(240, 233, 255, 0.93);
}

.fs-note {
  color: rgba(220, 211, 244, 0.78);
  font-size: 0.9rem;
}

.fs-role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fs-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(128, 146, 236, 0.5);
  background: rgba(9, 12, 27, 0.72);
  color: #ece7ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
}

.fs-badge--tier,
.fs-badge--stack {
  border-color: rgba(191, 174, 129, 0.62);
  color: #f0dfbd;
}

.fs-badge--lane {
  border-color: rgba(107, 206, 255, 0.62);
  color: rgba(199, 236, 255, 0.95);
}

.fs-card {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.fs-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fs-card__head h4 {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(239, 231, 255, 0.98);
}

.fs-card__meta {
  color: rgba(215, 205, 242, 0.76);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
}

.fs-grid {
  display: grid;
  gap: 12px;
}

.fs-grid--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fs-grid--double {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fs-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.fs-metric {
  border: 1px solid rgba(126, 142, 224, 0.28);
  border-radius: 12px;
  background: rgba(8, 12, 26, 0.66);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.fs-metric__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.fs-metric__role {
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(233, 228, 255, 0.95);
}

.fs-metric__stats {
  display: grid;
  gap: 3px;
  font-size: 0.84rem;
  color: rgba(220, 212, 245, 0.86);
}

.fs-breakpoints,
.fs-opponents,
.fs-synergies,
.fs-builds,
.fs-phases {
  display: grid;
  gap: 10px;
}

.fs-breakpoint,
.fs-opponent,
.fs-synergy,
.fs-build,
.fs-phase {
  border: 1px solid rgba(126, 142, 224, 0.25);
  border-radius: 12px;
  background: rgba(9, 12, 29, 0.62);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.fs-breakpoint__head,
.fs-opponent__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fs-breakpoint__tier {
  color: rgba(219, 210, 246, 0.76);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.fs-build h5,
.fs-phase h5,
.fs-opponent h5,
.fs-synergy h5 {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(244, 238, 255, 0.96);
}

.fs-build ol,
.fs-phase ul,
.fs-list {
  margin: 0;
  padding-left: 18px;
  color: rgba(224, 216, 246, 0.9);
  display: grid;
  gap: 6px;
}

.fs-list--sources a {
  color: rgba(209, 224, 255, 0.92);
  text-decoration: none;
}

.fs-list--sources a:hover,
.fs-list--sources a:focus-visible {
  text-decoration: underline;
}

.fs-card p {
  margin: 0;
  color: rgba(225, 217, 248, 0.9);
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .fs-grid--triple {
    grid-template-columns: 1fr;
  }

  .fs-grid--double {
    grid-template-columns: 1fr;
  }

  .fs-metrics {
    grid-template-columns: 1fr;
  }
}

/* ─── Hero splash ─────────────────────────────────────────────────────────── */

.fs-hero {
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  padding: 20px;
  min-height: 180px;
}

.fs-hero__splash {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fs-hero__info {
  display: grid;
  gap: 6px;
}

.fs-icon {
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.fs-icon--hero {
  border-radius: 10px;
  border: 2px solid rgba(191, 174, 129, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.fs-icon--lg {
  border-radius: 8px;
}

/* ─── Color-coded card variants ──────────────────────────────────────────── */

.fs-card--meta {
  border-color: rgba(200, 170, 60, 0.45);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(200, 170, 60, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(19, 21, 46, 0.94), rgba(10, 12, 28, 0.97));
}

.fs-card--meta .fs-card__head h4 { color: #f0dfbd; }

.fs-card--stacks {
  border-color: rgba(255, 160, 50, 0.4);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 160, 50, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, rgba(19, 21, 46, 0.94), rgba(10, 12, 28, 0.97));
}

.fs-card--stacks .fs-card__head h4 { color: #ffd69c; }

.fs-stack--20 { border-color: rgba(100, 200, 100, 0.4); }
.fs-stack--85 { border-color: rgba(100, 160, 255, 0.4); }
.fs-stack--150 { border-color: rgba(255, 120, 50, 0.5); }

.fs-card--skills {
  border-color: rgba(100, 160, 255, 0.4);
  background:
    radial-gradient(120% 140% at 0% 100%, rgba(80, 140, 240, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, rgba(19, 21, 46, 0.94), rgba(10, 12, 28, 0.97));
}

.fs-card--skills .fs-card__head h4 { color: #b8d4ff; }

.fs-card--runes {
  border-color: rgba(170, 130, 255, 0.4);
  background:
    radial-gradient(120% 140% at 100% 100%, rgba(140, 100, 230, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, rgba(19, 21, 46, 0.94), rgba(10, 12, 28, 0.97));
}

.fs-card--runes .fs-card__head h4 { color: #d4c4ff; }

.fs-card--build {
  border-color: rgba(80, 180, 220, 0.4);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(60, 160, 200, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, rgba(19, 21, 46, 0.94), rgba(10, 12, 28, 0.97));
}

.fs-card--build .fs-card__head h4 { color: #a8e4f8; }

.fs-card--plan {
  border-color: rgba(170, 130, 255, 0.4);
  background:
    radial-gradient(120% 140% at 0% 100%, rgba(130, 90, 220, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, rgba(19, 21, 46, 0.94), rgba(10, 12, 28, 0.97));
}

.fs-card--plan .fs-card__head h4 { color: #d0c0ff; }

.fs-card--danger {
  border-color: rgba(255, 80, 80, 0.4);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 60, 60, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(19, 21, 46, 0.94), rgba(10, 12, 28, 0.97));
}

.fs-card--danger .fs-card__head h4 { color: #ffb0a0; }

.fs-card--ally {
  border-color: rgba(80, 200, 120, 0.4);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(60, 180, 100, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(19, 21, 46, 0.94), rgba(10, 12, 28, 0.97));
}

.fs-card--ally .fs-card__head h4 { color: #a0f0b8; }

.fs-card--warn {
  border-color: rgba(255, 160, 50, 0.4);
  background:
    radial-gradient(120% 140% at 100% 100%, rgba(255, 140, 30, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(19, 21, 46, 0.94), rgba(10, 12, 28, 0.97));
}

.fs-card--warn .fs-card__head h4 { color: #ffd69c; }

/* ─── WR color coding ────────────────────────────────────────────────────── */

.fs-wr--high { color: #6fdd8b; }
.fs-wr--mid { color: #f0dfbd; }
.fs-wr--low { color: #ff9a8c; }
.fs-ban { color: #ff9a8c; }

/* ─── Spell chips (skill order) ──────────────────────────────────────────── */

.fs-spell-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: rgba(225, 217, 248, 0.9);
}

.fs-spell-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(80, 140, 240, 0.15);
  border: 1px solid rgba(100, 160, 255, 0.35);
  font-weight: 700;
  font-size: 0.82rem;
  color: #c8dcff;
}

.fs-spell-sep {
  color: rgba(200, 190, 230, 0.5);
  font-weight: 700;
  font-size: 0.9rem;
}

/* ─── Rune chips ─────────────────────────────────────────────────────────── */

.fs-keystone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(140, 100, 230, 0.1);
  border: 1px solid rgba(170, 130, 255, 0.3);
}

.fs-keystone strong {
  color: #ece7ff;
  font-size: 0.95rem;
}

.fs-chip--keystone {
  border-color: rgba(170, 130, 255, 0.5);
  color: #d4c4ff;
  font-size: 0.65rem;
}

.fs-rune-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.fs-rune-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(210, 200, 240, 0.7);
  min-width: 72px;
}

.fs-rune-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(130, 100, 220, 0.1);
  border: 1px solid rgba(160, 130, 240, 0.25);
  font-size: 0.8rem;
  color: #ddd4f0;
}

/* ─── Item list (builds) ─────────────────────────────────────────────────── */

.fs-item-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  counter-reset: item-counter;
}

.fs-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(60, 160, 200, 0.06);
  border: 1px solid rgba(80, 180, 220, 0.2);
  counter-increment: item-counter;
  color: rgba(224, 216, 246, 0.9);
  font-size: 0.88rem;
}

.fs-item-row::before {
  content: counter(item-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(80, 180, 220, 0.2);
  font-size: 0.7rem;
  font-weight: 700;
  color: #a8e4f8;
  flex-shrink: 0;
}

/* ─── Champion portraits in matchups/synergies ────────────────────────────── */

.fs-opponent__head,
.fs-synergy__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fs-opponent__head .fs-icon,
.fs-synergy__head .fs-icon {
  border-radius: 8px;
  border: 1.5px solid rgba(126, 142, 224, 0.4);
}

.fs-card--danger .fs-opponent__head .fs-icon {
  border-color: rgba(255, 100, 80, 0.5);
}

.fs-card--ally .fs-synergy__head .fs-icon {
  border-color: rgba(80, 200, 120, 0.5);
}

.fs-badge--danger {
  border-color: rgba(255, 100, 80, 0.55);
  color: #ffb0a0;
  background: rgba(255, 60, 60, 0.1);
}

/* ─── Game plan phase numbers ─────────────────────────────────────────────── */

.fs-phase__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fs-phase__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.fs-phase--early { border-color: rgba(100, 200, 130, 0.35); }
.fs-phase--early .fs-phase__num { background: rgba(80, 200, 120, 0.2); color: #a0f0b8; }
.fs-phase--mid { border-color: rgba(100, 160, 255, 0.35); }
.fs-phase--mid .fs-phase__num { background: rgba(80, 140, 240, 0.2); color: #b8d4ff; }
.fs-phase--late { border-color: rgba(255, 160, 50, 0.35); }
.fs-phase--late .fs-phase__num { background: rgba(255, 140, 30, 0.2); color: #ffd69c; }

/* ─── Combos ─────────────────────────────────────────────────────────────── */

.fs-combos {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.fs-combos h5 {
  font-size: 0.9rem;
  color: #c8dcff;
  margin: 0 0 4px;
}

.fs-combo {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(100, 160, 255, 0.2);
  background: rgba(80, 140, 240, 0.06);
  display: grid;
  gap: 6px;
}

.fs-combo__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fs-combo__level {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fs-combo--easy { border-color: rgba(100, 200, 100, 0.3); background: rgba(80, 200, 120, 0.06); }
.fs-combo--easy .fs-combo__level { background: rgba(80, 200, 120, 0.2); color: #6fdd8b; }

.fs-combo--medium { border-color: rgba(255, 200, 60, 0.3); background: rgba(255, 200, 60, 0.06); }
.fs-combo--medium .fs-combo__level { background: rgba(255, 200, 60, 0.2); color: #f0dfbd; }

.fs-combo--hard { border-color: rgba(255, 90, 70, 0.3); background: rgba(255, 80, 60, 0.06); }
.fs-combo--hard .fs-combo__level { background: rgba(255, 80, 60, 0.2); color: #ff9a8c; }

.fs-combo .fs-spell-chip--sm {
  font-size: 0.75rem;
  padding: 2px 6px;
}

.fs-combo .fs-spell-sep--sm {
  font-size: 0.8rem;
}

.fs-combo .fs-note {
  font-size: 0.8rem;
  color: rgba(225, 217, 248, 0.75);
  margin: 0;
  line-height: 1.4;
}

/* ─── Spell Breakdown ────────────────────────────────────────────────────── */

.fs-spell-breakdown {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.fs-spell-breakdown h5 {
  font-size: 0.9rem;
  color: #c8dcff;
  margin: 0 0 2px;
}

.fs-spell-bd {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(100, 160, 255, 0.2);
  background: rgba(80, 140, 240, 0.04);
  display: grid;
  gap: 5px;
}

.fs-spell-bd__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fs-spell-bd__head strong {
  font-size: 0.88rem;
}

.fs-spell-bd p {
  font-size: 0.82rem;
  color: rgba(225, 217, 248, 0.8);
  margin: 0;
  line-height: 1.4;
}

.fs-spell-bd__ctx {
  font-size: 0.78rem;
  color: rgba(210, 200, 240, 0.65);
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(100, 160, 255, 0.06);
  border-left: 2px solid rgba(100, 160, 255, 0.3);
  line-height: 1.35;
}

.fs-spell-bd__str {
  font-size: 0.8rem;
  font-style: italic;
  color: rgba(225, 217, 248, 0.7);
}

/* Color variants per spell */
.fs-spell-bd--red  { border-color: rgba(255, 80, 80, 0.3); }
.fs-spell-bd--red  .fs-spell-bd__head strong { color: #ff9a8c; }
.fs-spell-bd--blue { border-color: rgba(100, 160, 255, 0.3); }
.fs-spell-bd--blue .fs-spell-bd__head strong { color: #b8d4ff; }
.fs-spell-bd--yellow { border-color: rgba(255, 200, 60, 0.3); }
.fs-spell-bd--yellow .fs-spell-bd__head strong { color: #f0dfbd; }
.fs-spell-bd--violet { border-color: rgba(170, 130, 255, 0.3); }
.fs-spell-bd--violet .fs-spell-bd__head strong { color: #d4c4ff; }

/* ─── Skill Philosophy ───────────────────────────────────────────────────── */

.fs-skill-philo {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(100, 160, 255, 0.2);
  background: rgba(80, 140, 240, 0.06);
}

.fs-skill-philo h5 {
  font-size: 0.85rem;
  color: #c8dcff;
  margin: 0 0 4px;
}

.fs-skill-philo p {
  font-size: 0.82rem;
  color: rgba(225, 217, 248, 0.8);
  margin: 0;
  line-height: 1.45;
}

/* ─── Rune grid compact + explain ────────────────────────────────────────── */

.fs-rune-grid {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.fs-rune-detail {
  display: grid;
  gap: 3px;
}

.fs-rune-explain {
  font-size: 0.78rem;
  color: rgba(210, 200, 240, 0.7);
  margin: 0;
  line-height: 1.35;
  padding-left: 28px;
}

.fs-keystone__info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Duo counter portraits ──────────────────────────────────────────────── */

.fs-duo-counter .fs-opponent__head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fs-duo-counter .fs-opponent__head .fs-icon:nth-child(2) {
  margin-left: -10px;
  position: relative;
  z-index: 1;
}

.fs-duo-counter .fs-opponent__head h5 {
  margin: 0 0 0 4px;
  font-size: 0.92rem;
  color: #ffb0a0;
}

.fs-duo-counter p {
  font-size: 0.82rem;
  color: rgba(225, 217, 248, 0.8);
  margin: 4px 0 0;
  line-height: 1.4;
}

/* Duo color variants */
.fs-duo--red  { border-color: rgba(255, 80, 80, 0.35); background: rgba(255, 60, 60, 0.06); }
.fs-duo--red  .fs-opponent__head h5 { color: #ff9a8c; }
.fs-duo--blue { border-color: rgba(100, 160, 255, 0.35); background: rgba(80, 140, 240, 0.06); }
.fs-duo--blue .fs-opponent__head h5 { color: #b8d4ff; }
.fs-duo--yellow { border-color: rgba(255, 200, 60, 0.35); background: rgba(255, 200, 60, 0.06); }
.fs-duo--yellow .fs-opponent__head h5 { color: #f0dfbd; }

.fs-duo-counter {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 80, 80, 0.2);
}

/* ─── Mistakes cards ─────────────────────────────────────────────────────── */

.fs-mistakes {
  display: grid;
  gap: 10px;
}

.fs-mistake {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 160, 50, 0.2);
  background: rgba(255, 140, 30, 0.04);
  display: grid;
  gap: 4px;
}

.fs-mistake__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fs-mistake__head strong {
  font-size: 0.88rem;
  color: #ffd69c;
}

.fs-mistake__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 140, 30, 0.18);
  font-size: 0.75rem;
  font-weight: 800;
  color: #ffd69c;
  flex-shrink: 0;
}

.fs-mistake p {
  font-size: 0.82rem;
  color: rgba(225, 217, 248, 0.75);
  margin: 0;
  line-height: 1.4;
  padding-left: 36px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .focus-section {
    padding: 4px;
  }

  .focus-section__shell {
    border-radius: 10px;
    padding: 8px;
  }

  .fs-hero,
  .fs-card {
    border-radius: 14px;
    padding: 12px;
  }

  .fs-hero {
    min-height: 140px;
  }

  .fs-build ol,
  .fs-phase ul,
  .fs-list {
    padding-left: 16px;
  }

  .fs-rune-label {
    min-width: auto;
    width: 100%;
  }
}

/* Meta open: ensure content is visible on desktop too */
body.meta-open #sceneWrapper,
body.meta-open #carouselOrbite,
body.meta-open #championSVG {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.meta-open #sectionMeta {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--meta-visible-top, clamp(96px, var(--meta-header-h-raw, var(--header-h, 96px)), 140px)) 0 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  box-sizing: border-box;
}

body.meta-open main {
  position: relative;
  z-index: 5;
}

body.meta-open #sectionMeta #metaRoot {
  width: 100%;
  height: calc(100dvh - var(--meta-visible-top, clamp(96px, var(--meta-header-h-raw, var(--header-h, 96px)), 140px)));
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
}

body.meta-open #sectionMeta .meta-shell {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

html.meta-open,
body.meta-open {
  overflow: hidden !important;
  height: 100% !important;
}

/* Hover-zoom propre sur images SVG */
#championSVG image.counter-img {
  transform-box: fill-box;        /* clé pour SVG */
  transform-origin: 50% 50%;      /* centre géométrique */
  transition: transform .18s ease, filter .18s ease;
  filter: saturate(1.03) brightness(1.02) drop-shadow(0 0 4px rgba(6, 10, 22, 0.3));
}


#championSVG image.counter-img:hover,
#championSVG image.counter-img.zoomed {
  transform: scale(1.12);
  filter: drop-shadow(0 0 6px #ffffffaa);
  cursor: pointer;
}
#championSVG .pulse-ring {
  --pulse-stroke: 10;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ringPulse 2600ms ease-in-out infinite;
  stroke-width: var(--pulse-stroke);
  opacity: .75;
  will-change: transform, opacity;
}

/* Palette par module (Wild Rift HUD) */
#championSVG g.hub-video      { --pulse-color: #8ef0ff !important; }
#championSVG g.hub-builds     { --pulse-color: #f1cf7c !important; }
#championSVG g.hub-counters   { --pulse-color: #ff7b7b !important; }
#championSVG g.hub-protips    { --pulse-color: #26f8d2 !important; }
#championSVG g.hub-synergy    { --pulse-color: #8aa4ff !important; }
#championSVG g.hub-stats      { --pulse-color: #d5ddff !important; }

/* HUD noir/dore: appliquer la palette aux bulles satellite + centre (desktop) */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  #championSVG g.hub-bubble,
  #championSVG g.hub-bubble-center {
    --pulse-color: rgba(191, 174, 129, 0.92) !important;
  }

  #championSVG .pulse-ring {
    stroke: var(--pulse-color, rgba(191, 174, 129, 0.85)) !important;
    filter: drop-shadow(0 0 6px rgba(191, 174, 129, 0.25)) !important;
  }

  #championSVG .hub-ring circle {
    stroke: var(--pulse-color, rgba(191, 174, 129, 0.85)) !important;
    filter: drop-shadow(0 0 6px rgba(191, 174, 129, 0.25)) !important;
  }

  #championSVG .hub-ring * {
    stroke: var(--pulse-color, rgba(191, 174, 129, 0.85)) !important;
    filter: drop-shadow(0 0 6px rgba(191, 174, 129, 0.25)) !important;
  }

  #championSVG image.counter-img,
  #championSVG image.centerchampion {
    filter: saturate(0.98) contrast(1.05) drop-shadow(0 0 6px rgba(191, 174, 129, 0.25));
  }
}

/* Badges + labels HUD */
#championSVG .hub-label-bg {
  fill: rgba(8, 12, 22, 0.9);
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 1.2px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
}
#championSVG .hub-label-text {
  font-weight: 800;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  fill: #eaf2ff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
#championSVG .hub-badge {
  pointer-events: none;
}
#championSVG .hub-badge-bg {
  fill: #0c1220;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1.4px;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
}
#championSVG .hub-badge-icon {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.45));
}
/* Animation optimisée - utilise transform au lieu de stroke-width */
@keyframes ringPulse {
  0%   { opacity: .60; transform: scale(1); }
  50%  { opacity: 1.00; transform: scale(1.08); }
  100% { opacity: .60; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #championSVG .pulse-ring { animation: none; }
}

/* Mobile: alléger les halos, anneaux et traits dans le hub */
@media (max-width: 900px) {
  #championSVG image.counter-img {
    filter: saturate(0.95) brightness(1.05);
  }

  #championSVG image.counter-img:hover,
  #championSVG image.counter-img.zoomed {
    filter: brightness(1.1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.65));
  }

  #championSVG .pulse-ring {
    --pulse-stroke: 7;
    stroke-width: var(--pulse-stroke);
    stroke-opacity: .68;
  }

  #championSVG .pulse-ring.pulse-center {
    stroke-width: 14;
  }

  #championSVG line {
    stroke-width: 1.6;
    filter: drop-shadow(0 0 3px var(--pulse-color, rgba(191, 174, 129, 0.55)));
  }
}

@media (max-width: 600px) {
  #championSVG image.counter-img {
    filter: saturate(0.9) brightness(1.08);
  }

  #championSVG image.counter-img:hover,
  #championSVG image.counter-img.zoomed {
    filter: brightness(1.12) drop-shadow(0 0 3px rgba(255, 255, 255, 0.55));
  }

  #championSVG .pulse-ring {
    --pulse-stroke: 5.5;
    stroke-width: var(--pulse-stroke);
    stroke-opacity: .65;
  }

  #championSVG .pulse-ring.pulse-center {
    stroke-width: 11;
  }

  #championSVG line {
    stroke-width: 1.3;
    filter: drop-shadow(0 0 2px var(--pulse-color, rgba(191, 174, 129, 0.5)));
  }

  #championSVG .hub-label-bg {
    opacity: 0.85;
    filter: saturate(0.9);
  }
}

/* =========================================================
   FOND SITE — background énergie premium
   - Couche image (fixed)
   - Voile sombre + vignette (lisibilité)
   - Grain subtil
   ========================================================= */

/* 1) Couche image */
.fond-site{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: url("../images/fond-site.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  transform: translateZ(0);
  will-change: transform;
  filter: contrast(var(--fond-contraste)) saturate(var(--fond-saturation));
}

/* 2) Voile sombre + vignette (lisibilité UI) */
.fond-site::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      1200px 700px at 50% 55%,
      rgba(0,0,0, calc(var(--fond-voile) - 0.18)) 0%,
      rgba(0,0,0, var(--fond-voile)) 55%,
      rgba(0,0,0, calc(var(--fond-voile) + 0.10)) 100%
    ),
    radial-gradient(
      1400px 900px at 50% 50%,
      rgba(0,0,0, 0) 45%,
      rgba(0,0,0, var(--fond-vignette)) 100%
    );
  mix-blend-mode: normal;
}

/* 3) Grain subtil */
.fond-site::after{
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
}

/* ── Personnages header — effet affiche LoL ──
   Architecture :
   • .fd-chars-layer  → wrapper absolu inset:0, overflow:hidden (clipe au header),
                        z-index:-1 (sous nav/logo dans le contexte isolation du header),
                        mix-blend-mode:screen (toute la couche screen sur le bg header)
   • .fd-char         → imgs absolues dans la couche, z-index pour profondeur relative
   Opacité persos     → opacity: sur chaque .fd-char--xxx
   Opacité bg header  → --header-bg-opacity dans .header-nexus (géré via fd-debug.js) */

.fd-chars-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;       /* clips les persos à la hauteur exacte du header */
  pointer-events: none;
  z-index: -1;            /* sous la nav/logo */
  mix-blend-mode: screen; /* couche entière en screen sur le bg header */
}

@media (max-width: 900px) {
  .fd-chars-layer {
    mix-blend-mode: normal; /* screen écrase les couleurs sur fond sombre mobile */
  }
}


.fd-mosaic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;                /* ← résolution naturelle, pas de crop */
  transform: translateY(90px);  /* ← décalage vertical en px (négatif = monte) */
  opacity: 1;                  /* ← opacité de la mosaïque */
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Voile sombre sur le bg header (1 - bgOp du debug tool) */
#fd-header-bg-mask {
  opacity: 0.1; /* ← 0=bg visible, 1=bg masqué totalement */
}

/* Responsive : la mosaïque clippée au header mobile */
@media (max-width: 900px) {
  .fd-chars-layer { display: block; }

  .fd-mosaic {
    position: absolute; top: 65%; left: 50%;
    height: 88px; width: 100%;
    transform: translate(-50%, -50%);
    opacity: 1;
  }
 
  .header-nexus .tabsection { font-size: 10px;}
  .ligneSousHeader {
    opacity: 1;
    transform: translateY(11px);
    column-gap: 20px !important;  /* ← espace entre search / draft / user */
    padding: 0 10px !important;   /* ← espace latéral */
  }
}

/* Contenu au-dessus du fond */
#viewport,
#hubPanel,
.carrousel,
.listechampions,
.mobile-hub-sheet,
.mobile-hub-backdrop,
#sceneWrapper{
  position: relative;
  z-index: 1;
}

/* Mobile : scroll au lieu de fixed pour perf */
@media (max-width: 900px){
  .fond-site{
    background-attachment: scroll;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .fond-site{
    will-change: auto;
  }
}

#hubPanel[hidden] { display: none !important; }

#hubPanel,
.hub-panel { position: fixed; inset: 0; z-index: 20000; }
.hub-panel { position: fixed; inset: 0; /* z-index géré dans styles.css */ }

#hubPanel { display: block; }

#hubPanel .bubbles-root {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.hubpanel-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }

.hubpanel-sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  border-radius: 0;
  overflow: hidden;
  background: rgba(18, 22, 38, .96);
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  color: #f0e6d2;
  display: flex;
  flex-direction: column;
}

.hubpanel-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom: 1px solid #2a2f48; }
.hubpanel-close { background:#bfae81; color:#0a162f; border:0; border-radius:8px; padding:6px 10px; font-weight:700; cursor:pointer; }
.hubpanel-back { background:transparent; color:#bfae81; border:1px solid rgba(191,174,129,.3); border-radius:8px; padding:6px 10px; font-size:16px; font-weight:700; cursor:pointer; margin-right:8px; flex-shrink:0; }
.hubpanel-back:hover { background:rgba(191,174,129,.1); }
.hubpanel-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  overflow: auto;
}

@media (max-width: 720px) {
  #hubPanel .hubpanel-body,
  .hubpanel-body {
    padding: 12px;
  }

  #hubPanel .panel-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #hubPanel .two-col,
  .hubpanel-body .two-col {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #hubPanel .grid-tiles {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }

  #hubPanel .item-card {
    padding: 12px;
  }

  #hubPanel .hub-card {
    gap: 10px;
  }
}

.panel-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:12px; }

#hubPanel .panel--stats .panel-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

#hubPanel .panel--stats .item-card--skill,
#hubPanel .panel--stats .item-card--abilities,
#hubPanel .panel--stats .item-card--skillorder {
  grid-column: 1 / -1;
}

#hubPanel .panel--stats .item-card--skill .levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

#hubPanel .panel--stats .item-card--abilities .abilities-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: clamp(200px, 50vh, 360px);
  overflow-y: auto;
  padding-right: 4px;
}

#hubPanel .panel--stats .item-card--abilities .ability {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#hubPanel .panel--stats .item-card--skillorder {
  padding: 0;
  overflow: hidden;
}

#hubPanel .panel--stats .item-card--skillorder > h4 {
  margin: 0;
  padding: 12px 16px 0 16px;
}

#hubPanel .panel--stats .zone-skills-order {
  padding: 0 16px 16px 16px;
}

#hubPanel .panel--stats .blocspells-ordre {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#hubPanel .panel--stats .so-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

#hubPanel .panel--stats .so-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #f0e6d2;
}

#hubPanel .panel--stats .so-prio,
#hubPanel .panel--stats .so-note {
  font-size: 0.85rem;
  color: #d9c88e;
}

#hubPanel .panel--stats .so-prio {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(191, 174, 129, 0.18);
  border: 1px solid rgba(191, 174, 129, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

#hubPanel .panel--stats .so-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

#hubPanel .panel--stats .so-left {
  flex: 0 0 180px;
  display: flex;
  gap: 10px;
  align-items: center;
}

#hubPanel .panel--stats .so-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  background: #0f1a32;
  border: 1px solid #24345a;
}

#hubPanel .panel--stats .so-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
  color: #f0f4ff;
}

#hubPanel .panel--stats .so-key {
  font-weight: 700;
  color: #bfae81;
}

#hubPanel .panel--stats .so-label {
  opacity: 0.85;
}

#hubPanel .panel--stats .so-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(15, minmax(24px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-right: 8px;
  padding-left: 2px;
  box-sizing: content-box;
}

#hubPanel .panel--stats .so-case {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: rgba(24, 33, 56, 0.6);
  border: 1px solid rgba(44, 58, 92, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

#hubPanel .panel--stats .so-case--on {
  border-color: rgba(191, 174, 129, 0.8);
  box-shadow: none;
}

#hubPanel .panel--stats .so-case--on.so-Q { background: linear-gradient(135deg, rgba(0, 173, 239, 0.85), rgba(0, 96, 191, 0.8)); }
#hubPanel .panel--stats .so-case--on.so-W { background: linear-gradient(135deg, rgba(126, 217, 87, 0.85), rgba(41, 137, 42, 0.8)); }
#hubPanel .panel--stats .so-case--on.so-E { background: linear-gradient(135deg, rgba(231, 76, 60, 0.85), rgba(192, 57, 43, 0.8)); }
#hubPanel .panel--stats .so-case--on.so-R { background: linear-gradient(135deg, rgba(155, 89, 182, 0.85), rgba(142, 68, 173, 0.8)); }

#hubPanel .panel--stats .so-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: #0f1524;
}

#hubPanel .panel--stats .so-case--on .so-num {
  color: #f5f7ff;
}

/* === Pro Tips (Hub Panel) === */
#hubPanel .panel--protips .protips-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#hubPanel .panel--protips .protips-card {
  border-color: rgba(58, 72, 112, 0.9);
  background: rgba(16, 20, 36, 0.8);
}

#hubPanel .panel--protips .protips-card--plan {
  border-color: rgba(191, 174, 129, 0.45);
  box-shadow: 0 0 0 1px rgba(191, 174, 129, 0.08) inset;
}

#hubPanel .panel--protips .protips-card--abilities {
  border-color: rgba(87, 212, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(87, 212, 255, 0.08) inset;
}

#hubPanel .panel--protips .protips-card--quick {
  border-color: rgba(124, 255, 181, 0.35);
  box-shadow: 0 0 0 1px rgba(124, 255, 181, 0.08) inset;
}

#hubPanel .panel--protips .protips-card--combos {
  border-color: rgba(246, 211, 101, 0.45);
  box-shadow: 0 0 0 1px rgba(246, 211, 101, 0.08) inset;
}

#hubPanel .panel--protips .plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

#hubPanel .panel--protips .plan-phase {
  background: rgba(18, 24, 43, 0.8);
  border: 1px solid rgba(43, 50, 80, 0.9);
  border-radius: 10px;
  padding: 10px;
}

#hubPanel .panel--protips .plan-phase .cap {
  margin: 0 0 6px;
  font-size: 0.8rem;
}

#hubPanel .panel--protips .protips-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.35;
}

#hubPanel .panel--protips .protips-list li {
  overflow-wrap: anywhere;
}

#hubPanel .panel--protips .protips-abilities {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#hubPanel .panel--protips .protips-ability {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(18, 24, 43, 0.6);
  border: 1px solid rgba(43, 50, 80, 0.8);
}

#hubPanel .panel--protips .protips-ability-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #f0e6d2;
}

#hubPanel .panel--protips .protips-ability-key {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(191, 174, 129, 0.2);
  border: 1px solid rgba(191, 174, 129, 0.45);
  color: #e0cf9b;
  font-size: 0.85rem;
  background-image: var(--spell-icon);
  background-size: cover;
  background-position: center;
}

body.hub-active .header-nexus,
body.hub-active #filtersStack {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

#hubPanel .panel--protips .combo-inputs code {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(12, 16, 32, 0.7);
  border: 1px solid rgba(43, 50, 80, 0.9);
  color: #e6e6e6;
  font-size: 0.8rem;
}

#hubPanel .panel--protips .protips-combos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

#hubPanel .panel--protips .combo-tip {
  margin: 6px 0 0;
  opacity: 0.9;
  overflow-wrap: anywhere;
}

#hubPanel .panel--protips .tip {
  overflow-wrap: anywhere;
}

/* === Stats responsive fixes === */
@media (max-width: 720px) {
  #hubPanel .panel--stats .item-card--ratings .rating-grid,
  .item-card--ratings .rating-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(76px, 1fr));
    gap: 10px;
  }

  #hubPanel .panel--stats .so-row {
    flex-direction: column;
  }

  #hubPanel .panel--stats .item-card {
    padding: 10px;
  }

  #hubPanel .panel--stats .so-left {
    flex: 1 1 auto;
    width: 100%;
  }

  #hubPanel .panel--stats .so-grid {
    grid-template-columns: repeat(15, minmax(0, 1fr));
    max-width: 100%;
  }

  #hubPanel .panel--stats .rating,
  .item-card--ratings .rating {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    gap: 6px;
    text-align: center;
  }

  #hubPanel .panel--stats .rating-ico,
  .item-card--ratings .rating-ico {
    width: 30px;
    height: 30px;
  }

  #hubPanel .panel--stats .rating-label,
  .item-card--ratings .rating-label {
    font-size: 0.78rem;
    line-height: 1.1;
    white-space: normal;
  }

  #hubPanel .panel--stats .rating-bars .bar {
    width: 6px;
    height: 10px;
  }

  #hubPanel .panel--stats .rating-tier,
  .item-card--ratings .rating-tier {
    margin-left: 0;
    font-size: 0.9rem;
    padding: 0.1rem 0.35rem;
  }

  #hubPanel .panel--stats .rating--tier,
  #hubPanel .panel--stats .rating--scale,
  .item-card--ratings .rating--tier,
  .item-card--ratings .rating--scale {
    display: none;
  }

  #hubPanel .panel--stats .item-card--skillorder > h4 {
    padding: 10px 12px 0 12px;
    font-size: 0.95rem;
  }

  #hubPanel .panel--stats .zone-skills-order {
    padding: 0 12px 12px 12px;
  }

  #hubPanel .panel--stats .so-left {
    flex: 1 1 auto;
    gap: 8px;
  }

  #hubPanel .panel--stats .so-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  #hubPanel .panel--stats .so-name {
    font-size: 0.8rem;
  }

  #hubPanel .panel--stats .so-grid {
    gap: 3px;
  }

  #hubPanel .panel--stats .so-case {
    border-radius: 5px;
  }

  #hubPanel .panel--stats .so-num {
    font-size: 0.6rem;
  }
}

@media (max-width: 480px) {
  #hubPanel .panel--stats .item-card--ratings .rating-grid,
  .item-card--ratings .rating-grid {
    grid-template-columns: repeat(4, minmax(70px, 1fr));
    gap: 8px;
  }

  #hubPanel .panel--stats .rating-ico,
  .item-card--ratings .rating-ico {
    width: 28px;
    height: 28px;
  }

  #hubPanel .panel--stats .rating-label,
  .item-card--ratings .rating-label {
    font-size: 0.72rem;
  }

  #hubPanel .panel--stats .rating-tier,
  .item-card--ratings .rating-tier {
    font-size: 0.85rem;
  }

  #hubPanel .hubpanel-header {
    padding: 12px 14px;
  }

  #hubPanel h2#hubpanel-title {
    font-size: 1rem;
  }

  #hubPanel .hubpanel-close {
    padding: 5px 9px;
    border-radius: 7px;
  }

  #hubPanel .hubpanel-body {
    padding: 12px;
  }

  #hubPanel .role-tab {
    padding: 5px 9px;
    font-size: 0.75rem;
  }

  #hubPanel .item-card h4 {
    font-size: 0.9rem;
  }

  #hubPanel .panel--stats .so-title {
    font-size: 0.9rem;
  }
}

@media (max-width: 360px) {
  #hubPanel .hubpanel-header {
    padding: 10px 12px;
  }

  #hubPanel h2#hubpanel-title {
    font-size: 0.95rem;
  }

  #hubPanel .hubpanel-body {
    padding: 10px;
  }

  #hubPanel .role-tab {
    padding: 4px 8px;
    font-size: 0.72rem;
  }

  #hubPanel .item-card {
    padding: 8px;
  }

  #hubPanel .panel--stats .so-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  #hubPanel .panel--stats .so-name {
    font-size: 0.76rem;
  }
}

.item-card { background:#12182b; border:1px solid #2b3250; border-radius:10px; padding:10px; }

.item-card h4 { margin:0 0 6px; font-size:.95rem; color:#e0cf9b; }

.badge { display:inline-block; border:1px solid #3a446a; padding:2px 6px; border-radius:999px; font-size:.75rem; margin:0 6px 6px 0; }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.cap { text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:#e0cf9b; margin:2px 0 6px; }

/* Sections spécifiques (peu de styles pour rester léger) */


/* HubPanel : neutraliser les styles globaux sur <header> */
#hubPanel .hubpanel-sheet {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#hubPanel .hubpanel-header {
  position: sticky !important;  /* empêche le 'fixed' global de s'appliquer */
  top: 0 !important;
  z-index: 1;
  background: rgba(18,22,38,.98);
  padding: 14px 16px;
  border-bottom: 1px solid #2a2f48;
  /* 3-zones layout : titre | tabs centrés | close */
  display: flex;
  align-items: center;
}

#hubPanel .hubpanel-body {
  flex: 1 1 auto;
  overflow: auto;
  max-height: none;             /* laisse le flex prendre la hauteur */
}

#hubPanel h2#hubpanel-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f0e6d2;
}

.panel--builds .item-list { display:flex; flex-wrap:wrap; gap:8px; }
.panel--protips .tip { margin:0 0 10px; line-height:1.4; }

/* NC:S3 — Perf & Mobile */
#hubPanel .hubpanel-sheet { will-change: transform, opacity; }

/* Mesure “off-screen” sans display:none */
.hub-mesure {
  position: absolute !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  inset: 0 auto auto 0;
}

/* État masqué contrôlé par JS */
.hub-cache {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* Responsive sheet */
#hubPanel .hubpanel-sheet {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}


/* Sections */
.panel-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:12px; }


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #hubPanel,
  #hubPanel .hubpanel-sheet,
  #hubPanel .bubbles-root,
  #hubPanel .sheet,
  #hubPanel .btns,
  .hub-panel {
    transition: none !important;
    animation: none !important;
  }
}

/* Header 3-zones : titre | tabs centrés | close */
#hubPanel .hubpanel-header { position: relative; }
#hubPanel h2#hubpanel-title { flex: 1 1 auto; }
#hubPanel .role-tabs {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center; margin: 0;
}
#hubPanel .role-tabs[hidden] { display:none !important; }
#hubPanel .hubpanel-close { flex-shrink: 0; margin-left: auto; }
#hubPanel .role-tab { appearance:none; border:1px solid #3a446a; background:#12182b; color:#e0cf9b; padding:6px 10px; border-radius:999px; font-size:.8rem; cursor:pointer; transition: background .15s, color .15s; }
#hubPanel .role-tab[aria-current="true"] { background:#e0cf9b; color:#0a162f; font-weight:700; }
#hubPanel .role-tab:hover:not([aria-current="true"]) { background:#1c2444; border-color:#5a6490; }
#hubPanel .role-tab:focus { outline:2px solid #bfae81; outline-offset:2px; }
@media (max-width: 640px){
  #hubPanel .role-tabs { position: static; transform: none; flex-wrap: wrap; row-gap: 6px; margin-left: auto; margin-right: 8px; }
  #hubPanel h2#hubpanel-title { flex: 0 0 auto; }
}

#nxTooltip { position: fixed; z-index: 300000; pointer-events:none; white-space: pre-line;
  background: rgba(10,12,20,.96); color:#f0e6d2; border:1px solid #2b3250;
  border-radius:8px; padding:6px 8px; font-size:.78rem; line-height:1.25;
  box-shadow:0 8px 28px rgba(0,0,0,.4); transform: none !important; opacity:1 !important; visibility: visible !important;
  max-width: min(44ch, 360px); max-height: min(60vh, 420px); overflow: auto; }
  #nxTooltip[hidden]{ display:none !important; }
  #nxTooltip .nx-tip-inner{ display:block; max-width: 100%; word-break: break-word; }
  #nxTooltip .nx-tip-inner .tip-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  #nxTooltip .nx-tip-inner .tip-head img{ flex:0 0 24px; width:24px; height:24px; border-radius:4px; }
  #nxTooltip .nx-tip-inner .tip-body{ font-size:.82rem; line-height:1.35; }

@media (hover: none) {
  #nxTooltip { transform: none; }
}
  
  
  /* Badges avec icônes */
  .badge--icon { display:inline-flex; align-items:center; gap:6px; }
  .badge--icon img { width:18px; height:18px; border-radius:4px; object-fit:cover; }
  
  
  /* Grilles images (synergy/counters étendu) */
  .grid-avatars { display:grid; grid-template-columns: repeat(auto-fit, minmax(72px,1fr)); gap:10px; }
  .grid-avatars .avatar { display:flex; flex-direction:column; align-items:center; gap:6px; }
  .grid-avatars .avatar img { width:56px; height:56px; border-radius:10px; border:1px solid #2b3250; background:#0d1324; }
  .grid-avatars .avatar .name { font-size:.75rem; color:#e0cf9b; text-align:center; }

  .badge--score { border-color:#6aa84f; margin-right:6px; }
#carouselOrbite .portal::after {
  content: none;
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8px;
  height: 26px;
  background: none;
  filter: none;
  opacity: 0;
  pointer-events: none;
  z-index: 0; /* sous la track */
}

/* Recos : grille de 4..8 bulles */
.reco-bulles{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.reco-breakdown{margin-top:14px;background:rgba(7,11,24,.92);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;}
.reco-breakdown__card{display:flex;flex-direction:column;gap:14px;}
.reco-breakdown__header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;}
.reco-breakdown__subtitle{margin:0;font-size:.85rem;opacity:.7;text-transform:uppercase;letter-spacing:.08em;}
.reco-breakdown__meta{margin:4px 0 0;font-size:.85rem;opacity:.8;}
.reco-breakdown__score{min-width:120px;text-align:right;}
.reco-breakdown__score span{display:block;font-size:.75rem;opacity:.75;}
.reco-breakdown__score strong{display:block;font-size:1.8rem;line-height:1;color:#7cffb5;}
.reco-breakdown__score small{display:block;font-size:.75rem;opacity:.65;}
.reco-breakdown__bars{display:flex;flex-direction:column;gap:6px;}
.reco-breakdown__bar{display:grid;grid-template-columns:140px 1fr 60px;gap:10px;align-items:center;font-size:.88rem;}
.reco-breakdown__progress{
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.reco-breakdown__progress::-webkit-progress-bar{background:rgba(255,255,255,.08);border-radius:999px;}
.reco-breakdown__progress::-webkit-progress-value{background:linear-gradient(90deg,#57d4ff,#7cffb5);border-radius:999px;}
.reco-breakdown__progress::-moz-progress-bar{background:linear-gradient(90deg,#57d4ff,#7cffb5);border-radius:999px;}
.reco-breakdown__bar.good .reco-breakdown__progress::-webkit-progress-value{background:linear-gradient(90deg,#7cffb5,#c8ff8c);}
.reco-breakdown__bar.warn .reco-breakdown__progress::-webkit-progress-value{background:linear-gradient(90deg,#f6d365,#fda085);}
.reco-breakdown__bar.bad .reco-breakdown__progress::-webkit-progress-value{background:linear-gradient(90deg,#ff6b6b,#ff8e8e);}
.reco-breakdown__bar.good .reco-breakdown__progress::-moz-progress-bar{background:linear-gradient(90deg,#7cffb5,#c8ff8c);}
.reco-breakdown__bar.warn .reco-breakdown__progress::-moz-progress-bar{background:linear-gradient(90deg,#f6d365,#fda085);}
.reco-breakdown__bar.bad .reco-breakdown__progress::-moz-progress-bar{background:linear-gradient(90deg,#ff6b6b,#ff8e8e);}
.reco-breakdown__section{border-top:1px solid rgba(255,255,255,.08);padding-top:10px;font-size:.9rem;}
.reco-breakdown__section:first-of-type{border-top:none;padding-top:0;}
.reco-breakdown__section h4{margin:0 0 6px;font-size:1rem;}
.reco-breakdown__section h5{margin:8px 0 4px;font-size:.85rem;opacity:.75;text-transform:uppercase;letter-spacing:.08em;}
.reco-breakdown__list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;}
.reco-breakdown__reasons,.reco-breakdown__extras{margin:8px 0 0;font-size:.85rem;opacity:.8;}
.reco-breakdown__intel ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:4px;}
.reco-breakdown__intel li{list-style:disc;}
.reco-breakdown__intel strong{display:block;font-size:.82rem;color:#9de2ff;}
.reco-breakdown__intel span{display:block;font-size:.82rem;opacity:.85;}
.reco-breakdown__empty{margin:0;font-size:.88rem;opacity:.8;}
.reco-breakdown-section h5{margin:8px 0 6px;font-size:.8rem;opacity:.7;text-transform:uppercase;letter-spacing:.08em;}
.reco-aux-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.reco-aux-group{display:flex;flex-direction:column;gap:8px;}
.reco-aux-list{display:flex;flex-direction:column;gap:8px;}
.reco-aux-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.04);}
.reco-aux-portrait{width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background-size:cover;background-position:center;flex-shrink:0;}
.reco-aux-body strong{display:block;font-size:.9rem;}
.reco-aux-body span{display:block;font-size:.82rem;opacity:.8;line-height:1.35;}
.reco-aux-empty{margin:0;font-size:.82rem;opacity:.7;}
.tip-lines{margin:6px 0 0;padding-left:16px;font-size:.78rem;line-height:1.3;}
.bulle-reco{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background: rgba(24,26,44,.52);
  backdrop-filter: blur(2px);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease;
  position: relative;
  overflow: hidden;
}
.bulle-reco::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  opacity:.6; filter:saturate(1.08);
  transform: scale(1.02);
  transition: opacity .15s ease, transform .2s ease;
  pointer-events:none;
}
.bulle-reco::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,18,0.00) 8%, rgba(10,12,20,0.38) 56%, rgba(10,12,20,0.62) 100%);
  pointer-events:none;
}
.bulle-reco > *{ position: relative; z-index: 1; }
.bulle-reco:hover{ transform: translateY(-1px); background: rgba(30,32,52,.58); }
.bulle-reco:hover::before, .bulle-reco:focus-visible::before{ opacity:.85; transform: scale(1.04); }
.bulle-reco:active::before{ opacity:.5; transform: scale(1.05); }
.bulle-reco.pressed{ transform: scale(0.98); }

/* Lisibilité texte dans les recos */
.bulle-reco .nom,
.bulle-reco .vs,
.bulle-reco .sc {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.5);
  -webkit-text-stroke: 0.4px rgba(0,0,0,.9);
}

/* === Ratings (Stats) — HUD Rings (Nexus) === */
.item-card--ratings{
  /* conserve tes icônes existantes si tu veux, mais le rendu devient HUD */
  --rating-icon-1: url('../ui/ratings/rating-1.png');
  --rating-icon-2: url('../ui/ratings/rating-2.png');
  --rating-icon-3: url('../ui/ratings/rating-3.png');
  --rating-icon-4: url('../ui/ratings/rating-4.png');

  /* palette HUD (fallback si tes vars globales existent déjà ailleurs) */
  --hud-surface: rgba(12, 16, 28, 0.86);
  --hud-border: rgba(255,255,255,0.10);
  --hud-inner: rgba(255,255,255,0.06);

  --ring-track: rgba(120,160,255,.16);
  --ring-shadow: 0 0 18px rgba(46,231,255,.18);

  /* taille ring */
  --ring-size: 54px;
  --ring-thick: 10px;
}

/* Layout: grille stable (plus de scroll horizontal "cheap") */
.item-card--ratings .rating-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(74px, 1fr));
  gap: 10px;
  align-items: stretch;
  overflow: visible;
}

/* Carte HUD mini */
.item-card--ratings .rating{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap: 6px;

  padding: 10px 8px 8px;
  border-radius: 16px;
  border: 1px solid var(--hud-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
    var(--hud-surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 10px 26px rgba(0,0,0,0.35);
  min-width: 0;
}

/* Ring container */
.item-card--ratings .rating-ico{
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 999px;
  position:relative;
  display:block;

  /* "core" HUD */
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.16), rgba(255,255,255,0.00) 50%),
    radial-gradient(circle at 50% 60%, rgba(12,16,28,0.95), rgba(12,16,28,0.70));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--ring-shadow);
  overflow: visible;

  /* on garde ton icon "rating-x.png" mais en discret (optionnel) */
  background-image:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.16), rgba(255,255,255,0.00) 50%),
    radial-gradient(circle at 50% 60%, rgba(12,16,28,0.95), rgba(12,16,28,0.70)),
    var(--rating-fill);
  background-size: auto, auto, 60% 60%;
  background-position: center, center, center;
  background-repeat: no-repeat;
  filter: saturate(1.1) brightness(1.05);
}

/* Anneau (progress) */
.item-card--ratings .rating:not(.rating--tier) .rating-ico{
  --rating-fill: var(--rating-icon-1);
  --rating-pct: 25%;
  --rating-ring: rgba(46,231,255,0.95);
}

/* progress ring */
.item-card--ratings .rating:not(.rating--tier) .rating-ico::before{
  content:"";
  position:absolute;
  inset: -6px;
  border-radius: 999px;
  background: conic-gradient(var(--rating-ring) var(--rating-pct), var(--ring-track) 0);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - (var(--ring-thick) / 2)), #000 calc(50% - (var(--ring-thick) / 2) + 1px));
  mask: radial-gradient(circle, transparent calc(50% - (var(--ring-thick) / 2)), #000 calc(50% - (var(--ring-thick) / 2) + 1px));
  box-shadow: 0 0 14px rgba(46,231,255,0.18);
  opacity: 1;
  pointer-events:none;
}

/* fine outer ring */
.item-card--ratings .rating:not(.rating--tier) .rating-ico::after{
  content:"";
  position:absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  opacity: .95;
  pointer-events:none;
}

/* Valeur (1..4) centrée dans l'anneau */
.item-card--ratings .rating-tier{
  position:absolute;
  top: 10px; /* se cale par rapport à la carte */
  left: 50%;
  transform: translateX(-50%);
  width: var(--ring-size);
  height: var(--ring-size);
  display:grid;
  place-items:center;

  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 999px;

  font-weight: 900;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  pointer-events:none;
}

/* Label compact, façon HUD */
.item-card--ratings .rating-label{
  margin-top: 2px;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.05;
  text-align:center;
  white-space: normal;
  opacity: .92;
}

/* Mappage couleurs / progression (on respecte tes data-val 0..4) */
.item-card--ratings .rating:not(.rating--tier)[data-val="0"] .rating-ico{ --rating-fill: var(--rating-icon-1); opacity:.35; }
.item-card--ratings .rating:not(.rating--tier)[data-val="1"] .rating-ico{ --rating-pct: 25%; }
.item-card--ratings .rating:not(.rating--tier)[data-val="2"] .rating-ico{ --rating-pct: 50%; }
.item-card--ratings .rating:not(.rating--tier)[data-val="3"] .rating-ico{ --rating-pct: 75%; }
.item-card--ratings .rating:not(.rating--tier)[data-val="4"] .rating-ico{ --rating-pct: 100%; }

/* Couleurs par type (HUD-ish, comme ton exemple à droite) */
.item-card--ratings .rating--damage .rating-ico{ --rating-ring: rgba(248,113,113,0.95); }
.item-card--ratings .rating--toughness .rating-ico{ --rating-ring: rgba(196,181,253,0.95); }
.item-card--ratings .rating--utility .rating-ico{ --rating-ring: rgba(103,232,249,0.95); }
.item-card--ratings .rating--difficulty .rating-ico{ --rating-ring: rgba(251,191,36,0.95); }

/* Mobile: garde 2x2 si tu préfères sur très petit */
@media (max-width: 420px) {
  .item-card--ratings .rating-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* Tooltip visible au-dessus du hub */
#nxTooltip{ z-index: 300000; }

@media (max-width: 720px) {
  .item-card--ratings .rating-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(76px, 1fr));
    gap:10px;
    overflow-x: visible;
  }
  .item-card--ratings .rating{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:8px 6px;
    gap:6px;
    text-align:center;
    min-width:0;
  }
  .item-card--ratings .rating-ico{ width:40px; height:40px; }
  .item-card--ratings .rating-label{ font-size:.78rem; line-height:1.1; white-space:normal; }
  .item-card--ratings .rating-tier{ margin-left:0; font-size:.9rem; padding:.1rem .35rem; }
  .item-card--ratings .rating--tier,
  .item-card--ratings .rating--scale{ display:none; }
}

@media (max-width: 480px) {
  .item-card--ratings .rating-grid{ grid-template-columns: repeat(4, minmax(70px, 1fr)); gap:8px; }
  .item-card--ratings .rating-ico{ width:38px; height:38px; }
  .item-card--ratings .rating-label{ font-size:.72rem; }
  .item-card--ratings .rating-tier{ font-size:.85rem; }
}

/* === Hub reco grid (counters/synergy, style draft-like) === */
.grid-recos{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:10px; }
.hub-reco .nom{ font-weight:700; }
.hub-reco .tips{ display:block; font-size:.82rem; opacity:.95; }

/* Portrait sur cartes counters/synergies */
.hub-reco{ padding-left: 54px; }
.hub-reco .reco-portrait{ position:absolute; left:10px; top:10px; width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.35); background:#0d1324; object-fit:cover; z-index:2; }
.bulle-reco .nom{ font-weight:600; line-height:1.1; }
.bulle-reco .vs{ opacity:.8; font-size:.85rem; }
.bulle-reco .sc{ margin-left:auto; font-weight:700; }
.bulle-reco .tips{ display:block; font-size:.85rem; opacity:.95; }
.bulle-reco .tips .tip{ display:block; margin-top:2px; }
.more{ opacity:.7; font-size:.8rem; }

/* Icône info (ouvre le détail) */
.bulle-reco .info {
  position:absolute; top:8px; right:8px;
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25);
  color:#fff; font-weight:800; font-size:.8rem;
  cursor:pointer; z-index:2;
}
.bulle-reco .info:hover { background: rgba(0,0,0,.6); }

@media (max-width: 720px) {
  #paneldraft .reco-bulles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  #paneldraft .bulle-reco {
    padding: 8px;
    gap: 2px;
    min-height: 110px;
  }

  #paneldraft .bulle-reco .nom {
    font-size: 0.78rem;
  }

  #paneldraft .bulle-reco .sc {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(10, 12, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  #paneldraft .bulle-reco .tips {
    display: none;
  }
}

/* Badges catégorie (WARNING/MATCHUP/TEAM/META/MACRO) */
.badge{ display:inline-block; font-size:.72rem; font-weight:700; padding:1px 6px; border-radius:999px; margin-right:6px; }
.badge-warning{ background:#e74c3c; color:#fff; animation: pulse-warning 1.5s ease-in-out infinite; }
@keyframes pulse-warning { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.badge-matchup{ background:#2d6cdf; color:#fff; }
.badge-team{ background:#6fbe55; color:#0f2a0f; }
.badge-meta{ background:#d6c85f; color:#2b2500; }
.badge-macro{ background:#a968e6; color:#1f0f33; }
.badge-info{ background:#888; color:#fff; }



/* ===== Skills Order (style type WRFire) ================================== */
.blocspells-ordre { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.blocspells-ordre .so-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.blocspells-ordre .so-title { margin: 0; font-weight: 800; letter-spacing: .5px; }
.blocspells-ordre .so-prio { font-weight: 700; opacity: .9; }
.blocspells-ordre .so-note { opacity: .85; }

.so-row {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #1b2b55;
  border-radius: 10px;
  background: #0d1a34;
}
/* Tooltip inline (touch) */
.so-tip{
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(12,16,28,.9);
  border: 1px solid rgba(43,50,80,.9);
  color: #e8ecff;
  font-size: .8rem;
  line-height: 1.35;
}
.so-tip .tip-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.so-tip .tip-head img{ width:22px; height:22px; border-radius:4px; }
.so-tip .tip-body{ opacity:.95; }

.so-left {
  display: grid;
  grid-template-columns: 40px auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.so-icon { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; border: 1px solid rgba(255,255,255,.2); cursor:pointer; touch-action: manipulation; }
.so-name { display: flex; flex-direction: column; min-width: 0; }
.so-key  { font-weight: 900; letter-spacing: .5px; }
.so-label{ font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.so-grid {
  display: grid;
  grid-template-columns: repeat(15, minmax(22px, 44px));
  gap: 6px;
  padding-right: 8px;
  padding-left: 2px;
  box-sizing: content-box;
}
.so-case {
  height: 26px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; line-height: 1;
  color: transparent; /* invisibles quand off */
  box-sizing: border-box;
  overflow: hidden;
}
.so-case--on { color: #00142e; text-shadow: 0 1px 0 rgba(255,255,255,.35); border-color: transparent; }

/* Couleurs par sort (fond des cases actives) */
.so-Q .so-case--on, .so-case--on.so-Q { background: #ffd93b; }
.so-W .so-case--on, .so-case--on.so-W { background: #2ecc71; }
.so-E .so-case--on, .so-case--on.so-E { background: #3fa7ff; }
.so-R .so-case--on, .so-case--on.so-R { background: #ff4b5c; }

/* Masquer la petite grille “Compétences” en Stats (on garde le tableau) */
#hubPanel .panel--stats .blocspells-grille { display: none !important; }

/* Responsive: sous 900px, icône + nom au-dessus, tableau dessous */
@media (max-width: 900px){
  .so-row { grid-template-columns: 1fr; }
  .so-grid { grid-template-columns: repeat(15, minmax(24px, 1fr)); gap: 12px; }
  .so-case { height: 20px; font-size: .72rem; }
}

@media (max-width: 600px) {
  .so-row {
    padding: 8px 10px;
  }

  .so-grid {
    width: 100%;
    margin-inline: auto;
    grid-template-columns: repeat(15, minmax(24px, 1fr));
    gap: 11px;
    overflow-x: auto;
  }

  .so-case {
    height: 18px;
    font-size: 0.62rem;
  }
}

.nav_logo{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
}
.logo-orb{ width:28px; height:28px; display:block;
  transition:transform .25s ease, filter .25s ease, opacity .25s ease;
  will-change:transform, filter;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
.nav_logo:hover .logo-orb, .nav_logo:focus-visible .logo-orb{
  transform: translateY(-1px) scale(1.05);
  filter:
    drop-shadow(0 0 6px #7dd3fc)
    drop-shadow(0 0 14px #38bdf8);
}
@media (prefers-reduced-motion: reduce){
  .logo-orb{ transition:none }
}

/* === Overrides panel draft (recommandations) === */
#recoPanel .reco-bulles{ grid-template-columns: 1fr; }

/* ===========================
   NAV : 3 colonnes + logo centré
   =========================== */

/* Conteneur principal de la nav : HUD command bar */
.navsections{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 24px);
  min-height: 56px;
}

/* Groupes gauche/droite : rangés d’actions */
.nav-left,
.nav-right{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Colonne centrale : logo */
.logo-center{
  justify-self: center;
  display: flex;
  align-items: center;
}

/* ===========================
   ORBE — Effet électrique (hover)
   =========================== */
   :root{
    --orb-glow-1: #7dd3fc;
    --orb-glow-2: #38bdf8;
  }
  
  .logo-orb{
    width: 80px;
    height: auto;
    display: block;
    transition: transform .25s ease, filter .25s ease, opacity .25s ease;
    will-change: transform, filter;
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
    cursor: pointer;
  }
  
  /* Cœur d’énergie : prépare les origines pour les anims */
  .logo-orb .orb-core,
  .logo-orb .orb-pulse,
  .logo-orb .orb-electric circle{
    transform-box: fill-box;
    transform-origin: 50% 50%;
  }
  
  /* État repos : pas d’anim visible */
  .logo-orb .orb-pulse{
    opacity: 0;
    filter: blur(8px);       /* halo plus doux */
  }
  .logo-orb .orb-electric circle{ stroke-dashoffset: 0; }
  
  /* Hover = glow global - simplifié pour perf */
  .logo-orb:hover{
    transform: translateY(-1px) scale(1.04);
    opacity: 0.95;
  }
  
  /* Cœur : légère montée de lumière + dilatation subtile */
  .logo-orb:hover .orb-core{
    animation: core-breathe 1.8s ease-in-out infinite;
  }
  
  /* Pulse : halo qui part du noyau et se dilate */
  .logo-orb:hover .orb-pulse{
    animation: core-pulse 1.3s ease-out infinite;
  }
  
  /* Arcs : défilement + flicker */
  .logo-orb:hover .orb-electric circle{
    animation:
      arc-flow 2s linear infinite,
      arc-flicker 1.5s steps(3, end) infinite alternate;
  }
  
  /* ===== Animations ===== */
  @keyframes orb-buzz{
    0%   { transform: translate(0,0) scale(1.04); }
    50%  { transform: translate(.1px,-.1px) scale(1.045); }
    100% { transform: translate(-.1px,.1px) scale(1.04); }
  }
  
  @keyframes core-breathe{
    0%,100% { filter: brightness(1) saturate(1); transform: scale(1); }
    50%     { filter: brightness(1.18) saturate(1.08); transform: scale(1.03); }
  }
  
  @keyframes core-pulse{
    0%   { opacity:.38; transform: scale(1);   }
    100% { opacity:0;   transform: scale(1.28); }
  }
  
  @keyframes arc-flow{
    to { stroke-dashoffset: -200; }
  }
  
  @keyframes arc-flicker{
    0%   { opacity:.45 }
    100% { opacity:1   }
  }
  
  /* Accessibilité : réduire l’animation si demandé */
  @media (prefers-reduced-motion: reduce){
    .logo-orb,
    .logo-orb:hover { animation: none; }
    .logo-orb .orb-core,
    .logo-orb .orb-pulse,
    .logo-orb .orb-electric circle { animation: none; }
  }
  
.grid-tiles{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:12px; }
.hub-card{ display:flex; flex-direction:column; gap:6px; }
.hub-tile{ position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden; background:#111827; border:1px solid rgba(255,255,255,.12); background-image: var(--bg); background-size: cover; background-position: center; transition: transform .18s ease; }
.hub-tile::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg,rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%); }
.hub-tile:hover{ transform: translateY(-1px) scale(1.02); }
.hub-desc{ min-height:40px; }
.hub-desc .hub-name{ font-weight:700; margin:0 0 2px; }
.hub-desc .hub-tips{ font-size:.85rem; opacity:.95; }
.hub-desc .hub-tips .tip{ display:block; margin-top:2px; }
.hub-desc .hub-tips .tip.hub-tip--probe,
.hub-desc .hub-tips .tip.hub-tip--collapsible:not(.is-open){
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  line-height: 1.35;
  max-height: calc(5 * 1.35em);
  padding-bottom: .8rem;
}
.hub-desc .hub-tips .tip.hub-tip--collapsible{
  cursor: pointer;
  border-radius: 10px;
  border: 1px dashed rgba(241,208,138,.28);
  background: rgba(241,208,138,.04);
  padding: 6px 10px 8px 8px;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hub-desc .hub-tips .tip.hub-tip--collapsible:hover,
.hub-desc .hub-tips .tip.hub-tip--collapsible:focus-visible{
  background: rgba(241,208,138,.08);
  border-color: rgba(241,208,138,.58);
  box-shadow: 0 0 0 1px rgba(241,208,138,.2);
  outline: none;
}
.hub-desc .hub-tips .tip.hub-tip--collapsible:not(.is-open)::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1.7em;
  background: linear-gradient(180deg, rgba(10,12,20,0) 0%, rgba(10,12,20,.92) 85%);
  pointer-events:none;
}
.hub-desc .hub-tips .tip.hub-tip--collapsible:not(.is-open)::before{
  content:"...";
  position:absolute;
  left:.5rem;
  bottom:.12rem;
  font-weight:700;
  font-size:.95rem;
  line-height:1;
  letter-spacing:.08em;
  color: rgba(241,208,138,.95);
  z-index: 3;
  pointer-events:none;
}
.hub-desc .hub-tips .tip.hub-tip--collapsible.is-open{
  display:block;
  max-height:none;
  overflow:visible;
  border-style: solid;
  border-color: rgba(110,231,183,.45);
  background: rgba(110,231,183,.06);
}
@media (max-width: 768px) {
  .hub-desc .hub-tips .tip.hub-tip--probe,
  .hub-desc .hub-tips .tip.hub-tip--collapsible:not(.is-open){
    -webkit-line-clamp: 2;
    max-height: calc(2 * 1.35em);
    padding-bottom: .75rem;
  }
}
.video-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:12px; }
.video-card{ display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit; background:#12182b; border:1px solid #2a2f48; border-radius:12px; padding:8px; }
.video-thumb{ position:relative; aspect-ratio:16/9; background:#0d1324; border-radius:8px; overflow:hidden; }
.video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-thumb-fallback{ display:flex; align-items:center; justify-content:center; height:100%; color:#9aa3b2; font-weight:700; }
.video-meta{ font-size:.85rem; font-weight:600; color:#e0cf9b; }

/* ── Counters & Synergy — shared layout ── */
.panel--counters-layout { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.counters-col { display:flex; flex-direction:column; gap:14px; }
.panel--synergy-layout { display:flex; flex-direction:column; gap:14px; }

/* Bordered section block */
.counters-block {
  background: rgba(10,14,28,.7);
  border: 1px solid rgba(120,140,220,.18);
  border-radius: 14px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 12px;
}
/* Block accent border by tier — counters */
.counters-block[data-tier="strong"]  { border-color: rgba(52,211,153,.28); }
.counters-block[data-tier="extreme"] { border-color: rgba(239,68,68,.32); }
.counters-block[data-tier="major"]   { border-color: rgba(251,146,60,.28); }
/* Block accent border by tier — synergy */
.counters-block[data-tier="ideal"]   { border-color: rgba(241,208,138,.32); }
.counters-block[data-tier="ok"]      { border-color: rgba(120,140,220,.25); }

/* Section headers */
.counters-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  font-weight: 700; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
}
.counters-section-icon { width:15px; height:15px; flex-shrink:0; }
.counters-count {
  margin-left: auto; font-size: .7rem; font-weight: 600;
  background: rgba(255,255,255,.08); border-radius: 999px; padding: 2px 8px;
}

/* Header colors by tier — counters */
.counters-section-head[data-tier="strong"] {
  background: linear-gradient(90deg, rgba(52,211,153,.12) 0%, transparent 75%);
  border-left: 3px solid #34d399; color: #6ee7b7;
}
.counters-section-head[data-tier="extreme"] {
  background: linear-gradient(90deg, rgba(239,68,68,.14) 0%, transparent 75%);
  border-left: 3px solid #ef4444; color: #fca5a5;
}
.counters-section-head[data-tier="major"] {
  background: linear-gradient(90deg, rgba(251,146,60,.12) 0%, transparent 75%);
  border-left: 3px solid #fb923c; color: #fdba74;
}
/* Header colors by tier — synergy */
.counters-section-head[data-tier="ideal"] {
  background: linear-gradient(90deg, rgba(241,208,138,.14) 0%, transparent 75%);
  border-left: 3px solid #f1d08a; color: #f1d08a;
}
.counters-section-head[data-tier="ok"] {
  background: linear-gradient(90deg, rgba(120,140,220,.12) 0%, transparent 75%);
  border-left: 3px solid #788cdc; color: #a8b4e8;
}

/* Tile borders & glow by tier */
.hub-card[data-tier="strong"]  .hub-tile { border-color:rgba(52,211,153,.4);   box-shadow:0 0 14px rgba(52,211,153,.15); }
.hub-card[data-tier="strong"]  .hub-tile:hover { border-color:rgba(52,211,153,.7);   box-shadow:0 0 22px rgba(52,211,153,.3); }
.hub-card[data-tier="extreme"] .hub-tile { border-color:rgba(239,68,68,.45);   box-shadow:0 0 14px rgba(239,68,68,.18); }
.hub-card[data-tier="extreme"] .hub-tile:hover { border-color:rgba(239,68,68,.75);   box-shadow:0 0 22px rgba(239,68,68,.32); }
.hub-card[data-tier="major"]   .hub-tile { border-color:rgba(251,146,60,.4);   box-shadow:0 0 14px rgba(251,146,60,.15); }
.hub-card[data-tier="major"]   .hub-tile:hover { border-color:rgba(251,146,60,.7);   box-shadow:0 0 22px rgba(251,146,60,.28); }
.hub-card[data-tier="ideal"]   .hub-tile { border-color:rgba(241,208,138,.4);  box-shadow:0 0 14px rgba(241,208,138,.15); }
.hub-card[data-tier="ideal"]   .hub-tile:hover { border-color:rgba(241,208,138,.7);  box-shadow:0 0 22px rgba(241,208,138,.28); }
.hub-card[data-tier="ok"]      .hub-tile { border-color:rgba(120,140,220,.35); box-shadow:0 0 12px rgba(120,140,220,.12); }
.hub-card[data-tier="ok"]      .hub-tile:hover { border-color:rgba(120,140,220,.6);  box-shadow:0 0 18px rgba(120,140,220,.24); }

/* Champion name color by tier */
.hub-card[data-tier="strong"]  .hub-name { color: #6ee7b7; }
.hub-card[data-tier="extreme"] .hub-name { color: #fca5a5; }
.hub-card[data-tier="major"]   .hub-name { color: #fdba74; }
.hub-card[data-tier="ideal"]   .hub-name { color: #f1d08a; }
.hub-card[data-tier="ok"]      .hub-name { color: #a8b4e8; }

/* ── Counters V1 minimal / mobile-first ── */
.panel--counters-v1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nx-counter-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.nx-counter-filter {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #cfcfcf;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.nx-counter-filter[aria-current="true"] {
  border-color: rgba(241,208,138,.45);
  background: rgba(241,208,138,.12);
  color: #f1d08a;
}
.nx-counter-section summary { cursor: pointer; list-style: none; }
.nx-counter-section summary::-webkit-details-marker { display: none; }
.nx-counter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nx-counter-row {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  align-items: start;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.06), transparent 46%),
    linear-gradient(180deg, rgba(22,26,35,.95), rgba(16,20,30,.95));
  color: #e6e6e6;
  border-radius: 12px;
  padding: 10px 11px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.nx-counter-row:hover {
  background: #1C2230;
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}
.nx-counter-row::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(255,255,255,.12);
}
.nx-counter-row[data-tier="hard"]::before { background: #FF4D4F; }
.nx-counter-row[data-tier="unfavorable"]::before { background: #FF9F1C; }
.nx-counter-row[data-tier="skillMatchups"]::before { background: #FFD166; }
.nx-counter-row[data-tier="favorable"]::before { background: #2ECC71; }
.nx-counter-avatar {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.nx-counter-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 5px;
}
.nx-counter-headline {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.nx-counter-name {
  font-weight: 700;
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-counter-comment {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  font-size: .8rem;
  color: rgba(224,226,232,.84);
}
.nx-counter-priority {
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.nx-counter-priority > span {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  opacity: var(--nx-prio-opacity, .8);
}
.nx-counter-row .nx-counter-priority { color: #cfcfcf; }
.nx-counter-row[data-tier="hard"] .nx-counter-priority { color: #FF4D4F; }
.nx-counter-row[data-tier="unfavorable"] .nx-counter-priority { color: #FF9F1C; }
.nx-counter-row[data-tier="skillMatchups"] .nx-counter-priority { color: #FFD166; }
.nx-counter-row[data-tier="favorable"] .nx-counter-priority { color: #2ECC71; }
.nx-counter-row .nx-counter-type {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .9rem;
  margin-top: 2px;
}
.nx-counter-empty {
  color: rgba(255,255,255,.55);
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
}
.nx-counter-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nx-counter-inline {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(12,16,26,.92);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nx-counter-drawer[hidden] { display: none; }
.nx-counter-drawer {
  position: fixed;
  inset: 0;
  z-index: 21000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.nx-counter-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,.52);
}
.nx-counter-drawer-sheet {
  position: relative;
  width: min(760px, 100vw);
  max-height: 88vh;
  overflow: auto;
  background: radial-gradient(120% 140% at 20% 0%, rgba(76,201,240,.08), transparent 45%), #0F1117;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px 16px 0 0;
  padding: 14px;
}
.nx-counter-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.nx-counter-drawer-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nx-counter-drawer-name { font-weight: 800; }
.nx-counter-drawer-badge {
  font-size: .66rem;
  letter-spacing: .06em;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: 3px 8px;
}
.nx-counter-drawer-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: #fff;
}
.nx-counter-drawer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #cfcfcf;
  font-size: .74rem;
}
.nx-counter-drawer-tag,
.nx-counter-drawer-meta > span,
.nx-counter-drawer-badge {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 3px 8px;
}
.nx-counter-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
.nx-counter-detail-block {
  background: linear-gradient(180deg, rgba(22,26,35,.95), rgba(16,20,30,.95));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 10px;
}
.nx-counter-detail-block:nth-of-type(1) {
  background: linear-gradient(180deg, rgba(32, 40, 58, 0.9), rgba(16, 22, 34, 0.9));
  border-color: rgba(122, 166, 255, 0.26);
}
.nx-counter-detail-block:nth-of-type(2) {
  background: linear-gradient(180deg, rgba(45, 34, 58, 0.9), rgba(18, 20, 34, 0.9));
  border-color: rgba(196, 126, 255, 0.24);
}
.nx-counter-detail-block:nth-of-type(3) {
  background: linear-gradient(180deg, rgba(24, 48, 43, 0.9), rgba(14, 25, 23, 0.9));
  border-color: rgba(80, 204, 172, 0.24);
}
.nx-counter-detail-block h4 {
  margin: 0 0 6px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #f1d08a;
}
.nx-counter-detail-block p {
  margin: 0;
  color: #d6d8df;
  line-height: 1.45;
  font-size: .9rem;
}
/* Drawer désactivé (on utilise l'expand inline) */
.nx-counter-drawer { display: none !important; }
@media (max-width: 768px) {
  .nx-counter-row {
    grid-template-columns: 48px 1fr 20px;
    padding: 8px;
  }
  .nx-counter-avatar {
    width: 48px;
    height: 48px;
  }
  .nx-counter-comment {
    font-size: .76rem;
  }
}

/* ── Builds Coming Soon ── */
.panel--builds-soon {
  display: flex; align-items: center; justify-content: center;
  min-height: 340px; padding: 40px 24px;
}
.builds-soon-inner {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
}
.builds-soon-icon {
  width: 72px; height: 72px;
  color: var(--nx-violet-2, #9a6bff);
  animation: builds-pulse 3s ease-in-out infinite;
}
@keyframes builds-pulse {
  0%, 100% { opacity:.55; transform: scale(1); }
  50% { opacity:.85; transform: scale(1.06); }
}
.builds-soon-label {
  font-size: 1.15rem; font-weight: 700;
  color: var(--nx-gold-2, #f1d08a); margin: 0;
  letter-spacing: .04em;
}
.builds-soon-sub {
  font-size: .88rem; line-height: 1.5;
  color: rgba(224,207,155,.55); margin: 0; max-width: 280px;
}

.logo-center {
  text-align: center;
}

.nav_logo .logo-wrap {
  display: flex;
  flex-direction: column; /* force SVG en haut + texte en bas */
  align-items: center;    /* centre horizontalement */
}

.logo-orb {
  width: 120px;  /* ajuste selon ton design */
  height: auto;
  display: block;
}

.logo-text {
  margin-top: 6px;
  font-size: 18px;
  font-weight: bold;
  color: white; /* adapte à ton thème */
}

/* === HUD flottant === */
#HUD_ID {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 99999;
  display: flex;
  flex-direction: column; /* alignement vertical */
  gap: 4px; /* espacement réduit entre boutons */
  background: rgba(10, 22, 47, 0.85);
  color: #eaf2ff;
  padding: 6px 8px;
  border-radius: 6px;
  font: 12px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}




#hubOverlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* root passe-clique */
  z-index: 40000;
}
#hubOverlay circle {
  pointer-events: auto; /* seules les bulles captent */
}
#hubOverlay text {
  pointer-events: none;
}

/* FIX lexique hover : section positionnée bloque les events */
section.positioned {
  pointer-events: auto;
}

/* Sécurité : le mot lexiqué doit toujours capter l'event */
.lexiquemot {
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
}

/* =========================
   LIGNE SOUS HEADER (3 slots)
   Alignement symétrique: [Recherche] --- [DRAFT] --- [User]
   CSS-first, pas de JS de positionnement
   ========================= */
  
  /* =========================
     BOUTONS SOUS HEADER (base premium)
     Taille réduite de 40% (56px → 34px)
     ========================= */
  .btnSousHeader{
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(10,16,32,0.55);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.25);
    padding: 0;
    cursor: pointer;
    overflow: visible;
  }

  .btnSousHeader:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.10);
  }

  .btnSousHeader:active{
    transform: translateY(0px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.25);
  }

  /* =========================
     ICONE USER (VISIBLE)
     -> bouton #btnLogin avec icône via ::before
     Icône réduite proportionnellement (22px → 14px)
     ========================= */
  #btnLogin::before{
    content:"";
    width: 15px;
    height: 15px;
    display: block;
    background: rgba(234,242,255,0.92);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4.5 4.5 0 10-4.5-4.5A4.5 4.5 0 0012 12zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4.5 4.5 0 10-4.5-4.5A4.5 4.5 0 0012 12zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  
  /* =========================
     ZONE RECHERCHE DÉPLIÉE
     ========================= */
  .zoneRechercheDeplie{
    width: 0;
    max-width: 420px;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    transition: width 220ms ease, opacity 220ms ease, transform 220ms ease;
  }
  
  .zoneRechercheDeplie.isOpen{
    width: min(420px, 48vw);
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  
  .zoneRechercheDeplie input{
    width: 100%;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(10,16,32,0.55);
    color: rgba(234,242,255,0.95);
    padding: 0 14px;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
  }
  
  .zoneRechercheDeplie input::placeholder{
    color: rgba(234,242,255,0.55);
  }

/* === MOBILE : dropdown recherche === */
@media (max-width: 768px) {
  /* Largeur suffisante pour être lisible, dépasse vers la droite */
  .zoneRechercheDeplie[aria-hidden="false"] {
    min-width: min(88vw, 320px);
  }

  /* 16px minimum → empêche le zoom auto iOS au focus */
  .zoneRechercheDeplie input {
    font-size: 16px !important;
    box-sizing: border-box;
    background: rgba(10,16,32,0.92);
  }
}

.sceneWrapper,
.championsScene,
[data-layer="scene"],
[data-layer="background"] {
  position: relative;
  z-index: 1;
}

/* Loupe SVG - icône réduite proportionnellement (18px → 12px) */
.btnRecherche::before{
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background: rgba(234,242,255,0.92);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4a6 6 0 1 1 0 12a6 6 0 0 1 0-12m0-2a8 8 0 1 0 4.9 14.3l4.4 4.4l1.4-1.4l-4.4-4.4A8 8 0 0 0 10 2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4a6 6 0 1 1 0 12a6 6 0 0 1 0-12m0-2a8 8 0 1 0 4.9 14.3l4.4 4.4l1.4-1.4l-4.4-4.4A8 8 0 0 0 10 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Draft Debug HUD dashboard */
.draft-debug-dashboard{
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.draft-debug-dashboard-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 8px;
}
.draft-debug-dashboard-body{
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}
.draft-debug-row{
  background: rgba(8,12,22,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 6px 10px;
}
.draft-debug-row summary{
  display: grid;
  grid-template-columns: 28px 1fr 64px;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.draft-debug-row summary::-webkit-details-marker{ display: none; }
.draft-debug-row-body{
  margin-top: 8px;
  display: grid;
  gap: 8px;
  font-size: 12px;
}
.draft-debug-block ul{
  margin: 4px 0 0;
  padding-left: 16px;
}
.draft-debug-empty{
  margin: 0;
  font-size: 12px;
  opacity: 0.7;
}

.ligneSousHeader button{
  position: relative;
  z-index: 11;
}

/* Le logo ne doit pas s’étirer et ne doit pas déborder sur la sous-ligne */
/*
picture#navLogo{
  display: block;
  flex: 0 0 auto;
  align-self: center;
  max-height: 92px;
  overflow: hidden;
  z-index: 1;
}
*/

/* Image du logo contrainte à la même hauteur */
/*
picture#navLogo > img{
  display: block;
  max-height: 92px;
  width: auto;
  object-fit: contain;
}
*/

/* 
1) Le header doit englober la sous-ligne (tu as .header-nexus.scrolled dans le DOM)
.header-nexus,
.header-nexus.scrolled{
  height: auto !important;
  overflow: visible;
} */

/* 2) Assure que la sous-ligne est bien la 2e ligne si header = grid (sinon ignoré) */
.header-nexus > .ligneSousHeader{
  grid-column: 1 / -1;
  grid-row: 2;
}

/* 4) IMPORTANT : quand fermé, la recherche ne doit PAS impacter le layout */
.zoneRechercheDeplie[aria-hidden="true"]{
  display: none !important;
}

/* Quand ouverte : overlay (autorisé pour le panneau, pas pour placer les boutons) */
/* z-index: 2 assure que le dropdown passe devant .slotCentre/.slotDroite (DOM order sinon) */
.slotGauche{ position: relative; z-index: 2; }

.zoneRechercheDeplie[aria-hidden="false"]{
  display: block;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
}

/* Top row mapping */
#navLogo{
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 auto;
  align-self: center;
  overflow: visible;
  pointer-events: none; /* la boîte visuelle déborde, on désactive les clics */
}
#navLogo img {
  height: auto;
  pointer-events: auto; /* seul l'img réel capte les clics */
}
.header-nexus .nav-toggle{ justify-self: end; }

/* Sous-ligne : centre garanti + boutons proches */
.ligneSousHeader{
  grid-area: sous;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;      /* réduit pour rapprocher les boutons */
  padding: 0 24px;
  margin-top: -70px;      /* remonte plus vers le btn draft */

  position: relative;
  z-index: 10;
}

/* Slots collés au centre */
.ligneSousHeader .slotGauche{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ligneSousHeader .slotCentre{
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ligneSousHeader .slotDroite{
  justify-self: start;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
}

/* NX LOCK — Tous les boutons de ligneSousHeader dépassent du header */
.ligneSousHeader .slotGauche,
.ligneSousHeader .slotDroite{
  transform: translateY(36px);
}

/* Boutons recherche et user : cachent la bordure + forme ronde */
.ligneSousHeader .btnSousHeader,
.ligneSousHeader #btnLogin,
.ligneSousHeader #btnSearchMiniToggle,
.ligneSousHeader .btnRecherche,
.ligneSousHeader .btnUser{
  background: #0a1020 !important;  /* cache la bordure du header */
  border-radius: 50% !important;
  border: 2px solid rgba(120, 140, 220, 0.5) !important;
  width: 55px !important;
  height: 55px !important;
  margin: 0 !important;
}

/* Mobile : boutons header réduits + user connecté */
@media (max-width: 768px) {
  .ligneSousHeader .btnSousHeader,
  .ligneSousHeader #btnLogin,
  .ligneSousHeader #btnSearchMiniToggle,
  .ligneSousHeader .btnRecherche,
  .ligneSousHeader .btnUser {
    width: 40px !important;
    height: 40px !important;
  }
  #btnOpenDraft,
  #btnOpenDraft.btn-draft {
    width: 55px !important;
    height: 55px !important;
    transform: translateY(35px);
  }
  #btnOpenDraft:hover,
  #btnOpenDraft.btn-draft:hover {
    transform: translateY(35px) scale(1.08);
  }
  #btnOpenDraft:active,
  #btnOpenDraft.btn-draft:active {
    transform: translateY(35px) scale(0.94);
  }
  .ligneSousHeader #btnLogin[data-nx-logged] {
    font-size: 0 !important;
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: unset !important;
  }
  .ligneSousHeader #btnLogin[data-nx-logged]::before {
    display: none !important;
  }
  .ligneSousHeader #btnLogin[data-nx-logged]::after {
    content: attr(data-nx-initials);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(234, 242, 255, 0.92);
  }
}

/* Desktop connecté : pill avec le nom (annule le 55px forcé) */
@media (min-width: 769px) {
  .ligneSousHeader #btnLogin[data-nx-logged] {
    width: auto !important;
    border-radius: 999px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }
}

.ligneSousHeader #btnOpenDraft,
.ligneSousHeader #btnOpenDraft.btn-draft{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  inset: auto !important;
  
  translate: none !important;
}

/* === NX FIX: centre DRAFT stable (desktop only) === */
@media (min-width: 769px) {
  .ligneSousHeader { position: relative; }

  .ligneSousHeader .slotCentre {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 36px);
    width: max-content;
    z-index: 10;
  }

  .ligneSousHeader #btnOpenDraft,
  .ligneSousHeader #btnOpenDraft.btn-draft {
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}

/* === FIX: eviter overlap Draft <-> User (desktop only) === */
@media (min-width: 769px) {
  .ligneSousHeader {
    position: relative;
  }

  .ligneSousHeader .slotCentre {
    position: relative;
    z-index: 10;
  }

  .ligneSousHeader .slotGauche,
  .ligneSousHeader .slotDroite {
    position: relative;
    z-index: 12;
  }

  .ligneSousHeader .slotDroite {
    margin-left: calc(var(--nx-rail-gap-inner, 68px) + 10px);
  }

  .ligneSousHeader .slotGauche {
    margin-right: calc(var(--nx-rail-gap-inner, 68px) + 10px);
  }
}

/* LOGO — taille (sans variables) */
/*
#navLogo{
  max-height: 140px;
  overflow: visible;
}
*/

[data-nx-account-mode="login"] .panel-account { display: none; }
[data-nx-account-mode="account"] .panel-login { display: none; }

/* NX account panel: switch login/account */
html[data-nx-account-mode="login"] #userAccountPanel .panel-account { display: none; }
html[data-nx-account-mode="account"] #userAccountPanel .panel-login { display: none; }






/* =====================
   NX — Tile HUD Frame (Option A: Overlay)
   ===================== */
#carouselOrbite.carousel-tiles .vignettehud{
  position: relative;
}
#carouselOrbite.carousel-tiles .vignettehud::before,
#carouselOrbite.carousel-tiles .vignettehud::after {
  content: none !important;
}
#carouselOrbite.carousel-tiles .vignettehudbarre,
#carouselOrbite.carousel-tiles .vignettehudbadge{
  position: relative;
  z-index: 5;
}


/* =====================
   NX — Tile HUD Frame (Option B: 9-slice border-image)
   Active avec: #carouselOrbite.nx-tile-9slice
   ===================== */
#carouselOrbite.nx-tile-9slice .vignettehud{
  position: relative;
  border-style: solid;
  border-width: 34px; /* ajuster si besoin */
  border-image-source: url("/assets/images/BordureStyle.webp");
  border-image-slice: 140; /* ajuster selon le PNG */
  border-image-width: 34px;
  border-image-repeat: stretch;
}
/* Désactive l'overlay Option A quand Option B est active */
#carouselOrbite.nx-tile-9slice .vignettehud::after{
  content: none;
}


/* =====================
   NX — Fix: vignettehud must fill the whole tile
   (cadre overlay + image inside)
   ===================== */

/* 1) Tous les wrappers prennent 100% de la tuile */
#carouselOrbite .slide,
#carouselOrbite .slide-tilt,
#carouselOrbite .slide-content,
#carouselOrbite .vignettehud{
  width: 100%;
  height: 100%;
}

/* 2) La vignette devient le "cadre" de référence */
#carouselOrbite.carousel-tiles .vignettehud{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(120, 180, 255, 0.18);
  background: #000;
  box-shadow: none;
}

/* 3) L’image remplit la tuile (picture + img ont la même classe chez toi) */
#carouselOrbite.carousel-tiles picture.vignettehudimg,
#carouselOrbite.carousel-tiles img.vignettehudimg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#carouselOrbite.carousel-tiles img.vignettehudimg{
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* 4) La barre de texte passe au-dessus de l’image */
#carouselOrbite.carousel-tiles .vignettehudbarre,
#carouselOrbite.carousel-tiles .vignettehudbadge{
  position: absolute;
  z-index: 5;
}

/* HUD barre en bas avec dégradé */
#carouselOrbite.carousel-tiles .vignettehudbarre{
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

/* Tile mode: titre compact à côté du tag, texte masqué */
#carouselOrbite.carousel-tiles .vignettehudtitre{
  font-size: clamp(0.8rem, 0.7rem + 0.4vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#carouselOrbite.carousel-tiles .vignettehudtexte{
  display: none;
}
#carouselOrbite.carousel-tiles .vignettehudspotlight{
  display: none;
}

/* Tile mode: hover — zoom image + glow border */
#carouselOrbite.carousel-tiles img.vignettehudimg{
  transition: transform 0.35s ease, filter 0.35s ease;
}
#carouselOrbite.carousel-tiles .slide:hover img.vignettehudimg,
#carouselOrbite.carousel-tiles .slide:focus-visible img.vignettehudimg{
  transform: scale(1.05);
  filter: brightness(1.12) saturate(1.1);
}
#carouselOrbite.carousel-tiles .vignettehud{
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
#carouselOrbite.carousel-tiles .slide:hover .vignettehud,
#carouselOrbite.carousel-tiles .slide:focus-visible .vignettehud{
  border-color: rgba(140, 120, 255, 0.45);
  box-shadow: 0 0 16px rgba(140, 120, 255, 0.25), 0 8px 30px rgba(0,0,0,0.4);
}

/* Overlays cadre désactivés (BordureStyle supprimé) */


/* =====================
   NX — Tuiles: réduire hauteur du bloc image SANS décalage (centré)
   ===================== */
#carouselOrbite.carousel-tiles{
  --nx-media-h: 88%;
  --nx-media-y: 50%;
}

#carouselOrbite.carousel-tiles picture.vignettehudimg{
  height: var(--nx-media-h);
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

#carouselOrbite.carousel-tiles img.vignettehudimg{
  object-position: center var(--nx-media-y);
}


/* =====================================================
   NEXUS SIGNATURE — Fusionné depuis nexusSignature.css
   ===================================================== */

body {
  background: #060b16;
}

#metaRoot,
#hubPanel,
#champ-build-panel,
[data-patchspot-root],
#mobileHubSheet,
.mobile-hub-sheet {
  background: var(--nx-section-bg);
}

:where(
  .item-card,
  .meta-hero-card,
  .meta-resume-card,
  .ps-change,
  .reco-sheet,
  .hubpanel-sheet,
  .draft-lane-modal,
  .mobile-hub-sheet,
  #lexiqueTooltip,
  #carouselOrbite .vignettehud,
  .video-grid > *,
  .meta-tier-grid > *,
  .panel-grid > *,
  .mobile-light__champ
) {
  position: relative;
  background: var(--nx-surface-veil), var(--nx-surface-bg);
  border: 1px solid var(--nx-border-cold);
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow-soft), inset 0 0 0 1px var(--nx-border-warm);
  transition: transform var(--nx-transition), box-shadow var(--nx-transition), border-color var(--nx-transition);
}

#carouselOrbite .vignettehud {
  border-radius: 14px;
  background: #000;
  box-shadow: none;
  border: 1px solid rgba(120, 180, 255, 0.18);
}

:where(
  .item-card,
  .meta-hero-card,
  .meta-resume-card,
  .ps-change,
  .reco-sheet,
  .hubpanel-sheet,
  .draft-lane-modal,
  .mobile-hub-sheet,
  #lexiqueTooltip,
  .video-grid > *,
  .meta-tier-grid > *,
  .panel-grid > *,
  .mobile-light__champ
)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(200, 164, 91, 0.35), rgba(0, 0, 0, 0) 60%) top left,
    linear-gradient(225deg, rgba(120, 85, 255, 0.25), rgba(0, 0, 0, 0) 60%) top right,
    linear-gradient(45deg, rgba(120, 85, 255, 0.2), rgba(0, 0, 0, 0) 60%) bottom left,
    linear-gradient(315deg, rgba(200, 164, 91, 0.28), rgba(0, 0, 0, 0) 60%) bottom right;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  opacity: 0.75;
}

:where(
  .item-card,
  .meta-hero-card,
  .meta-resume-card,
  .ps-change,
  .reco-sheet,
  .hubpanel-sheet,
  .draft-lane-modal,
  .mobile-hub-sheet,
  #lexiqueTooltip,
  .video-grid > *,
  .meta-tier-grid > *,
  .panel-grid > *,
  .mobile-light__champ
)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--nx-noise);
  opacity: 0.16;
  mix-blend-mode: soft-light;
}

.grid-tiles .hub-tile {
  border: 1px solid var(--nx-border-cold);
  box-shadow: var(--nx-shadow-soft), inset 0 0 0 1px var(--nx-border-warm);
}

.video-grid > *,
.meta-tier-grid > *,
.panel-grid > * {
  border-radius: var(--nx-radius);
}

#championList .champion-image {
  border-radius: 12px;
  border: 1px solid var(--nx-border-cold);
  box-shadow: var(--nx-shadow-soft), inset 0 0 0 1px var(--nx-border-warm);
}

.mobile-light__champ {
  background: var(--nx-surface-veil), var(--nx-surface-bg);
}

:where(.vignettehudtag, .meta-tab, .ps-tab, .role-tab, .meta-hero-card button) {
  background: linear-gradient(180deg, rgba(18, 16, 34, 0.92), rgba(12, 12, 22, 0.96));
  border: 1px solid var(--nx-border-cold);
  box-shadow: inset 0 0 0 1px var(--nx-border-warm);
  transition: transform var(--nx-transition), box-shadow var(--nx-transition), border-color var(--nx-transition);
}

:where(.meta-tab.is-active, .ps-tab.is-active, .role-tab[aria-current="true"]) {
  border-color: rgba(140, 120, 255, 0.7);
  box-shadow: var(--nx-glow-violet), inset 0 0 0 1px rgba(200, 164, 91, 0.55);
}

:where(.meta-tab:hover, .ps-tab:hover, .role-tab:hover, .vignettehudtag:hover, .meta-hero-card button:hover) {
  border-color: rgba(140, 120, 255, 0.65);
  box-shadow: var(--nx-glow-violet), inset 0 0 0 1px rgba(200, 164, 91, 0.5);
}

:where(.meta-tab, .ps-tab, .role-tab, .vignettehudtag, .meta-hero-card, .hubpanel-sheet, .draft-lane-modal, .mobile-hub-sheet, .video-card, .reco-sheet, .item-card):focus-visible {
  outline: 2px solid var(--nx-focus);
  outline-offset: 2px;
}

@media (hover: hover) {
  :where(
    .item-card,
    .meta-hero-card,
    .meta-resume-card,
    .ps-change,
    .reco-sheet,
    .draft-lane-modal,
    .video-grid > *,
    .meta-tier-grid > *,
    .panel-grid > *,
    .mobile-light__champ
  ):hover {
    transform: translateY(-2px);
    border-color: rgba(140, 120, 255, 0.6);
    box-shadow: var(--nx-shadow-strong), var(--nx-glow-violet), inset 0 0 0 1px var(--nx-border-warm);
  }

  #carouselOrbite .slide:hover .vignettehud,
  #carouselOrbite .slide:focus-visible .vignettehud {
    box-shadow: none;
  }

  .grid-tiles .hub-tile:hover {
    border-color: rgba(140, 120, 255, 0.55);
    box-shadow: var(--nx-shadow-soft), var(--nx-glow-violet), inset 0 0 0 1px var(--nx-border-warm);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .item-card,
    .meta-hero-card,
    .meta-resume-card,
    .ps-change,
    .reco-sheet,
    .hubpanel-sheet,
    .draft-lane-modal,
    .mobile-hub-sheet,
    #lexiqueTooltip,
    #carouselOrbite .vignettehud,
    .video-grid > *,
    .meta-tier-grid > *,
    .panel-grid > *,
    .mobile-light__champ,
    .vignettehudtag,
    .meta-tab,
    .ps-tab,
    .role-tab
  ) {
    transition: none;
  }
}

.header-nexus::after {
  content: "";
  position: absolute;
  left: clamp(16px, 4vw, 34px);
  right: clamp(16px, 4vw, 34px);
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(120, 140, 220, 0) 0%,
    rgba(120, 140, 220, 0.85) 12%,
    rgba(120, 140, 220, 0.85) calc(50% - var(--nx-rail-gap) / 2),
    rgba(120, 140, 220, 0) calc(50% - var(--nx-rail-gap) / 2),
    rgba(120, 140, 220, 0) calc(50% + var(--nx-rail-gap) / 2),
    rgba(120, 140, 220, 0.85) calc(50% + var(--nx-rail-gap) / 2),
    rgba(120, 140, 220, 0.85) 88%,
    rgba(120, 140, 220, 0) 100%
  );
  box-shadow: 0 0 12px rgba(130, 90, 255, 0.4);
  pointer-events: none;
  z-index: 1;
}

.header-nexus > picture#navLogo {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  z-index: 5;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  overflow: visible;
  pointer-events: none; /* zone cliquable = seulement l'img enfant */
}

.header-nexus > picture#navLogo:focus-visible {
  outline: 2px solid var(--nx-focus);
  outline-offset: 2px;
}

.header-nexus > picture#navLogo img {
  position: relative;
  z-index: 1;
  width: clamp(180px, 20vw, 360px);
  height: auto;
  display: block;
  pointer-events: auto; /* seul l'img capte les clics, pas le padding/overflow du parent */
}

#navAccueil {
  display: none !important;
}

#navDraft.tabsection {
  border-color: rgba(140, 120, 255, 0.55);
}

#navDraft[hidden] {
  display: none !important;
}

#championSearchMobile {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(191, 174, 129, 0.55);
  background: rgba(16, 24, 44, 0.78);
  color: #ffffff;
  padding: 0 12px 0 36px;
  box-sizing: border-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='rgba(191,174,129,0.85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px 50%;
  background-size: 16px 16px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

#championSearchMobile:focus-visible {
  outline: none;
  border-color: rgba(140, 120, 255, 0.65);
  box-shadow: 0 0 0 2px rgba(140, 120, 255, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.zone-recherche {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 12px;
  margin-top: calc(var(--header-h, 76px) + 6px);
  position: relative;
  z-index: 3;
}

.zone-recherche #barreRecherche {
  width: 100%;
  max-width: 720px;
  display: none;
}

.zone-recherche .mobile-light.search,
.zone-recherche .mobile-light__search {
  width: 100%;
  max-width: 720px;
  display: block;
}

@media (min-width: 900px) {
  .zone-recherche #barreRecherche {
    display: block;
  }

  .zone-recherche .mobile-light.search,
  .zone-recherche .mobile-light__search {
    display: none;
  }
}

#ncCenterOverlay {
  display: none !important;
}

#btnLogin {
  position: static;
  margin-left: 10px;
  align-self: center;
  z-index: 2;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

@media (max-width: 720px) {
  .header-nexus {
    padding-bottom: 14px;
  }

  /* Logo : contrôlé par la hauteur sur mobile */
  .header-nexus > picture#navLogo img {
    height: 130px;
    width: auto;
    transform: translateY(20px);
  }

  .header-nexus .nav-toggle {
    display: none !important;
  }

}

@media (min-width: 769px) {
  /* .header-nexus,
  .header-nexus.scrolled {
    background:url("/assets/images/backgroundHeaderDesktop.webp") center calc(50% + 2000px) / cover no-repeat;
  } */

  .header-nexus .nav-toggle {
    display: none !important;
  }

  .header-nexus .navsections {
    flex-direction: row;
    border-top: none;
  }

  #primaryNav.navsections {
    --nav-col-gap: clamp(12px, 2vw, 20px);
    grid-template-columns: 1fr clamp(200px, 24vw, 340px) 1fr;
  }

  #primaryNav .nav-left {
    justify-self: end;
    justify-content: flex-end;
  }

  #primaryNav .nav-right {
    justify-self: start;
    justify-content: flex-start;
  }

  .header-nexus .nav-left,
  .header-nexus .nav-right {
    display: flex !important;
  }
}

html[data-hud-clean="1"] header.draft-debug-head {
  display: none !important;
}

html[data-hud-clean="1"] header.header-nexus {
  position: relative;
  overflow: visible;
}

/* Header desktop: background via ::before pour contrôler l'opacité */
@media (min-width: 769px) {
  .header-nexus,
  .header-nexus.scrolled {
    background-image: none !important;
    padding-top: 60px !important;
    padding-bottom: 0px !important;
  }



  #primaryNav.navsections {
    padding-top: 20px !important;
    padding-bottom: 4px !important;
    min-height: 40px !important;
  }

  .header-nexus > picture#navLogo img {
    padding-top: 0 !important;
  }
}

html[data-hud-clean="1"] #draft-debug-hud header {
  display: none !important;
}

#metaRoot {
  position: relative;
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(140, 90, 255, 0.25) 0%, rgba(6, 7, 18, 0) 62%),
    linear-gradient(180deg, rgba(12, 12, 28, 0.98) 0%, rgba(6, 6, 14, 0.99) 100%);
  border: 1px solid rgba(120, 140, 220, 0.35);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow-strong);
}

#metaRoot .meta-shell,
#metaRoot .meta-panel,
#metaRoot .meta-block,
#metaRoot .meta-topbar,
#metaRoot .meta-hero-card,
#metaRoot .meta-tier-grid > *,
#metaRoot .meta-tier-entry,
#metaRoot .meta-core-bar,
#metaRoot .meta-entry,
#metaRoot .meta-notes-wrap,
#metaRoot .meta-patch-summary,
#metaRoot .meta-impact,
#metaRoot .meta-items,
#metaRoot .meta-bans {
  padding: auto;
}

#metaRoot .meta-tab,
#metaRoot .meta-role-tab,
#metaRoot .meta-tier-toggle {
  border-color: rgba(140, 120, 255, 0.6);
  box-shadow: inset 0 0 0 1px rgba(203, 168, 92, 0.55);
}

#metaRoot .meta-tab.is-active,
#metaRoot .meta-role-tab.is-active {
  box-shadow: var(--nx-glow-violet), inset 0 0 0 1px rgba(203, 168, 92, 0.7);
}