@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@1,500;1,600;1,700&display=swap');
/* ================================================================
   builder.css — Wakfu Builder · Stratfu v0.5
   Layout "cards flottantes" type Duffus, DA Stratfu
================================================================ */

:root {
  --bg:           #0a0b0e;
  --bg2:          #0e1014;
  --bg3:          #131519;
  --bg-card:      #101217;
  --bg-header:    #0c0d11;
  --border:       rgba(255,255,255,0.06);
  --border2:      rgba(255,255,255,0.10);
  --accent:       #e0507a;
  --accent2:      #f07090;
  --accent-rgb:   224, 80, 122;
  --text:         #c8c8c0;
  --text2:        rgba(200,200,190,0.55);
  --text3:        rgba(200,200,190,0.28);
  --text-white:   #e8e8e0;
  --r-commun:     #b3b3b2;
  --r-rare:       #7ec84a;
  --r-mythique:   #e2be92;
  --r-legendaire: #b0c345;
  --r-souvenir:   #88c2de;
  --r-epique:     #c37ca7;
  --r-relique:    #b194d2;
  --el-feu:       #ef4444;
  --el-eau:       #3b82f6;
  --el-terre:     #84cc16;
  --el-air:       #a855f7;
  --slot-sz:      64px;
  --slot-gap:     9px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 14px;
  display: flex; flex-direction: column;
  position: relative;
}

/* ══ FOND GALAXY — sobre, teinté par la classe active ════════════
   --classe-rgb est injecté par builder.js au changement de classe */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* nébuleuses teintées classe */
    radial-gradient(ellipse 60% 45% at 18% 12%, rgba(var(--classe-rgb, 224,80,122), 0.16) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(var(--classe-rgb, 224,80,122), 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 70% 20%, rgba(120,100,200, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 35% 50% at 50% 100%, rgba(var(--classe-rgb, 224,80,122), 0.08) 0%, transparent 60%),
    /* voile profond */
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(15,10,25,0.6) 0%, transparent 75%);
  transition: background 0.8s ease;
}

/* Étoiles — 3 couches de points, tailles et opacités variées */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 25%, rgba(255,255,255,0.5) 50%, transparent 50%),
    radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,0.3) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 45% 15%, rgba(255,255,255,0.4) 50%, transparent 50%),
    radial-gradient(1px 1px at 62% 82%, rgba(255,255,255,0.35) 50%, transparent 50%),
    radial-gradient(1px 1px at 75% 38%, rgba(255,255,255,0.25) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 88% 60%, rgba(255,255,255,0.45) 50%, transparent 50%),
    radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,0.3) 50%, transparent 50%),
    radial-gradient(1px 1px at 35% 45%, rgba(255,255,255,0.2) 50%, transparent 50%),
    radial-gradient(1px 1px at 55% 55%, rgba(255,255,255,0.28) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 92% 10%, rgba(255,255,255,0.35) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 18% 50%, rgba(var(--classe-rgb, 224,80,122),0.7) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 80% 90%, rgba(var(--classe-rgb, 224,80,122),0.6) 50%, transparent 50%);
  background-size:
    520px 520px, 480px 480px, 600px 600px, 440px 440px,
    560px 560px, 500px 500px, 470px 470px, 540px 540px,
    430px 430px, 580px 580px, 620px 620px, 460px 460px;
  opacity: 0.85;
}

/* Le contenu passe au-dessus des couches de fond */
header, .tabs-bar, .tab-page { position: relative; z-index: 1; }

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ══ HEADER ══════════════════════════════════════════════════════ */
header {
  height: 44px; background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; padding: 0 18px;
  flex-shrink: 0; position: relative; z-index: 20;
}
.header-logo {
  font-family: 'Rajdhani', sans-serif; font-size: 16px;
  color: var(--accent); letter-spacing: 1px;
  text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.5);
  display: flex; align-items: center; gap: 8px;
}
.header-logo-sub {
  font-family: 'Rajdhani', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--text3); text-shadow: none;
}
.header-sep { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; }
.header-class-selector { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.class-btn {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04);
  overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; padding: 0;
}
.class-btn:hover  { border-color: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb),.3); }
.class-btn.active { border-color: var(--accent2); box-shadow: 0 0 12px rgba(var(--accent-rgb),.5); }
.class-btn img { width: 100%; height: 100%; object-fit: cover; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header-level-label { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 1.5px; }
.header-level-input {
  width: 48px; background: rgba(255,255,255,0.04); border: 1px solid var(--border2);
  border-radius: 5px; padding: 2px 6px; color: var(--text-white);
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
  outline: none; text-align: center; transition: border-color .15s;
}
.header-level-input:focus { border-color: var(--accent); }
.elem-toggles { display: flex; gap: 3px; }
.elem-toggle {
  padding: 2px 7px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08);
  background: transparent; font-size: 9px; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; transition: all .15s; color: var(--text3);
}
.elem-toggle.feu   { border-color: rgba(239,68,68,.4);  color: var(--el-feu);   background: rgba(239,68,68,.07); }
.elem-toggle.eau   { border-color: rgba(59,130,246,.4); color: var(--el-eau);   background: rgba(59,130,246,.07); }
.elem-toggle.terre { border-color: rgba(132,204,22,.4); color: var(--el-terre); background: rgba(132,204,22,.07); }
.elem-toggle.air   { border-color: rgba(168,85,247,.4); color: var(--el-air);   background: rgba(168,85,247,.07); }
.elem-toggle.off   { border-color: rgba(255,255,255,.06); color: var(--text3); background: transparent; }
.header-version { font-size: 9px; color: var(--text3); }

/* ══ MAIN — zone scrollable, cards flottantes centrées ═══════════ */
.main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  align-items: flex-start;      /* cards alignées en haut, hauteur libre */
  justify-content: center;       /* centrées horizontalement */
  gap: 18px;
  padding: 22px 24px 32px;
  position: relative; z-index: 1;
}

/* ══ CARDS FLOTTANTES ════════════════════════════════════════════
   Chaque panneau est une card : fond, bordure, coins arrondis,
   ombre, hauteur adaptée au contenu (max viewport).
══════════════════════════════════════════════════════════════════ */
.panel-stats,
.panel-center,
.panel-right {
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  display: flex; flex-direction: column;
  overflow: hidden;
  max-height: calc(100vh - 44px - 36px - 54px);  /* header + tabs + paddings */
}

.panel-stats  { width: 560px; flex-shrink: 0; }
.panel-center { width: 520px; flex-shrink: 0; position: relative; }
.panel-right  { width: 420px; flex-shrink: 0; }

/* ══ TITRES PANNEAUX ═════════════════════════════════════════════ */
.panel-title {
  padding: 9px 14px; font-family: 'Rajdhani', sans-serif;
  font-size: 11px; letter-spacing: 1px; color: var(--accent);
  border-bottom: 1px solid var(--border); text-transform: uppercase; flex-shrink: 0;
  background: rgba(255,255,255,0.015);
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.3);
}
.stats-scroll, .panel-right-scroll {
  flex: 1; overflow-y: auto; padding: 13px 14px;
  min-height: 0;
}

/* ══ BUILDER ZONE — perso + slots, hauteur au contenu ════════════ */
.builder-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--slot-gap);
  padding: 18px 16px;
}

.builder-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--slot-gap);
}

/* Rangée top : Coiffe · espace = largeur perso · Cape */
.row-top .builder-spacer {
  width: 240px;
  flex-shrink: 0;
}

/* Rangée milieu : col-gauche · perso · col-droite */
.builder-col-left,
.builder-col-right {
  display: flex;
  flex-direction: column;
  gap: var(--slot-gap);
  flex-shrink: 0;
}

/* Image perso centrale */
.builder-perso {
  width: 240px;
  height: calc(4 * var(--slot-sz) + 3 * var(--slot-gap));
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.builder-perso::before {
  /* halo subtil derrière le perso */
  content: '';
  position: absolute; inset: 10%;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb),0.05) 0%, transparent 70%);
  pointer-events: none;
}
.builder-perso img {
  max-height: 100%; max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.6));
}

/* ══ SLOT — drop-item-img-wrap ═══════════════════════════════════ */
/* Slot — copie EXACTE de .drop-item-img-wrap (dungeon.css) */
.slot-item {
  width: var(--slot-sz); height: var(--slot-sz);
  flex-shrink: 0; cursor: pointer;
  position: relative;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 0 0 1.5px var(--drop-color, rgba(255,255,255,0.15)),
    0 2px 8px rgba(0,0,0,0.5);
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.55) 40%,
    var(--drop-color-bg, rgba(80,60,20,0.25)) 100%
  );
  transition: box-shadow 0.2s, background 0.2s;
  overflow: hidden;
}
.slot-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    var(--drop-color-bg, rgba(80,60,20,0.18)) 100%
  );
  pointer-events: none; z-index: 1;
}
.slot-item:hover {
  box-shadow:
    inset 0 0 0 1.5px var(--drop-color, rgba(255,255,255,0.35)),
    0 4px 16px rgba(0,0,0,0.6),
    0 0 12px var(--drop-color-glow, rgba(255,255,255,0.08));
}
.slot-item.active {
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 20px rgba(var(--accent-rgb),.3);
}
.slot-item.two-handed {
  box-shadow:
    inset 0 0 0 1.5px var(--drop-color, rgba(255,255,255,0.25)),
    0 0 10px var(--drop-color-glow, rgba(255,255,255,0.08));
  opacity: 0.65;
}
.slot-item img.item-img {
  width: 85%; height: 85%; object-fit: contain; position: relative; z-index: 2;
}
.slot-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 100%; height: 100%; z-index: 2; position: relative;
}
.slot-placeholder img {
  width: 26px; height: 26px; object-fit: contain;
  opacity: 0.75;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
}
.slot-placeholder span {
  font-size: 8px; color: rgba(255,255,255,0.4); text-align: center;
  line-height: 1.2; text-transform: uppercase; letter-spacing: .5px; max-width: 52px;
}
.slot-del {
  position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%;
  background: #150505; border: 1px solid #e05050; color: #e05050; font-size: 9px; line-height: 1;
  cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 10;
}
.slot-item.filled:hover .slot-del { display: flex; }
.slot-del:hover { background: #e05050; color: #fff; }
.slot-tooltip {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--bg-header); border: 1px solid var(--border2); border-radius: 4px;
  padding: 2px 7px; font-size: 8px; color: var(--text2); white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .1s; z-index: 100;
  text-transform: uppercase; letter-spacing: 1px;
}
.slot-item:hover .slot-tooltip { opacity: 1; }

/* ══ OVERLAY RECHERCHE — couvre la card centre ═══════════════════ */
.search-overlay {
  position: absolute; inset: 0; background: rgba(8,9,12,0.97);
  backdrop-filter: blur(6px); z-index: 50; display: none; flex-direction: column;
  border-radius: 12px;
}
.search-overlay.open { display: flex; }
.search-top {
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg-header); flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
  border-radius: 12px 12px 0 0;
}
.search-top-row { display: flex; align-items: center; gap: 10px; }
.search-slot-title {
  font-family: 'Rajdhani', sans-serif; font-size: 13px; color: var(--accent);
  letter-spacing: 1px; flex: 1; text-shadow: 0 0 16px rgba(var(--accent-rgb),.4);
}
.search-close {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border2);
  background: transparent; color: var(--text2); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.search-close:hover { border-color: #e05050; color: #e05050; }
.search-input {
  width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--border2);
  border-radius: 7px; padding: 7px 12px; color: var(--text-white);
  font-family: 'Rajdhani', sans-serif; font-size: 14px; outline: none; transition: border-color .15s;
}
.search-input:focus { border-color: var(--accent); }
.search-input::placeholder { color: var(--text3); }
.search-filters { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.filter-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; }
.level-filter { display: flex; align-items: center; gap: 4px; }
.level-filter input[type=range] { width: 60px; accent-color: var(--accent); }
.level-val { font-size: 10px; color: var(--accent2); min-width: 22px; font-weight: 700; }
.rarity-btn {
  padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); background: transparent;
  font-size: 8px; cursor: pointer; font-family: 'Rajdhani', sans-serif; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text3); transition: all .15s;
}
.rarity-btn.active-commun     { border-color: var(--r-commun);     color: var(--r-commun);     background: rgba(179,179,178,.06); }
.rarity-btn.active-rare       { border-color: var(--r-rare);       color: var(--r-rare);       background: rgba(126,200,74,.06); }
.rarity-btn.active-mythique   { border-color: var(--r-mythique);   color: var(--r-mythique);   background: rgba(226,190,146,.06); }
.rarity-btn.active-legendaire { border-color: var(--r-legendaire); color: var(--r-legendaire); background: rgba(176,195,69,.06); }
.rarity-btn.active-souvenir   { border-color: var(--r-souvenir);   color: var(--r-souvenir);   background: rgba(136,194,222,.06); }
.rarity-btn.active-relique    { border-color: var(--r-relique);    color: var(--r-relique);    background: rgba(177,148,210,.06); }
.rarity-btn.active-epique     { border-color: var(--r-epique);     color: var(--r-epique);     background: rgba(195,124,167,.06); }
.results-count {
  font-size: 10px; color: var(--text3); padding: 4px 14px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; text-transform: uppercase; letter-spacing: 1.5px;
}
.results-list { flex: 1; overflow-y: auto; padding: 3px 6px; min-height: 0; }

/* Lignes résultats */
.item-row {
  display: flex; align-items: center; gap: 10px; padding: 5px 7px; border-radius: 7px;
  border: 1px solid transparent; cursor: pointer; transition: all .12s; margin-bottom: 2px;
}
.item-row:hover { background: var(--bg3); border-color: var(--border2); }
.item-row.sel   { background: rgba(224,80,122,.06); border-color: rgba(224,80,122,.25); }
.item-thumb {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 8px; position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow:
    inset 0 0 0 1.5px var(--drop-color, rgba(255,255,255,0.15)),
    0 2px 8px rgba(0,0,0,0.5);
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.55) 40%,
    var(--drop-color-bg, rgba(80,60,20,0.25)) 100%
  );
  transition: box-shadow 0.2s, background 0.2s;
}
.item-thumb::after {
  content: ''; position: absolute; inset: 0; border-radius: 8px;
  background: radial-gradient(ellipse at center, transparent 30%, var(--drop-color-bg, rgba(80,60,20,0.18)) 100%);
  pointer-events: none;
}
.item-row:hover .item-thumb {
  box-shadow:
    inset 0 0 0 1.5px var(--drop-color, rgba(255,255,255,0.35)),
    0 4px 16px rgba(0,0,0,0.6),
    0 0 12px var(--drop-color-glow, rgba(255,255,255,0.08));
}
.item-thumb img { width: 34px; height: 34px; object-fit: contain; position: relative; z-index: 1; }
.item-info { flex: 1; min-width: 0; }
.item-name { font-size: 14px; font-weight: 600; color: var(--text-white); font-family: 'Rajdhani', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-meta { display: flex; gap: 6px; margin-top: 1px; align-items: center; }
.item-level { font-size: 10px; color: var(--text2); }
.rarity-badge {
  font-size: 9px; padding: 1px 4px; border-radius: 4px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; border: 1px solid;
  font-family: 'Rajdhani', sans-serif;
}
.rarity-badge.commun     { border-color: var(--r-commun);     color: var(--r-commun);     background: rgba(179,179,178,.05); }
.rarity-badge.rare       { border-color: var(--r-rare);       color: var(--r-rare);       background: rgba(126,200,74,.05); }
.rarity-badge.mythique   { border-color: var(--r-mythique);   color: var(--r-mythique);   background: rgba(226,190,146,.05); }
.rarity-badge.legendaire { border-color: var(--r-legendaire); color: var(--r-legendaire); background: rgba(176,195,69,.05); }
.rarity-badge.souvenir   { border-color: var(--r-souvenir);   color: var(--r-souvenir);   background: rgba(136,194,222,.05); }
.rarity-badge.relique    { border-color: var(--r-relique);    color: var(--r-relique);    background: rgba(177,148,210,.05); }
.rarity-badge.epique     { border-color: var(--r-epique);     color: var(--r-epique);     background: rgba(195,124,167,.05); }
.item-stats-prev { font-size: 10px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

/* ══ STATS PANEL ═════════════════════════════════════════════════ */
.stats-hero {
  display: flex; justify-content: space-between; gap: 4px; margin-bottom: 12px;
  padding: 8px 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
}
.stat-hero-item { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; }
.stat-hero-val { font-size: 17px; font-weight: 700; font-family: 'Rajdhani', sans-serif; line-height: 1; }
.stat-hero-val.pv-val { color: #ef4444; }
.stat-hero-val.pa-val { color: #4d9be6; }
.stat-hero-val.pm-val { color: #34d399; }
.stat-hero-val.pw-val { color: #2dd4bf; }
.stat-hero-label { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; }

.stats-section-title-center {
  text-align: center; font-size: 14px; font-weight: 700; color: var(--text-white);
  font-family: 'Rajdhani', sans-serif; letter-spacing: 1px; margin: 10px 0 6px;
  padding-bottom: 5px; border-bottom: 1px solid var(--border);
}

.elem-grid4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px; margin-bottom: 8px; }
.elem-card4 {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 5px; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.elem-maitrise4 { font-size: 16px; font-weight: 700; font-family: 'Rajdhani', sans-serif; line-height: 1; }
.elem-res4 { font-size: 10px; color: var(--text2); line-height: 1; text-align: center; display: flex; align-items: center; gap: 2px; }
.feu-c .elem-maitrise4   { color: var(--el-feu); }
.eau-c .elem-maitrise4   { color: var(--el-eau); }
.terre-c .elem-maitrise4 { color: var(--el-terre); }
.air-c .elem-maitrise4   { color: var(--el-air); }

.stats-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 2px; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stat-row-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.stat-name { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.stat-val { font-size: 12px; font-weight: 700; color: var(--text); font-family: 'Rajdhani', sans-serif; white-space: nowrap; flex-shrink: 0; margin-left: 4px; }
.stat-val.pos  { color: #7ec84a; }
.stat-val.zero { color: var(--text3); }
.stat-val.neg  { color: #e05050; }

/* ══ PANNEAU DROIT : ENCHANTEMENTS ═══════════════════════════════ */
.enchant-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.enchant-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 9px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg3);
  min-width: 0;
}
/* Item équipé : fond dégradé horizontal à la couleur de la rareté */
.enchant-item.filled {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--rarete-color, #888) 22%, var(--bg3)) 0%,
    color-mix(in srgb, var(--rarete-color, #888) 8%, var(--bg3)) 45%,
    var(--bg3) 100%
  );
  border-color: color-mix(in srgb, var(--rarete-color, #888) 40%, var(--border));
}
.enchant-item-header { display: flex; align-items: flex-start; gap: 7px; }
.enchant-item-headcol {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0; flex: 1;
  padding-top: 2px;
}
.enchant-item-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 0 0 1.5px var(--drop-color, rgba(255,255,255,0.15)),
    0 2px 8px rgba(0,0,0,0.5);
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.55) 40%,
    var(--drop-color-bg, rgba(80,60,20,0.25)) 100%
  );
}
.enchant-item-icon img { width: 100%; height: 100%; object-fit: contain; }
.enchant-item-name { font-size: 13px; font-weight: 600; font-family: 'Rajdhani', sans-serif; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.enchant-chasse-dots { display: flex; gap: 5px; }
.chasse-dot-img { width: 20px; height: 20px; object-fit: contain; }
.enchant-subli { display: flex; align-items: center; gap: 5px; padding-left: 2px; }
.enchant-subli-name { font-size: 11px; color: var(--text3); font-style: italic; }
.enchant-empty { font-size: 10px; color: var(--text3); font-style: italic; padding: 8px; text-align: center; }

/* ── RÉCAP ENCHANTEMENT (onglet Équipement) : reflet compact de l'onglet Enchantement ── */
/* Châsses : 4 cases compactes, sous le nom dans la colonne droite */
.enchant-chasse-dots { display: flex; gap: 4px; }
.rcp-chasse-empty {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1px dashed rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  flex-shrink: 0;
}
.rcp-chasse-filled {
  width: 18px; height: 18px; flex-shrink: 0;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.rcp-chasse-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rcp-chasse-ico { position: relative; z-index: 1; width: 44%; height: 44%; object-fit: contain; margin-top: 2px; }
/* Sublimation normale posée : mini-logo + nom */
.rcp-subli { display: flex; align-items: center; gap: 6px; padding: 4px 2px 0; min-width: 0; }
.rcp-subli.filled { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }
.rcp-subli-ico { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.rcp-subli .ench-lvl-gem { flex-shrink: 0; }
.rcp-subli-name {
  font-size: 13px; font-weight: 700; color: #f0c040;
  font-family: 'Rajdhani', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.rcp-subli-name.empty { color: var(--text3); font-style: italic; font-weight: 400; font-size: 11px; }
/* Icône épique/relique dans les badges du haut */
.rcp-badge-ico { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; flex-shrink: 0; }

.subli-specials { display: flex; gap: 4px; margin-bottom: 9px; }
.subli-special-badge { flex: 1; min-width: 0; padding: 4px 8px; border-radius: 6px; display: flex; align-items: center; gap: 6px; }
.subli-special-badge.epique  { background: rgba(195,124,167,.07); border: 1px solid rgba(195,124,167,.25); color: var(--r-epique); }
.subli-special-badge.relique { background: rgba(177,148,210,.07); border: 1px solid rgba(177,148,210,.25); color: var(--r-relique); }
.subli-special-badge .badge-label { font-size: 10px; opacity: .6; text-transform: uppercase; letter-spacing: 1px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subli-special-badge .badge-val   { font-weight: 700; font-size: 15px; margin-left: auto; font-family: 'Rajdhani', sans-serif; }

/* ══ RESPONSIVE — wrap des cards si écran étroit ═════════════════ */
@media (max-width: 1100px) {
  .main { flex-wrap: wrap; }
  .panel-stats, .panel-right { width: 540px; max-height: none; }
  .panel-right-col { width: 540px; max-height: none; }
}

/* ══ ONGLETS ═════════════════════════════════════════════════════ */
.tabs-bar {
  height: 36px; flex-shrink: 0;
  display: flex; align-items: flex-end; gap: 2px;
  padding: 0 24px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 15;
}
.tab-btn {
  padding: 7px 16px 8px;
  background: transparent; border: 1px solid transparent; border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text3); cursor: pointer;
  transition: color .15s, background .15s;
}
.tab-btn:hover { color: var(--text2); }
.tab-btn.active {
  color: var(--accent);
  background: var(--bg-card);
  border-color: var(--border2);
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.4);
}

/* Pages d'onglets — fondu */
.tab-page {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}
.tab-page.active {
  display: flex;
  animation: tabFade 0.25s ease;
}
@keyframes tabFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.tab-page .main { flex: 1; }

/* Placeholder onglets en construction */
.panel-placeholder {
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  width: 640px;
  display: flex; flex-direction: column; overflow: hidden;
}
.placeholder-body {
  padding: 48px 32px;
  text-align: center;
  font-size: 13px; color: var(--text2);
  line-height: 1.8;
}
.placeholder-soon {
  display: inline-block; margin-top: 12px;
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text3);
}

/* ══ STATS HERO façon Duffus — gros icônes + valeurs ═════════════ */
.stats-hero {
  padding: 12px 14px;
  margin-bottom: 14px;
}
.stat-hero-item {
  flex-direction: row;
  gap: 5px;
}
.stat-hero-val { font-size: 22px; }
.stat-hero-label { font-size: 10px; }

/* Stats en 2 colonnes plus aérées dans la card large */
.stats-2col { gap: 0 22px; }
.stat-row { padding: 5px 2px; }
.stat-name { font-size: 13px; }
.stat-val  { font-size: 14px; }

/* Grille éléments plus grande */
.elem-card4 { padding: 9px 6px; gap: 4px; }
.elem-maitrise4 { font-size: 20px; }
.elem-res4 { font-size: 12px; }

/* ══ PANNEAU DROIT — tous les slots visibles ═════════════════════ */
.enchant-item.empty {
  opacity: 1;        /* plus de voile : la case contient un vrai récap (châsses/subli) */
}
.enchant-item.empty .enchant-item-icon {
  opacity: 0.6;      /* on atténue seulement l'icône du slot vide, pas le récap */
}
.enchant-item.empty .enchant-item-name {
  color: var(--text3); font-style: italic; font-weight: 400;
}
.enchant-item-icon .slot-type-icon {
  width: 70%; height: 70%; object-fit: contain;
  opacity: 0.85;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
}
.chasse-dot-empty {
  width: 20px; height: 20px; border-radius: 5px;
  border: 1px dashed rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.03);
}

/* ══ MODALE SÉLECTEUR D'ITEM ═════════════════════════════════════ */
.item-modal {
  position: fixed; inset: 0;
  background: rgba(5,6,10,0.78);
  backdrop-filter: blur(5px);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
}
.item-modal.open { display: flex; animation: tabFade 0.18s ease; }

.item-modal-box {
  width: min(1280px, 94vw);
  height: min(800px, 92vh);
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 14px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.7);
  display: flex; flex-direction: column;
  padding: 16px 20px;
  gap: 11px;
}

.modal-head {
  display: flex; align-items: center; gap: 14px;
}
.modal-head .search-slot-title {
  flex: 1;
  font-size: 16px;
}
.modal-search-row { display: flex; }
.modal-filters-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ── Double slider à crans ── */
.level-range { display: flex; align-items: center; gap: 8px; }
.level-sliders {
  position: relative;
  width: 230px; height: 22px;
  /* crans : 17 paliers = 16 intervalles */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.14) 0, rgba(255,255,255,0.14) 1px,
    transparent 1px, transparent calc(100% / 16)
  );
  background-size: calc(100% - 12px) 7px;
  background-position: 6px center;
  background-repeat: no-repeat;
}
.level-sliders::before {
  /* piste */
  content: '';
  position: absolute; left: 6px; right: 6px; top: 50%;
  height: 3px; transform: translateY(-50%);
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
}
/* Remplissage coloré entre les deux curseurs — positionné par JS */
.level-fill {
  position: absolute; top: 50%;
  height: 4px; transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.7), var(--accent), rgba(var(--accent-rgb),0.7));
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
  pointer-events: none;
  transition: left 0.05s linear, width 0.05s linear;
}
.level-sliders input[type=range] {
  position: absolute; inset: 0;
  width: 100%; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent;
  pointer-events: none;
}
.level-sliders input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  pointer-events: auto;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0a0b0e;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
  cursor: pointer;
  margin-top: 0;
}
.level-sliders input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0a0b0e;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
  cursor: pointer;
}
.level-range-display {
  font-size: 12px; font-weight: 700; color: var(--accent2);
  font-family: 'Rajdhani', sans-serif;
  min-width: 64px; text-align: center;
}

/* ── Bascule compact / détaillé ── */
.view-toggle { display: flex; gap: 3px; }
.view-btn {
  padding: 4px 11px; border-radius: 6px;
  border: 1px solid var(--border2); background: transparent;
  font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--text3); cursor: pointer; transition: all .15s;
}
.view-btn:hover { color: var(--text2); }
.view-btn.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.2);
}

/* ── Corps : résultats + colonne filtres ── */
.modal-body {
  flex: 1; min-height: 0;
  display: flex; gap: 16px;
}
.results-area {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.results-area .results-count { padding: 4px 2px 6px; border-bottom: 1px solid var(--border); }
.results-area .results-list { flex: 1; overflow-y: auto; padding: 10px 4px; }

/* ── Affichage COMPACT — identique drop-items-grid ── */
.results-grid-compact {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
.mc-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  width: 78px; text-align: center;
  cursor: pointer;
}
.mc-card.sel .mc-thumb {
  box-shadow:
    inset 0 0 0 2px var(--accent),
    0 0 14px rgba(var(--accent-rgb), 0.35);
}
/* Vignette — valeurs exactes drop-item-img-wrap */
.mc-thumb {
  width: 52px; height: 52px;
  position: relative; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 0 0 1.5px var(--drop-color, rgba(255,255,255,0.15)),
    0 2px 8px rgba(0,0,0,0.5);
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.55) 40%,
    var(--drop-color-bg, rgba(80,60,20,0.25)) 100%
  );
  transition: box-shadow 0.2s, background 0.2s;
  overflow: hidden;
}
.mc-thumb::after {
  content: ''; position: absolute; inset: 0; border-radius: 8px;
  background: radial-gradient(ellipse at center, transparent 30%, var(--drop-color-bg, rgba(80,60,20,0.18)) 100%);
  pointer-events: none;
}
.mc-card:hover .mc-thumb {
  box-shadow:
    inset 0 0 0 1.5px var(--drop-color, rgba(255,255,255,0.35)),
    0 4px 16px rgba(0,0,0,0.6),
    0 0 12px var(--drop-color-glow, rgba(255,255,255,0.08));
}
.mc-thumb img { width: 44px; height: 44px; object-fit: contain; position: relative; z-index: 1; }
.mc-name {
  font-size: 11px; font-weight: 600; line-height: 1.3;
  word-break: break-word; hyphens: auto;
}

/* ── Affichage DÉTAILLÉ — cards avec stats complètes ── */
.results-grid-detail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 10px;
  align-content: flex-start;
}
.md-card {
  border-radius: 10px;
  padding: 11px 12px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.md-card:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
.md-card.sel {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.md-head {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.md-name {
  font-size: 13px; font-weight: 700; text-align: center;
  font-family: 'Rajdhani', sans-serif; line-height: 1.25;
}
.md-niv {
  font-size: 9px; color: var(--text2); letter-spacing: 1.5px;
}
.md-stats { display: flex; flex-direction: column; }
.dstat {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dstat:last-child { border-bottom: none; }
.dstat-val {
  font-weight: 700; min-width: 36px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
}
.dstat-label { color: rgba(255,255,255,0.85); font-size: 12px; }

/* ── Colonne filtres de stats (droite, façon Duffus) ── */
.stat-filter-col {
  width: 252px; flex-shrink: 0;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  padding-left: 14px;
}
.sf-group {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.sf-group:last-child { border-bottom: none; }
.sf-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 6px;
  font-size: 12px; color: var(--text2);
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap; overflow: hidden;
}
.sf-item:hover { color: var(--text-white); background: rgba(255,255,255,0.03); }
.sf-item.active {
  color: var(--text-white);
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow:
    0 0 10px rgba(var(--accent-rgb), 0.30),
    inset 0 0 8px rgba(var(--accent-rgb), 0.06);
}

/* ══ BLOCS MAÎTRISES | RÉSISTANCES ═══════════════════════════════ */
.elem-duo {
  display: flex; gap: 6px; margin-bottom: 8px;
}
.elem-block {
  flex: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5px;
}
/* Mini-card teintée par élément */
.elem-cell {
  display: flex; align-items: center; gap: 5px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid;
}
.elem-cell.el-feu   { border-color: rgba(239,68,68,0.35);  background: rgba(239,68,68,0.07); }
.elem-cell.el-eau   { border-color: rgba(59,130,246,0.35); background: rgba(59,130,246,0.07); }
.elem-cell.el-terre { border-color: rgba(132,204,22,0.35); background: rgba(132,204,22,0.07); }
.elem-cell.el-air   { border-color: rgba(168,85,247,0.35); background: rgba(168,85,247,0.07); }
.ec-label {
  font-size: 12px; color: var(--text2);
  font-family: 'Rajdhani', sans-serif;
}
.ec-val {
  font-size: 14px; font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  margin-left: auto;
}
.feu-c   { color: var(--el-feu); }
.eau-c   { color: var(--el-eau); }
.terre-c { color: var(--el-terre); }
.air-c   { color: var(--el-air); }

/* ══ CUMUL MAX DES MAÎTRISES ═════════════════════════════════════ */
.mastery-total {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 10px; margin-bottom: 8px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
}
.mastery-total-label {
  font-size: 12px; color: var(--text2);
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase; letter-spacing: 1px;
}
.mastery-total-val {
  font-size: 18px; font-weight: 700;
  color: var(--accent2);
  font-family: 'Rajdhani', sans-serif;
}

/* ══ BADGE POIDS ═════════════════════════════════════════════════ */
.mc-weight {
  position: absolute;
  bottom: 2px; right: 2px;
  font-size: 9px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.75);
  border-radius: 4px;
  padding: 0px 3px;
  line-height: 1.4;
  z-index: 2;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   v0.6 — STAGE 16:9, accueil, agrandissement global
   (section d'overrides : la cascade prime sur les règles antérieures)
════════════════════════════════════════════════════════════════ */

/* ── Stage : canvas fixe 1920×1080 mis à l'échelle ── */
html, body { overflow: hidden; }
.stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: center center;
  display: flex; flex-direction: column;
  z-index: 1;
}

/* ── Onglets centrés, sans header ── */
.tabs-bar {
  height: 52px;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  position: relative;
}
.tabs-center { display: flex; gap: 4px; }
.tab-btn { font-size: 15px; padding: 10px 24px 11px; }

.settings-btn {
  position: absolute; right: 26px; bottom: 8px;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border2);
  border-radius: 20px;
  color: var(--text2); cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
  transition: all .15s;
}
.settings-btn:hover { border-color: var(--accent); color: var(--text-white); }
.settings-btn img {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--border2);
}

/* ── Tailles agrandies (~120%) ── */
:root {
  --slot-sz: 78px;
  --slot-gap: 10px;
}
.tab-page .main {
  gap: 22px;
  padding: 18px 26px 26px;
}
.panel-stats  { width: 600px; }
.panel-center { width: 620px; }
.panel-right  { width: 470px; }
.panel-right-col { width: 470px; }
.panel-stats, .panel-center, .panel-right {
  max-height: calc(1080px - 52px - 44px);
}
.panel-right-col { max-height: calc(1080px - 52px - 44px); }
.builder-perso { width: 280px; height: calc(4 * var(--slot-sz) + 3 * var(--slot-gap)); }
.row-top .builder-spacer { width: 280px; }
.slot-placeholder img { width: 34px; height: 34px; }
.slot-placeholder span { font-size: 9px; max-width: 70px; }

/* Stats : typo agrandie */
.stats-scroll { padding: 14px 18px; }
.stat-hero-val { font-size: 26px; }
.stat-hero-label { font-size: 11px; }
.stats-section-title-center { font-size: 16px; margin: 12px 0 8px; }
.stat-name { font-size: 14px; }
.stat-val  { font-size: 15px; }
.ec-val { font-size: 16px; }
.mastery-total-label { font-size: 13px; }
.mastery-total-val { font-size: 21px; }
.panel-title { font-size: 13px; padding: 11px 16px; }

/* Enchantements agrandis */
.enchant-item-icon { width: 48px; height: 48px; }
.enchant-item-name { font-size: 14px; }
.chasse-dot-empty { width: 23px; height: 23px; }
.chasse-dot-img   { width: 23px; height: 23px; }
.enchant-subli-name { font-size: 12px; }

/* ── Card stats : valeurs alignées à la moitié de la colonne ── */
.stats-2col { gap: 0 26px; }
.stat-row {
  justify-content: flex-start;
  padding: 4px 2px;
}
.stat-row .stat-row-left {
  flex: 0 0 50%;
  min-width: 0;
}
.stat-row .stat-val { margin-left: 0; }
.stat-row .cond-bonus {
  margin-left: 6px;
  font-size: 12px; font-weight: 700;
  color: #7ec84a;
  font-family: 'Rajdhani', sans-serif;
  min-width: 56px; display: inline-block;
  text-align: left;
}
.cond-bonus.cond-empty { min-width: 56px; }

/* ── Cellules élémentaires : logo + valeur seulement ── */
.elem-cell { justify-content: center; gap: 7px; padding: 8px 6px; }
.elem-cell .ec-val { margin-left: 0; }

/* Tooltip générique data-tip */
[data-tip] { position: relative; cursor: default; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--bg-header);
  border: 1px solid var(--border2);
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 11px; color: var(--text);
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
  letter-spacing: .5px; white-space: nowrap;
  z-index: 300; pointer-events: none;
}

/* ── Fenêtre d'accueil ── */
.welcome-modal {
  position: fixed; inset: 0;
  background: rgba(5,6,10,0.85);
  backdrop-filter: blur(8px);
  z-index: 400;
  display: none;
  align-items: center; justify-content: center;
}
.welcome-modal.open { display: flex; animation: tabFade 0.25s ease; }
.welcome-box {
  width: 720px;
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.8);
  padding: 32px 38px;
  display: flex; flex-direction: column; gap: 22px;
}
.welcome-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 28px; color: var(--accent);
  text-align: center; letter-spacing: 2px;
  text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.5);
}
.welcome-title span {
  font-family: 'Rajdhani', sans-serif; font-size: 13px;
  letter-spacing: 5px; text-transform: uppercase;
  color: var(--text3); text-shadow: none;
}
.welcome-subtitle {
  text-align: center; font-size: 13px; color: var(--text2);
  margin-top: -14px;
}
.welcome-section { display: flex; flex-direction: column; gap: 8px; }
.welcome-label {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent2);
  font-family: 'Rajdhani', sans-serif;
}
.welcome-classes {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.welcome-classes .class-btn {
  width: 52px; height: 52px;
}
.welcome-row { display: flex; gap: 28px; align-items: flex-start; }
.welcome-level {
  width: 76px; font-size: 17px; padding: 6px 8px;
}
.welcome-pills { display: flex; gap: 6px; }
.pill {
  padding: 6px 16px; border-radius: 18px;
  border: 1px solid var(--border2); background: transparent;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text3); cursor: pointer; transition: all .15s;
}
.pill:hover { color: var(--text2); }
.pill.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
}
.welcome-start {
  margin-top: 4px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent2);
  font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; transition: all .15s;
}
.welcome-start:hover {
  background: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
}

/* Rangée éléments dans la card stats */
.elem-toggles-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* ══ HÉROS EMPILÉ : Vita / PA PM PW ══════════════════════════════ */
.hero-stacked {
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.hero-vita {
  display: flex; align-items: center; gap: 7px;
}
.hero-vita .stat-hero-val { font-size: 28px; }
.hero-row {
  display: flex; gap: 34px;
}

/* ══ LIGNES MAÎTRISE / RÉSISTANCE flottantes ═════════════════════ */
.elem-line-title {
  font-size: 13px; font-weight: 700;
  color: var(--text2);
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase; letter-spacing: 2px;
  margin: 6px 0 4px;
}
.elem-line {
  display: flex; align-items: center; gap: 20px;
  padding: 2px 4px 6px;
}
.elem-float {
  display: flex; align-items: center; gap: 6px;
}
.elem-float .ec-val { margin-left: 0; }

/* Halo coloré autour du logo */
.glow-feu img   { filter: drop-shadow(0 0 5px rgba(239,68,68,0.85)); }
.glow-eau img   { filter: drop-shadow(0 0 5px rgba(59,130,246,0.85)); }
.glow-terre img { filter: drop-shadow(0 0 5px rgba(132,204,22,0.85)); }
.glow-air img   { filter: drop-shadow(0 0 5px rgba(168,85,247,0.85)); }

/* Total à droite de chaque ligne */
.elem-total {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border2);
}
.elem-total img {
  width: 18px; height: 18px; object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.35));
}
.elem-total span {
  font-size: 16px; font-weight: 700;
  color: var(--text-white);
  font-family: 'Rajdhani', sans-serif;
}

/* Poids total */
.weight-total {
  text-align: right;
  font-size: 11px; color: var(--text3);
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 0 4px 4px;
}
.weight-total span {
  color: var(--text2); font-weight: 700; font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}

/* ══ TOAST ═══════════════════════════════════════════════════════ */
#builder-toast {
  position: fixed;
  bottom: 36px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--bg-header);
  border: 1px solid rgba(224,80,122,0.5);
  color: var(--text-white);
  border-radius: 10px;
  padding: 10px 22px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: .5px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.7), 0 0 16px rgba(224,80,122,0.25);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 500;
}
#builder-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══ CROIX DE SUPPRESSION — repositionnée dans le slot ═══════════ */
.slot-del {
  top: 3px; right: 3px;
  width: 17px; height: 17px;
  font-size: 11px;
  background: rgba(15,5,5,0.9);
  z-index: 20;
}

/* ══ INFOS BUILD au-dessus du perso ══════════════════════════════ */
.build-info {
  width: 280px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s;
  align-self: stretch;
}
.build-info:hover {
  border-color: var(--border2);
  background: rgba(255,255,255,0.02);
}
.bi-line1 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px; color: var(--accent2);
  letter-spacing: 1px;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.35);
}
.bi-line2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px; font-weight: 700;
  color: var(--text2);
  text-transform: uppercase; letter-spacing: 2px;
}

/* ══ SELECT DE TRANCHE (accueil) ═════════════════════════════════ */
.welcome-level-select {
  width: 150px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-white);
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px; font-weight: 700;
  outline: none; cursor: pointer;
  transition: border-color .15s;
}
.welcome-level-select:focus, .welcome-level-select:hover { border-color: var(--accent); }
.welcome-level-select option { background: var(--bg2); color: var(--text-white); }

/* ══ BOUTONS RARETÉ — gros et colorés par défaut ═════════════════ */
.item-modal .rarity-btn {
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 7px;
  letter-spacing: 1px;
}
.rarity-btn[data-rarity="commun"]     { color: rgba(179,179,178,.8);  border-color: rgba(179,179,178,.4); }
.rarity-btn[data-rarity="rare"]       { color: rgba(126,200,74,.8);   border-color: rgba(126,200,74,.4); }
.rarity-btn[data-rarity="mythique"]   { color: rgba(226,190,146,.8);  border-color: rgba(226,190,146,.4); }
.rarity-btn[data-rarity="legendaire"] { color: rgba(176,195,69,.8);   border-color: rgba(176,195,69,.4); }
.rarity-btn[data-rarity="souvenir"]   { color: rgba(136,194,222,.8);  border-color: rgba(136,194,222,.4); }
.rarity-btn[data-rarity="relique"]    { color: rgba(177,148,210,.8);  border-color: rgba(177,148,210,.4); }
.rarity-btn[data-rarity="epique"]     { color: rgba(195,124,167,.8);  border-color: rgba(195,124,167,.4); }
/* État actif : couleur pleine + fond + glow */
.rarity-btn.active-commun     { color: var(--r-commun) !important;     border-color: var(--r-commun) !important;     background: rgba(179,179,178,.14); box-shadow: 0 0 10px rgba(179,179,178,.3); }
.rarity-btn.active-rare       { color: var(--r-rare) !important;       border-color: var(--r-rare) !important;       background: rgba(126,200,74,.14);  box-shadow: 0 0 10px rgba(126,200,74,.35); }
.rarity-btn.active-mythique   { color: var(--r-mythique) !important;   border-color: var(--r-mythique) !important;   background: rgba(226,190,146,.14); box-shadow: 0 0 10px rgba(226,190,146,.35); }
.rarity-btn.active-legendaire { color: var(--r-legendaire) !important; border-color: var(--r-legendaire) !important; background: rgba(176,195,69,.14);  box-shadow: 0 0 10px rgba(176,195,69,.35); }
.rarity-btn.active-souvenir   { color: var(--r-souvenir) !important;   border-color: var(--r-souvenir) !important;   background: rgba(136,194,222,.14); box-shadow: 0 0 10px rgba(136,194,222,.35); }
.rarity-btn.active-relique    { color: var(--r-relique) !important;    border-color: var(--r-relique) !important;    background: rgba(177,148,210,.14); box-shadow: 0 0 10px rgba(177,148,210,.35); }
.rarity-btn.active-epique     { color: var(--r-epique) !important;     border-color: var(--r-epique) !important;     background: rgba(195,124,167,.14); box-shadow: 0 0 10px rgba(195,124,167,.35); }

/* ══ FIX TOOLTIP TOTAUX — ancré à droite, ne déborde plus ════════ */
.elem-total[data-tip]:hover::after {
  left: auto; right: 0;
  transform: none;
}
/* Le scroll de la card ne doit pas être créé par les tooltips */
.stats-scroll { overflow-x: hidden; }

/* ══ COULEUR PM (vert Wakfu) ═════════════════════════════════════ */
.stat-hero-val.pm-val { color: #5dbb46; }

/* ══ TITRES MAÎTRISE/RÉSISTANCE avec icônes de priorité ══════════ */
.elem-line-title {
  display: flex; align-items: center; gap: 12px;
}
.order-icons {
  display: flex; gap: 6px; align-items: center;
}
.ord-ico {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.03);
  cursor: grab;
  transition: border-color .15s, transform .15s;
}
.ord-ico:active { cursor: grabbing; }
.ord-ico:hover { border-color: var(--accent); transform: translateY(-1px); }
.ord-ico.dragging { opacity: 0.4; }
.ord-ico img { width: 17px; height: 17px; object-fit: contain; }
/* Tooltip des icônes d'ordre : en dessous pour ne pas sortir de la card */
.ord-ico[data-tip]:hover::after {
  bottom: auto; top: calc(100% + 6px);
}

/* ══ RÉSISTANCE : % + valeur brute empilés ═══════════════════════ */
.res-stack {
  display: flex; flex-direction: column;
  align-items: flex-start; line-height: 1.1;
}
.res-raw {
  font-size: 11px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  opacity: 0.75;
}

/* ════════════════════════════════════════════════════════════════
   v0.7 — Card stats pleine hauteur + contenu agrandi
════════════════════════════════════════════════════════════════ */

/* Seule la card stats occupe toute la hauteur disponible du stage */
.tab-page .main {
  align-items: flex-start;
  height: 100%;
}
.panel-stats {
  max-height: none;
  height: 100%;
}

/* La card stats devient plus large pour aérer le contenu */
.panel-stats { width: 660px; }

/* ── Barre héros : valeurs plus grosses ── */
.stats-hero { padding: 18px 16px; margin-bottom: 16px; }
.hero-vita .stat-hero-val { font-size: 38px; }
.hero-row { gap: 48px; }
.hero-row .stat-hero-val { font-size: 30px; }
.stat-hero-item img, .hero-vita img { width: 26px !important; height: 26px !important; }

/* ── Titres de section ── */
.stats-section-title-center { font-size: 19px; margin: 16px 0 10px; }

/* ── Maîtrises / Résistances ── */
.elem-line-title { font-size: 15px; margin: 10px 0 6px; }
.elem-line { gap: 24px; padding: 4px 6px 10px; }
.elem-float .ec-val { font-size: 20px; }
.elem-float img { width: 24px !important; height: 24px !important; }
.res-raw { font-size: 13px; }
.ord-ico { width: 30px; height: 30px; }
.ord-ico img { width: 20px; height: 20px; }
.elem-total { padding: 5px 14px; }
.elem-total img { width: 22px; height: 22px; }
.elem-total span { font-size: 19px; }
.weight-total { font-size: 13px; padding: 2px 6px 8px; }
.weight-total span { font-size: 14px; }

/* ── Lignes de stats Combat / Secondaire ── */
.stats-scroll { padding: 18px 24px; }
.stat-row { padding: 6px 2px; }
.stat-name { font-size: 16px; }
.stat-val  { font-size: 17px; }
.stat-row-left img { width: 19px !important; height: 19px !important; }
.stats-2col { gap: 2px 34px; }
.cond-bonus { font-size: 14px !important; }

/* ════════════════════════════════════════════════════════════════
   v0.8 — Header maîtrise/résistance + cards de priorité centrées
════════════════════════════════════════════════════════════════ */

/* Titre + 2 totaux sur la même ligne */
.mr-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin: 16px 0 10px;
}
.mr-title {
  margin: 0; border: none; padding: 0;
  text-align: left;
  white-space: nowrap;
}
.mr-totals { display: flex; gap: 6px; margin-left: auto; }
.mr-header .elem-total { margin: 0; }

/* Card autour de chaque bloc (maîtrise / résistance) */
.elem-block-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px 14px;
  margin-bottom: 8px;
  overflow: visible;            /* le tooltip de priorité ne doit pas être rogné */
}
.elem-block-card .elem-line-title {
  margin: 0 0 8px;
  justify-content: center;
  position: relative;
  z-index: 5;
}
/* La rangée de valeurs reste sous les tooltips de priorité */
.elem-block-card .elem-line {
  position: relative;
  z-index: 1;
}
.elem-block-card .elem-line {
  justify-content: center;       /* éléments centrés dans la card */
  gap: 30px;
  padding: 0;
}

/* Tooltip des icônes de priorité : passe au-dessus de tout */
.ord-ico { position: relative; }
.ord-ico:hover { z-index: 600; }
.ord-ico[data-tip]:hover::after {
  bottom: auto; top: calc(100% + 6px);
  z-index: 601;
}

/* La card dont une icône de priorité est survolée passe au-dessus de la suivante */
.elem-block-card:hover { z-index: 10; position: relative; }

/* ════════════════════════════════════════════════════════════════
   v0.9 — Modale agrandie 85% + grille 6 colonnes + textes plus gros
════════════════════════════════════════════════════════════════ */

/* Modale à 85% de l'écran (stage 1920×1080) */
.item-modal-box {
  width: 85% !important;
  height: 85% !important;
  max-width: none !important;
  max-height: none !important;
}

/* Grille compacte : 6 colonnes, vignettes plus grandes */
.results-grid-compact {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-content: start;
}
.results-grid-compact .mc-card {
  width: 100%;
  gap: 7px;
}
.results-grid-compact .mc-thumb {
  width: 84px; height: 84px;
  border-radius: 12px;
}
.results-grid-compact .mc-thumb::after { border-radius: 12px; }
.results-grid-compact .mc-thumb img { width: 70px; height: 70px; }
.results-grid-compact .mc-name { font-size: 14px; line-height: 1.3; }
.results-grid-compact .mc-weight {
  font-size: 12px;
  padding: 1px 5px;
  bottom: 3px; right: 3px;
}

/* Affichage détaillé : colonnes un peu plus larges */
.results-grid-detail {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 14px !important;
}
.md-name { font-size: 15px !important; }
.md-niv { font-size: 11px !important; }
.dstat-val { font-size: 13px !important; }
.dstat-label { font-size: 13px !important; }

/* Colonne filtres : texte plus lisible */
.stat-filter-col { width: 290px; }
.sf-item { font-size: 13px; padding: 6px 9px; }

/* En-tête modale + compteur plus grands */
.item-modal .search-slot-title { font-size: 20px; }
.results-count { font-size: 12px; }

/* Icône de rareté dans les boutons de filtre */
.rarity-btn {
  display: inline-flex; align-items: center; gap: 5px;
}
.rarity-btn img {
  width: 15px; height: 15px; object-fit: contain;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   v1.0 — Grille 8 colonnes + en-tête centré + contrôles agrandis
════════════════════════════════════════════════════════════════ */

/* Grille compacte : 8 colonnes en gardant la taille des vignettes */
.results-grid-compact {
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 14px;
}

/* Titre "Chercher une..." centré et plus gros */
.modal-head {
  position: relative;
  justify-content: center;
}
.item-modal .search-slot-title {
  font-size: 26px !important;
  text-align: center;
  flex: none;
}
.modal-head .search-close {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
}

/* Barre de niveau plus large */
.level-sliders { width: 360px; }
.level-range-display { font-size: 15px; min-width: 90px; }
.level-range .filter-label { font-size: 13px; }

/* Badges de filtre (rareté + vues) plus gros */
.item-modal .rarity-btn {
  font-size: 15px;
  padding: 8px 18px;
  border-radius: 9px;
}
.item-modal .rarity-btn img {
  width: 18px; height: 18px;
}
.view-btn {
  font-size: 14px;
  padding: 7px 16px;
}

/* Champ de recherche plus grand */
.item-modal .search-input {
  font-size: 17px;
  padding: 11px 16px;
}

/* ════════════════════════════════════════════════════════════════
   v1.1 — Header / barre d'onglets propre
════════════════════════════════════════════════════════════════ */
.tabs-bar {
  height: 60px !important;
  padding: 0 !important;
  background: transparent !important;       /* plus de rectangle qui se coupe */
  border-bottom: none !important;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 15;
}
/* Ligne de séparation dégradée, pleine largeur, qui s'éteint sur les bords */
.tabs-bar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--accent-rgb), 0.35) 30%,
    rgba(var(--accent-rgb), 0.55) 50%,
    rgba(var(--accent-rgb), 0.35) 70%,
    transparent);
}
.tabs-center {
  display: flex; gap: 6px;
  align-items: flex-end;
}

/* Onglets : capsules propres */
.tab-btn {
  padding: 9px 28px 11px !important;
  background: transparent;
  border: none !important;
  border-radius: 0;
  font-size: 15px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text3);
  position: relative;
  transition: color .2s;
}
.tab-btn:hover { color: var(--text2); }
.tab-btn.active {
  color: var(--accent);
  background: transparent;
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.5);
}
/* Soulignement actif qui rejoint la ligne de séparation */
.tab-btn.active::after {
  content: '';
  position: absolute; bottom: -1px; left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--accent), transparent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7);
}

/* ════════════════════════════════════════════════════════════════
   v1.2 — Affichage détaillé : grille 3 colonnes + textes plus gros
════════════════════════════════════════════════════════════════ */
.results-grid-detail {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}
.md-card { padding: 16px 18px; gap: 12px; }
.md-card .mc-thumb { width: 64px; height: 64px; }
.md-card .mc-thumb img { width: 52px; height: 52px; }
.md-name { font-size: 18px !important; }
.md-niv  { font-size: 13px !important; }
.dstat { padding: 3px 0; gap: 8px; }
.dstat img { width: 18px !important; height: 18px !important; }
.dstat-val   { font-size: 15px !important; min-width: 44px !important; }
.dstat-label { font-size: 15px !important; }

/* ════════════════════════════════════════════════════════════════
   v1.3 — Filtres agrandis, tri, cumuls détaillé
════════════════════════════════════════════════════════════════ */

/* Colonne de filtres : texte et logos plus gros */
.stat-filter-col { width: 320px; }
.sf-item { font-size: 15px; padding: 8px 11px; gap: 8px; }
.sf-item img { width: 18px !important; height: 18px !important; }
.sf-group { gap: 3px 10px; padding: 11px 0; }

/* Boutons de tri */
.sort-toggle { display: flex; align-items: center; gap: 5px; }
.sort-toggle .filter-label { font-size: 13px; }
.sort-btn {
  padding: 6px 13px; border-radius: 7px;
  border: 1px solid var(--border2); background: transparent;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .5px; color: var(--text3); cursor: pointer;
  transition: all .15s;
}
.sort-btn:hover { color: var(--text2); }
.sort-btn.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.2);
}

/* En-tête détaillé : image | infos | cumuls */
.md-head {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
  text-align: left !important;
}
.md-head-info { flex: 1; min-width: 0; }
.md-head-info .md-name { text-align: left !important; }
.md-head-info .md-niv { text-align: left !important; }
.md-cumuls {
  display: flex; flex-direction: column; gap: 3px;
  align-items: flex-end; flex-shrink: 0;
  font-size: 14px; color: rgba(255,255,255,0.8);
  white-space: nowrap;
}
.md-cumuls span { display: inline-flex; align-items: center; gap: 4px; }
.md-cumuls img { width: 16px; height: 16px; object-fit: contain; }
.md-cumuls b { font-family: 'JetBrains Mono', monospace; }

/* Couleurs PA/PM/PW officielles (depuis classe.js) */
.stat-hero-val.pa-val { color: #27b0eb !important; }
.stat-hero-val.pm-val { color: #a7ca4b !important; }
.stat-hero-val.pw-val { color: #29b997 !important; }

/* ════════════════════════════════════════════════════════════════
   v1.4 — Pills de tri en haut de la colonne de filtres
════════════════════════════════════════════════════════════════ */
.sort-pills {
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.sort-pills-label {
  display: block;
  font-size: 11px; color: var(--text3);
  text-transform: uppercase; letter-spacing: 2px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  margin-bottom: 8px;
}
.sort-pills-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sort-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 18px;
  border: 1px solid var(--border2); background: transparent;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .5px; color: var(--text3); cursor: pointer;
  transition: all .15s;
}
.sort-pill img { width: 17px; height: 17px; object-fit: contain; }
.sort-pill:hover { color: var(--text2); border-color: var(--text3); }
.sort-pill.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
}

/* ════════════════════════════════════════════════════════════════
   v1.5 — Pills accueil : débordement + couleurs par choix
════════════════════════════════════════════════════════════════ */
/* Empêche le débordement à droite */
.welcome-row {
  flex-wrap: wrap;
  gap: 20px 28px !important;
}
.welcome-pills { flex-wrap: wrap; }

/* Couleurs actives par type/coût */
.pill.pill-bleu.active {
  color: #4d9be6; border-color: rgba(77,155,230,.6);
  background: rgba(77,155,230,.12); box-shadow: 0 0 12px rgba(77,155,230,.3);
}
.pill.pill-rouge.active {
  color: #e05050; border-color: rgba(224,80,80,.6);
  background: rgba(224,80,80,.12); box-shadow: 0 0 12px rgba(224,80,80,.3);
}
.pill.pill-vert.active {
  color: #7ec84a; border-color: rgba(126,200,74,.6);
  background: rgba(126,200,74,.12); box-shadow: 0 0 12px rgba(126,200,74,.3);
}
.pill.pill-orange.active {
  color: #f0a030; border-color: rgba(240,160,48,.6);
  background: rgba(240,160,48,.12); box-shadow: 0 0 12px rgba(240,160,48,.3);
}

/* ════════════════════════════════════════════════════════════════
   v1.6 — MODE COMPARATIF
════════════════════════════════════════════════════════════════ */
.compare-toggle {
  padding: 7px 16px; border-radius: 8px;
  border: 1px solid var(--border2); background: transparent;
  font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .5px; color: var(--text3); cursor: pointer;
  transition: all .15s;
}
.compare-toggle:hover { color: var(--text2); }
.compare-toggle.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .6);
  background: rgba(var(--accent-rgb), .12);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .25);
}

/* Panneau comparatif (caché par défaut) */
.compare-panel {
  display: none;
  width: 300px; flex-shrink: 0;
  overflow-y: auto;
  padding-right: 14px;
  border-right: 1px solid var(--border);
  flex-direction: column;
  gap: 8px;
}
.compare-panel.open { display: flex; }

/* Carte comparatif */
.cmp-card {
  border-radius: 10px;
  padding: 11px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.cmp-empty {
  border: 1.5px dashed rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.02);
  align-items: center; justify-content: center;
  min-height: 90px; text-align: center;
}
.cmp-empty-label { font-size: 16px; font-weight: 700; color: var(--text3); font-family: 'Rajdhani', sans-serif; letter-spacing: 1px; }
.cmp-empty-sub { font-size: 11px; color: var(--text3); opacity: .7; }
.cmp-head { display: flex; align-items: center; gap: 10px; }
.cmp-head .mc-thumb { width: 44px; height: 44px; }
.cmp-head .mc-thumb img { width: 36px; height: 36px; }
.cmp-head-info { flex: 1; min-width: 0; }
.cmp-name {
  font-size: 14px; font-weight: 700; font-family: 'Rajdhani', sans-serif;
  display: flex; align-items: center; gap: 5px;
}
.cmp-name img { width: 16px; height: 16px; object-fit: contain; }
.cmp-niv { font-size: 10px; color: rgba(255,255,255,.6); letter-spacing: 1px; }
.cmp-stats { display: flex; flex-direction: column; }
.cmp-stat {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cmp-stat img, .cmp-stat .ic-ph { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
.cmp-stat-val { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; min-width: 38px; }
.cmp-stat-lbl { font-size: 12px; color: rgba(255,255,255,.85); }
.cmp-validate {
  margin-top: 4px; padding: 6px; border-radius: 7px;
  border: 1.5px solid; font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
  transition: filter .15s;
}
.cmp-validate:hover { filter: brightness(1.3); }
.cmp-arrow { text-align: center; font-size: 20px; color: var(--accent); line-height: 1; }

/* Récap des écarts */
.cmp-recap {
  margin-top: 6px; padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--border);
}
.cmp-recap-title {
  font-size: 11px; color: var(--text3); text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 6px; font-weight: 700;
}
.cmp-diff-row {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 0; font-size: 13px; font-family: 'Rajdhani', sans-serif;
}
.cmp-diff-row img { width: 15px; height: 15px; object-fit: contain; }
.cmp-diff-row > span { flex: 1; color: var(--text2); }
.cmp-diff-row .d-pos { color: #7ec84a; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.cmp-diff-row .d-neg { color: #e05050; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.cmp-diff-row .d-zero { color: var(--text3); font-family: 'JetBrains Mono', monospace; }
.cmp-diff-weight { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }

/* ── Mode comparatif : on garde 8 colonnes (la card ne rétrécit pas) ── */
.item-modal-box.compare-on .results-grid-compact { grid-template-columns: repeat(8, 1fr) !important; }

/* Raretés compactes en mode comparatif : couleur + image seule */
.item-modal-box.compare-on .rarity-btn {
  font-size: 0; padding: 6px 8px; gap: 0;
}
.item-modal-box.compare-on .rarity-btn img { width: 20px; height: 20px; }

/* ════════════════════════════════════════════════════════════════
   v1.7 — Sélecteur de résistance aléatoire par item
════════════════════════════════════════════════════════════════ */
/* Le slot doit laisser déborder le picker */
.slot-item { overflow: visible; }
/* Mais l'image et le vignettage restent clippés */
.slot-item > .item-img,
.slot-item::after { border-radius: 10px; }
.slot-item { position: relative; }

.slot-res-picker {
  position: absolute;
  display: flex; gap: 3px;
  padding: 3px;
  background: rgba(10,11,14,0.95);
  border: 1px solid var(--border2);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  z-index: 30;
}
.slot-res-picker.rp-right { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.slot-res-picker.rp-left  { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.slot-res-picker.rp-below { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.slot-res-picker.rp-above { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.slot-res-picker.rp-below, .slot-res-picker.rp-above { flex-direction: row; }
.slot-res-picker.rp-right, .slot-res-picker.rp-left { flex-direction: column; }

.rp-ico {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.03);
  cursor: grab;
  transition: border-color .15s, opacity .15s, transform .15s;
  position: relative;
}
.rp-ico:active { cursor: grabbing; }
.rp-ico:hover { border-color: var(--accent); transform: scale(1.08); }
.rp-ico.dragging { opacity: 0.4; }
.rp-ico img { width: 16px; height: 16px; object-fit: contain; }
/* Élément non choisi : grisé */
.rp-ico.rp-off { opacity: 0.3; filter: grayscale(1); }
.rp-ico.rp-off img { filter: grayscale(1) brightness(0.7); }
/* Tooltip réutilise le data-tip global */
.rp-ico[data-tip]:hover::after {
  z-index: 100;
}

/* ════════════════════════════════════════════════════════════════
   v1.8 — Pills de type d'objet + croix reset comparatif
════════════════════════════════════════════════════════════════ */
.results-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 2px 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.results-topbar .results-count {
  padding: 0; border: none; flex-shrink: 0;
}
.type-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.type-pill {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.03);
  cursor: pointer; transition: all .15s;
  position: relative;
}
.type-pill img { width: 21px; height: 21px; object-fit: contain; opacity: 0.55; }
.type-pill:hover { border-color: var(--text3); }
.type-pill:hover img { opacity: 0.8; }
.type-pill.active {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.2);
}
.type-pill.active img { opacity: 1; }
.type-pill[data-tip]:hover::after {
  bottom: auto; top: calc(100% + 5px);
}

/* Croix de reset sur les cartes comparatif */
.cmp-card { position: relative; }
.cmp-clear {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(15,5,5,0.85);
  border: 1px solid #e05050; color: #e05050;
  font-size: 12px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 5; transition: all .15s;
}
.cmp-clear:hover { background: #e05050; color: #fff; }

/* ════════════════════════════════════════════════════════════════
   v1.9 — Le picker de l'arme (en haut) ne doit pas être cropé
════════════════════════════════════════════════════════════════ */
/* La card centrale laisse déborder les pickers de slots */
.panel-center { overflow: visible !important; }
.builder-zone { overflow: visible; }
/* La rangée du bas garde de la marge pour le picker au-dessus de l'arme */
.row-bottom { margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════
   v2.0 — Sélecteur 1 main / 2 mains + badges
════════════════════════════════════════════════════════════════ */
.weapon-hands { display: flex; gap: 4px; }
.wh-btn {
  padding: 5px 12px; border-radius: 7px;
  border: 1px solid var(--border2); background: transparent;
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .5px; color: var(--text3); cursor: pointer;
  transition: all .15s;
}
.wh-btn:hover { color: var(--text2); }
.wh-btn.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .6);
  background: rgba(var(--accent-rgb), .12);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), .2);
}

/* Badge mains sur la vignette compacte */
.mc-hands {
  position: absolute; top: 3px; left: 3px;
  font-size: 10px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 1px 4px; border-radius: 4px;
  line-height: 1.3; z-index: 2; pointer-events: none;
  border: 1px solid;
}
.mc-hands-1 { color: #88c2de; border-color: #88c2de; background: rgba(136,194,222,.2); }
.mc-hands-2 { color: #f0a030; border-color: #f0a030; background: rgba(240,160,48,.2); }

/* Toggle comparatif désactivé (plusieurs types sélectionnés) */
.compare-toggle.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: auto;
}
.compare-toggle.disabled:hover { color: var(--text3); }

/* ════════════════════════════════════════════════════════════════
   v2.1 — Comparatif d'armes : grille splittée + configs
════════════════════════════════════════════════════════════════ */
/* Grille splittée armes | secondes mains */
.results-list.arme-split {
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: 20px;
  overflow: hidden !important;
  height: 100%; min-height: 0;
}
.arme-divider {
  background: linear-gradient(180deg, transparent, var(--border2) 15%, var(--border2) 85%, transparent);
  width: 1px; height: 100%;
}
.arme-col {
  display: flex; flex-direction: column; min-width: 0;
  min-height: 0; height: 100%;   /* permet au grid interne de scroller */
}
.arme-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2px 10px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text2);
  flex-shrink: 0;
  height: 50px; box-sizing: border-box;   /* même hauteur des deux côtés */
}
.arme-hands-sel { display: flex; gap: 3px; }
.ah-btn {
  padding: 4px 11px; border-radius: 6px;
  border: 1px solid var(--border2); background: transparent;
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700;
  color: var(--text3); cursor: pointer; transition: all .15s;
}
.ah-btn:hover { color: var(--text2); }
.ah-btn.active {
  color: var(--accent); border-color: rgba(var(--accent-rgb),.6);
  background: rgba(var(--accent-rgb),.12);
}
.arme-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  overflow-y: auto; align-content: start;
  flex: 1; min-height: 0;
  padding-right: 4px;
}
.arme-col-head { flex-shrink: 0; }
/* Items de la grille splittée alignés sur la taille standard */
.arme-grid .mc-thumb { width: 72px; height: 72px; }
.arme-grid .mc-thumb img { width: 60px; height: 60px; }
.arme-grid .mc-name { font-size: 12px; }
/* Items plus gros dans la grille splittée */

/* Sélecteur de cible (Item 1 / Item 2) */
.cmp-target-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.cmp-target-label { font-size: 12px; color: var(--text3); font-family: 'Rajdhani', sans-serif; }
.cmp-target-btn {
  flex: 1; padding: 6px; border-radius: 7px;
  border: 1px solid var(--border2); background: transparent;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--text3); cursor: pointer; transition: all .15s;
}
.cmp-target-btn.active {
  color: var(--accent); border-color: rgba(var(--accent-rgb),.6);
  background: rgba(var(--accent-rgb),.12); box-shadow: 0 0 10px rgba(var(--accent-rgb),.2);
}

/* Carte de config d'arme */
.cmp-cfg {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 7px;
}
.cmp-cfg-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--text2);
  font-family: 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 1px;
}
.cmp-cfg-tot { display: inline-flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', monospace; color: var(--text-white); }
.cmp-cfg-tot img { width: 15px; height: 15px; }
.cfg-sub {
  display: flex; align-items: center; gap: 8px;
  padding: 6px; border-radius: 8px;
  border: 1px solid var(--border2); background: rgba(0,0,0,.25);
  position: relative;
}
.cfg-sub .mc-thumb { width: 36px; height: 36px; }
.cfg-sub .mc-thumb img { width: 30px; height: 30px; }
.cfg-sub-info { flex: 1; min-width: 0; }
.cfg-sub-name { font-size: 13px; font-weight: 600; font-family: 'Rajdhani', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-sub-meta { font-size: 10px; color: var(--text3); }
.cfg-empty {
  justify-content: center; min-height: 44px;
  border-style: dashed; color: var(--text3);
}
.cfg-sub-label { font-size: 11px; color: var(--text3); font-style: italic; }
.cfg-disabled { opacity: 0.4; }
.cfg-clear {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(15,5,5,.85); border: 1px solid #e05050; color: #e05050;
  font-size: 11px; line-height: 1; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.cfg-clear:hover { background: #e05050; color: #fff; }
.cfg-validate {
  margin-top: 2px; padding: 7px; border-radius: 7px;
  background: var(--accent); border: 1px solid var(--accent);
  color: #111; font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: filter .15s;
}
.cfg-validate:hover { filter: brightness(1.3); }

/* Grille détaillée dans le comparatif d'armes : 2 colonnes par côté */
.arme-grid-detail {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

/* ════════════════════════════════════════════════════════════════
   v2.2 — Checkbox comparateur + curseur de rareté + pills spéciales
════════════════════════════════════════════════════════════════ */
/* Checkbox Comparateur */
.compare-check {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; user-select: none;
  font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .5px; color: var(--text2);
}
.compare-check input { display: none; }
.compare-check .cc-box {
  width: 20px; height: 20px; border-radius: 5px;
  border: 2px solid var(--border2); background: rgba(255,255,255,.03);
  position: relative; transition: all .15s; flex-shrink: 0;
}
.compare-check input:checked + .cc-box {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.4);
}
.compare-check input:checked + .cc-box::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #0a0b0e; font-size: 14px; font-weight: 900;
}
.compare-check.disabled { opacity: .35; cursor: not-allowed; }

/* Curseur de rareté (4 gemmes dans une grande pill) */
.rarity-slider {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 7px 18px;
  border-radius: 22px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,.03);
}
.rarity-slider-track {
  position: absolute; left: 26px; right: 26px; top: 50%;
  height: 3px; transform: translateY(-50%);
  background: var(--border2); border-radius: 2px; z-index: 0;
  overflow: hidden;
}
.rarity-slider-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #b3b3b2, #7ec84a, #e2be92, #b0c345);
  background-size: calc(100% * 3) 100%;   /* dégradé qui suit les 4 raretés */
  background-position: left center;
  transition: width .2s;
}
.rs-gem {
  position: relative; z-index: 1;
  width: 28px; height: 28px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, filter .15s;
  border-radius: 50%;
}
.rs-gem img { width: 23px; height: 23px; object-fit: contain; }
/* Non atteint = grisé */
.rs-gem:not(.reached) { filter: grayscale(1) brightness(.5); opacity: .5; }
.rs-gem.reached { filter: none; opacity: 1; }
/* Gemme sélectionnée = halo lumineux (plus de rond) */
.rs-gem.selected {
  transform: scale(1.15);
  box-shadow: 0 0 12px 3px rgba(var(--accent-rgb),.55);
  background: radial-gradient(circle, rgba(var(--accent-rgb),.25), transparent 70%);
}
.rs-gem[data-tip]:hover::after {
  bottom: auto; top: calc(100% + 7px);
}

/* Pills de raretés spéciales (icônes seules, conteneur coloré par rareté) */
.special-rarities { display: flex; gap: 6px; }
.sr-pill {
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1.5px solid; cursor: pointer;
  transition: all .15s; position: relative;
}
.sr-pill img { width: 22px; height: 22px; object-fit: contain; transition: filter .15s; }
/* Couleur du conteneur selon la rareté */
.sr-pill[data-rarity="souvenir"] { border-color: rgba(136,194,222,.5); background: rgba(136,194,222,.08); }
.sr-pill[data-rarity="relique"]  { border-color: rgba(177,148,210,.5); background: rgba(177,148,210,.08); }
.sr-pill[data-rarity="epique"]   { border-color: rgba(195,124,167,.5); background: rgba(195,124,167,.08); }
/* Inactive = grisé */
.sr-pill:not(.active) { border-color: var(--border2) !important; background: rgba(255,255,255,.02) !important; }
.sr-pill:not(.active) img { filter: grayscale(1) brightness(.6); }
/* Active = halo de la couleur */
.sr-pill.active[data-rarity="souvenir"] { box-shadow: 0 0 10px rgba(136,194,222,.4); }
.sr-pill.active[data-rarity="relique"]  { box-shadow: 0 0 10px rgba(177,148,210,.4); }
.sr-pill.active[data-rarity="epique"]   { box-shadow: 0 0 10px rgba(195,124,167,.4); }
.sr-pill[data-tip]:hover::after { bottom: auto; top: calc(100% + 7px); }

/* ════════════════════════════════════════════════════════════════
   v2.3 — Sections de filtres : Maîtrises affichées / Filtre par stat
════════════════════════════════════════════════════════════════ */
.sf-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--accent);
  font-family: 'Rajdhani', sans-serif;
  margin: 4px 0 8px;
}
.sf-section-sep {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Checkbox "Aucune maît. secondaire" */
.sf-checkbox {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; user-select: none; margin-bottom: 8px;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; color: var(--text2);
}
.sf-checkbox input { display: none; }
.sf-cb-box {
  width: 17px; height: 17px; border-radius: 4px;
  border: 2px solid var(--border2); background: rgba(255,255,255,.03);
  position: relative; flex-shrink: 0; transition: all .15s;
}
.sf-checkbox input:checked + .sf-cb-box {
  background: var(--accent); border-color: var(--accent);
}
.sf-checkbox input:checked + .sf-cb-box::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #0a0b0e; font-size: 12px; font-weight: 900;
}

/* Maîtrise exclue (décochée) = grisée */
.sf-mast:not(.active) { opacity: .4; }
.sf-mast:not(.active) img { filter: grayscale(1); }

/* Sélecteur nombre d'éléments */
.sf-elemcount { margin-top: 10px; }
.sf-elemcount-label {
  display: block; font-size: 11px; color: var(--text3);
  font-family: 'Rajdhani', sans-serif; letter-spacing: .5px; margin-bottom: 5px;
}
.sf-elemcount-btns { display: flex; gap: 5px; }
.ec-btn {
  width: 32px; height: 30px; border-radius: 6px;
  border: 1px solid var(--border2); background: transparent;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
  color: var(--text3); cursor: pointer; transition: all .15s;
}
.ec-btn:hover { color: var(--text2); }
.ec-btn.active {
  color: var(--accent); border-color: rgba(var(--accent-rgb),.6);
  background: rgba(var(--accent-rgb),.12); box-shadow: 0 0 8px rgba(var(--accent-rgb),.2);
}

/* ════════════════════════════════════════════════════════════════
   v2.4 — Compactage colonne de tri/filtres
════════════════════════════════════════════════════════════════ */
/* Remonter le bloc : réduire le padding haut */
.stat-filter-col { padding-top: 0 !important; }
.sort-pills { padding-bottom: 8px !important; margin-bottom: 8px !important; }
.sort-pills-label { margin-bottom: 6px !important; }

/* Supprimer les séparateurs entre groupes de stats + padding réduit */
.sf-group {
  border-bottom: none !important;
  padding: 4px 0 !important;
  gap: 1px 8px !important;
}
.sf-item { padding: 5px 8px !important; }

/* Sous-titres centrés */
.sf-section-title { text-align: center; margin: 6px 0 6px !important; }
/* Seul séparateur conservé : avant "Filtre par statistique" */
.sf-section-sep { margin-top: 12px !important; padding-top: 10px !important; }

/* "Aucune maît. secondaire" + nombre d'éléments sur la même ligne */
.sf-mast-top-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.sf-mast-top-row .sf-checkbox { margin-bottom: 0; }
.sf-mast-top-row .sf-elemcount { margin-top: 0; }
.sf-elemcount-btns { gap: 4px; }
.ec-btn { width: 26px; height: 26px; font-size: 12px; }

/* ════════════════════════════════════════════════════════════════
   v2.5 — Drag & drop comparateur
════════════════════════════════════════════════════════════════ */
.mc-card.dragging, .md-card.dragging { opacity: .4; }
.compare-panel [draggable="true"] { cursor: grab; }
.compare-panel [draggable="true"]:active { cursor: grabbing; }
.cmp-drop-hover {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 16px rgba(var(--accent-rgb),.35) !important;
}

/* Ligne Maît. Élém. + sélecteur nb éléments */
.sf-mast-elem-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.sf-mast-elem-row .sf-item { flex: 1; }
.sf-mast-elem-row .sf-elemcount { margin-top: 0; flex-shrink: 0; }

/* Titres de card centrés */
.panel-title-center { text-align: center; }

/* ════════════════════════════════════════════════════════════════
   v2.6 — Stats en pills
════════════════════════════════════════════════════════════════ */
.stats-2col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 7px 10px;
}
.stat-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,.03);
}
.stat-pill .stat-name { font-size: 13px; color: var(--text2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-pill .stat-val {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px;
  text-align: right; flex-shrink: 0;
}
.stat-pill .stat-val.pos { color: var(--text-white); }
.stat-pill .stat-val.zero { color: var(--text3); }
.stat-pill .stat-val.neg { color: #e05050; }
.stat-pill img { width: 18px !important; height: 18px !important; }

/* Pills de maîtrise désactivables */
.stat-pill-mast { cursor: pointer; transition: all .15s; }
.stat-pill-mast.active {
  border-color: rgba(var(--accent-rgb),.55);
  background: rgba(var(--accent-rgb),.1);
}
.stat-pill-mast:not(.active) { opacity: .4; }
.stat-pill-mast:not(.active) img { filter: grayscale(1); }
.stat-pill-mast:hover { border-color: var(--accent); }

/* ════════════════════════════════════════════════════════════════
   v2.7 — Lisibilité : stats items, enchantements, badges épique/relique
════════════════════════════════════════════════════════════════ */
/* Texte des stats dans le tooltip et le détaillé : plus gros et blanc */
.dstat-label { color: #f1f5f9 !important; font-size: 13.5px !important; }
.dstat-val { font-size: 13.5px !important; }
.cmp-stat-lbl { color: #f1f5f9 !important; font-size: 13px !important; }
.cmp-stat-val { font-size: 13px !important; }

/* Noms d'enchantement (panneau droit) en blanc */
.enchant-item-name { color: #f1f5f9 !important; font-size: 14px !important; }

/* Badges Épique / Relique plus hauts, texte plus gros et épais */
.subli-special-badge {
  padding: 8px 12px !important;
}
.subli-special-badge .badge-label {
  font-size: 12px !important; opacity: .85 !important; font-weight: 700 !important;
}
.subli-special-badge .badge-val { font-size: 18px !important; font-weight: 800 !important; flex-shrink: 0; }
.subli-special-badge .rcp-badge-icowrap { flex-shrink: 0; }
.subli-special-badge.epique  { color: #e0a8cf !important; }
.subli-special-badge.relique { color: #cdb6e8 !important; }
.subli-special-badge.epique.filled  { border-color: rgba(195,124,167,.6) !important; box-shadow: 0 0 10px rgba(195,124,167,.3); }
.subli-special-badge.relique.filled { border-color: rgba(177,148,210,.6) !important; box-shadow: 0 0 10px rgba(177,148,210,.3); }

/* Séparateur de priorité entre les icônes d'ordre */
.ord-sep {
  color: var(--text3); font-size: 16px; font-weight: 700;
  margin: 0 1px; user-select: none; align-self: center;
}

/* ═══════════════════════════════════════════════════════════════
   ONGLET ENCHANTEMENT
   ═══════════════════════════════════════════════════════════════ */
.ench-main {
  gap: 28px;
  padding: 16px 32px 24px;
  align-items: stretch;
}
.ench-section-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 19px; letter-spacing: 1px;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.4);
  text-align: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}

/* ── ZONE GAUCHE ── */
.ench-left {
  width: 1080px; flex-shrink: 0;
  display: flex; flex-direction: column;
  height: calc(1080px - 52px - 72px);
}
.ench-left-body {
  flex: 1; display: flex; gap: 24px; min-height: 0;
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 22px;
}
.ench-objets {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  gap: 12px;
}
.ench-equipped-specials {
  margin-top: 16px;
  width: 100%; min-width: 0;
  flex: 0 0 auto;
}
.ench-eq-row {
  display: flex; align-items: stretch; gap: 12px;
  flex: 1; min-width: 0;
}
.ench-eq-special {
  width: 180px; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.ench-eq-desc {
  flex: 1; min-width: 0;
  min-height: 70px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--sp-c, var(--border2)) 40%, var(--border2));
  background: rgba(255,255,255,0.02);
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.ench-eq-special.epique  { background: linear-gradient(160deg, rgba(195,124,167,.12), var(--bg-card) 60%); }
.ench-eq-special.relique { background: linear-gradient(160deg, rgba(177,148,210,.14), var(--bg-card) 60%); }
.ench-eq-special.filled { border-color: var(--sp-c); box-shadow: 0 0 10px color-mix(in srgb, var(--sp-c) 35%, transparent); }
.ench-eq-special.ench-drop-hover { box-shadow: 0 0 0 2px var(--sp-c, var(--accent)) inset; }
.ench-eq-special-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px;
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
}
.ench-eq-special-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; }
.ench-eq-special-name {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--text-white);
}
.ench-eq-special-empty {
  font-family: 'Rajdhani', sans-serif; font-size: 14px; color: var(--text3);
}
/* Card descriptive à droite */
.ench-eq-desc-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px;
  color: var(--sp-c, var(--text-white));
}
.ench-eq-desc-text {
  font-family: 'Rajdhani', sans-serif; font-size: 16px; line-height: 1.3;
  color: var(--text);
}
.ench-eq-desc-empty {
  font-family: 'Rajdhani', sans-serif; font-size: 14px; color: var(--text3);
  font-style: italic;
  align-items: center; justify-content: center;
}
.ench-eq-special {
  display: flex; align-items: center; gap: 12px;
}
.ench-eq-special-icon {
  width: 56px; height: 56px;
  border-radius: 10px;
  border: 2px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
}

/* ── Grandes cartes épique / relique (bas de l'onglet enchantement) ── */
.ench-spec-big-row {
  display: flex; gap: 20px;
  flex: 0 0 auto;
  width: 100%; min-width: 0;
  height: 200px;
}
.ench-spec-big-card {
  flex: 1 1 0; min-width: 0; max-width: calc(50% - 10px);
  height: 100%;
  display: flex; flex-direction: column; gap: 0;
  border-radius: 16px;
  padding: 16px 20px;
  cursor: pointer;
  transition: box-shadow .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}
/* Épique */
.ench-spec-big-card.epique {
  --sp-glow: rgba(195,124,167,1);
  --sp-glow2: rgba(195,124,167,.55);
  --sp-bg: rgba(195,124,167,.09);
  border: 2px solid rgba(195,124,167,.65);
  background: linear-gradient(160deg, rgba(195,124,167,.13) 0%, rgba(10,10,20,.95) 60%);
  box-shadow: 0 0 20px rgba(195,124,167,.25), inset 0 0 30px rgba(195,124,167,.06);
}
.ench-spec-big-card.epique:hover,
.ench-spec-big-card.epique.filled {
  box-shadow: 0 0 32px rgba(195,124,167,.45), inset 0 0 24px rgba(195,124,167,.10);
  border-color: rgba(195,124,167,.9);
}
/* Relique */
.ench-spec-big-card.relique {
  --sp-glow: rgba(177,148,210,1);
  --sp-glow2: rgba(177,148,210,.55);
  --sp-bg: rgba(177,148,210,.09);
  border: 2px solid rgba(177,148,210,.65);
  background: linear-gradient(160deg, rgba(177,148,210,.13) 0%, rgba(10,10,20,.95) 60%);
  box-shadow: 0 0 20px rgba(177,148,210,.25), inset 0 0 30px rgba(177,148,210,.06);
}
.ench-spec-big-card.relique:hover,
.ench-spec-big-card.relique.filled {
  box-shadow: 0 0 32px rgba(177,148,210,.45), inset 0 0 24px rgba(177,148,210,.10);
  border-color: rgba(177,148,210,.9);
}
/* Drop highlight */
.ench-spec-big-card.ench-drop-hover {
  box-shadow: 0 0 0 3px var(--sp-glow2, var(--accent)) inset, 0 0 24px var(--sp-glow2, var(--accent)) !important;
}
/* En-tête : icône + nom */
.ench-spec-big-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
  min-width: 0;
}
.ench-spec-big-head > div { min-width: 0; }
.ench-spec-big-icon {
  width: 54px; height: 54px; flex-shrink: 0;
  border-radius: 10px;
  border: 2px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35);
  overflow: hidden;
}
.ench-spec-big-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.ench-spec-big-name {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 18px;
  color: var(--text-white); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ench-spec-big-type {
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; opacity: .65;
}
.ench-spec-big-card.epique  .ench-spec-big-type { color: #e0a8cf; }
.ench-spec-big-card.relique .ench-spec-big-type { color: #cdb6e8; }
/* Zone texte description */
.ench-spec-big-desc {
  flex: 1; min-height: 0;
  overflow-y: auto;
  font-family: 'Rajdhani', sans-serif; font-size: 15px; line-height: 1.45;
  color: var(--text);
  overflow-wrap: break-word; word-break: break-word;
}
.ench-spec-big-desc.empty {
  color: var(--text3); font-style: italic; font-size: 13px;
  display: flex; align-items: center;
}
/* Badge "Aucune X" (état vide) */
.ench-spec-big-badge {
  position: absolute; bottom: 12px; right: 14px;
  font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px;
  opacity: .35;
}
.ench-spec-big-card.epique  .ench-spec-big-badge { color: #e0a8cf; }
.ench-spec-big-card.relique .ench-spec-big-badge { color: #cdb6e8; }

.ench-eq-special-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.ench-eq-special.epique  .ench-eq-special-icon { border-color: #c37ca7; background: rgba(195,124,167,.12); }
.ench-eq-special.relique .ench-eq-special-icon { border-color: #b194d2; background: rgba(177,148,210,.12); }
.ench-eq-special-name {
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 17px;
  white-space: nowrap;
}
.ench-eq-special.epique  .ench-eq-special-name { color: #d99cc4; }
.ench-eq-special.relique .ench-eq-special-name { color: #c4afe6; }
.ench-eq-special-empty {
  color: var(--text3); font-style: italic; font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
}
.ench-stats-col {
  width: 380px; flex-shrink: 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
.ench-chasse-level {
  height: 40px; flex-shrink: 0;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
}
.ench-stats-list {
  flex: 0 0 auto;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  overflow: hidden;
}

/* ── ZONE DROITE ── */
.ench-right {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  height: calc(1080px - 52px - 72px);
}
/* Bascule Sublimations / Récap */
.ench-right-top {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  margin-bottom: 12px;
}
.ench-right-switch {
  display: flex; gap: 6px; margin-bottom: 14px; flex-shrink: 0;
  position: relative; z-index: 1;
}
.ench-sw-btn {
  flex: 1; padding: 10px 14px;
  font-family: 'Rajdhani', sans-serif; font-size: 14px; letter-spacing: 1px;
  color: var(--text3);
  background: var(--bg-card); border: 1px solid var(--border2);
  border-radius: 9px; cursor: pointer;
  transition: all .15s;
}
.ench-sw-btn:hover { color: var(--text); border-color: var(--border); }
.ench-sw-btn.active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .5);
  background: rgba(var(--accent-rgb), .08);
  text-shadow: 0 0 14px rgba(var(--accent-rgb), .4);
}
/* Vues : occupent la hauteur restante */
.ench-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Récap : le perso déborde vers le haut (sur le switch) sans compter dans la hauteur */
#enchViewRecap { overflow: visible; gap: 14px; flex: 0 0 auto; }
#enchViewRecap .carac-summary-card { overflow: visible; }
#enchViewRecap .carac-summary-perso {
  top: -64px;            /* remonte au-dessus de la card, par-dessus le switch */
  height: 210px;
  z-index: 30;
}
.ench-card {
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ench-card-subli { flex: 1; min-height: 0; }
.ench-right-bottom {
  height: 440px; flex-shrink: 0;
  display: flex; gap: 20px;
}
.ench-special-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.ench-title-epique  { color: #c37ca7; text-shadow: 0 0 16px rgba(195,124,167,.4); font-size: 16px; }
.ench-title-relique { color: #b194d2; text-shadow: 0 0 16px rgba(177,148,210,.4); font-size: 16px; }
.ench-card-epique  { flex: 1; min-height: 0; background: linear-gradient(160deg, rgba(195,124,167,.08), var(--bg-card) 60%); }
.ench-card-relique { flex: 1; min-height: 0; background: linear-gradient(160deg, rgba(177,148,210,.08), var(--bg-card) 60%); }

.ench-card-search {
  padding: 13px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
/* Barre recherche + filtre rareté sur une ligne */
.ench-card-search-row {
  display: flex; align-items: center; gap: 12px;
}
.ench-card-search-row .ench-search-input { flex: 1; min-width: 0; }
/* Curseur de rareté à gemmes (barre reliante, comme la recherche d'équipement) */
.ench-rarity-slider {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,.03);
  flex-shrink: 0;
}
.ench-rf-track {
  position: absolute; left: 22px; right: 22px; top: 50%;
  height: 3px; transform: translateY(-50%);
  background: var(--border2); border-radius: 2px; z-index: 0; overflow: hidden;
}
.ench-rf-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #7ec84a, #e2be92, #b0c345);
  background-size: 200% 100%; background-position: left center;
  transition: width .2s;
}
.ench-rf-gem {
  position: relative; z-index: 1;
  width: 28px; height: 28px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: transform .15s, filter .15s;
}
.ench-rf-gem img { width: 22px; height: 22px; object-fit: contain; }
.ench-rf-gem:not(.reached) { filter: grayscale(1) brightness(.5); opacity: .5; }
.ench-rf-gem.reached { filter: none; opacity: 1; }
.ench-rf-gem.selected {
  transform: scale(1.15);
  box-shadow: 0 0 12px 3px rgba(var(--accent-rgb),.55);
  background: radial-gradient(circle, rgba(var(--accent-rgb),.25), transparent 70%);
}
.ench-rf-gem[data-tip]:hover::after { bottom: auto; top: calc(100% + 6px); }
.ench-search-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border2);
  border-radius: 7px;
  padding: 9px 14px;
  color: var(--text-white);
  font-family: 'Rajdhani', sans-serif; font-size: 14px;
}
.ench-search-input::placeholder { color: var(--text3); }
.ench-search-input:focus { border-color: var(--accent); outline: none; }
.ench-card-grid {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: grid; gap: 12px;
  align-content: start;
}
.ench-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ench-grid-1 { grid-template-columns: minmax(0, 1fr); }

/* ── Objets (lignes gauche) ── */
.ench-objet-row {
  display: flex; align-items: center; gap: 10px;
  height: 52px; flex: 0 0 auto;
}
.ench-objet-pill {
  width: 165px; flex-shrink: 0;
  height: 56px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  border-radius: 12px;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--rar) 70%, #101119) 0%,
    color-mix(in srgb, var(--rar) 30%, #101119) 38%,
    #0c0d12 72%,
    #20212c 100%);
  border: 1px solid var(--border2);
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.ench-objet-pill:hover {
  border-color: var(--rar, var(--border2));
  box-shadow: 0 0 10px rgba(255,255,255,.05);
}
.ench-objet-active .ench-objet-pill {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.4);
}
.ench-objet-name {
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
  font-size: 16px; color: var(--text-white);
  white-space: nowrap;
  flex: 1;
}
.ench-chasses { display: flex; gap: 6px; flex-shrink: 0; }
.ench-chasse {
  width: 40px; height: 40px;
  border: none; background: none;
}
.ench-chasse-empty {
  background: none;
  border: none;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.ench-chasse-bg-empty {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1) brightness(0.55);
  opacity: 0.7;
  transition: filter .12s, opacity .12s;
}
.ench-chasse-empty:hover .ench-chasse-bg-empty { filter: grayscale(0.35) brightness(0.9); opacity: 0.95; }
.ench-objet-subli {
  flex: 1; min-width: 200px; height: 48px;
  display: flex; align-items: center;
  border-radius: 8px;
  transition: box-shadow .15s, background .15s;
}
/* Emplacement vide */
.ench-subli-empty {
  width: 100%; height: 100%;
  border: 1px dashed var(--border2);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ench-subli-empty:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.06); }
/* Objet compatible (subli active applicable) */
.ench-objet-subli.ench-compatible .ench-subli-empty {
  border-color: var(--accent); border-style: solid;
  background: rgba(var(--accent-rgb),0.12);
  box-shadow: 0 0 8px rgba(var(--accent-rgb),0.4);
}
.ench-objet-subli.ench-drop-hover { box-shadow: 0 0 0 2px var(--accent) inset; }
.ench-objet-subli.ench-drop-invalid { animation: enchShake .4s; }
@keyframes enchShake {
  0%,100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 2px #e05050 inset; background: rgba(224,80,80,0.15); }
}
/* Subli posée */
.ench-osub {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  width: 100%; height: 100%;
  padding: 0 12px;
  border-radius: 8px;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--subli-c, #888) 25%, var(--bg3)) 0%,
    var(--bg3) 70%);
  /* Liséré net de la couleur de rareté + léger halo */
  border: 1.5px solid var(--subli-c, var(--border2));
  box-shadow: 0 0 6px color-mix(in srgb, var(--subli-c, #888) 55%, transparent);
  cursor: pointer;
}
/* Gemme de rareté du niveau courant (avant la séquence) */
.ench-osub-nom {
  flex: 1; min-width: 0;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13.5px;
  color: #f0c040; line-height: 1.05;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Séquence de couleurs après le nom */
.ench-osub-seq { display: flex; gap: 2px; flex-shrink: 0; }
.ench-osub-seq-ico { width: 14px; height: 14px; object-fit: contain; }
/* Subli inactive : fond + bordure rouge, mais le HALO de rareté reste visible autour */
.ench-osub-inactive {
  background: linear-gradient(100deg, rgba(224,80,80,0.30) 0%, rgba(224,80,80,0.12) 70%);
  /* Liséré NET de la couleur de rareté sur le contour du cadre (bien visible) */
  border-color: var(--subli-c, var(--border2));
  /* halo de rareté (externe) + liséré rouge net (interne) signalant l'inactivité */
  box-shadow:
    0 0 8px color-mix(in srgb, var(--subli-c, #888) 70%, transparent),
    inset 0 0 0 1.5px rgba(224,80,80,0.6);
}
.ench-osub-logo { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.ench-osub-pills { display: flex; gap: 1px; flex-shrink: 0; }
.ench-osub-pill {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 10px;
  padding: 2px 7px; border-radius: 4px; border: 1px solid;
  cursor: pointer; transition: transform .1s;
}
.ench-osub-pill:hover { transform: scale(1.15); }
.ench-osub-remove {
  flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 4px;
  border: none; background: rgba(224,80,80,0.2); color: #e05050;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ench-osub-remove:hover { background: rgba(224,80,80,0.4); }
/* Ne pas forcer le logo de subli posée à 100% (sinon il écrase nom + pills) */
.ench-objet-subli .ench-subli-empty img { width: 100%; height: 100%; object-fit: contain; }

/* ── Sélecteur de stats ── */
.ench-stats-scroll { height: 100%; overflow-y: auto; }
.ench-stat-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--stat-c, #888) 22%, transparent) 0%,
    transparent 55%);
}
.ench-stat-color { width: 23px; height: 23px; object-fit: contain; flex-shrink: 0; }
.ench-stat-name {
  flex: 1;
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
  font-size: 16px; color: var(--text);
  white-space: nowrap;
}
.ench-stat-dbl { display: flex; gap: 4px; flex-shrink: 0; }
.ench-dbl-ico { width: 23px; height: 23px; object-fit: contain; opacity: .85; }

.ench-chasse-level-inner {
  height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani', sans-serif; font-size: 13px;
  color: var(--text3); text-transform: uppercase; letter-spacing: 1px;
}

/* ── Placeholders cards ── */
.ench-ph {
  grid-column: 1 / -1;
  text-align: center; color: var(--text3);
  font-size: 12px; padding: 20px;
}

.ench-objets-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── Châsses remplies ── */
.ench-chasse-filled img { object-fit: contain; }

/* ── Objet actif (pill cliquée) ── */
/* ── Stats noircies (non-doublées sur objet actif) ── */
.ench-stat-row { transition: opacity .25s; }
.ench-stat-dim { opacity: 0.22; }

/* ── Sélecteur niveau de châsse ── */
.ench-clevel {
  height: 100%; display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
}
.ench-clevel-label {
  font-family: 'Rajdhani', sans-serif; font-size: 12px;
  color: var(--text3); text-transform: uppercase; letter-spacing: 1px;
  white-space: nowrap;
}
.ench-clevel-track {
  flex: 1; position: relative;
  display: flex; align-items: center;
  height: 28px;
}
.ench-clevel-ticks {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  display: flex; justify-content: space-between;
  padding: 0 7px;
  pointer-events: none;
}
.ench-clevel-tick {
  width: 3px; height: 11px; border-radius: 2px;
  background: rgba(255,255,255,0.18);
  transition: background .15s, height .15s;
}
.ench-clevel-tick.on {
  background: var(--accent);
  height: 16px;
  box-shadow: 0 0 6px rgba(var(--accent-rgb),.6);
}
.ench-clevel-track input[type=range] {
  width: 100%; position: relative; z-index: 1;
  accent-color: var(--accent); cursor: grab;
  background: transparent;
}
.ench-clevel-track input[type=range]:active { cursor: grabbing; }
.ench-clevel-val {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  color: var(--accent2); min-width: 74px; text-align: right;
  cursor: help;
}
/* ════════════════════════════════════════════════════════════════
   ONGLET CARACTÉRISTIQUES — Aptitudes & Sorts
   À coller à la fin de builder.css
════════════════════════════════════════════════════════════════ */

/* ── Layout principal : 3 colonnes (Int/For/Agi | Chance/Majeur | Sorts) ── */
.carac-layout {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  padding: 14px 24px;
  box-sizing: border-box;
  overflow: visible;
  width: 100%;
  position: relative; z-index: 1;
}

.carac-col-left,
.carac-col-center {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 480px;
  flex-shrink: 0;
}

/* Toutes les cards d'une colonne suivent la largeur de la colonne */
.carac-col-left .apt-card,
.carac-col-center .apt-card {
  width: 100%;
}

/* Colonne droite : barre de stats en haut, card sorts en bas */
.carac-col-right {
  flex: 1;
  min-width: 280px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Card résumé : perso en haut à droite qui déborde */
.carac-summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 16px;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}
.carac-summary-stats { display: flex; flex-direction: column; gap: 12px; }

/* Bandeau Classe · Niveau — centré dans un cadre, place laissée au perso */
.cs-titlebar {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 16px;
  margin-right: 150px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border2);
  border-radius: 10px;
  text-align: center;
}
.cs-class-name {
  font-family: 'Rajdhani', sans-serif; font-size: 22px;
  color: rgba(var(--accent-rgb),1);
  text-shadow: 0 0 14px rgba(var(--accent-rgb),0.4);
  white-space: nowrap;
}
.cs-class-sub {
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: var(--text3);
}
/* Perso : dans le coin haut-droit de la card, déborde légèrement vers le haut */
.carac-summary-perso {
  position: absolute;
  top: -34px; right: 6px;
  width: 140px; height: 185px;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none; z-index: 20;
}
.carac-summary-perso img {
  max-height: 100%; max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.6));
}

/* Haut : card grise (majeurs | cumuls) + élémentaires */
.cs-top { display: flex; gap: 16px; align-items: stretch; }
.cs-majcard {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 14px 16px;
  flex-shrink: 0;
  display: flex;
  gap: 16px;
}
/* Colonne majeurs (gauche) */
.cs-maj-col { display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.cs-maj { display: flex; align-items: center; gap: 8px; position: relative; }
.cs-maj img { width: 24px; height: 24px; object-fit: contain; }
.cs-maj span { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; color: var(--text-white); min-width: 16px; }
.cs-maj-pv span { color: #e06b6b; }
.cs-maj .cs-input-maj {
  width: 40px; margin-left: auto;
  opacity: 0; transition: opacity .15s;
}
.cs-maj:hover .cs-input-maj,
.cs-maj .cs-input-maj:focus { opacity: 1; }
/* Colonne cumuls (droite) : boutons noirs, larges pour gros nombres */
.cs-cumul-col { display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.cs-cumul {
  display: flex; align-items: center; gap: 9px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 8px 14px;
  min-width: 110px;
}
.cs-cumul img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.cs-cumul span {
  font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700;
  color: var(--text-white); margin-left: auto; text-align: right;
}

/* Élémentaires : 2 lignes (maîtrises, résistances), compactes */
.cs-rightzone {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.cs-elem-block { display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; flex: 1; min-width: 0; }
.cs-elem-line {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px; padding: 0; min-width: 0;
}
.cs-elem {
  display: flex; align-items: center; gap: 6px;
  position: relative; min-width: 0;
  justify-content: flex-start;
  padding: 4px 6px;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: border-color .15s, box-shadow .15s;
}
.cs-elem img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.cs-elem:hover { z-index: 50; }
.cs-elem-v { font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700; }
.cs-elem-raw { font-family: 'JetBrains Mono', monospace; font-size: 12px; opacity: .55; margin-left: 1px; }

/* Grille de pills (Secondaire + Combat) */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

/* Champ d'édition manuelle dans les pills de la grille : superposé au survol (ne réserve pas de place) */
.cs-pill { position: relative; }
.cs-input {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 52px; height: 26px;
  background: #0a0a0f;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 2px 5px;
  color: var(--accent2);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
  text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s;
  z-index: 6;
}
.cs-pill:hover .cs-input,
.cs-input:focus { opacity: 1; visibility: visible; pointer-events: auto; }
.cs-input:focus { outline: none; border-color: var(--accent2); }
.cs-input::placeholder { color: var(--text3); }

/* Bonus conditionnel (ex. influence du Wakfu) en bleu */
.cs-cond {
  position: absolute;
  right: 58px; top: 50%; transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  color: #4aa3ff;
  white-space: nowrap; pointer-events: none;
}
/* Cond des maîtrises ÉLÉMENTAIRES : poussé à droite dans l'espace vide, sans chevaucher la valeur */
.cs-elem .cs-cond {
  position: static; transform: none;
  right: auto; top: auto;
  margin-left: auto; padding-left: 6px;
}

/* Pill avec bonus manuel : léger contour blanc (le champ reste caché sauf au survol) */
.cs-pill.has-manual,
.cs-maj.has-manual {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}
/* Cellule élémentaire à bonus manuel : contour arrondi doux, détaché du contenu */
.cs-elem.has-manual {
  border-color: rgba(255,255,255,0.40);
  box-shadow: 0 0 8px rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
/* Input majeur : superposé (ne réserve pas de place) */
.cs-input-maj {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 24px;
  margin-left: 0;
  opacity: 0; pointer-events: none; visibility: hidden;
  flex-shrink: 0;
  z-index: 6;
}
/* Input élémentaire : superposé par-dessus la valeur (comme les maîtrises) */
.cs-input-elem {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 40px; height: 24px;
  margin-left: 0;
  opacity: 0; pointer-events: none; visibility: hidden;
  flex-shrink: 0;
  z-index: 6;
}
.cs-maj:hover .cs-input-maj,
.cs-input-maj:focus,
.cs-elem:hover .cs-input-elem,
.cs-input-elem:focus { opacity: 1; pointer-events: auto; visibility: visible; }
.cs-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  transition: border-color .12s, background .12s, opacity .15s;
}
.cs-pill:hover { border-color: var(--border2); background: rgba(255,255,255,0.04); }
.cs-pill.has-manual { border-color: rgba(var(--accent-rgb),.4); }
.cs-ico { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.cs-lbl {
  flex: 1;
  font-family: 'Rajdhani', sans-serif; font-size: 14px; color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-val {
  font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700;
  flex-shrink: 0; min-width: 34px; text-align: right;
}
.cs-val.pos { color: var(--text-white); }
.cs-val.neg { color: #e06b6b; }
.cs-val.zero { color: var(--text3); }

/* Maîtrises secondaires : cliquables, mêmes états que l'Équipement */
.cs-pill-mast { cursor: pointer; }
.cs-pill-mast.active {
  border-color: rgba(var(--accent-rgb),.55);
  background: rgba(var(--accent-rgb),.1);
}
.cs-pill-mast:not(.active) { opacity: .4; }
.cs-pill-mast:not(.active) .cs-ico { filter: grayscale(1); }
.cs-pill-mast:hover { border-color: var(--accent); }
.cs-pill:hover .cs-input,
.cs-input:focus,
.cs-elem:hover .cs-input { opacity: 1; }
.cs-input::placeholder { color: var(--text3); }
.cs-input:focus { border-color: var(--accent); outline: none; }

/* Rangée sublimations spéciales équipées */
.carac-specials-row { display: flex; gap: 12px; flex-shrink: 0; }
.carac-sp {
  flex: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border2);
}
.carac-sp.epique  { background: linear-gradient(160deg, rgba(195,124,167,.10), var(--bg-card) 60%); }
.carac-sp.relique { background: linear-gradient(160deg, rgba(177,148,210,.10), var(--bg-card) 60%); }
.carac-sp-icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border2);
}
.carac-sp.epique  .carac-sp-icon { border-color: #c37ca7; }
.carac-sp.relique .carac-sp-icon { border-color: #b194d2; }
.carac-sp-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.carac-sp-label {
  flex: 1; min-width: 0;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Quand une subli est équipée : afficher son nom sans capitales forcées */
.carac-sp.filled .carac-sp-label { text-transform: none; letter-spacing: 0; }
.carac-sp.filled { cursor: help; }
.carac-sp.epique  .carac-sp-label { color: #d99cc4; }
.carac-sp.relique .carac-sp-label { color: #c4afe6; }
.carac-sp-count {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px;
  color: var(--text-white);
}

.carac-sorts-card {
  flex: 1;
  min-height: 0;
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 12px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}

/* ── Card aptitude ────────────────────────────────────────────── */
.apt-card {
  background:
    linear-gradient(165deg,
      rgba(var(--apt-color-rgb, 200,200,200), 0.06) 0%,
      transparent 45%),
    var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
/* Le header garde son arrondi haut même sans overflow:hidden sur la card */
.apt-header { border-radius: 12px 12px 0 0; }

/* En-tête de la card */
.apt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 10px 14px;
  background:
    linear-gradient(180deg,
      rgba(var(--apt-color-rgb, 200,200,200), 0.18) 0%,
      rgba(var(--apt-color-rgb, 200,200,200), 0.05) 100%),
    var(--bg-header);
  border-bottom: 1px solid rgba(var(--apt-color-rgb, 200,200,200), 0.25);
  position: relative;
}

.apt-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.apt-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(var(--apt-color-rgb, 200,200,200), 0.45));
  flex-shrink: 0;
}

.apt-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 26px;
  color: rgba(var(--apt-color-rgb, 200,200,190), 1);
  text-shadow: 0 0 16px rgba(var(--apt-color-rgb, 200,200,190), 0.4);
  letter-spacing: 0.5px;
  line-height: 1;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
}

.apt-dispo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text2);
}

.apt-dispo-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-white);
  min-width: 20px;
  text-align: right;
}
.apt-dispo-val.over { color: #e05050; }

/* Corps de la card : grille de stats */
.apt-body {
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Ligne d'une stat */
.apt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background .12s, box-shadow .12s;
}
.apt-row:hover { background: rgba(255,255,255,0.03); }

.apt-row-icon {
  width: 24px; height: 24px;
  object-fit: contain; flex-shrink: 0;
}

.apt-row-label {
  flex: 1;
  font-size: 16px;
  color: var(--text2);
  font-family: 'Rajdhani', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Contrôle − valeur + */
.apt-ctrl {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
/* Largeurs fixes pour aligner toutes les lignes */
.apt-ctrl .apt-btn[data-dir="min"],
.apt-ctrl .apt-btn[data-dir="max"] {
  width: 42px; flex-shrink: 0;
}
.apt-ctrl .apt-btn[data-dir="+"],
.apt-ctrl .apt-btn[data-dir="-"] {
  width: 28px; flex-shrink: 0;
}
.apt-ctrl .apt-val {
  min-width: 28px; width: 28px; flex-shrink: 0;
}

.apt-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.04);
  color: var(--text2);
  font-size: 18px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
  line-height: 1;
  padding: 0;
}
.apt-btn:hover {
  border-color: rgba(var(--apt-color-rgb, 200,200,190), 0.5);
  color: rgba(var(--apt-color-rgb, 200,200,190), 1);
  background: rgba(var(--apt-color-rgb, 200,200,190), 0.08);
}
.apt-btn:disabled {
  opacity: 0.25; cursor: not-allowed;
  border-color: var(--border);
}

.apt-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px; font-weight: 700;
  color: var(--text-white);
  min-width: 28px;
  text-align: center;
}
.apt-val.zero { color: var(--text3); }
.apt-val.capped {
  color: rgba(var(--apt-color-rgb, 200,200,190), 1);
}

/* Badge cap — largeur fixe pour ne pas casser l'alignement */
.apt-cap {
  font-size: 13px;
  color: var(--text3);
  font-family: 'Rajdhani', sans-serif;
  width: 52px; flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
}
.apt-cap.reached {
  color: rgba(var(--apt-color-rgb, 200,200,190), 0.75);
  font-weight: 700;
}

/* ── Couleurs par catégorie ──────────────────────────────────── */
.apt-card[data-apt="intelligence"] { --apt-color-rgb: 239, 80, 80; }
.apt-card[data-apt="force"]        { --apt-color-rgb: 132, 204, 22; }
.apt-card[data-apt="agilite"]      { --apt-color-rgb: 177, 148, 210; }
.apt-card[data-apt="chance"]       { --apt-color-rgb: 80, 180, 239; }
.apt-card[data-apt="majeur"]       { --apt-color-rgb: 220, 180, 80; }

/* ── Placeholder Sorts ───────────────────────────────────────── */
.sorts-placeholder {
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 340px;
  padding: 40px 24px;
}

.sorts-placeholder-icon {
  font-size: 48px;
  opacity: 0.18;
}

.sorts-placeholder-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  color: var(--text2);
  letter-spacing: 0.5px;
}

.sorts-placeholder-sub {
  font-size: 12px;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text3);
}

/* ── Finitions cards aptitudes (match visuel cible) ── */
/* Boutons + et MAX teintés de la couleur de catégorie */
.apt-btn[data-dir="+"],
.apt-btn[data-dir="max"] {
  border-color: rgba(var(--apt-color-rgb, 200,200,200), 0.45);
  color: rgba(var(--apt-color-rgb, 200,200,200), 1);
  background: rgba(var(--apt-color-rgb, 200,200,200), 0.10);
}
.apt-btn[data-dir="+"]:hover:not(:disabled),
.apt-btn[data-dir="max"]:hover:not(:disabled) {
  background: rgba(var(--apt-color-rgb, 200,200,200), 0.22);
}
/* Troncature des labels trop longs */
.apt-row-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.apt-btn-minmax {
  width: auto; padding: 0 8px;
  font-size: 12px; letter-spacing: .5px;
}

/* ── Édition manuelle dans le panneau Statistiques (Équipement) ── */
.stat-pill { position: relative; }
.stat-manual {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 58px; height: 24px;
  background: #0a0a0f;
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 1px 3px;
  color: var(--accent2);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s;
  z-index: 6;
}
.stat-pill:hover .stat-manual,
.stat-manual:focus { opacity: 1; visibility: visible; pointer-events: auto; }
.stat-manual::placeholder { color: var(--text3); }
.stat-manual:focus { border-color: var(--accent); outline: none; }
.stat-pill.has-manual { border-color: rgba(var(--accent-rgb),.4); }

/* ── Alignement valeur à droite dans les pills Statistiques (Équipement) ── */
.stat-pill .stat-name { flex: 1 1 auto; min-width: 0; }
.stat-pill .stat-manual { margin-left: 0; }
.stat-pill .stat-val { min-width: 34px; text-align: right; margin-left: 6px; }

/* Tooltip des lignes d'aptitude : vers le bas + teinté couleur catégorie */
.apt-row-tip[data-tip]:hover::after {
  bottom: auto;
  top: calc(100% + 4px);
  background:
    linear-gradient(rgba(var(--apt-color-rgb, 200,200,200), 0.22),
                    rgba(var(--apt-color-rgb, 200,200,200), 0.22)),
    #0c0d12;
  border-color: rgba(var(--apt-color-rgb, 200,200,200), 0.8);
  color: #fff;
  font-size: 12px;
}
/* Contour de la couleur de catégorie au survol d'une ligne */
.apt-card .apt-row-tip:hover {
  background: rgba(var(--apt-color-rgb, 200,200,200), 0.10) !important;
  box-shadow: inset 0 0 0 1.5px rgba(var(--apt-color-rgb, 200,200,200), 0.7);
}

/* Bonus conditionnel dans les pills Statistiques (Équipement) : flotte sans prendre de place */
.stat-pill .cond-bonus {
  position: absolute;
  right: 60px; top: 50%; transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  color: #4aa3ff;
  white-space: nowrap;
  pointer-events: none;
}
.stat-pill .cond-bonus.cond-empty { color: transparent; }

/* ── Étape 3 enchantement : pose des châsses ── */
/* Stat sélectionnée (active) */
.ench-stat-row { cursor: pointer; transition: background .12s, box-shadow .12s; }
.ench-stat-row:hover {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--stat-c, #888) 32%, transparent) 0%,
    rgba(255,255,255,0.05) 55%);
}
.ench-stat-active {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--stat-c, #888) 35%, transparent) 0%,
    rgba(var(--accent-rgb),0.10) 60%);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.6);
}
/* Objet noirci au hover d'une stat (ne double pas dessus) */
.ench-objet-row { transition: opacity .15s; }
.ench-objet-dim { opacity: 0.3; }
/* Châsses : curseur pose */
.ench-chasse { cursor: pointer; user-select: none; }

/* ── Icônes enchantement ── */
.ench-stat-ico { width: 23px; height: 23px; object-fit: contain; flex-shrink: 0; }
.ench-objet-ico { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; margin-right: 6px; }

/* ── Carré slot objet (style Équipement) dans l'enchantement ── */
.ench-objet-slot {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: rgba(0,0,0,0.30);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
  overflow: hidden;
}
.ench-objet-slot:hover { box-shadow: 0 0 8px rgba(255,255,255,.08); }
.ench-objet-active .ench-objet-slot {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.4);
}
.ench-objet-ph { width: 60%; height: 60%; object-fit: contain; opacity: .55; }
.ench-objet-img { width: 100%; height: 100%; object-fit: contain; }

/* Châsses : image de fond couleur + icône maîtrise par-dessus */
.ench-chasse-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}
.ench-chasse-filled {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: none; border: none; box-shadow: none;
}
.ench-chasse-ico {
  position: relative;
  z-index: 1;
  width: 42%; height: 42%; object-fit: contain;
  margin-top: 4px;
}
/* Tooltip de valeur au survol d'une châsse (texte coloré selon la couleur de châsse) */
.ench-chasse-filled { position: relative; }
.ench-chasse-filled::after {
  content: attr(data-label) " : " attr(data-val);
  position: absolute;
  bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700;
  padding: 4px 9px; border-radius: 6px;
  background: #0c0c14; border: 1px solid var(--ch-tip-c, #888);
  color: var(--ch-tip-c, #fff);
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  opacity: 0; pointer-events: none;
  transition: opacity .12s;
  z-index: 50;
}
.ench-chasse-filled:hover::after { opacity: 1; }
/* Couleur du texte selon la couleur de la châsse */
.ench-chasse-filled[data-couleur="rouge"] { --ch-tip-c: #e05050; }
.ench-chasse-filled[data-couleur="bleu"]  { --ch-tip-c: #5090e0; }
.ench-chasse-filled[data-couleur="vert"]  { --ch-tip-c: #7ec84a; }
.ench-chasse-filled[data-couleur="jaune"] { --ch-tip-c: #f0c030; }

/* ── Sélecteur stats : nom à gauche, couleur+objets doublés à droite ── */
.ench-stat-name { flex: 1; }
.ench-stat-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  margin-left: auto;
}
.ench-stat-color { width: 23px; height: 23px; object-fit: contain; }
.ench-stat-dbl { display: flex; align-items: center; gap: 3px; }
.ench-dbl-ico { width: 23px; height: 23px; object-fit: contain; opacity: .8; }

/* ── Cards de sublimations (recherche) ── */
.ench-subli-card {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  min-width: 0;
  border-radius: 9px;
  background: linear-gradient(100deg,
    var(--subli-bg, color-mix(in srgb, var(--subli-c, #888) 30%, var(--bg3))) 0%,
    var(--bg3) 70%,
    var(--bg3) 100%);
  border: 1px solid var(--border2);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .1s;
}
.ench-subli-card:hover {
  border-color: var(--subli-c, var(--accent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--subli-c, var(--accent)) 40%, transparent);
  transform: translateY(-1px);
}
.ench-subli-card.selected {
  border-color: var(--subli-c, var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--subli-c, var(--accent)) 55%, transparent);
}
/* Subli spéciale équipée : halo marqué + bordure pleine */
.ench-subli-spec.selected {
  border: 2px solid var(--subli-c, var(--accent));
  box-shadow:
    0 0 16px color-mix(in srgb, var(--subli-c, var(--accent)) 75%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--subli-c, var(--accent)) 25%, transparent);
}
.ench-subli-spec.selected .ench-subli-spec-ico {
  filter: drop-shadow(0 0 6px var(--subli-c, rgba(255,255,255,.6)));
}
.ench-subli-card.dragging { opacity: .5; }
.ench-subli-logo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.ench-subli-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ench-subli-nom {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--text-white); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Séquence + pills de niveau sur la même ligne */
.ench-subli-seq-pills {
  display: flex; align-items: center; justify-content: space-between; gap: 5px;
  min-width: 0;
}
.ench-subli-seq-pills .ench-subli-seq { flex-shrink: 0; }
.ench-subli-seq-pills .ench-subli-pills { display: flex; gap: 3px; flex-shrink: 0; }

.ench-subli-seq { display: flex; gap: 3px; }
.ench-subli-seq-ico { width: 15px; height: 15px; object-fit: contain; }
.ench-subli-pills { display: flex; gap: 4px; align-items: center; }
/* Gemmes de niveau (remplacent les pills I/II/III) */
.ench-lvl-gem { flex-shrink: 0; }
/* Gemmes cliquables dans la carte de recherche : retenue en avant, autres atténuées */
.ench-card-gem {
  cursor: pointer; border-radius: 4px;
  filter: grayscale(.7) brightness(.7); opacity: .6;
  transition: transform .1s, filter .1s, opacity .1s;
}
.ench-card-gem:hover { transform: scale(1.18); filter: none; opacity: 1; }
.ench-card-gem.sel {
  filter: none; opacity: 1;
  transform: scale(1.12);
  filter: drop-shadow(0 0 5px var(--subli-c, rgba(255,255,255,.5)));
}
/* Gemmes dans la zone d'affectation (subli posée) : sans contour, plus grandes */
.ench-osub-pill.ench-lvl-gem {
  cursor: pointer; border: none; background: none; border-radius: 0;
  transition: transform .1s, filter .1s;
}
.ench-osub-pill.ench-lvl-gem:hover { transform: scale(1.18); filter: drop-shadow(0 0 5px rgba(255,255,255,.5)); }
.ench-lvl-pill {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 10px;
  padding: 2px 6px; border-radius: 5px;
  border: 1px solid; line-height: 1.2;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.ench-lvl-pill:hover { transform: scale(1.12); }
.ench-lvl-pill.lvl-selected { box-shadow: 0 0 0 2px currentColor inset; }
/* Spéciales : icône + nom centré */
.ench-subli-spec { flex-direction: row; align-items: center; gap: 10px; }
.ench-subli-spec-ico { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.ench-subli-spec .ench-subli-nom { white-space: normal; font-size: 15px; }

.ench-ph {
  grid-column: 1 / -1;
  text-align: center; padding: 16px;
  color: var(--text3); font-family: 'Rajdhani', sans-serif; font-size: 14px;
}

/* Grilles scrollables */
.ench-card-grid { overflow-y: auto; overflow-x: hidden; }
.ench-card-grid > * { min-width: 0; }
.ench-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-content: start; }
.ench-grid-1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; }

/* Léger dégradé de rareté pour épique / relique */
.ench-card-epique  { background: linear-gradient(160deg, rgba(195,124,167,.08), var(--bg-card) 55%); }
.ench-card-relique { background: linear-gradient(160deg, rgba(177,148,210,.10), var(--bg-card) 55%); }

/* ── Barre de titre Enchantement : titre centré + sélecteur de paliers à droite ── */
.ench-title-bar {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  margin-bottom: 10px;
}
.ench-title-bar .ench-title-text { text-align: center; }
.ench-title-bar .ench-chasse-level {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
}

/* ── Bonus conditionnels Cat 2 (bleu) sur lignes élémentaires et héros ── */
.elem-float .cond-bonus {
  margin-left: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  color: #4aa3ff;
  white-space: nowrap;
  flex-shrink: 0;
}
.stat-hero-item .hero-cond {
  margin: 0 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
  color: #4aa3ff;
  white-space: nowrap;
}

/* ── Croix rouge : sublimation inactive (séquence incorrecte) ── */
.rcp-subli-icowrap { position: relative; display: inline-flex; flex-shrink: 0; }
.rcp-subli-cross {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #ef4444; font-weight: 900; font-size: 22px; line-height: 1;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
  pointer-events: none;
}
.rcp-subli-inactive .rcp-subli-ico { opacity: 0.4; filter: grayscale(0.7); }
.rcp-subli-inactive .rcp-subli-name { opacity: 0.5; text-decoration: line-through; }

/* Bonus conditionnel bleu dans les stats majeures (PA/PM/PW) — prioritaire sur .cs-maj span */
.cs-maj span.cs-cond-maj { color: #4aa3ff; font-size: 14px; min-width: 0; }
/* Exception : dans les stats majeures, le (+xx) reste EN FLUX après la valeur
   (la mise en page absolute des autres pills tomberait sur le logo de l'élément). */
.cs-maj .cs-cond.cs-cond-maj {
  position: static; transform: none; right: auto; top: auto;
  margin-left: 5px; white-space: nowrap;
}

/* Réserve l'espace du bonus conditionnel (+X) pour éviter tout décalage d'interface */
.stat-hero-item .hero-cond { display: inline-block; min-width: 34px; text-align: left; }
.cs-maj span.cs-cond-maj { display: inline-block; min-width: 30px; text-align: left; }

/* ── Sublimation spéciale inactive (condition non remplie) ── */
.ench-spec-big-icon { position: relative; }
.ench-spec-cross {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #ef4444; font-weight: 900; font-size: 28px; line-height: 1;
  text-shadow: 0 0 4px #000, 0 0 4px #000;
  pointer-events: none;
}
.ench-spec-big-card.ench-spec-inactive {
  border-color: #ef4444 !important;
  background: linear-gradient(180deg, rgba(239,68,68,0.12), rgba(239,68,68,0.04)) !important;
}
.ench-spec-inactive .ench-spec-big-icon img { opacity: 0.4; filter: grayscale(0.7); }
.ench-spec-inactive .ench-spec-big-name { color: #ef9a9a; }

/* Croix rouge sur le logo de la sublimation normale posée (onglet Enchantement) */
.ench-osub-logowrap { position: relative; display: inline-flex; flex-shrink: 0; }
.ench-osub-cross {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #ef4444; font-weight: 900; font-size: 24px; line-height: 1;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
  pointer-events: none;
}
.ench-osub-inactive .ench-osub-logo { opacity: 0.4; filter: grayscale(0.7); }

/* Croix sur badge spéciale (récap droite Équipement) */
.rcp-badge-icowrap { position: relative; display: inline-flex; }
.rcp-badge-cross {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #ef4444; font-weight: 900; font-size: 18px; line-height: 1;
  text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none;
}
.subli-special-badge.spec-badge-inactive {
  border-color: #ef4444 !important;
  background: linear-gradient(180deg, rgba(239,68,68,0.12), rgba(239,68,68,0.04)) !important;
}
.spec-badge-inactive .rcp-badge-ico { opacity: 0.4; filter: grayscale(0.7); }
.spec-badge-inactive .badge-label { color: #ef9a9a; }

/* Croix sur carac-sp (récap Caractéristiques) */
.carac-sp-icon { position: relative; }
.carac-sp-cross {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #ef4444; font-weight: 900; font-size: 20px; line-height: 1;
  text-shadow: 0 0 3px #000, 0 0 3px #000; pointer-events: none;
}
.carac-sp.carac-sp-inactive {
  border-color: #ef4444 !important;
  background: linear-gradient(180deg, rgba(239,68,68,0.12), rgba(239,68,68,0.04)) !important;
}
.carac-sp-inactive .carac-sp-icon img { opacity: 0.4; filter: grayscale(0.7); }
.carac-sp-inactive .carac-sp-label { color: #ef9a9a; }

/* ═══════════════ MENU COMPTE (haut droite tabs-bar) ═══════════════ */
.account { position: absolute; right: 22px; bottom: 8px; z-index: 50; display: flex; align-items: center; gap: 8px; }

/* Bouton Sauvegarder */
.save-build-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: rgba(240,192,64,0.1); border: 1px solid rgba(240,192,64,0.35);
  border-radius: 20px; color: #f0c040; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
  transition: all .15s; max-width: 220px;
}
.save-build-btn:hover { background: rgba(240,192,64,0.18); border-color: rgba(240,192,64,0.6); }
.save-build-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bouton invité */
.account-login {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 20px;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  color: #fff; border: none; border-radius: 22px; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: .3px; box-shadow: 0 3px 12px rgba(var(--accent-rgb),0.3);
  transition: all .15s;
}
.account-login:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Bouton connecté */
.account-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 12px 6px 7px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border2);
  border-radius: 22px; color: var(--text); cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700;
  transition: all .15s;
}
.account-btn:hover { border-color: var(--accent); color: var(--text-white); }
.account-caret { font-size: 11px; color: var(--text2); margin-left: 2px; }

/* Avatar placeholder (rond, dégradé) */
.account-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--gold, #f0c040));
  color: #fff; font-weight: 800; font-size: 15px; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.15);
}
.account-avatar-lg { width: 38px; height: 38px; font-size: 17px; }
.account-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Menu déroulant */
.account-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 220px; padding: 8px;
  background: var(--bg-card); border: 1px solid var(--border2);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  display: none; flex-direction: column; gap: 2px;
}
.account-menu.open { display: flex; }
.account-menu-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 12px; border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.account-menu-id { min-width: 0; }
.account-menu-name {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--text-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-menu-sub { font-size: 11px; color: var(--text2); }
.account-menu-item {
  text-align: left; padding: 9px 10px; border-radius: 7px;
  background: transparent; border: none; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--text); transition: .12s;
}
.account-menu-item:hover { background: rgba(255,255,255,0.05); color: var(--text-white); }
.account-menu-sep { height: 1px; background: var(--border); margin: 5px 0; }
.account-menu-danger { color: #e88; }
.account-menu-danger:hover { background: rgba(239,68,68,0.12); color: #ef9a9a; }

/* ═══════════════ PANNEAU "MES BUILDS" ═══════════════ */
.builds-panel {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.builds-panel.open { display: flex; }
.builds-panel-box {
  width: 100%; max-width: 480px; max-height: 80vh;
  background: var(--bg-card); border: 1px solid var(--border2);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; overflow: hidden;
}
.builds-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.builds-panel-title {
  font-family: 'Rajdhani', sans-serif; font-size: 18px; color: #f0c040;
}
.builds-panel-close {
  background: none; border: none; color: var(--text2); font-size: 26px;
  cursor: pointer; line-height: 1; transition: .15s;
}
.builds-panel-close:hover { color: var(--text-white); }
.builds-panel-list { padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.builds-empty { padding: 30px; text-align: center; color: var(--text2); font-size: 14px; }
.builds-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 10px; transition: .15s;
}
.builds-row:hover { border-color: var(--border2); }
.builds-row-main { flex: 1; min-width: 0; }
.builds-row-name {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--text-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.builds-row-date { font-size: 11.5px; color: var(--text2); margin-top: 1px; }
.builds-row-load {
  padding: 7px 14px; background: linear-gradient(180deg, var(--accent2), var(--accent));
  color: #fff; border: none; border-radius: 8px; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; transition: .15s;
}
.builds-row-load:hover { filter: brightness(1.08); }
.builds-row-del {
  padding: 7px 10px; background: transparent; border: 1px solid var(--border2);
  border-radius: 8px; cursor: pointer; font-size: 14px; transition: .15s;
}
.builds-row-del:hover { border-color: #ef4444; background: rgba(239,68,68,0.1); }

/* Toast builder */
.bld-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--bg-card); border: 1px solid var(--border2); border-radius: 10px;
  padding: 12px 18px; color: var(--text-white); font-family: 'Rajdhani', sans-serif;
  font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transition: .25s; z-index: 600; max-width: 90vw;
}
.bld-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.bld-toast b { color: #f0c040; }

/* ═══════════════ PARTAGE DE BUILD ═══════════════ */
.stats-header { position: relative; display: flex; align-items: center; justify-content: center; }
.stats-title-text { display: inline-block; }
.share-actions {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: flex; gap: 4px;
}
.share-act {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border2);
  border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--text);
  transition: .15s; line-height: 1;
}
.share-act:hover { background: rgba(255,255,255,0.09); border-color: var(--border2); }
.share-eye.eye-public  { color: #4ade80; border-color: rgba(74,222,128,0.4); }
.share-eye.eye-public:hover  { background: rgba(74,222,128,0.12); }
.share-eye.eye-private { color: #ef4444; border-color: rgba(239,68,68,0.4); }
.share-eye.eye-private:hover { background: rgba(239,68,68,0.12); }

/* Mention auteur sous la card perso */
.build-author {
  margin-top: 8px; text-align: center;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--text2); font-style: italic;
}
.build-author::before { content: '✎ '; color: #f0c040; font-style: normal; }

/* ── Icônes SVG des boutons (partage, save, suppression) ── */
.share-act svg { width: 15px; height: 15px; }
.save-build-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.builds-row-del svg { width: 15px; height: 15px; color: var(--text2); }
.builds-row-del:hover svg { color: #ef4444; }
.share-eye .eye-icon { display: block; }

/* ═══════════════ MODALE RESTAURATION BUILD ═══════════════ */
.restore-modal {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.restore-box {
  width: 100%; max-width: 420px; padding: 24px;
  background: var(--bg-card); border: 1px solid var(--border2);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.restore-title {
  font-family: 'Rajdhani', sans-serif; font-size: 18px; color: #f0c040;
  margin-bottom: 12px;
}
.restore-text {
  font-family: 'Rajdhani', sans-serif; font-size: 14.5px; color: var(--text);
  line-height: 1.5; margin-bottom: 20px;
}
.restore-actions { display: flex; flex-direction: column; gap: 8px; }
.restore-btn {
  padding: 11px 16px; border-radius: 9px; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px;
  border: 1px solid var(--border2); transition: .15s;
}
.restore-save {
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  color: #fff; border: none; box-shadow: 0 3px 12px rgba(var(--accent-rgb),0.3);
}
.restore-save:hover { filter: brightness(1.08); }
.restore-discard { background: rgba(255,255,255,0.04); color: var(--text); }
.restore-discard:hover { background: rgba(255,255,255,0.08); border-color: var(--border2); }
.restore-cancel { background: transparent; color: var(--text2); }
.restore-cancel:hover { color: var(--text-white); }

/* Bouton Nouveau build */
.new-build-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border2);
  border-radius: 22px; color: var(--text); cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700;
  transition: all .15s;
}
.new-build-btn:hover { border-color: var(--accent); color: var(--text-white); background: rgba(255,255,255,0.07); }
.new-build-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ═══════════════ BANDEAU INVITÉ (rouge pulsant) ═══════════════ */
.guest-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(239,68,68,0.95), rgba(200,40,40,0.95));
  color: #fff; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14.5px;
  box-shadow: 0 -4px 20px rgba(239,68,68,0.4);
  animation: guestPulse 1.6s ease-in-out infinite;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.guest-banner-hidden {
  transform: translateY(100%);
  animation: none;
}
@keyframes guestPulse {
  0%, 100% { background: linear-gradient(180deg, rgba(239,68,68,0.95), rgba(200,40,40,0.95)); }
  50%      { background: linear-gradient(180deg, rgba(255,90,90,0.98), rgba(230,60,60,0.98)); }
}
.guest-copy {
  padding: 7px 16px; background: #fff; color: #c02020;
  border: none; border-radius: 8px; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 13.5px;
  transition: .15s; white-space: nowrap;
}
.guest-copy:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
@media (prefers-reduced-motion: reduce) { .guest-banner { animation: none; } }

/* Badges public/privé dans le panneau builds */
.bld-badge {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
  vertical-align: middle; margin-left: 4px;
}
.bld-public  { background: rgba(74,222,128,0.15); color: #4ade80; }
.bld-private { background: rgba(239,68,68,0.15); color: #ef4444; }

/* ═══════════════ MENTION LÉGALE (bas de page) ═══════════════ */
.legal-disclaimer {
  position: fixed; right: 16px; bottom: 8px; z-index: 200;
  text-align: right; max-width: 50vw;
  font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 500;
  color: #e8e8e0;
  pointer-events: none; line-height: 1.4;
  transform: scale(var(--stage-scale, 1));
  transform-origin: bottom right;
}

/* ═══════════════ SYSTÈME DE VUES (fondu) ═══════════════ */
.app-view {
  position: fixed; inset: 0;
  opacity: 1; transition: opacity .28s ease;
}
.app-view.fade-out { opacity: 0; pointer-events: none; }
.app-view.fade-hidden { display: none; }

/* Vue accueil : même fond que le builder, scalé en 16:9 comme le stage */
.home-stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: center center;
  display: flex; flex-direction: column;
}
.home-topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 22px 36px; gap: 20px;
}
.home-tabs { display: flex; gap: 8px; justify-self: start; }
.home-tab {
  padding: 10px 26px; background: transparent; border: none;
  font-family: 'Rajdhani', sans-serif; font-size: 22px;
  color: var(--text2); cursor: pointer; transition: .18s; border-bottom: 2px solid transparent;
}
.home-tab:hover { color: var(--text-white); }
.home-tab.active { color: #f0c040; border-bottom-color: #f0c040; }
.home-tab:disabled { opacity: .35; cursor: not-allowed; color: var(--text2); }
.home-tab:disabled:hover { color: var(--text2); }
.home-title {
  justify-self: center; font-family: 'Rajdhani', sans-serif;
  font-size: 30px; color: var(--text-white); text-shadow: 0 0 20px rgba(240,192,64,0.2);
}
.account-home { justify-self: end; }

.home-body {
  flex: 1; display: flex; gap: 0; padding: 0 36px 36px; min-height: 0;
}
.home-left  { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.home-right { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding-left: 36px; }
.home-divider {
  width: 3px; align-self: stretch; margin: 8px 0;
  background: linear-gradient(180deg, transparent, #f59e0b 15%, #f59e0b 85%, transparent);
  border-radius: 2px; box-shadow: 0 0 12px rgba(245,158,11,0.4);
}

/* ═══════════════ HOME — CRÉER UN STUFF (zone droite) ═══════════════ */
.home-section-title {
  font-family: 'Rajdhani', sans-serif; font-size: 26px; color: var(--text-white);
  text-align: center; margin-bottom: 18px; flex-shrink: 0;
}
.create-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.create-grid {
  flex: 1; display: grid; grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr; gap: 6px; overflow: hidden; padding: 0; align-content: stretch;
}
.create-class {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
  background: transparent; border: 2px solid transparent; border-radius: 12px;
  padding: 6px 4px 4px; cursor: pointer; transition: .15s; min-height: 0;
}
.create-class:hover { background: rgba(255,255,255,0.04); }
.create-class.sel { background: rgba(240,192,64,0.08); border-color: #f0c040; }
.create-class img {
  width: 100%; height: 100%; min-height: 0; flex: 1;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.45));
}
.create-class-name {
  font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 700;
  color: #d8d8d2; transition: .15s; white-space: nowrap; flex-shrink: 0;
}
.create-class:hover .create-class-name { color: #fff; }
.create-class.sel .create-class-name { color: #f0c040; }

/* ── Nouvelle disposition zone droite : certifiés (haut, scroll) + visages (2×9) ── */
.home-right-tabs { display: none !important; }   /* onglets supprimés */

.certif-zone {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  margin-bottom: 14px;
}
.certif-zone .certif-list {
  flex: 1 1 auto; min-height: 0;
}

/* Grille des 18 visages : 2 lignes de 9, toujours visibles */
.create-faces {
  flex-shrink: 0;
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px;
  margin-bottom: 12px;
}
.create-face {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; padding: 3px;
  background: transparent; border: 2px solid transparent; border-radius: 12px;
  cursor: pointer; transition: .15s;
}
.create-face img {
  width: 100%; height: 100%; object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.45));
  transition: .15s;
}
.create-face:hover { background: rgba(255,255,255,0.05); }
.create-face.sel {
  border-color: #f0c040;
  background: rgba(240,192,64,0.10);
  box-shadow: 0 0 12px rgba(240,192,64,0.35);
}
/* Nom de la classe au survol (tooltip flottant au-dessus du visage) */
.create-face-name {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
  color: #fff; background: rgba(20,22,28,0.95); border: 1px solid var(--border2);
  padding: 2px 8px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5;
}
.create-face:hover .create-face-name { opacity: 1; }

.create-config {
  flex-shrink: 0; margin-top: 14px; padding: 16px 18px;
  background: var(--bg-card); border: 1px solid var(--border2); border-radius: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: end;
}
.create-cfg-block:nth-child(1) { grid-column: 1 / 2; }
.create-cfg-label {
  font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text2); margin-bottom: 7px;
}
.create-cfg-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px;
}
.create-cfg-head .create-cfg-label { margin-bottom: 0; }
.create-level-val {
  font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: #f0c040;
}

/* Slider niveau (curseur unique) */
.create-range { position: relative; height: 18px; display: flex; align-items: center; }
.create-range-track {
  position: absolute; left: 0; right: 0; height: 4px; border-radius: 3px; background: var(--bg3);
}
.create-range-track::after {
  content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 10px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(255,255,255,0.22) 0, rgba(255,255,255,0.22) 1.5px,
    transparent 1.5px, transparent calc(100% / 15)
  );
}
.create-range-fill {
  position: absolute; left: 0; height: 4px; border-radius: 3px; width: 0;
  background: #f0c040; box-shadow: 0 0 8px rgba(240,192,64,0.4);
}
.create-range-input {
  position: absolute; left: 0; right: 0; width: 100%; margin: 0; height: 18px;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.create-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #f0c040; cursor: pointer; border: 2px solid #1a1a1a;
  box-shadow: 0 0 8px rgba(240,192,64,0.5);
}
.create-range-input::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #f0c040; cursor: pointer; border: 2px solid #1a1a1a;
  box-shadow: 0 0 8px rgba(240,192,64,0.5);
}
.create-range-input::-webkit-slider-runnable-track { background: transparent; }
.create-range-input::-moz-range-track { background: transparent; }

.create-pills { display: flex; gap: 6px; }
.cpill {
  flex: 1; padding: 8px 4px; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 8px; color: var(--text2); cursor: pointer; transition: .15s;
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.cpill:hover { color: var(--text-white); border-color: rgba(255,255,255,0.2); }

/* Couleurs par type */
.cpill[data-type="dpt"]:hover, .cpill[data-type="dpt"].sel           { background: rgba(59,130,246,0.16); border-color: #3b82f6; color: #3b82f6; }
.cpill[data-type="soigneur"]:hover, .cpill[data-type="soigneur"].sel { background: rgba(239,68,68,0.16); border-color: #ef4444; color: #ef4444; }
.cpill[data-type="support"]:hover, .cpill[data-type="support"].sel   { background: rgba(132,204,22,0.16); border-color: #84cc16; color: #84cc16; }
/* Couleurs par coût */
.cpill[data-cost="faible"]:hover, .cpill[data-cost="faible"].sel { background: rgba(132,204,22,0.16); border-color: #84cc16; color: #84cc16; }
.cpill[data-cost="moyen"]:hover, .cpill[data-cost="moyen"].sel   { background: rgba(245,158,11,0.16); border-color: #f59e0b; color: #f59e0b; }
.cpill[data-cost="haut"]:hover, .cpill[data-cost="haut"].sel     { background: rgba(239,68,68,0.16); border-color: #ef4444; color: #ef4444; }
.create-start {
  grid-column: 1 / -1; margin-top: 4px; padding: 14px;
  background: linear-gradient(180deg, #f0c040, #d4a020); border: none; border-radius: 10px;
  color: #1a1a1a; font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 17px;
  letter-spacing: 1px; cursor: pointer; transition: .15s;
}
.create-start:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(240,192,64,0.3); }

/* Bouton « Valider » de la modale Modifier le build (pill dorée centrée) */
.cs-validate-btn {
  display: block; margin: 16px auto 2px; padding: 11px 40px;
  background: linear-gradient(180deg, #f0c040, #d4a020); border: none; border-radius: 22px;
  color: #1a1a1a; font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 15px;
  letter-spacing: 1px; cursor: pointer; transition: .15s;
}
.cs-validate-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(240,192,64,0.3); }

/* ═══════════════ HOME — MES STUFF (zone gauche) ═══════════════ */
.ms-filters {
  flex-shrink: 0; display: flex; gap: 14px; margin-bottom: 16px;
}
.ms-filter-block { flex: 1; min-width: 0; }
.ms-filter-label {
  font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text2); margin-bottom: 7px;
}

/* Grille filtre classe (18 visages) */
.ms-class-grid {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px;
}
.ms-class {
  aspect-ratio: 1; padding: 0; border-radius: 8px; overflow: hidden;
  background: transparent; border: 2px solid transparent; cursor: pointer; transition: .12s;
}
.ms-class img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-class:hover { border-color: rgba(240,192,64,0.5); transform: scale(1.06); }
.ms-class.sel { border-color: #f0c040; box-shadow: 0 0 0 2px rgba(240,192,64,0.20); }

/* Bloc tri */
.ms-sort {
  flex-shrink: 0; padding: 14px 16px;
  background: transparent; border: none; border-radius: 14px;
  min-width: 240px;
}
.ms-sort-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.ms-sort-title {
  font-family: 'Rajdhani', sans-serif; font-size: 18px; color: #f0c040;
}
.ms-sort-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.ms-sort-head .ms-level-val {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600;
  color: #f0c040; white-space: nowrap;
}
.ms-sort-row { margin-bottom: 12px; }
.ms-sort-row:last-child { margin-bottom: 0; }
.ms-sort-level { display: flex; align-items: center; gap: 10px; }

/* Double slider (plage de niveau) */
.ms-range { position: relative; flex: 1; height: 18px; display: flex; align-items: center; }
.ms-range-track {
  position: absolute; left: 0; right: 0; height: 4px; border-radius: 3px;
  background: var(--bg3);
}
.ms-range-track::after {
  content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 10px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(255,255,255,0.22) 0, rgba(255,255,255,0.22) 1.5px,
    transparent 1.5px, transparent calc(100% / 15)
  );
}
.ms-range-fill {
  position: absolute; height: 4px; border-radius: 3px;
  background: #f0c040; box-shadow: 0 0 8px rgba(240,192,64,0.4);
}
.ms-range-input {
  position: absolute; left: 0; right: 0; width: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent;
  pointer-events: none;   /* la piste ne capte pas, seules les poignées captent */
  height: 18px;
}
.ms-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #f0c040; cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 8px rgba(240,192,64,0.5); border: 2px solid #1a1a1a;
}
.ms-range-input::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #f0c040; cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 8px rgba(240,192,64,0.5); border: 2px solid #1a1a1a;
}
.ms-range-input::-webkit-slider-runnable-track { background: transparent; }
.ms-range-input::-moz-range-track { background: transparent; }
.ms-level-val {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  color: #f0c040; white-space: nowrap; min-width: 58px; text-align: right;
}
.ms-pills { display: flex; gap: 6px; }
.ms-pill {
  flex: 1; padding: 7px 4px; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 8px; color: var(--text2); cursor: pointer; transition: .15s;
  font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px;
}
.ms-pill:hover { color: var(--text-white); border-color: rgba(255,255,255,0.2); }

/* Couleurs par type de build (hover + sélection) */
.ms-pill[data-mstype="dpt"]:hover,
.ms-pill[data-mstype="dpt"].sel        { background: rgba(59,130,246,0.16); border-color: #3b82f6; color: #3b82f6; }
.ms-pill[data-mstype="soigneur"]:hover,
.ms-pill[data-mstype="soigneur"].sel   { background: rgba(239,68,68,0.16); border-color: #ef4444; color: #ef4444; }
.ms-pill[data-mstype="support"]:hover,
.ms-pill[data-mstype="support"].sel    { background: rgba(132,204,22,0.16); border-color: #84cc16; color: #84cc16; }

/* Couleurs par coût (hover + sélection) */
.ms-pill[data-mscost="faible"]:hover,
.ms-pill[data-mscost="faible"].sel { background: rgba(132,204,22,0.16); border-color: #84cc16; color: #84cc16; }
.ms-pill[data-mscost="moyen"]:hover,
.ms-pill[data-mscost="moyen"].sel  { background: rgba(245,158,11,0.16); border-color: #f59e0b; color: #f59e0b; }
.ms-pill[data-mscost="haut"]:hover,
.ms-pill[data-mscost="haut"].sel   { background: rgba(239,68,68,0.16); border-color: #ef4444; color: #ef4444; }

/* Zone scrollable des cartes */
.ms-cards-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 10px 12px 10px 10px;
}
.ms-cards-grid {
  display: flex; flex-direction: column; gap: 12px; align-items: stretch;
}
.ms-cards-empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 100%; min-height: 120px; color: var(--text2);
  font-family: 'Rajdhani', sans-serif; font-size: 15px; line-height: 1.5;
}

/* Carte build */
.ms-card {
  position: relative; display: flex; gap: 10px; padding: 12px;
  background: var(--bg-card); border: 1px solid var(--border2); border-radius: 14px;
  cursor: pointer; transition: .15s; overflow: hidden;
  width: 100%; box-sizing: border-box;
}
.ms-card:hover {
  border-color: rgba(var(--card-rgb, 240,192,64), 0.65);
  box-shadow: 0 0 0 1px rgba(var(--card-rgb, 240,192,64), 0.40),
              0 0 22px rgba(var(--card-rgb, 240,192,64), 0.35),
              0 0 44px rgba(var(--card-rgb, 240,192,64), 0.18);
}
.ms-card-illus {
  width: 96px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.ms-card-illus img {
  max-width: 100%; max-height: 132px; object-fit: contain; object-position: center;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.45));
}
.ms-card-body { flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.ms-card-name {
  font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700;
  color: #f0a040; line-height: 1.2; display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.ms-badge {
  font-family: 'Rajdhani', sans-serif; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 5px;
}
.ms-badge-pub  { background: rgba(52,211,153,0.14); color: #34d399; }
.ms-badge-priv { background: rgba(148,163,184,0.14); color: #94a3b8; }

/* Icônes items : 10 sur une seule ligne */
.ms-card-items {
  display: grid; grid-template-columns: repeat(10, 48px); gap: 4px;
}
.ms-item {
  width: 48px; height: 48px; border-radius: 7px; background: var(--bg3);
  border: 1px solid var(--border); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ms-item img { width: 100%; height: 100%; object-fit: contain; }
.ms-item-empty { opacity: .35; }

/* Sublis spéciales : colonne à droite de la carte, empilées */
.ms-card-specials {
  display: flex; flex-direction: column; gap: 8px;
  justify-content: center;
  padding-left: 14px; margin-left: 4px;
  border-left: 1px solid var(--border2);
}
.ms-special {
  display: flex; align-items: center; gap: 8px;
}
.ms-special-ico {
  width: 32px; height: 32px; object-fit: contain; flex-shrink: 0;
  border-radius: 6px; padding: 3px; border: 1px solid;
}
.ms-special-epique .ms-special-ico {
  background: rgba(195,124,167,0.20); border-color: #c37ca7;
}
.ms-special-relique .ms-special-ico {
  background: rgba(177,148,210,0.20); border-color: #b194d2;
}
.ms-special-name {
  font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.ms-special-epique  .ms-special-name { color: #c37ca7; }
.ms-special-relique .ms-special-name { color: #b194d2; }

/* Bouton supprimer */
.ms-card-del {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  border-radius: 7px; background: rgba(20,22,28,0.85); border: 1px solid var(--border2);
  color: rgba(200,200,190,0.4); cursor: pointer; transition: .15s; opacity: 0;
  display: flex; align-items: center; justify-content: center; padding: 0; z-index: 2;
}
.ms-card-del svg { width: 14px; height: 14px; }
.ms-card:hover .ms-card-del { opacity: 1; }
.ms-card-del:hover { background: rgba(224,80,122,0.18); border-color: rgba(224,80,122,0.5); color: #f07090; }

/* ── Menu compte dans la HOME (topbar, dans le flux) ── */
.account-home { position: relative; right: auto; bottom: auto; justify-self: end; }
.account-home .account-menu { top: calc(100% + 8px); bottom: auto; }

/* ═══════════════ ONGLET ÉQUIPEMENT (recherche permanente) ═══════════════ */
#tab-recherche .recherche-wrap {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 6px 20px 14px;
}

/* Rangée de tous les slots en haut */
.recherche-slots {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  flex-shrink: 0;
}
.rslot {
  width: 52px; height: 52px; border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .12s; position: relative; overflow: hidden;
}
.rslot:hover { border-color: var(--accent); transform: translateY(-2px); }
.rslot.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.25); }
.rslot.filled {
  border-color: transparent;
  box-shadow:
    inset 0 0 0 1.5px var(--drop-color, rgba(255,255,255,0.15)),
    0 2px 8px rgba(0,0,0,0.5);
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.55) 40%,
    var(--drop-color-bg, rgba(80,60,20,0.25)) 100%
  );
}
.rslot.filled:hover {
  border-color: transparent;
  box-shadow:
    inset 0 0 0 1.5px var(--drop-color, rgba(255,255,255,0.35)),
    0 4px 16px rgba(0,0,0,0.6),
    0 0 12px var(--drop-color-glow, rgba(255,255,255,0.08));
}
.rslot.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 14px rgba(var(--accent-rgb),0.3);
}
.rslot-img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 2; }
.rslot-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; opacity: .5; }
.rslot-ph img { width: 22px; height: 22px; object-fit: contain; }
.rslot-ph span { font-size: 8px; color: var(--text2); font-family: 'Rajdhani', sans-serif; text-transform: uppercase; }

/* L'ex-overlay devient un bloc inline dans l'onglet */
.item-modal-inline {
  position: static !important; inset: auto !important;
  background: transparent !important; backdrop-filter: none !important;
  display: flex !important; z-index: auto !important;
  flex: 1; min-height: 0;
}
.item-modal-inline .item-modal-box,
.recherche-box {
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  box-shadow: none !important;
}

/* ═══════════════ ONGLET ÉQUIPEMENT — deux cards séparées ═══════════════ */
#tab-recherche .recherche-cols {
  display: flex; gap: 16px; flex: 1; min-height: 0;
}

/* CARD GAUCHE : Statistique / Comparateur (bloc indépendant) */
/* Ligne haute : onglets alignés à la barre de slots */
#tab-recherche .recherche-top {
  display: flex; gap: 16px; flex-shrink: 0; align-items: stretch;
}
.equip-left-tabs {
  display: flex; gap: 6px; flex-shrink: 0;
  width: 660px;
}
#tab-recherche .recherche-top .recherche-slots {
  flex: 1; min-width: 0; margin: 0; justify-content: flex-start;
}

/* CARD GAUCHE : colonne = card pleine hauteur (onglets sortis au-dessus) */
.equip-left-col {
  width: 660px; flex-shrink: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.equip-left-card {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border2);
  border-radius: 14px; padding: 14px 16px;
}
.equip-left-tab {
  flex: 1; padding: 9px 8px; border-radius: 9px;
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text2); cursor: pointer; transition: .15s;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .4px;
}
.equip-left-tab:hover { color: var(--text-white); border-color: rgba(255,255,255,0.2); }
.equip-left-tab.active {
  background: rgba(240,192,64,0.12); border-color: #f0c040; color: #f0c040;
}
.equip-left-pane { display: none; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.equip-left-pane.active { display: flex; flex-direction: column; }
.compare-panel.compare-panel-inline {
  display: flex !important; width: 100% !important;
  border-right: none !important; padding-right: 0 !important;
}
#equipLeftStats .stats-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; width: 100%; }

/* CARD DROITE : recherche (plus étroite, prend le reste) */
#tab-recherche .item-modal-inline { flex: 1; min-width: 0; }

/* On masque l'ancienne checkbox comparateur (remplacée par les onglets gauche) */
#tab-recherche #compareCheckWrap { display: none !important; }
#tab-recherche .results-area { min-width: 0; }

/* Label "BQ" pour le Huppermage (à la place de l'icône PW) */
.hero-bq-label {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px;
  color: #a855f7; margin-left: 3px; letter-spacing: .5px;
}

/* Huppermage : valeur BQ en doré (surcharge le bleu PW) */
.stat-hero-val.pw-val.pw-val-bq { color: #f0c040 !important; }
.cs-maj .cs-bq-val { color: #f0c040 !important; }

/* ═══ Filtre par statistique : bascule "Négatif" ═══ */
.sf-stat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sf-neg-toggle {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 10px; border-radius: 7px; cursor: pointer; transition: .15s;
  background: var(--bg3); border: 1px solid var(--border2); color: var(--text2);
}
.sf-neg-toggle:hover { color: #ef4444; border-color: rgba(239,68,68,0.5); }
.sf-neg-toggle.active {
  background: rgba(239,68,68,0.16); border-color: #ef4444; color: #ef4444;
}
/* Titre en rouge quand le mode négatif est actif */
.sf-section-title.sf-neg { color: #ef4444; }
/* Le "-" rouge devant chaque stat */
.sf-neg-sign {
  color: #ef4444; font-weight: 800; margin-right: 2px; font-family: 'Rajdhani', sans-serif;
}
/* Tout le bloc de stats en rouge en mode négatif */
.sf-stat-wrap.sf-neg .sf-item span { color: #ef9a9a; }
.sf-stat-wrap.sf-neg .sf-item.active {
  background: rgba(239,68,68,0.16); border-color: #ef4444;
}
.sf-stat-wrap.sf-neg .sf-item.active span { color: #ef4444; }

/* Édition manuelle PA/PM/PW dans le panneau hero (Récap + Équipement) */
.stat-hero-item { position: relative; }
.hero-manual {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; padding: 2px 3px; margin: 0;
  background: #000; border: 1px solid var(--accent); border-radius: 5px;
  color: var(--accent2); font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; text-align: center;
  opacity: 0; transition: opacity .15s; z-index: 5;
}
.stat-hero-item:hover .hero-manual,
.hero-manual:focus { opacity: 1; }
.hero-manual::placeholder { color: var(--text3); }
.hero-manual:focus { outline: none; }

/* Édition manuelle des maîtrises/résistances élémentaires dans le hero */
.elem-float { position: relative; }
.elem-float:hover { z-index: 50; }
.elem-val-stack { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.hero-manual-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  color: var(--accent2); margin-top: 1px;
}
.hero-elem-manual {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; padding: 2px 3px; margin: 0;
  background: #000; border: 1px solid var(--accent); border-radius: 5px;
  color: var(--accent2); font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; text-align: center;
  opacity: 0; transition: opacity .15s; z-index: 5;
}
.elem-float:hover .hero-elem-manual,
.hero-elem-manual:focus { opacity: 1; }
.hero-elem-manual::placeholder { color: var(--text3); }
.hero-elem-manual:focus { outline: none; }

/* Auteur du build (lecture seule) au-dessus du libellé classe */
.bi-author {
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 600;
  color: #f0c040; margin-bottom: 2px; letter-spacing: .3px;
}

/* ═══════════ Récap des aptitudes (Récap du Build, lecture seule) ═══════════ */
.apt-recap {
  margin-top: 12px; cursor: pointer;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  transition: filter .15s;
}
.apt-recap:hover { filter: brightness(1.08); }
.apt-rc-cat {
  background: var(--bg-card); border: 1px solid var(--border2);
  border-radius: 10px; padding: 8px 10px; border-left-width: 3px;
}
.apt-rc-intelligence { border-left-color: #ef4444; }
.apt-rc-force        { border-left-color: #84cc16; }
.apt-rc-agilite      { border-left-color: #a855f7; }
.apt-rc-chance       { border-left-color: #3b82f6; }
.apt-rc-majeur       { border-left-color: #f0c040; }
.apt-rc-head {
  display: flex; align-items: center; gap: 7px; margin-bottom: 7px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.apt-rc-cat-icon { width: 22px; height: 22px; object-fit: contain; }
.apt-rc-cat-name {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 18px;
  text-transform: uppercase; letter-spacing: .4px; color: var(--text-white); flex: 1;
}
.apt-rc-row {
  display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 14px;
}
.apt-rc-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.apt-rc-label {
  flex: 1; color: var(--text2); font-family: 'Rajdhani', sans-serif; font-weight: 500;
  font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apt-rc-val {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px;
  color: var(--text3); min-width: 18px; text-align: right;
}
.apt-rc-val.pos { color: #f0c040; }
.apt-rc-row.has .apt-rc-label { color: var(--text-white); }
/* Le bloc Majeur (9 stats) s'étale sur 2 colonnes pour rester compact */
.apt-rc-majeur { grid-column: span 2; }
.apt-rc-majeur .apt-rc-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px;
}

/* Colonne centrale : card perso (panel-center) + récap aptitudes "dans le vide" */
.center-col {
  display: flex; flex-direction: column; gap: 12px;
  flex-shrink: 0; width: 620px; align-self: flex-start;
}
.center-col .panel-center { width: 100%; flex-shrink: 0; }
/* Le récap garde sa hauteur naturelle (pas d'étirement) */
.center-col .apt-recap { margin-top: 0; }

/* Bouton de fermeture du modal "Nouveau" (visible seulement si un build est en cours) */
.welcome-box { position: relative; }
.welcome-close {
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text2); font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: .15s;
}
.welcome-close:hover { color: #ef4444; border-color: rgba(239,68,68,0.5); }

/* ═══════════ Popup de changement de classe (clic sur l'image perso) ═══════════ */
.class-switch-overlay {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.class-switch-overlay.open { display: flex; animation: tabFade .15s ease; }
.class-switch-box {
  background: var(--bg-card); border: 1px solid var(--border2);
  border-radius: 14px; padding: 20px 22px; box-shadow: 0 12px 48px rgba(0,0,0,0.6);
  max-width: 520px;
}
.class-switch-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 18px;
  text-transform: uppercase; letter-spacing: .5px; color: var(--text-white);
  text-align: center; margin-bottom: 16px;
}
.class-switch-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
.cs-face-btn {
  width: 58px; height: 58px; border-radius: 10px; padding: 0; cursor: pointer;
  background: var(--bg3); border: 2px solid var(--border2); transition: .12s;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--text2); font-weight: 700;
}
.cs-face-btn img { width: 100%; height: 100%; object-fit: contain; }
.cs-face-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.cs-face-btn.active { border-color: #f0c040; box-shadow: 0 0 0 2px rgba(240,192,64,0.3); }
.class-switch-label {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .4px; color: var(--text2);
  margin-bottom: 8px;
}
.class-switch-grid + .class-switch-row { margin-top: 16px; }
.class-switch-row { display: flex; gap: 20px; }
.class-switch-col { flex: 1; }
.class-switch-col .welcome-pills { display: flex; gap: 6px; }

/* Item d'une paire de cité incomplète (épée/anneau) : rouge + croix, stats ignorées */
.slot-item.pair-invalid {
  box-shadow: inset 0 0 0 2px #ef4444, 0 0 14px rgba(239,68,68,0.4) !important;
}
.slot-item.pair-invalid .item-img { filter: grayscale(0.7) brightness(0.6); }
.slot-item.pair-invalid::after {
  content: "✕"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 900; color: #ef4444;
  text-shadow: 0 0 8px rgba(0,0,0,0.9); pointer-events: none; z-index: 4;
}
/* Idem sur la rangée de slots de l'onglet Équipement */
.rslot.pair-invalid {
  box-shadow: inset 0 0 0 2px #ef4444, 0 0 12px rgba(239,68,68,0.4) !important;
}
.rslot.pair-invalid .rslot-img { filter: grayscale(0.7) brightness(0.6); }
.rslot.pair-invalid::after {
  content: "✕"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900; color: #ef4444;
  text-shadow: 0 0 8px rgba(0,0,0,0.9); pointer-events: none; z-index: 4;
}

/* Condition d'activation d'un objet (affichage détaillé) */
.md-condition {
  margin-top: 8px; padding-top: 7px;
  border-top: 1px solid rgba(239,68,68,0.3);
  color: #ef4444; font-weight: 700; font-size: 12px;
  font-family: 'Rajdhani', sans-serif; letter-spacing: .3px;
  display: flex; align-items: center; gap: 5px;
}

/* Boutons ← / → de navigation interne (header) */
.nav-history {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 6px; z-index: 16;
}
.nav-hist-btn {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: .15s;
}
.nav-hist-btn svg { width: 20px; height: 20px; }
.nav-hist-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--text-white);
}
.nav-hist-btn:disabled { opacity: 0.3; cursor: default; }

/* ═══════════ Stuff Public (zone communauté) ═══════════ */
/* Sous-onglets Tous / Certifiés */
.pub-subtabs {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.pub-subtab {
  flex: 1; padding: 9px 14px; border-radius: 9px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  color: var(--text2); font-family: 'Rajdhani', sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: .4px;
  text-transform: uppercase; cursor: pointer; transition: .15s;
}
.pub-subtab:hover { color: var(--text-white); border-color: rgba(var(--accent-rgb), 0.4); }
.pub-subtab.active {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.6);
  color: var(--text-white);
}
/* Compteur de builds disponibles */
.pub-count {
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--text3); margin: 0 0 0 2px; letter-spacing: .3px;
  flex-shrink: 0;
}
/* Bloc auteur (avatar + nom) à gauche de la carte */
.pub-author {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 70px; flex-shrink: 0; padding-right: 10px; margin-right: 4px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.pub-author-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: #1a1d23; border: 2px solid rgba(240,192,64,0.35);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #f0c040; flex-shrink: 0;
}
.pub-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pub-author-name {
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 12px;
  color: var(--text2); text-align: center; line-height: 1.15;
  width: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.pub-author-text {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pub-certif {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: #f0c040; color: #1a1d23; font-size: 9px; font-weight: 900;
  flex-shrink: 0;
}

/* ── Barre compteur + recherche ── */
.pub-count-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 14px 12px 4px 10px;
}
#pubCardsScroll { padding-top: 0; }
.pub-search-wrap {
  position: relative; display: flex; align-items: center;
  flex: 0 1 320px; min-width: 180px;
}
.pub-search-ico {
  position: absolute; left: 11px; width: 15px; height: 15px;
  color: var(--text3); pointer-events: none;
}
.pub-search {
  width: 100%; box-sizing: border-box;
  padding: 8px 30px 8px 32px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--border2);
  color: var(--text-white); font-family: 'Rajdhani', sans-serif;
  font-size: 14px; font-weight: 600; transition: .15s;
}
.pub-search::placeholder { color: var(--text3); font-weight: 500; }
.pub-search:focus { outline: none; border-color: rgba(240,192,64,0.5); }
.pub-search-clear {
  position: absolute; right: 8px; width: 18px; height: 18px;
  border: none; background: transparent; cursor: pointer;
  color: var(--text3); font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: .12s;
}
.pub-search-clear:hover { color: var(--text-white); background: rgba(255,255,255,0.08); }

/* ── Zone profils trouvés ── */
.pub-profiles { margin: 0 12px 0 10px; }
.pub-profiles.has-results {
  margin: 0 12px 14px 10px; padding: 12px 14px;
  background: var(--bg-card); border: 1px solid var(--border2);
  border-radius: 14px;
}
.pub-profiles-label {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px; color: var(--text3);
  margin-bottom: 10px;
}
.pub-profiles-row {
  display: flex; flex-wrap: wrap; gap: 14px;
}
.pub-profile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 72px; cursor: pointer; transition: .12s;
}
.pub-profile:hover .pub-profile-avatar { border-color: #f0c040; }
.pub-profile:hover .pub-profile-name { color: #f0c040; }
.pub-profile-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: #1a1d23; border: 2px solid rgba(240,192,64,0.35);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #f0c040; flex-shrink: 0;
  transition: .12s;
}
.pub-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pub-profile-name {
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 12px;
  color: var(--text2); text-align: center; line-height: 1.15;
  width: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: .12s;
}
.pub-profile-text {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Stuff Public : même carte que « Mes stuff » + colonne auteur à gauche. */
.pub-subtabs { margin-top: 12px; }
.pub-card { display: flex; align-items: center; }
/* Comportement commun : items fixes, sublis APRÈS dans l'espace restant (tronquées si besoin) */
.ms-card-specials { flex: 1 1 auto; min-width: 0; }
.ms-special { min-width: 0; }
.ms-special-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ms-card-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 516px;
}


/* ═══════════ Zone droite : onglets Créer / Buildeur Certifié ═══════════ */
.home-right-tabs {
  display: flex; gap: 10px; margin-bottom: 18px; flex-shrink: 0;
  justify-content: center;
}
.home-right-tab {
  padding: 10px 22px; border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.20);
  color: var(--text2); cursor: pointer; transition: .15s;
  font-family: 'Rajdhani', sans-serif; font-size: 18px; letter-spacing: .3px;
}
.home-right-tab:hover { color: var(--text-white); border-color: rgba(var(--accent-rgb), 0.45); }
.home-right-tab.active {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.6);
  color: var(--text-white);
}

/* ═══════════ Page perso « Les builds de XXX » (zone droite) ═══════════ */
.pub-author { cursor: pointer; }
.pub-author:hover .pub-author-name { color: #f0c040; }
.pub-author:hover .pub-author-avatar { border-color: #f0c040; }

.profile-head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
  flex-shrink: 0; position: relative;
}
.profile-back {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: .15s;
}
.profile-back svg { width: 20px; height: 20px; }
.profile-back:hover { background: rgba(var(--accent-rgb), 0.18); color: var(--text-white); }
.profile-avatar {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: #1a1d23; border: 3px solid rgba(240,192,64,0.4); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: #f0c040;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-id { display: flex; flex-direction: column; gap: 6px; }
.profile-name {
  font-family: 'Rajdhani', sans-serif; font-size: 26px; color: var(--text-white);
}
.profile-role {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .5px; padding: 3px 12px; border-radius: 6px;
}
.profile-role.role-1 { background: rgba(240,192,64,0.16); color: #f0c040; border: 1px solid rgba(240,192,64,0.5); }
.profile-role.role-2 { background: rgba(96,165,250,0.16); color: #60a5fa; border: 1px solid rgba(96,165,250,0.5); }
.profile-role.role-3 { background: rgba(239,68,68,0.16); color: #ef4444; border: 1px solid rgba(239,68,68,0.5); }
.profile-builds { flex: 1; min-height: 0; overflow-y: auto; }

/* Contrôles de rôle sur la page perso (modérateur / admin) */
.profile-rolectl {
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; flex-shrink: 0;
}
.profile-rolectl-label {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px; color: var(--text2); margin-bottom: 8px;
}
.profile-rolectl-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.role-btn {
  padding: 7px 16px; border-radius: 8px; cursor: pointer; transition: .15s;
  background: var(--bg3); border: 1px solid var(--border2); color: var(--text2);
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .3px;
}
.role-btn:hover:not(:disabled) {
  border-color: rgba(240,192,64,0.6); color: #f0c040;
}
.role-btn.current {
  background: rgba(240,192,64,0.14); border-color: rgba(240,192,64,0.5);
  color: #f0c040; cursor: default;
}

/* Avatar custom : pas de fond coloré derrière l'image */
.pub-author-avatar:has(img.custom-av),
.profile-avatar:has(img.custom-av),
.account-avatar:has(img.custom-av),
.acc-avatar-big:has(img.custom-av) {
  background: transparent !important;
}

/* Build favori (certifié) : contour doré + étoile */
.ms-card.is-favorite {
  border-color: #f0c040 !important;
  box-shadow: 0 0 0 1px #f0c040, 0 0 18px rgba(240,192,64,0.35) !important;
}
.ms-fav-badge {
  position: absolute; top: 8px; left: 8px; z-index: 5;
  color: #f0c040; font-size: 18px; line-height: 1;
  text-shadow: 0 0 6px rgba(0,0,0,0.7);
  pointer-events: none;
}

/* ═══════════ Zone « Buildeur Certifié » ═══════════ */
.certif-search-wrap { margin-bottom: 14px; flex-shrink: 0; }
.certif-search {
  width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 9px;
  background: var(--bg3); border: 1px solid var(--border2); color: var(--text-white);
  font-family: 'Rajdhani', sans-serif; font-size: 15px;
}
.certif-search::placeholder { color: var(--text3); }
.certif-search:focus { outline: none; border-color: rgba(240,192,64,0.5); }
.certif-list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.certif-row {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border2); border-radius: 14px;
  padding: 12px 14px; transition: .15s;
}
.certif-row:hover { border-color: rgba(240,192,64,0.45); }
.certif-author {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 84px; flex-shrink: 0;
}
.certif-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: #1a1d23; border: 2px solid rgba(240,192,64,0.4); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #f0c040;
}
.certif-avatar img { width: 100%; height: 100%; object-fit: cover; }
.certif-name {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
  color: var(--text-white); text-align: center; line-height: 1.15;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.certif-fav { flex: 1; min-width: 0; }
.certif-fav .ms-card { width: 100%; cursor: pointer; }
.certif-fav-empty {
  color: var(--text3); font-family: 'Rajdhani', sans-serif; font-size: 14px;
  font-style: italic; padding: 16px; text-align: center;
}

/* Boutons nourriture (en-tête Statistiques) */
.food-buttons {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 5px;
}
.food-btn {
  width: 30px; height: 30px; border-radius: 8px; padding: 2px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center; transition: .12s;
  filter: grayscale(0.8) brightness(0.7); opacity: 0.7;
}
.food-btn img { width: 100%; height: 100%; object-fit: contain; }
.food-btn:hover { border-color: rgba(240,192,64,0.5); opacity: 1; filter: grayscale(0.3) brightness(0.9); }
.food-btn.on {
  background: rgba(240,192,64,0.16); border-color: #f0c040;
  filter: none; opacity: 1;
  box-shadow: 0 0 8px rgba(240,192,64,0.3);
}

/* Bouton Cœur de Lumière (Huppermage) à gauche de "Maîtrise" */
.coeur-btn {
  width: 26px; height: 26px; border-radius: 7px; padding: 2px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border2);
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 8px; transition: .12s; vertical-align: middle;
  filter: grayscale(0.7) brightness(0.7); opacity: 0.7;
}
.coeur-btn img { width: 100%; height: 100%; object-fit: contain; }
.coeur-btn:hover { border-color: rgba(240,192,64,0.5); opacity: 1; }
.coeur-btn.on {
  background: rgba(240,192,64,0.18); border-color: #f0c040;
  filter: none; opacity: 1; box-shadow: 0 0 8px rgba(240,192,64,0.4);
}
/* Maîtrise boostée par le Cœur de Lumière : l'effet de flamme (canvas)
   est dessiné par coeur-flame.js. La classe sert de marqueur, pas de style. */
.elem-float.coeur-glow { border-radius: 10px; }

/* ═══════════ Sorts & Passifs ═══════════ */
.sp-layout { flex: 1; display: flex; gap: 14px; padding: 14px; min-height: 0; }
.sp-left  { flex: 1.4; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sp-right { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  border-left: 1px solid var(--border2); padding-left: 14px; }

.sp-grid-block { flex-shrink: 0; }
.sp-grid-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .6px; color: var(--text2); margin-bottom: 6px;
}
.sp-grid { display: grid; grid-template-columns: repeat(6, 48px); gap: 6px; justify-content: start; }
.sp-grid-passive { grid-template-columns: repeat(6, 48px); }
.sp-slot {
  width: 48px; height: 48px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center; transition: .12s; position: relative;
}
.sp-slot:hover:not(.locked) { border-color: rgba(240,192,64,0.5); background: rgba(240,192,64,0.06); }
.sp-slot.locked { cursor: default; background: rgba(0,0,0,0.25); border-style: dashed; opacity: .6; }
.sp-slot.filled { background: rgba(240,192,64,0.1); border-color: rgba(240,192,64,0.4); }
.sp-slot.drag-over { border-color: #f0c040; background: rgba(240,192,64,0.15); }
.sp-slot img { width: 82%; height: 82%; object-fit: contain; }
.sp-plus { font-size: 20px; color: var(--text3); font-weight: 300; }
.sp-lock { font-size: 10px; color: var(--text3); font-family: 'Rajdhani',sans-serif; font-weight: 600; text-align: center; }

.sp-detail {
  flex: 1; min-height: 0; overflow-y: auto;
  background: rgba(0,0,0,0.2); border: 1px solid var(--border2); border-radius: 10px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.sp-detail-empty { margin: auto; color: var(--text3); font-family: 'Rajdhani',sans-serif; font-size: 14px; text-align: center; }
.sp-detail-head { display: flex; align-items: center; gap: 10px; }
.sp-detail-ico { width: 40px; height: 40px; flex-shrink: 0; }
.sp-detail-ico img { width: 100%; height: 100%; object-fit: contain; }
.sp-detail-name { font-family: 'Rajdhani', sans-serif; font-size: 17px; color: var(--text-white); }
.sp-detail-desc { font-size: 13px; color: var(--text2); line-height: 1.5; }

.sp-tabs { display: flex; gap: 8px; flex-shrink: 0; }
.sp-tab {
  flex: 1; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: .15s;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border2); color: var(--text2);
  font-family: 'Rajdhani', sans-serif; font-size: 15px;
}
.sp-tab:hover { color: var(--text-white); }
.sp-tab.active { background: rgba(240,192,64,0.14); border-color: rgba(240,192,64,0.5); color: #f0c040; }

.sp-pool { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.sp-pool-empty { margin: auto; text-align: center; }
.sp-pool-empty-title { font-family: 'Rajdhani', sans-serif; font-size: 17px; color: var(--text2); }
.sp-pool-empty-sub { font-family: 'Rajdhani',sans-serif; font-size: 13px; color: var(--text3); font-style: italic; margin-top: 4px; }
.sp-pool-item {
  display: flex; align-items: center; gap: 10px; cursor: grab;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border2); border-radius: 9px;
  padding: 8px 10px; transition: .12s;
}
.sp-pool-item:hover { border-color: rgba(240,192,64,0.5); background: rgba(240,192,64,0.06); }
.sp-pool-item:active { cursor: grabbing; }
.sp-pool-ico { width: 34px; height: 34px; flex-shrink: 0; }
.sp-pool-ico img { width: 100%; height: 100%; object-fit: contain; }
.sp-pool-name { font-family: 'Rajdhani',sans-serif; font-weight: 700; font-size: 14px; color: var(--text-white); }
.sp-pool-desc { font-size: 12px; color: var(--text2); line-height: 1.3; }

/* Passif non disponible (niveau du build trop bas) → rouge */
.sp-pool-item.unavailable {
  opacity: 0.85; cursor: not-allowed;
  border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.07);
}
.sp-pool-item.unavailable .sp-pool-name,
.sp-pool-item.unavailable .sp-pool-desc { color: #ef4444; }
.sp-pool-item.unavailable .sp-pool-ico img { filter: grayscale(0.6) brightness(0.7); }
.sp-pool-lvl {
  margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--text3);
  font-family: 'Rajdhani', sans-serif;
}
.sp-pool-item.unavailable .sp-pool-lvl { color: #ef4444; }

/* ── Liste des passifs en icônes (onglet droit) ── */
.sp-pool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, 52px);
  gap: 8px; justify-content: start; align-content: start;
}
.sp-pool-ico-btn {
  position: relative; width: 52px; height: 52px; border-radius: 10px; cursor: grab;
  background: linear-gradient(150deg, rgba(225,204,130,0.28), rgba(225,204,130,0.06) 65%, var(--bg-card));
  border: 1px solid rgba(225,204,130,0.45);
  display: flex; align-items: center; justify-content: center; transition: .12s;
}
.sp-pool-ico-btn:hover { border-color: #e1cc82; box-shadow: 0 0 10px rgba(225,204,130,0.35); }
.sp-pool-ico-btn:active { cursor: grabbing; }
.sp-pool-ico-btn img { width: 80%; height: 80%; object-fit: contain; }
.sp-pool-ico-lvl {
  position: absolute; bottom: -2px; right: -2px;
  font-size: 10px; font-weight: 700; font-family: 'Rajdhani',sans-serif;
  background: rgba(0,0,0,0.8); color: #e1cc82; border-radius: 5px; padding: 0 4px;
}
.sp-pool-ico-btn.unavailable {
  cursor: not-allowed; border-color: rgba(239,68,68,0.5);
  background: linear-gradient(150deg, rgba(239,68,68,0.18), rgba(239,68,68,0.04) 65%, var(--bg-card));
}
.sp-pool-ico-btn.unavailable img { filter: grayscale(0.7) brightness(0.6); }
.sp-pool-ico-btn.unavailable .sp-pool-ico-lvl { color: #ef4444; }

/* Cases passives : dégradé doré e1cc82 */
.sp-grid-passive .sp-slot {
  background: linear-gradient(150deg, rgba(225,204,130,0.18), rgba(225,204,130,0.04) 65%, rgba(255,255,255,0.02));
}
.sp-grid-passive .sp-slot.filled {
  background: linear-gradient(150deg, rgba(225,204,130,0.32), rgba(225,204,130,0.08) 65%, var(--bg-card));
  border-color: rgba(225,204,130,0.5);
}
.sp-grid-passive .sp-slot.locked {
  background: rgba(0,0,0,0.25);
}

/* Tooltip des passifs — même style que les objets (dégradé + texte clair) */
.sp-pool-tip {
  position: fixed; z-index: 9999; display: none; pointer-events: none;
  max-width: 280px; padding: 11px 14px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in srgb, rgb(225,204,130) 22%, #131519) 0%,
    color-mix(in srgb, rgb(225,204,130) 8%, #131519) 45%,
    #131519 100%);
  border: 1.5px solid rgba(225,204,130,0.65);
  box-shadow: 0 4px 30px rgba(225,204,130,0.35), 0 0 0 1px rgba(225,204,130,0.12);
  font-family: 'Rajdhani', sans-serif; color: #e8f0f8;
}
.sp-pool-tip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.sp-pool-tip-head img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.sp-pool-tip-name { font-weight: 700; color: #ffffff; font-size: 15px; }
.sp-pool-tip-lvl { margin-left: auto; font-size: 12px; color: rgba(255,255,255,0.6); font-weight: 600; }
.sp-pool-tip-lvl.lock { color: #ef4444; }
.sp-pool-tip-desc { font-size: 13px; color: #e8f0f8; line-height: 1.5; }
.sp-pool-tip-locked { margin-top: 6px; font-size: 11.5px; color: #ef4444; font-style: italic; }

/* Carte Sorts & Passifs : ne dépasse pas, scroll interne */
.carac-sorts-card { max-height: 100%; }
.sp-pool { overflow-y: auto; }

/* Texte d'effet d'un objet (fiche de recherche) */
.md-effet {
  margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11.5px; line-height: 1.45; color: rgba(230,240,255,0.85);
}

/* ── Fondu out-puis-in entre onglets du builder ── */
.tab-page.tab-fading-out {
  display: flex !important;
  animation: tabFadeOut 0.25s ease forwards;
  pointer-events: none;
}
.tab-page.active { animation: tabFadeIn 0.25s ease; }
@keyframes tabFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes tabFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Fondu générique out/in (sous-cartes Équipement & Enchantement) ── */
.fade-out-soft { animation: tabFadeOut 0.25s ease forwards; pointer-events: none; }
.fade-in-soft  { animation: tabFadeIn  0.25s ease; }

/* ── Dégradé de fond teinté classe (haut → bas) sur les cartes sans fond ── */
.panel-stats,
.carac-summary-card,
.equip-left-card,
.recherche-box,
.panel-center,
.panel-right-col .notes-block {
  background: linear-gradient(to bottom, rgba(var(--classe-rgb), 0.10), var(--bg-card) 55%) !important;
}
/* Les sous-onglets restent transparents pour laisser voir le dégradé de la carte */
#equipLeftStats, #equipLeftCompare { background: transparent !important; }

/* ── Bordure néon fine (couleur classe) + profondeur sur les cartes-panneaux ── */
.panel-stats,
.panel-center,
.panel-right,
.equip-left-card,
.recherche-box,
.carac-summary-card,
.carac-sorts-card,
.ench-left-body,
.panel-right-col .notes-block {
  border: 1px solid rgba(var(--classe-rgb), 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(var(--classe-rgb), 0.18),
    0 0 14px rgba(var(--classe-rgb), 0.28),
    0 18px 40px rgba(0, 0, 0, 0.75),
    0 6px 14px rgba(0, 0, 0, 0.55) !important;
}

/* Colonnes de caractéristiques : néon de la couleur de chaque catégorie */
.apt-card {
  border: 1px solid rgba(var(--apt-color-rgb, 200,200,200), 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(var(--apt-color-rgb, 200,200,200), 0.18),
    0 0 14px rgba(var(--apt-color-rgb, 200,200,200), 0.28),
    0 18px 40px rgba(0, 0, 0, 0.75),
    0 6px 14px rgba(0, 0, 0, 0.55) !important;
}

/* Cartes Épique / Relique : néon de leur couleur respective */
.ench-card-epique {
  border: 1px solid rgba(195, 124, 167, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(195, 124, 167, 0.18),
    0 0 14px rgba(195, 124, 167, 0.28),
    0 18px 40px rgba(0, 0, 0, 0.75),
    0 6px 14px rgba(0, 0, 0, 0.55) !important;
}
.ench-card-relique {
  border: 1px solid rgba(177, 148, 210, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(177, 148, 210, 0.18),
    0 0 14px rgba(177, 148, 210, 0.28),
    0 18px 40px rgba(0, 0, 0, 0.75),
    0 6px 14px rgba(0, 0, 0, 0.55) !important;
}

/* Badges « équipé » Épique / Relique (onglets Caractéristiques & Enchantement) */
.carac-sp.epique.filled,
.ench-eq-special.epique.filled:not(.ench-drop-hover) {
  border: 1px solid rgba(195, 124, 167, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(195, 124, 167, 0.18),
    0 0 14px rgba(195, 124, 167, 0.28),
    0 12px 30px rgba(0, 0, 0, 0.7) !important;
}
.carac-sp.relique.filled,
.ench-eq-special.relique.filled:not(.ench-drop-hover) {
  border: 1px solid rgba(177, 148, 210, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(177, 148, 210, 0.18),
    0 0 14px rgba(177, 148, 210, 0.28),
    0 12px 30px rgba(0, 0, 0, 0.7) !important;
}

/* Carte Sublimations : néon couleur de classe */
.ench-card-subli {
  border: 1px solid rgba(var(--classe-rgb), 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(var(--classe-rgb), 0.18),
    0 0 14px rgba(var(--classe-rgb), 0.28),
    0 18px 40px rgba(0, 0, 0, 0.75),
    0 6px 14px rgba(0, 0, 0, 0.55) !important;
}

/* Titres Épique/Relique au-dessus des ombres des cartes voisines */
.ench-section-title { position: relative; z-index: 2; }

/* ── Niveau de chasse : barre flottante (sans conteneur) + label lisible ── */
.ench-chasse-level {
  background: transparent !important;
  border: none !important;
}
.ench-clevel-label {
  color: #f1f5f9 !important;
  font-weight: 700;
  font-size: 13px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ── Cartes de stats du Récap : néon de la couleur de catégorie + z-index ── */
.apt-rc-cat {
  position: relative;
  z-index: 2;   /* au-dessus de l'ombre portée du perso */
  border: 1px solid rgba(var(--aptrc-rgb, 200,200,200), 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(var(--aptrc-rgb, 200,200,200), 0.18),
    0 0 14px rgba(var(--aptrc-rgb, 200,200,200), 0.28),
    0 12px 30px rgba(0, 0, 0, 0.7) !important;
}
.apt-rc-intelligence { --aptrc-rgb: 239, 68, 68; }
.apt-rc-force        { --aptrc-rgb: 132, 204, 22; }
.apt-rc-agilite      { --aptrc-rgb: 168, 85, 247; }
.apt-rc-chance       { --aptrc-rgb: 59, 130, 246; }
.apt-rc-majeur       { --aptrc-rgb: 240, 192, 64; }

/* Slots du Récap du build : un slot « actif » (en cours d'équipement)
   ne doit pas garder le contour de sélection — il reprend son contour de base. */
.builder-zone .slot-item.active {
  box-shadow:
    inset 0 0 0 1.5px var(--drop-color, rgba(255,255,255,0.15)),
    0 2px 8px rgba(0,0,0,0.5);
}
.builder-zone .slot-item.active:hover {
  box-shadow:
    inset 0 0 0 1.5px var(--drop-color, rgba(255,255,255,0.35)),
    0 4px 16px rgba(0,0,0,0.6),
    0 0 12px var(--drop-color-glow, rgba(255,255,255,0.08));
}

/* ── Bouton « Activer le Cœur de Lumière » (pill dans Trier par) ── */
.coeur-sort-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 18px;
  border: 1px solid var(--border2); background: transparent;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .5px; color: var(--text3); cursor: pointer;
  transition: all .15s; position: relative;
}
.coeur-sort-btn img { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0; filter: grayscale(0.6) brightness(0.8); }
.coeur-sort-btn:hover { color: var(--text2); border-color: rgba(240,192,64,0.5); }
.coeur-sort-btn.on {
  background: rgba(240,192,64,0.16); border-color: #f0c040; color: #f0c040;
}
.coeur-sort-btn.on img { filter: none; }

/* ── Pill « Activer Dénouement » (rose, outil de comparaison) ── */
.sf-denou-row {
  display: flex; justify-content: center;
  margin: 8px 0 2px;
}
.denou-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 18px;
  border: 1px solid var(--border2); background: transparent;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .5px; color: var(--text3); cursor: pointer;
  transition: all .15s; position: relative;
}
.denou-pill img { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0; filter: grayscale(0.6) brightness(0.8); }
.denou-pill:hover { color: var(--text2); border-color: rgba(236,72,153,0.55); }
.denou-pill.on {
  background: rgba(236,72,153,0.18); border-color: #ec4899; color: #f9a8d4;
  box-shadow: 0 0 14px rgba(236,72,153,0.45);
}
.denou-pill.on img { filter: none; }

/* Affichage Dénouement sur les lignes de stats d'item */
.denou-strike { text-decoration: line-through; opacity: 0.65; }
.denou-elem   { color: #ec4899; font-weight: 700; }

/* ════════════════ THÈME CLAIR (doux, gris très pâle) ════════════════
   Activé par body.theme-light. Ne touche qu'aux couleurs structurelles ;
   accents, raretés et éléments restent identiques. */
body.theme-light {
  --bg:           #e8e2d6;
  --bg2:          #f0ebe0;
  --bg3:          #f6f2e9;
  --bg-card:      #fdfaf3;
  --bg-header:    #f2ece0;
  --border:       rgba(20,24,35,0.10);
  --border2:      rgba(20,24,35,0.16);
  --text:         #1a1d24;
  --text2:        rgba(20,24,32,0.92);
  --text3:        rgba(20,24,32,0.78);
  --text-white:   #000000;
}
/* Ajustements ciblés : zones qui utilisaient du blanc/noir transparent en dur
   et qui ont besoin d'un coup de pouce en clair. */
body.theme-light .builder-bg-overlay,
body.theme-light .stage-bg { filter: brightness(1.4) saturate(0.9); }

/* Label « Niveau de châsse » : noir en clair (était forcé blanc) */
body.theme-light .ench-clevel-label { color: #1a1d24 !important; }

/* Badges sublimation spéciale (Abnégation/Absolution) : texte foncé lisible en clair */
body.theme-light .subli-special-badge.epique  { color: #722442 !important; }
body.theme-light .subli-special-badge.relique { color: #4b1528 !important; }
body.theme-light .subli-special-badge.epique  .badge-val { color: #722442 !important; }
body.theme-light .subli-special-badge.relique .badge-val { color: #3c2860 !important; }
body.theme-light .subli-special-badge .badge-label { opacity: 1 !important; color: #1a1d24 !important; }

/* Comparateur : texte foncé en mode clair (était blanc) */
body.theme-light .cmp-stat-lbl,
body.theme-light .cmp-card,
body.theme-light .cmp-stat-val { color: #1a1d24 !important; }

/* Vue détaillée des items : labels et valeurs de stats en foncé */
body.theme-light .dstat-label,
body.theme-light .dstat-val { color: #1a1d24 !important; }

/* Noms d'objets (récap enchantement, grille) en foncé pour lisibilité */
body.theme-light .enchant-item-name { color: #1a1d24 !important; }

/* Dégradé de classe plus marqué en clair (0.10 invisible sur blanc) */
body.theme-light .panel-stats,
body.theme-light .panel-center,
body.theme-light .panel-right,
body.theme-light .equip-left-card,
body.theme-light .recherche-box,
body.theme-light .carac-summary-card,
body.theme-light .carac-sorts-card {
  background: linear-gradient(to bottom, rgba(var(--classe-rgb), 0.22), var(--bg-card) 60%) !important;
}

/* Tooltips d'item / sublimation : fond clair dégradé + texte foncé
   (l'élément #drop-tooltip a un style inline noir, on le surcharge) */
body.theme-light #drop-tooltip,
body.theme-light #ench-subli-tooltip {
  border: 1px solid rgba(20,24,35,0.14);
  box-shadow: 0 10px 30px rgba(40,50,70,0.22);
}
body.theme-light #drop-tooltip,
body.theme-light #drop-tooltip span,
body.theme-light #drop-tooltip div,
body.theme-light #drop-tooltip em,
body.theme-light #ench-subli-tooltip,
body.theme-light #ench-subli-tooltip span,
body.theme-light #ench-subli-tooltip div,
body.theme-light #ench-subli-tooltip em { color: #1a1d24 !important; }

/* Textes en couleur du thème : ombre fine pour ressortir sur fond clair
   (évite de devoir foncer chaque couleur au cas par cas) */
body.theme-light .header-logo,
body.theme-light .panel-title,
body.theme-light .search-slot-title,
body.theme-light .welcome-title,
body.theme-light .bi-line1,
body.theme-light .ench-section-title,
body.theme-light .cs-class-name,
body.theme-light .apt-title,
body.theme-light .sorts-placeholder-title,
body.theme-light .apt-rc-cat .apt-rc-title,
body.theme-light .stats-section-title-center,
body.theme-light .mastery-total-label,
body.theme-light .level-range-display {
  text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 0 1px rgba(0,0,0,0.4);
}

/* Grandes cartes Épique / Relique (zones de dépôt) : fond clair teinté */
body.theme-light .ench-spec-big-card.epique {
  background: linear-gradient(160deg, rgba(195,124,167,.16) 0%, var(--bg-card) 65%);
}
body.theme-light .ench-spec-big-card.relique {
  background: linear-gradient(160deg, rgba(177,148,210,.16) 0%, var(--bg-card) 65%);
}

/* Slots d'objets dans l'enchantement (colonne gauche) */
body.theme-light .ench-objet-pill,
body.theme-light .ench-objet-slot { background: var(--bg3); }

/* Cartes d'items de la grille : le dégradé utilise déjà var(--bg3), rien à faire.
   Slots vides châsses : éclaircir le fond gris foncé. */
body.theme-light .ench-chasse-empty,
body.theme-light .sp-slot { background: var(--bg3); }

/* Ombres portées noires trop dures sur fond clair → adoucies */
body.theme-light .panel-stats,
body.theme-light .panel-center,
body.theme-light .panel-right,
body.theme-light .equip-left-card,
body.theme-light .recherche-box,
body.theme-light .carac-summary-card,
body.theme-light .carac-sorts-card,
body.theme-light .ench-left-body,
body.theme-light .ench-card-subli {
  box-shadow:
    0 0 0 1px rgba(var(--classe-rgb), 0.20),
    0 0 14px rgba(var(--classe-rgb), 0.18),
    0 10px 28px rgba(40, 50, 70, 0.18) !important;
}

/* ── Lisibilité : texte des stats d'objets plus grand et plus épais ──
   (vue détaillée, comparateur, tooltips item & sublimation) */
.dstat-val, .dstat-label { font-size: 15px !important; font-weight: 600 !important; }
.cmp-stat-val, .cmp-stat-lbl { font-size: 14px !important; font-weight: 600 !important; }
#drop-tooltip, #drop-tooltip span, #drop-tooltip div { font-size: 14.5px !important; }
#drop-tooltip .dstat-val, #drop-tooltip span[style*="font-weight"] { font-weight: 700 !important; }
#ench-subli-tooltip, #ench-subli-tooltip span, #ench-subli-tooltip div { font-size: 14px !important; }

/* Lisibilité : stats du Récap du build +1px (la hauteur de ligne suit le padding) */
.stat-name { font-size: 17px !important; }
.stat-val  { font-size: 18px !important; }

/* Récap stats : espacement réduit autour des titres de section (gagne de la hauteur) */
.stats-section-title-center { margin: 7px 0 6px !important; }
/* Compacte les lignes de stats pour absorber le texte agrandi dans la hauteur fixe */
.stat-row { padding: 4px 2px !important; }
.stats-scroll { padding-top: 8px !important; padding-bottom: 10px !important; }
/* Carte héros (PV/PA/PM/PW) : moins d'espace au-dessus et en-dessous */
.stats-hero { padding: 12px 16px !important; margin-bottom: 10px !important; }

/* Comparateur — cartes vides : texte d'invite plus grand */
.cmp-empty-label { font-size: 22px !important; }
.cmp-empty-sub   { font-size: 14px !important; }

/* Titres en Rajdhani agrandis (remplacement de l'ancienne police décorative) */
.panel-title { font-size: 17px !important; }
.ench-sw-btn { font-size: 17px !important; }
.ench-section-title { font-size: 24px !important; }

/* ════════════ Titres décoratifs en Cormorant italique ════════════
   (les 5 titres de panneaux, titre central, sections, Iop·Niv) */
.panel-title,
.stats-title-text,
.search-slot-title,
.welcome-title,
.bi-line1,
.cs-class-name,
.ench-section-title,
.ench-sw-btn,
.apt-title,
.apt-rc-cat .apt-rc-title,
.sorts-placeholder-title {
  font-family: 'Cormorant', serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
}

/* Titre Iop · Niv. — agrandi */
.bi-line1 { font-size: 22px !important; }
.cs-class-name { font-size: 28px !important; }

/* Flèches retour/avancer masquées (remplacées par bouton Home) */
#navBack, #navForward { display: none !important; }
/* Bouton Home dans la barre de navigation */
.home-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 0 12px; height: 34px; border-radius: 8px;
  background: rgba(var(--accent-rgb),0.10); border: 1px solid rgba(var(--accent-rgb),0.30);
  color: var(--accent); cursor: pointer; transition: all .15s;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
}
.home-nav-btn:hover { background: rgba(var(--accent-rgb),0.18); border-color: var(--accent); }
.home-nav-btn svg { width: 17px; height: 17px; }

/* HOME en thème clair : noms de classes lisibles */
body.theme-light .create-class-name { color: #2a2e38 !important; }

/* Onglets home en vrais boutons encadrés */
.home-tab {
  padding: 9px 22px !important; border-radius: 10px !important;
  border: 1px solid var(--border2) !important; border-bottom: 1px solid var(--border2) !important;
  background: rgba(255,255,255,0.04) !important;
}
.home-tab.active {
  background: rgba(240,192,64,0.16) !important;
  border-color: #f0c040 !important; color: #f0c040 !important;
}
body.theme-light .home-tab { background: rgba(20,24,35,0.04) !important; }
body.theme-light .home-tab.active {
  background: rgba(240,192,64,0.20) !important; border-color: #c79200 !important; color: #9a6b00 !important;
}
/* Bouton thème dans la barre d'onglets home */
.home-tabs .theme-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; min-width: 48px;
  padding: 0 14px; border-radius: 10px; cursor: pointer; margin-left: 4px;
  border: 1px solid transparent; transition: all .15s;
  background: #f1f1ea; color: #14161c; border-color: rgba(0,0,0,0.25);
}
.home-tabs .theme-toggle-btn svg { width: 24px; height: 24px; }
.home-tabs .theme-toggle-btn:hover { filter: brightness(1.08); }
/* En thème clair : bouton sombre pour contraster avec la page claire */
body.theme-light .home-tabs .theme-toggle-btn {
  background: #1c1f27; color: #f1f1ea; border-color: rgba(255,255,255,0.18);
}
body.theme-light .create-class:hover .create-class-name { color: #000 !important; }
body.theme-light .create-class.sel .create-class-name { color: #9a6b00 !important; }

/* Bouton thème sur la home */
.home-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
  background: rgba(var(--accent-rgb),0.10); border: 1px solid rgba(var(--accent-rgb),0.30);
  color: var(--accent); transition: all .15s; margin-left: 10px;
}
.home-theme-btn:hover { background: rgba(var(--accent-rgb),0.18); border-color: var(--accent); }
.home-theme-btn svg { width: 19px; height: 19px; }

/* Lien logo Stratfu (retour stratfu.fr) à gauche des onglets home */
.stratfu-home-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 10px; margin-right: 6px;
  border: 1px solid var(--border2); background: rgba(255,255,255,0.04);
  color: var(--text2); text-decoration: none; transition: all .15s;
}
.stratfu-home-link:hover { color: var(--text-white); border-color: var(--accent); background: rgba(var(--accent-rgb),0.10); }
.stratfu-home-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.stratfu-home-link img { height: 30px; width: auto; border-radius: 6px; display: block; }
body.theme-light .stratfu-home-link { background: rgba(20,24,35,0.04); }

/* Police titres (Cormorant italique) sur les éléments de la home */
.home-title,
.home-tab,
.home-right-tab,
.ms-card-name {
  font-family: 'Cormorant', serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
}

/* Nom du build dans les cards de présentation : +2px */
.ms-card-name { font-size: 18px !important; }

/* Champ nom de build dans le modal de création/modification */
.create-name-input {
  width: 100%; padding: 10px 12px; border-radius: 9px;
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text); font-family: 'Rajdhani', sans-serif; font-size: 14px;
  transition: border-color .15s;
}
.create-name-input:focus { outline: none; border-color: var(--accent); }
.create-name-input::placeholder { color: var(--text3); }

/* Onglet Enchantement : textes +1px et barre de châsse proportionnelle */
.ench-title-text { font-size: 23px !important; }
.ench-clevel-label { font-size: 14px !important; }
.ench-clevel-val { font-size: 14px !important; }
.ench-sw-btn { font-size: 18px !important; }
.ench-clevel-track { height: 32px !important; }
.ench-clevel-tick { width: 4px !important; height: 13px !important; }
.ench-clevel-tick.on { height: 18px !important; }

/* Cards de build : nom +1px, assombries et détachées par une ombre */
.ms-card-name { font-size: 19px !important; }
.ms-card {
  box-shadow: 0 6px 20px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.2) !important;
  border-width: 1.5px !important;
}
.ms-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: rgba(0,0,0,0.10); border-radius: inherit;
}
.ms-card-illus, .ms-card-body, .ms-card-specials { position: relative; z-index: 1; }
.ms-card .ms-card-del { z-index: 6; }
body.theme-light .ms-card {
  box-shadow: 0 6px 18px rgba(40,40,50,0.18), 0 2px 6px rgba(40,40,50,0.12) !important;
}
body.theme-light .ms-card::after { background: rgba(0,0,0,0.05); }

/* Néon autour du sélecteur de config (bas droite home), couleur de la classe */
.create-config {
  border: 1.5px solid rgba(var(--accent-rgb), 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.30),
    0 0 18px rgba(var(--accent-rgb), 0.35),
    0 0 40px rgba(var(--accent-rgb), 0.18) !important;
}

/* Ombre sous le nom des builds pour la lisibilité sur fond clair */
.ms-card-name { text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.4); }

/* Bouton thème du builder : fond contrasté (ressort sur la barre) */
.nav-hist-btn.theme-toggle-btn {
  background: #f1f1ea !important; color: #14161c !important;
  border-color: rgba(0,0,0,0.25) !important;
}
.nav-hist-btn.theme-toggle-btn:hover { filter: brightness(1.08); }
body.theme-light .nav-hist-btn.theme-toggle-btn {
  background: #1c1f27 !important; color: #f1f1ea !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* Nom du build : blanc en sombre, noir en clair (orange peu lisible) */
.ms-card-name { color: #ffffff !important; }
body.theme-light .ms-card-name {
  color: #14161c !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5) !important;
}

/* Footer disclaimer : noir en thème clair */
body.theme-light .legal-disclaimer { color: #2a2e38 !important; }
/* Noms des cartes de caractéristiques agrandis */
.apt-title { font-size: 34px !important; }

/* Cartes de caractéristiques : ombres adoucies en thème clair (le cumul noircissait trop) */
body.theme-light .apt-card {
  box-shadow:
    0 0 0 1px rgba(var(--apt-color-rgb, 200,200,200), 0.18),
    0 0 12px rgba(var(--apt-color-rgb, 200,200,200), 0.20),
    0 8px 20px rgba(40, 45, 60, 0.16),
    0 2px 6px rgba(40, 45, 60, 0.10) !important;
}

/* Pills "Trier par" sélectionnées : lisibles en thème clair */
body.theme-light .sort-pill.active {
  color: #14161c !important;
  background: rgba(var(--accent-rgb), 0.28) !important;
  border-color: rgba(var(--accent-rgb), 0.85) !important;
}
body.theme-light .coeur-sort-btn.on {
  color: #5a3d00 !important;
  background: rgba(240,192,64,0.32) !important;
  border-color: #c79200 !important;
}

/* Glow doré pulsant sur le bouton Cœur de Lumière actif (remplace la flamme) */
@keyframes coeurGlowPulse {
  0%   { box-shadow: 0 0 7px rgba(240,192,64,0.40); }
  25%  { box-shadow: 0 0 11px rgba(240,192,64,0.55); }
  50%  { box-shadow: 0 0 15px rgba(240,192,64,0.70); }
  75%  { box-shadow: 0 0 11px rgba(240,192,64,0.55); }
  100% { box-shadow: 0 0 7px rgba(240,192,64,0.40); }
}
.coeur-sort-btn.on {
  animation: coeurGlowPulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .coeur-sort-btn.on { animation: none; box-shadow: 0 0 12px rgba(240,192,64,0.5); }
}

/* ═══════════════ NOTES DU BUILD ═══════════════ */
/* Bloc cliquable sous le récap enchantement */
.notes-block {
  flex-shrink: 0; margin-top: 10px; padding: 10px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border2); border-radius: 10px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.notes-block:hover { border-color: rgba(240,192,64,0.45); background: rgba(255,255,255,0.05); }
.notes-block.has-notes { border-color: rgba(240,192,64,0.3); }
.notes-block-head {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 1px; color: var(--text2);
  margin-bottom: 6px;
}
.notes-block-head svg { width: 15px; height: 15px; color: #f0c040; flex-shrink: 0; }
.notes-block-preview {
  font-family: 'Rajdhani', sans-serif; font-size: 13px; line-height: 1.4;
  color: var(--text2); max-height: 90px; overflow: hidden;
  position: relative;
}
.notes-block-preview img { max-height: 18px; vertical-align: middle; }
.notes-empty { color: var(--text3); font-style: italic; }

/* Pop-up éditeur */
.notes-overlay {
  position: absolute; inset: 0; z-index: 500;
  width: 1920px; height: 1080px;
  background: rgba(5,6,10,0.82); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  box-sizing: border-box; padding: 24px;
}
.notes-overlay.open { display: flex; gap: 16px; animation: tabFade .2s ease; }
.notes-modal {
  width: 860px; max-width: 860px; height: 1000px; max-height: 1000px;
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border2);
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  overflow: hidden;
}
.notes-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border2);
}
.notes-modal-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: .5px; color: var(--text-white);
}
.notes-close {
  width: 28px; height: 28px; border: none; background: transparent;
  color: var(--text3); font-size: 16px; cursor: pointer; border-radius: 6px;
  transition: .12s;
}
.notes-close:hover { color: var(--text-white); background: rgba(255,255,255,0.08); }

/* Barre d'outils */
.notes-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 12px 16px; border-bottom: 1px solid var(--border2);
  background: rgba(0,0,0,0.18);
}
.ntb {
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--border2); background: rgba(255,255,255,0.03);
  color: var(--text2); border-radius: 8px; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: .12s;
}
.ntb:hover { color: var(--text-white); border-color: rgba(240,192,64,0.5); background: rgba(240,192,64,0.08); }
.ntb-sep { width: 1px; height: 28px; background: var(--border2); margin: 0 6px; }
.ntb-select {
  height: 30px; padding: 0 8px; border-radius: 7px;
  border: 1px solid var(--border2); background: var(--bg3); color: var(--text-white);
  font-family: 'Rajdhani', sans-serif; font-size: 13px; cursor: pointer;
}
.ntb-select:focus { outline: none; border-color: rgba(240,192,64,0.5); }
.ntb-colors { display: flex; gap: 5px; }
.ntb-color {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.15); transition: .12s; padding: 0;
}
.ntb-color:hover { transform: scale(1.15); border-color: rgba(255,255,255,0.5); }

/* Zone éditable */
.notes-editor {
  flex: 1; min-height: 240px; overflow-y: auto;
  padding: 16px 18px; outline: none;
  font-family: 'Rajdhani', sans-serif; font-size: 15px; line-height: 1.55;
  color: var(--text); background: transparent;
}
.notes-editor:empty::before {
  content: attr(data-placeholder); color: var(--text3); font-style: italic;
}
.notes-editor img { max-height: 22px; vertical-align: middle; margin: 0 1px; }
.notes-editor ul { padding-left: 22px; margin: 6px 0; }

.notes-modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-top: 1px solid var(--border2);
}
.notes-hint { font-family: 'Rajdhani', sans-serif; font-size: 12px; color: var(--text3); }
.notes-save-btn {
  padding: 9px 26px; border: none; border-radius: 20px;
  background: linear-gradient(180deg, #f0c040, #d4a020); color: #1a1a1a;
  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 14px;
  letter-spacing: .5px; cursor: pointer; transition: .15s;
}
.notes-save-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(240,192,64,0.3); }

/* ── Colonne droite : Récap Enchantement (haut) + card Notes (bas) ── */
.panel-right-col {
  display: flex; flex-direction: column; gap: 12px;
  flex-shrink: 0;
  align-self: stretch;
  height: calc(1080px - 52px - 44px - 44px);   /* hauteur fixe stage, marge anti-débordement */
  max-height: calc(1080px - 52px - 44px - 44px);
}

.panel-right-col .panel-right {
  width: 100%; flex: 1 1 auto; min-height: 0;
  max-height: none;
}
.panel-right-col .notes-block {
  flex: 0 0 140px; height: 140px; margin-top: 0;   /* hauteur fixe : ne bouge jamais */
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border2); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  padding: 14px 16px;
}
.panel-right-col .notes-block-preview {
  flex: 1; max-height: none; overflow-y: auto;
}

/* Champ taille en pixels (barre d'outils Notes) */
.ntb-size-wrap {
  display: inline-flex; align-items: center; gap: 2px;
  height: 38px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--border2); background: var(--bg3);
}
.ntb-size-input {
  width: 44px; height: 32px; border: none; background: transparent;
  color: var(--text-white); font-family: 'JetBrains Mono', monospace;
  font-size: 15px; text-align: center; -moz-appearance: textfield;
}
.ntb-size-input::-webkit-outer-spin-button,
.ntb-size-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ntb-size-input:focus { outline: none; }
.ntb-size-unit { font-family: 'Rajdhani', sans-serif; font-size: 13px; color: var(--text3); }

/* Color picker personnalisé (toile hexa native + champ code) */
.ntb-custom-color {
  display: inline-flex; align-items: center; gap: 4px;
  height: 38px; padding: 0 6px; border-radius: 8px;
  border: 1px solid var(--border2); background: var(--bg3);
}
.ntb-color-native {
  width: 30px; height: 30px; padding: 0; border: none; border-radius: 6px;
  background: transparent; cursor: pointer;
}
.ntb-color-native::-webkit-color-swatch-wrapper { padding: 0; }
.ntb-color-native::-webkit-color-swatch { border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; }
.ntb-color-native::-moz-color-swatch { border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; }
.ntb-hex-input {
  width: 76px; height: 32px; border: none; background: transparent;
  color: var(--text-white); font-family: 'JetBrains Mono', monospace;
  font-size: 13px; text-align: center;
}
.ntb-hex-input::placeholder { color: var(--text3); }
.ntb-hex-input:focus { outline: none; }

/* ═══════════════ VARIANTES DE BUILD ═══════════════ */
.variants-bar { flex-shrink: 0; }
.variants-bar:empty { display: none; }
/* Card englobante (sous les notes) */
.variants-bar.has-variants,
.panel-right-col .variants-bar {
  background: linear-gradient(to bottom, rgba(var(--classe-rgb), 0.10), var(--bg-card) 55%);
  border: 1px solid rgba(var(--classe-rgb), 0.45);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  padding: 12px 14px;
}
.variants-tabs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.variant-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.03); color: var(--text2);
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .5px; cursor: pointer; transition: .12s;
}
.variant-tab:hover { color: var(--text-white); background: rgba(255,255,255,0.07); }
.variant-tab.on {
  color: var(--text-white);
  background: linear-gradient(180deg, rgba(var(--classe-rgb),0.25), rgba(var(--classe-rgb),0.08));
  border-color: rgba(var(--classe-rgb),0.6);
}
.variant-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 10px; color: var(--text3);
  background: rgba(0,0,0,0.3); transition: .12s;
}
.variant-del:hover { color: #fff; background: #e05050; }
.variant-add {
  padding: 7px 14px; border-radius: 8px;
  border: 1px dashed rgba(240,192,64,0.5); background: transparent;
  color: #f0c040; font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .5px; cursor: pointer; transition: .12s;
}
.variant-add:hover { background: rgba(240,192,64,0.1); border-color: #f0c040; }
.variants-lock-msg {
  margin-top: 6px; padding: 7px 11px; border-radius: 7px;
  background: rgba(240,192,64,0.08); border: 1px solid rgba(240,192,64,0.25);
  color: #d9b96a; font-family: 'Rajdhani', sans-serif; font-size: 11.5px;
  line-height: 1.4;
}

/* Badge de variante active sous le nom du build */
.bi-variant {
  display: inline-block; margin: 3px auto 0;
  padding: 2px 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--classe-rgb),0.3), rgba(var(--classe-rgb),0.12));
  border: 1px solid rgba(var(--classe-rgb),0.55);
  color: var(--text-white); font-family: 'Rajdhani', sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
}

/* Menu de tailles rapides (custom) dans la barre d'outils Notes */
.ntb-size-wrap { position: relative; }
.ntb-size-caret {
  border: none; background: transparent; cursor: pointer;
  color: var(--text3); font-size: 11px; padding: 0 2px; height: 30px;
  display: inline-flex; align-items: center;
}
.ntb-size-caret:hover { color: var(--text-white); }
.ntb-size-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 10;
  background: var(--bg-card); border: 1px solid var(--border2);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  min-width: 130px;
}
.ntb-size-menu[hidden] { display: none; }
.ntb-size-opt {
  border: 1px solid transparent; background: rgba(255,255,255,0.03);
  color: var(--text2); border-radius: 6px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
  padding: 6px 0; transition: .1s;
}
.ntb-size-opt:hover { color: var(--text-white); border-color: rgba(240,192,64,0.5); background: rgba(240,192,64,0.1); }

/* ═══════════════ NOTES : recherche & insertion d'assets ═══════════════ */
.notes-body { flex: 1; display: flex; min-height: 0; }
.notes-body .notes-editor { flex: 1; }
/* Card de recherche autonome, à droite du modal */
.notes-assets {
  width: 500px; flex-shrink: 0; height: 1000px; max-height: 1000px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border2);
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  padding: 16px;
}
.na-head {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 1px; color: var(--text2);
}
.na-filters { display: flex; gap: 6px; }
.na-filter {
  flex: 1; padding: 7px 0; border-radius: 8px;
  border: 1px solid var(--border2); background: rgba(255,255,255,0.03);
  color: var(--text2); font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 13px; cursor: pointer; transition: .12s;
}
.na-filter:hover { color: var(--text-white); }
.na-filter.on {
  color: var(--text-white);
  background: linear-gradient(180deg, rgba(240,192,64,0.25), rgba(240,192,64,0.08));
  border-color: rgba(240,192,64,0.6);
}
.na-search {
  width: 100%; height: 34px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--border2); background: var(--bg3); color: var(--text-white);
  font-family: 'Rajdhani', sans-serif; font-size: 14px;
}
.na-search:focus { outline: none; border-color: rgba(240,192,64,0.5); }
.na-results {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  align-content: start;
}
.na-empty { grid-column: 1 / -1; color: var(--text3); font-style: italic; font-size: 13px; padding: 8px; }
.na-row {
  display: flex; align-items: center; gap: 9px; padding: 5px 7px;
  border-radius: 7px; cursor: pointer; transition: background .1s;
}
.na-row:hover { background: rgba(255,255,255,0.06); }
.na-thumb {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 7px;
  border: 1.5px solid var(--c); background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.na-thumb img { width: 100%; height: 100%; object-fit: contain; }
.na-name {
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 14px;
  line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Asset inséré dans les notes (mini-card inline) */
.note-asset {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px 1px 3px; margin: 0 1px; border-radius: 6px;
  border: 1px solid currentColor; background: rgba(255,255,255,0.05);
  font-weight: 700; vertical-align: middle; cursor: default;
  white-space: nowrap;
}
.note-asset-img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.note-asset-name { font-family: 'Rajdhani', sans-serif; font-size: inherit; }

/* Vignette de séquence (sublimations normales : gemmes) */
.na-thumb-seq { gap: 1px; padding: 2px; }
.na-thumb-seq img { width: auto !important; height: 14px !important; }
.note-asset-seq { display: inline-flex; align-items: center; gap: 1px; }
.note-asset-seq img { width: 14px; height: 14px; object-fit: contain; }

/* ── Sous-filtres du panneau de recherche Notes ── */
.na-subfilters { display: flex; flex-direction: column; gap: 7px; }
.naf-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.naf-rarity { gap: 7px; }
.naf-gem, .naf-slot, .naf-logo {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border2); background: rgba(255,255,255,0.03);
  border-radius: 7px; cursor: pointer; padding: 0; transition: .12s;
  opacity: .4; filter: grayscale(0.6);
}
.naf-gem { width: 30px; height: 30px; }
.naf-slot { width: 30px; height: 30px; }
.naf-logo { width: 34px; height: 30px; }
.naf-gem img, .naf-slot img, .naf-logo img { width: 20px; height: 20px; object-fit: contain; }
.naf-gem.on, .naf-slot.on, .naf-logo.on {
  opacity: 1; filter: none;
  border-color: rgba(240,192,64,0.6); background: rgba(240,192,64,0.1);
}
.naf-gem:hover, .naf-slot:hover, .naf-logo:hover { opacity: 1; }
.naf-slot-all { font-size: 15px; color: var(--text2); }
.naf-slot-all img { display: none; }
.naf-level { gap: 6px; }
.naf-lvl-label { font-family: 'Rajdhani', sans-serif; font-size: 13px; color: var(--text3); }
.naf-lvl {
  width: 52px; height: 30px; text-align: center; border-radius: 7px;
  border: 1px solid var(--border2); background: var(--bg3); color: var(--text-white);
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  -moz-appearance: textfield;
}
.naf-lvl::-webkit-outer-spin-button, .naf-lvl::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.naf-lvl:focus { outline: none; border-color: rgba(240,192,64,0.5); }
.naf-lvl-sep { color: var(--text3); }
.naf-sep-v { width: 1px; height: 24px; background: var(--border2); margin: 0 4px; }

/* Curseurs de rareté repris de l'Équipement/Enchantement dans le panneau Notes */
.naf-rarity-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.naf-rarity-slider { margin: 0; }
.na-subfilters .special-rarities { gap: 6px; }

/* Logo + titre "Stratfu - Builder" dans la barre de nav (couleur de thème) */
.stratfu-brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; margin-left: 6px;
  white-space: nowrap;
}
.stratfu-brand img {
  width: 30px; height: 30px; object-fit: contain; flex-shrink: 0;
  border-radius: 7px;
}
.stratfu-brand-text {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 24px; line-height: 1;
  color: rgb(var(--classe-rgb, 224,80,122));
  letter-spacing: .3px;
}
.stratfu-brand .sb-sub { opacity: .75; font-weight: 600; }
.stratfu-brand:hover .stratfu-brand-text { filter: brightness(1.15); }

/* ─────────── Notes : lecture seule ─────────── */
.notes-overlay.notes-readonly .notes-toolbar,
.notes-overlay.notes-readonly .notes-modal-foot,
.notes-overlay.notes-readonly .notes-assets {
  display: none !important;
}
.notes-overlay.notes-readonly .notes-editor {
  cursor: default;
}
/* En lecture seule le modal occupe une largeur confortable (plus de panneau à droite) */
.notes-overlay.notes-readonly .notes-modal {
  width: 1100px; max-width: 1100px;
}

/* ─────────── Avertissement sublimations inactives (icône seule + tooltip) ─────────── */
.ench-subli-warn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  margin-top: 8px;
  border-radius: 8px;
  background: rgba(224,80,80,0.12);
  border: 1px solid rgba(224,80,80,0.45);
  box-shadow: 0 0 8px rgba(224,80,80,0.18);
  cursor: help;
}
.ench-subli-warn-ico {
  font-size: 18px; line-height: 1;
  color: #ef6b6b;
  text-shadow: 0 0 4px rgba(239,68,68,0.5);
}
.ench-warn-tooltip {
  position: fixed; z-index: 10000; display: none;
  max-width: 340px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--bg-card, #14161d);
  border: 1px solid rgba(224,80,80,0.45);
  box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 0 10px rgba(224,80,80,0.18);
  font-size: 12.5px; color: var(--text2); line-height: 1.5;
  pointer-events: none;
}
.ench-warn-tip-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 1px;
  color: #ef8a8a; margin-bottom: 5px;
}
.ench-warn-tip-row { margin: 2px 0; }
.ench-warn-tip-row b { color: #f0c040; font-weight: 700; }
.ench-warn-tip-title-sep { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08); }
.ench-warn-slot { color: var(--muted); font-size: 11.5px; }

/* ============================================================
   Card Statistiques unifiée — boutons (œil + food) dans le carré PV
   Positionnés en absolu par-dessus le carré, sur la ligne du PV,
   sans ajouter de hauteur (œil haut-gauche, food haut-droite).
   ============================================================ */
.stats-hero { position: relative; }
.hero-controls {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px; pointer-events: none; z-index: 2;
}
.hero-controls > * { pointer-events: auto; }
.hero-controls .share-actions {
  position: static !important; transform: none !important;
  left: auto !important; top: auto !important;
  display: flex; gap: 4px;
}
.hero-controls .food-buttons {
  position: static !important; transform: none !important;
  right: auto !important; top: auto !important;
  display: flex; gap: 5px; margin-left: auto;
}

/* ============================================================
   Récap du Build — colonne stats avec bandeau « Statistique »
   au-dessus de la card (réplique des onglets de l'onglet Équipement).
   ============================================================ */
.panel-stats-col {
  width: 660px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0; height: 100%;
}
.panel-stats-col .panel-stats {
  width: 100%; flex: 1; min-height: 0;
}
/* Bandeau = même gabarit que .equip-left-tabs (un seul faux onglet actif) */
.stats-tab-banner {
  display: flex; gap: 6px; flex-shrink: 0; width: 100%;
}
.stats-tab-banner .equip-left-tab {
  cursor: default;
}
.stats-tab-banner .equip-left-tab:disabled {
  opacity: 1;   /* faux bouton : garde l'aspect actif sans grisé */
}

/* ============================================================
   Alignement gauche unifié — toutes les pages démarrent à 24px
   (repère = bouton « Accueil » dans .nav-history { left: 24px }).
   Garantit que la colonne de gauche tombe au même endroit sur
   chaque onglet → card stats commune alignée au déploiement.
   ============================================================ */
#tab-equipement .main {
  justify-content: flex-start;
  padding-left: 24px;
}
#tab-recherche .recherche-wrap { padding-left: 24px; }
#tab-enchantement .ench-main   { padding-left: 24px; }
#tab-caracteristiques .main {
  justify-content: flex-start;
  padding-left: 24px;
}

/* ============================================================
   Récap du Build — card droite élargie pour combler le vide
   créé par l'alignement à gauche (récap enchantement + notes).
   ============================================================ */
#tab-equipement .panel-right-col { width: 530px; }

/* ============================================================
   Récap du Build — card Statistiques STRICTEMENT identique à
   celle de l'onglet Équipement (.equip-left-card) :
   même border-radius (14px), padding interne (14px 16px) et
   absence d'ombre. On surcharge UNIQUEMENT .panel-stats du Récap
   (sans toucher .panel-center / .panel-right).
   ============================================================ */
#tab-equipement .panel-stats {
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
}

/* ============================================================
   ENCHANTEMENT — nouveau layout (étape A)
   Gauche : card Statistiques commune (statique) + barre faux-bouton
            « Statistique » avec la pill « Niveau de châsse » posée à côté.
   Droite : cadre item-châsses (~70% h) + encadré fusionné sublis (~30%).
   ============================================================ */
#tab-enchantement .ench-main {
  gap: 22px;
  align-items: stretch;
  justify-content: flex-start;
}

/* ── Colonne gauche : card stats commune ── */
.ench-stats-col-wrap {
  width: 660px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
  height: 100%; min-height: 0;
}
.ench-stats-banner {
  display: flex; align-items: stretch; gap: 10px;
  width: 100%; flex-shrink: 0;
}
.ench-stats-banner .equip-left-tab { flex: 0 0 auto; min-width: 200px; }
/* Pill « Niveau de châsse » posée à côté du faux bouton, sans le décaler */
.ench-chasse-pill {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 9px;
  padding: 0 10px;
  min-height: 38px;
}
.ench-panel-stats {
  width: 100%; flex: 1; min-height: 0;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
}

/* ── Colonne droite ── */
#tab-enchantement .ench-right {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 18px;
  height: 100%; min-height: 0;
}

/* Cadre item-châsses : grand (~70% de la hauteur droite) */
.ench-chasses-card {
  flex: 8 1 0; min-height: 0;
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 20px;
  overflow: hidden;
}
.ench-chasses-body {
  height: 100%;
  display: flex; gap: 24px; min-height: 0;
}

/* Encadré fusionné sublis (~30% restant) */
.ench-fusion-card {
  flex: 3 1 0; min-height: 0;
  display: flex; gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 16px;
}
/* Sous-colonne gauche : recherche / rareté / pills empilées */
.ench-fusion-left {
  width: 240px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0;
}
.ench-fusion-search { flex-shrink: 0; }
.ench-fusion-rarity { flex-shrink: 0; flex-wrap: wrap; justify-content: center; }
.ench-fusion-pills {
  display: flex; flex-direction: column; gap: 10px;
  flex-shrink: 0;
}
/* Sous-colonne droite : grille de sublimations (3 large, hauteur dispo, scroll) */
.ench-fusion-right {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.ench-fusion-right .ench-card-grid {
  flex: 1; min-height: 0;
  padding: 0;
}

/* ============================================================
   ENCHANTEMENT — sélecteur de rareté (style image 3) + pills équipées
   ============================================================ */
/* Sélecteur : gemmes reliées (rare/myth/leg) + spéciales détachées (épique/relique) */
.ench-rarity-row {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0; flex-wrap: wrap;
}
.ench-rarity-row .rarity-slider { gap: 14px; padding: 6px 16px; }
.ench-rarity-row .special-rarities { gap: 6px; }
/* Pills spéciales : couleur permanente (fond teinté) pour les distinguer ;
   gemme + contour scintillent quand sélectionné. */
.ench-srs .sr-pill { opacity: 1; filter: none; }
/* Annule le grisé/neutralisation hérités du sélecteur d'équipement */
.ench-srs .sr-pill:not(.active) img { filter: none !important; }
.ench-srs .sr-pill:not(.active)[data-lvl="epique"]  { border-color: #c37ca7 !important; background: rgba(195,124,167,.16) !important; }
.ench-srs .sr-pill:not(.active)[data-lvl="relique"] { border-color: #b194d2 !important; background: rgba(177,148,210,.16) !important; }
.ench-srs .sr-pill[data-lvl="epique"]  {
  border-color: #c37ca7;
  background: rgba(195,124,167,.16);
}
.ench-srs .sr-pill[data-lvl="relique"] {
  border-color: #b194d2;
  background: rgba(177,148,210,.16);
}
.ench-srs .sr-pill.active[data-lvl="epique"]  {
  border-color: #e0a8cf;
  animation: ench-gem-shimmer-epique 1.1s ease-in-out infinite;
}
.ench-srs .sr-pill.active[data-lvl="relique"] {
  border-color: #cdb6e8;
  animation: ench-gem-shimmer-relique 1.1s ease-in-out infinite;
}
.ench-srs .sr-pill.active img { animation: ench-gem-glow 1.1s ease-in-out infinite; }
@keyframes ench-gem-shimmer-epique {
  0%,100% { box-shadow: 0 0 8px rgba(195,124,167,.5); }
  50%     { box-shadow: 0 0 18px 3px rgba(224,168,207,.9); }
}
@keyframes ench-gem-shimmer-relique {
  0%,100% { box-shadow: 0 0 8px rgba(177,148,210,.5); }
  50%     { box-shadow: 0 0 18px 3px rgba(205,182,232,.9); }
}
@keyframes ench-gem-glow {
  0%,100% { filter: none; }
  50%     { filter: brightness(1.3) drop-shadow(0 0 4px rgba(255,255,255,.7)); }
}

/* Pills des sublimations spéciales équipées : logo + nom dessous */
.ench-fusion-pills { display: flex; flex-direction: row; gap: 10px; }
.ench-fusion-pills .ench-eq-pill { flex: 1 1 0; min-width: 0; }
.ench-eq-pill {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--subli-c, var(--border2)) 55%, var(--border2));
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--subli-c, #888) 14%, var(--bg-card)),
    var(--bg-card) 70%);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  min-height: 0;
}
.ench-eq-pill.filled {
  border-color: var(--subli-c);
  box-shadow: 0 0 12px color-mix(in srgb, var(--subli-c) 30%, transparent);
}
.ench-eq-pill.ench-drop-hover {
  box-shadow: 0 0 0 2px var(--subli-c, var(--accent)) inset;
}
.ench-eq-pill-ico {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--subli-c, var(--border2)) 50%, var(--border2));
  background: rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.ench-eq-pill-ico img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.ench-eq-pill-name {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px;
  color: var(--subli-c, var(--text-white));
  text-align: center; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.ench-eq-pill.empty { opacity: .5; }
.ench-eq-pill.empty .ench-eq-pill-name { color: var(--text3); }
.ench-eq-pill .ench-spec-cross {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: #ff5b5b;
  background: rgba(0,0,0,.45);
}

/* Crop des noms de sublis dans la grille (entier au survol via title) */
.ench-fusion-right .ench-subli-nom {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Cartes spéciales (épique/relique) dans la grille : nom à gauche, gemme au bout */
.ench-subli-spec .ench-subli-info { flex: 1; min-width: 0; }
.ench-subli-spec .ench-subli-nom {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ench-subli-spec .ench-spec-gem {
  margin-left: auto; flex-shrink: 0;
}

/* ============================================================
   Récap & Enchantement — supprime le micro-scroll de la card stats.
   La card y est plus courte qu'en Équipement à cause du padding bas
   de .main (26px). On réduit ce padding bas pour rendre la hauteur
   sans remonter le contenu (le haut reste aligné).
   ============================================================ */
#tab-equipement .main { padding-top: 6px; padding-bottom: 8px; }
#tab-enchantement .ench-main { padding-top: 6px; padding-bottom: 8px; }

/* ============================================================
   Barre « Statistique » — hauteur STRICTEMENT identique sur les 3
   onglets (Récap / Équipement / Enchantement). En Équipement, les
   onglets étaient étirés par .recherche-top (align stretch) → on
   fige une hauteur commune et on neutralise l'étirement.
   ============================================================ */
.equip-left-tab {
  height: 38px !important;
  padding: 0 12px !important;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
.equip-left-tabs,
.stats-tab-banner,
.ench-stats-banner { align-items: center !important; }
/* Conteneurs de barre : même hauteur de rangée partout */
.equip-left-tabs, .stats-tab-banner, .ench-stats-banner { min-height: 38px; }
.ench-stats-banner .ench-chasse-pill { min-height: 38px; height: 38px; }

/* ============================================================
   CARACTÉRISTIQUE & DECK — card stats commune à gauche
   ============================================================ */
.carac-layout-v2 {
  display: flex; align-items: stretch; justify-content: flex-start;
  gap: 22px; padding: 6px 24px 8px;
  width: 100%; height: 100%; box-sizing: border-box;
}
/* Colonne gauche : card stats commune (identique aux autres onglets) */
.carac-stats-col-wrap {
  width: 660px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
  height: 100%; min-height: 0;
}
.carac-panel-stats {
  width: 100%; flex: 1; min-height: 0;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
}
/* Aptitudes : colonnes à droite de la card stats */
.carac-layout-v2 .carac-col-left,
.carac-layout-v2 .carac-col-center {
  display: flex; flex-direction: column; gap: 12px;
  flex: 1 1 0; min-width: 0;
  width: auto; height: 100%; min-height: 0;
}
/* Les cards d'aptitude s'étirent pour remplir la hauteur de leur colonne */
.carac-layout-v2 .carac-col-left .apt-card,
.carac-layout-v2 .carac-col-center .apt-card {
  flex: 1 1 0; min-height: 0;
}
/* Deck : zone sorts/passifs à droite de la card stats */
.deck-main {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.deck-main .carac-sorts-card { flex: 1; min-height: 0; }

/* Deck de Sort — illustration posée dans le vide haut-droit, sans rien déplacer */
.deck-main .carac-sorts-card { overflow: visible; }
.sp-layout { overflow: visible; }
.sp-left { position: relative; overflow: visible; }
.sp-illus {
  position: absolute; top: -10px; right: 0;
  width: 42%; height: 230px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 5;
}
.sp-illus img {
  max-height: 100%; max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.55));
}

/* Deck — zone d'effet du sort/passif : texte agrandi */
.sp-detail-empty { font-size: 16px !important; }
.sp-detail-name { font-size: 21px !important; }
.sp-detail-desc { font-size: 16px !important; line-height: 1.55 !important; }
.sp-detail-ico { width: 48px !important; height: 48px !important; }

/* ============================================================
   FONDU SÉLECTIF — la colonne « Statistique » reste figée,
   seule la partie droite fond au changement d'onglet.
   (4 onglets faciles : Récap, Enchantement, Caractéristique, Deck.
    L'Équipement est traité séparément.)
   ============================================================ */
/* On annule le fondu global sur ces pages… */
#tab-equipement.tab-page.active,
#tab-enchantement.tab-page.active,
#tab-caracteristiques.tab-page.active,
#tab-deck.tab-page.active { animation: none !important; }
#tab-equipement.tab-page.tab-fading-out,
#tab-enchantement.tab-page.tab-fading-out,
#tab-caracteristiques.tab-page.tab-fading-out,
#tab-deck.tab-page.tab-fading-out { animation: none !important; }

/* …et on l'applique uniquement aux frères de la colonne stats (= la droite) */
#tab-equipement.tab-page.active .stats-fixed-col ~ *,
#tab-enchantement.tab-page.active .stats-fixed-col ~ *,
#tab-caracteristiques.tab-page.active .stats-fixed-col ~ *,
#tab-deck.tab-page.active .stats-fixed-col ~ * {
  animation: tabFadeIn 0.25s ease;
}
#tab-equipement.tab-page.tab-fading-out .stats-fixed-col ~ *,
#tab-enchantement.tab-page.tab-fading-out .stats-fixed-col ~ *,
#tab-caracteristiques.tab-page.tab-fading-out .stats-fixed-col ~ *,
#tab-deck.tab-page.tab-fading-out .stats-fixed-col ~ * {
  animation: tabFadeOut 0.25s ease forwards;
}

/* ============================================================
   ENCHANTEMENT — transition douce de la barre « Statistique »
   À l'arrivée : le faux bouton rétrécit, la pill niveau apparaît.
   Au départ : animation inverse (bouton ré-élargi, pill estompée).
   ============================================================ */
/* Animation gérée par keyframes à l'entrée/sortie de l'onglet (ci-dessous) */

/* Arrivée sur l'onglet */
#tab-enchantement.tab-page.active .ench-stats-banner .equip-left-tab {
  animation: enchTabShrink .4s cubic-bezier(.4,0,.2,1);
}
#tab-enchantement.tab-page.active .ench-stats-banner .ench-chasse-pill {
  animation: enchPillReveal .45s cubic-bezier(.4,0,.2,1);
}
@keyframes enchTabShrink {
  from { min-width: 100%; }
  to   { min-width: 200px; }
}
@keyframes enchPillReveal {
  from { opacity: 0; transform: translateX(-12px) scaleX(.85); transform-origin: left center; }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(0) scaleX(1); }
}

/* Départ de l'onglet (joué pendant le fondu out) */
#tab-enchantement.tab-page.tab-fading-out .ench-stats-banner .equip-left-tab {
  animation: enchTabGrow .35s cubic-bezier(.4,0,.2,1) forwards;
}
#tab-enchantement.tab-page.tab-fading-out .ench-stats-banner .ench-chasse-pill {
  animation: enchPillHide .3s ease forwards;
}
@keyframes enchTabGrow {
  from { min-width: 200px; }
  to   { min-width: 100%; }
}
@keyframes enchPillHide {
  from { opacity: 1; transform: translateX(0) scaleX(1); transform-origin: left center; }
  to   { opacity: 0; transform: translateX(-12px) scaleX(.85); }
}

/* ============================================================
   ÉQUIPEMENT — fondu sélectif (cas entrelacé)
   À FIGER : .equip-left-tabs (onglets Stat/Comparateur) + .equip-left-col
   À FONDRE : .recherche-slots (rangée de slots) + .item-modal-inline (recherche)
   ============================================================ */
#tab-recherche.tab-page.active { animation: none !important; }
#tab-recherche.tab-page.tab-fading-out { animation: none !important; }

#tab-recherche.tab-page.active .recherche-slots,
#tab-recherche.tab-page.active .item-modal-inline {
  animation: tabFadeIn 0.25s ease;
}
#tab-recherche.tab-page.tab-fading-out .recherche-slots,
#tab-recherche.tab-page.tab-fading-out .item-modal-inline {
  animation: tabFadeOut 0.25s ease forwards;
}

/* ============================================================
   ÉQUIPEMENT — animation de la barre à l'arrivée (rétrécissement propre)
   Les onglets Statistique/Comparateur se forment depuis le faux bouton large.
   ============================================================ */
#tab-recherche.tab-page.active .equip-left-tabs .equip-left-tab[data-eltab="stats"] {
  animation: equipTabFormStats .4s cubic-bezier(.4,0,.2,1);
}
#tab-recherche.tab-page.active .equip-left-tabs .equip-left-tab[data-eltab="compare"] {
  animation: equipTabFormCompare .45s cubic-bezier(.4,0,.2,1);
}
@keyframes equipTabFormStats {
  from { flex-grow: 4; }
  to   { flex-grow: 1; }
}
@keyframes equipTabFormCompare {
  from { opacity: 0; transform: translateX(-10px) scaleX(.8); transform-origin: left center; }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(0) scaleX(1); }
}

/* Départ de l'Équipement (joué pendant le fondu out) : la barre se ré-unifie */
#tab-recherche.tab-page.tab-fading-out .equip-left-tabs .equip-left-tab[data-eltab="stats"] {
  animation: equipTabMergeStats .35s cubic-bezier(.4,0,.2,1) forwards;
}
#tab-recherche.tab-page.tab-fading-out .equip-left-tabs .equip-left-tab[data-eltab="compare"] {
  animation: equipTabMergeCompare .3s ease forwards;
}
@keyframes equipTabMergeStats {
  from { flex-grow: 1; }
  to   { flex-grow: 4; }
}
@keyframes equipTabMergeCompare {
  from { opacity: 1; transform: translateX(0) scaleX(1); transform-origin: left center; }
  to   { opacity: 0; transform: translateX(-10px) scaleX(.8); }
}

/* ============================================================
   ÉQUIPEMENT — aligne la card stats sur la barre d'onglets (38px)
   et non sur les slots (52px), pour qu'elle soit à la MÊME hauteur
   que la card des autres onglets (supprime le micro-mouvement).
   Écart slots(52) − onglets(38) = 14px → on remonte la colonne stats.
   ============================================================ */
#tab-recherche .recherche-cols .equip-left-col {
  margin-top: -14px;
}

/* ÉQUIPEMENT — barre d'onglets collée en haut (alignée aux autres onglets) */
#tab-recherche .recherche-top { align-items: flex-start; }
#tab-recherche .equip-left-tabs { align-self: flex-start; height: 38px; }