/* ═══════════════════════════════════════════════════
   ABSOLUTION — Site CSS V3 "FRACTURE"
   Interface complète — électrique / cristallin / acier
═══════════════════════════════════════════════════ */

.page-body { padding-top: 0; }
.wrap      { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* ══════════════════════════════
   HERO GÉNÉRIQUE
══════════════════════════════ */
.hero-page {
  padding: calc(var(--nav-h) + 4rem) 2rem 3.5rem;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}
.hero-page::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 480px; height: 220px;
  background: radial-gradient(ellipse at 50% 0%, rgba(27,111,232,0.09), transparent 72%);
  pointer-events: none;
}

/* Eyebrow avec décor électrique */
.eyebrow {
  font-family: var(--font); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.5em; text-transform: uppercase; color: var(--elec-light);
  display: inline-flex; align-items: center; gap: 0.85rem;
  margin-bottom: 0.9rem;
}
.eyebrow::before, .eyebrow::after {
  content: '';
  display: inline-block; width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--elec));
}
.eyebrow::after { background: linear-gradient(90deg, var(--elec), transparent); }

.hero-h1 {
  font-family: var(--font); font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em;
  line-height: 1.0;
  background: linear-gradient(135deg, var(--txt) 10%, var(--elec-light) 55%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 1.1rem;
}
.hero-sub {
  font-size: 0.95rem; color: var(--txt-3); line-height: 1.75;
  max-width: 520px; margin: 0 auto;
}

/* ══════════════════════════════
   CARDS
══════════════════════════════ */
.card {
  display: block; text-decoration: none; color: var(--text-primary);
  background: var(--bg-2);
  border: 1px solid var(--bdr);
  border-top: 2px solid rgba(14,165,233,0.22);
  padding: 2rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor: pointer; position: relative; overflow: hidden;
  border-radius: var(--radius);
}
.card::before { display: none; }
/* Ligne accent gauche — toujours visible, s'intensifie au hover */
.card::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--elec-dim), transparent 80%);
  opacity: 0.45; transition: opacity var(--transition), background var(--transition);
}
.card:hover::after {
  opacity: 1;
  background: linear-gradient(180deg, var(--elec), transparent 80%);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--bdr-elec);
  border-top-color: var(--elec);
  box-shadow: 0 16px 48px rgba(0,0,0,0.7), var(--glow-sm);
  color: var(--text-primary); text-decoration: none;
}

.card-wow   { border-top-color: rgba(14,165,233,0.40); }
.card-swtor { border-top-color: rgba(220,38,38,0.40); }
.card-guild { border-top-color: rgba(56,189,248,0.25); }
.card-wow:hover   { border-top-color: var(--elec); }
.card-swtor:hover { border-top-color: var(--red-light); }

.card-tag {
  display: inline-block; font-family: var(--font); font-size: 0.56rem;
  font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  padding: 0.12rem 0.55rem; border: 1px solid; margin-bottom: 0.75rem;
}
.card-tag.wow   { color: var(--elec-light); background: rgba(27,111,232,0.1); border-color: rgba(27,111,232,0.35); }
.card-tag.swtor { color: var(--red-light);  background: rgba(232,40,27,0.1);  border-color: rgba(232,40,27,0.3); }
.card-tag.guild { color: var(--cyan);       background: rgba(0,200,255,0.08); border-color: rgba(0,200,255,0.2); }

.card-date {
  font-family: var(--font); font-size: 0.56rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--txt-4); display: block; margin-bottom: 0.65rem;
}
.card-title {
  font-family: var(--font); font-size: 1rem; font-weight: 900;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--txt); line-height: 1.25; margin-bottom: 0.55rem;
  transition: color var(--transition);
}
.card:hover .card-title { color: var(--elec-bright); }
.card-excerpt {
  font-family: var(--font); font-size: 0.82rem; color: var(--txt-3); line-height: 1.65; margin-bottom: 1rem;
}
.card-read {
  font-family: var(--font); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.35rem; transition: gap var(--transition);
  color: var(--elec-light);
}
.card:hover .card-read { gap: 0.55rem; color: var(--cyan); }
.card-read.swtor { color: var(--red-light); }
.card:hover .card-read.swtor { color: var(--red-light); }

.card-featured { padding: 2.25rem; margin-bottom: 1.25rem; }
.card-featured .card-title { font-size: 1.65rem; margin-bottom: 0.8rem; }
.card-featured .card-excerpt { font-size: 0.9rem; }

.featured-badge {
  display: inline-block; font-family: var(--font); font-size: 0.54rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cyan); border: 1px solid rgba(0,200,255,0.3);
  background: rgba(0,200,255,0.07); padding: 0.1rem 0.5rem; margin: 0 0 0.5rem 0.5rem;
}

/* ══════════════════════════════
   GRILLES
══════════════════════════════ */
.news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.news-grid .card, #news-grid .card { background: var(--bg-2); clip-path: none; }
.news-grid .card::before { display: none; }

/* ══════════════════════════════
   FILTRES
══════════════════════════════ */
.filter-bar {
  display: flex; justify-content: center; gap: 0.35rem; flex-wrap: wrap; padding: 0 2rem 2.75rem;
}
.filter-btn {
  font-family: var(--font); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; padding: 0.4rem 1.1rem;
  background: transparent; border: 1px solid var(--bdr); color: var(--txt-3); cursor: pointer;
  transition: all var(--transition);
}
.filter-btn:hover { color: var(--txt-2); border-color: var(--bdr-elec); }
.filter-btn.active, .f-all.active  { color: var(--elec-bright); border-color: var(--elec); background: rgba(27,111,232,0.1); }
.f-wow.active  { color: var(--elec-light);  border-color: var(--elec-light); background: rgba(27,111,232,0.1); }
.f-swtor.active{ color: var(--red-light);   border-color: var(--red-light);  background: rgba(232,40,27,0.08); }
.f-guild.active{ color: var(--cyan);        border-color: var(--cyan);       background: rgba(0,200,255,0.07); }

/* ══════════════════════════════
   PAGINATION
══════════════════════════════ */
.pagination { display: flex; justify-content: center; align-items: center; gap: 1.5rem; padding: 2.5rem 0 3rem; }
.pagination button {
  font-family: var(--font); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 0.5rem 1.25rem;
  border: 1px solid var(--bdr); background: transparent; color: var(--txt-3); cursor: pointer; transition: all var(--transition);
}
.pagination button:not([disabled]):hover { color: var(--elec-light); border-color: var(--bdr-elec); background: rgba(27,111,232,0.07); }
.pagination button[disabled] { opacity: 0.2; cursor: not-allowed; }
.pagination span { font-family: var(--font); font-size: 0.6rem; letter-spacing: 0.15em; color: var(--txt-3); }

/* ══════════════════════════════
   ARTICLE
══════════════════════════════ */
.article-hero  { padding: calc(var(--nav-h) + 3rem) 2rem 2.5rem; max-width: 860px; margin: 0 auto; }
.article-meta  { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.article-title { font-family: var(--font); font-size: clamp(1.8rem,4vw,3rem); font-weight: 900; text-transform: uppercase; color: var(--txt); margin-bottom: 1rem; line-height: 1.1; }
.article-intro { font-size: 1rem; color: var(--txt-3); line-height: 1.75; }
.article-body  { max-width: 760px; margin: 0 auto; padding: 2rem 2rem 4rem; }
.article-body p { font-size: 0.95rem; color: var(--txt-2); line-height: 1.9; margin-bottom: 1.35rem; }
.article-footer{ margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--bdr); }

.related-section { max-width: 860px; margin: 0 auto; padding: 0 2rem 4rem; }
.related-label   { font-family: var(--font); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.38em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 1.25rem; display: block; }
.related-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* ══════════════════════════════
   RECRUTEMENT
══════════════════════════════ */
.rec-layout { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 360px; gap: 2rem; padding: 0 2rem 4rem; align-items: start; }
.roles-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 1rem; margin-bottom: 2rem; }

.role-card {
  background: var(--bg-2); border: 1px solid var(--bdr);
  border-top: 2px solid rgba(14,165,233,0.30);
  padding: 1.25rem;
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.role-card::before { display: none; }
.role-card:hover {
  transform: translateY(-2px);
  border-color: var(--bdr-elec); border-top-color: var(--elec);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), var(--glow-sm);
}
.role-card.swtor { border-top-color: rgba(232,40,27,0.4); }
.role-card.swtor:hover { border-top-color: var(--red-light); box-shadow: 0 8px 32px rgba(0,0,0,0.5), var(--glow-red); }

.role-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.85rem; }
.role-name   { font-family: var(--font); font-size: 0.88rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt); }
.role-badge  { font-family: var(--font); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.12rem 0.5rem; border: 1px solid; flex-shrink: 0; }
.badge-open  { color: var(--success-light); border-color: rgba(61,255,178,0.3); background: rgba(61,255,178,0.07); }
.badge-limit { color: var(--elec-light);    border-color: rgba(74,159,255,0.35); background: rgba(74,159,255,0.07); }
.badge-closed{ color: var(--txt-4);         border-color: rgba(255,255,255,0.06); }

.spec-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.75rem; }
.spec-tag  { font-family: var(--font); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.12rem 0.5rem; border: 1px solid rgba(27,111,232,0.15); color: var(--txt-3); background: rgba(27,111,232,0.04); }
.spec-open, .spec.on { color: var(--success-light); border-color: rgba(61,255,178,0.25); background: rgba(61,255,178,0.06); }
.spec-closed { color: var(--txt-4); border-color: rgba(255,255,255,0.05); opacity: 0.4; }

.cand-box {
  position: sticky; top: 1.5rem;
  background: var(--bg-2); border: 1px solid var(--bdr);
  border-top: 2px solid var(--elec-dim);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), var(--glow-sm); padding: 1.75rem;
}
.cand-title  { font-family: var(--font); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.38em; text-transform: uppercase; color: var(--elec-light); margin-bottom: 1.25rem; display: block; }
.field       { margin-bottom: 0.9rem; }
.field label { font-family: var(--font); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--txt-3); display: block; margin-bottom: 0.35rem; }
.field-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.cand-ok { text-align: center; padding: 2.5rem 1rem; }
.cand-ok-icon  { font-size: 2.5rem; margin-bottom: 1rem; }
.cand-ok-title { font-family: var(--font); font-size: 1rem; font-weight: 900; text-transform: uppercase; color: var(--success-light); margin-bottom: 0.75rem; }
.cand-ok-text  { font-size: 0.85rem; color: var(--txt-3); line-height: 1.7; }

/* ══════════════════════════════
   JEUX — split screen
══════════════════════════════ */
.games-grid {
  display: flex;
  min-height: 55vh;
  width: 100%;
}
.game-card {
  flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: var(--text-primary);
  background: var(--bg-2);
  padding: 3rem 3.5rem;
  position: relative; overflow: hidden;
  border: none;
  transition: flex 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.4s ease,
              box-shadow 0.4s ease;
}

/* Quand on hover sur la grille : rétrécit les cards non-hovered */
.games-grid:has(.game-card:hover) .game-card:not(:hover) { flex: 0.60; }
.games-grid .game-card:hover { flex: 1.40; }

/* Séparateur vertical entre les deux panels */
.game-card.wow { border-right: 1px solid rgba(255,255,255,0.06); }

/* WoW seul (SWTOR désactivé) — centrage automatique */
.games-grid:has(.game-card.swtor[style*="display"]) .game-card.wow {
  align-items: center;
  text-align: center;
  border-right: none;
  justify-content: center;
}
.games-grid:has(.game-card.swtor[style*="display"]) .game-card.wow .game-desc {
  max-width: 560px;
}

/* Ligne électrique en haut — toujours visible */
.game-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  transition: opacity 0.4s ease;
}
.game-card.wow::after   { background: linear-gradient(90deg, transparent, var(--elec), var(--cyan), transparent); opacity: 0.5; }
.game-card.swtor::after { background: linear-gradient(90deg, transparent, var(--red), var(--red-light), transparent); opacity: 0.5; }
.game-card:hover::after  { opacity: 1; }

/* Halo de fond — révélé au hover */
.game-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.5s ease; z-index: 0;
}
.game-card.wow::before   { background: radial-gradient(ellipse 70% 60% at 30% 80%, rgba(27,159,232,0.12) 0%, transparent 70%); }
.game-card.swtor::before { background: radial-gradient(ellipse 70% 60% at 70% 80%, rgba(220,38,38,0.10) 0%, transparent 70%); }
.game-card:hover::before { opacity: 1; }

.game-card.wow:hover   { background: var(--bg-3); box-shadow: inset 0 0 80px rgba(27,159,232,0.06); }
.game-card.swtor:hover { background: var(--bg-3); box-shadow: inset 0 0 80px rgba(220,38,38,0.06); }

/* Contenu — positionné en bas du panel */
.game-icon {
  font-size: 3.5rem; display: block; margin-bottom: 1.75rem;
  position: relative; z-index: 1;
  opacity: 0.85; transition: opacity 0.3s ease, transform 0.3s ease;
}
.game-card:hover .game-icon { opacity: 1; transform: scale(1.06); }

.game-name {
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 0.9rem; line-height: 1.0;
  position: relative; z-index: 1;
}
.game-card.wow .game-name {
  background: linear-gradient(135deg, var(--txt) 20%, var(--elec-light) 60%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.game-card.swtor .game-name {
  background: linear-gradient(135deg, var(--txt) 20%, var(--red-light) 60%, var(--red) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.game-desc { font-size: 0.88rem; color: var(--txt-3); line-height: 1.7; margin-bottom: 1.5rem; position: relative; z-index: 1; max-width: 420px; }
.game-factions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; position: relative; z-index: 1; }
.faction { font-family: var(--font); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.25rem 0.75rem; border: 1px solid; }
.faction.blue { color: var(--elec-light); border-color: rgba(27,111,232,0.35); background: rgba(27,111,232,0.08); }
.faction.red  { color: var(--red-light);  border-color: rgba(232,40,27,0.3);   background: rgba(232,40,27,0.08); }
.game-link {
  font-family: var(--font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.4rem;
  transition: gap var(--transition); position: relative; z-index: 1;
}
.game-card:hover .game-link { gap: 0.65rem; }
.game-card.wow .game-link   { color: var(--elec-light); }
.game-card.swtor .game-link { color: var(--red-light); }

/* ══════════════════════════════
   SECTION HEADERS
══════════════════════════════ */
.sec-header { text-align: center; margin-bottom: 3.5rem; position: relative; }
.sec-eyebrow {
  font-family: var(--font); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold-light);
  display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 0.65rem;
}
.sec-eyebrow::before, .sec-eyebrow::after {
  content: ''; display: inline-block; width: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light));
}
.sec-eyebrow::after { background: linear-gradient(90deg, var(--gold-light), transparent); }
.sec-title {
  font-family: var(--font); font-size: clamp(1.8rem,4vw,3rem); font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: linear-gradient(135deg, var(--txt) 20%, var(--elec-light) 60%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ══════════════════════════════
   ACCUEIL — HERO (e-sport, structuré)
══════════════════════════════ */
.hero {
  display: block; text-align: left;
  padding: calc(var(--nav-h) + 5rem) 2rem 5rem;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -10%; left: 20%;
  width: 900px; height: 700px;
  background: radial-gradient(ellipse at 30% 30%,
    rgba(14,165,233,0.08) 0%, rgba(6,182,212,0.03) 50%, transparent 72%);
  pointer-events: none; z-index: 0;
}
.hero::after { display: none; }
.hero-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }

/* Ligne animée */
.hero-rule {
  height: 1px; width: 0; margin-bottom: 2.75rem;
  background: linear-gradient(90deg, var(--elec) 0%, var(--cyan) 50%, transparent 100%);
  animation: ruleDraw 0.7s cubic-bezier(0.4,0,0.2,1) 0.15s forwards;
}
.hero-rule-b {
  background: linear-gradient(90deg, transparent 0%, var(--elec-dim) 50%, transparent 100%);
  opacity: 0.5; margin-bottom: 2.5rem; animation-delay: 0.45s;
}
@keyframes ruleDraw { to { width: 100%; } }

/* Tags d'identité */
.hero-identity {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  margin-bottom: 3.5rem;
  font-family: var(--font); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.38em; text-transform: uppercase; color: var(--txt-3);
}
.h-sep { color: var(--txt-4); font-weight: 400; }

/* Jeux en deux colonnes */
.hero-games-row {
  display: flex; align-items: stretch; gap: 0;
  margin-bottom: 3rem; max-width: 700px;
}
.hg-item {
  flex: 1; padding: 0 2.5rem 0 0;
}
.hg-item:last-child { padding: 0 0 0 2.5rem; }
.hg-divider {
  width: 1px; flex-shrink: 0;
  background: linear-gradient(180deg, transparent, var(--bdr-elec) 30%, var(--bdr-elec) 70%, transparent);
}
.hg-label {
  display: block; font-family: var(--font); font-weight: 900;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem;
}
.hg-item.wow .hg-label { color: var(--elec-light); }
.hg-item.swtor .hg-label { color: var(--red-light); }
.hg-sub {
  display: block; font-family: var(--font); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--txt-4);
}

/* Recrutement */
.hero-eye { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0; }
.hero-eye-badge {
  background: var(--bg-2); border: 1px solid var(--bdr-elec);
  padding: 0.35rem 1.1rem; display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt-2);
  box-shadow: var(--glow-sm);
}
.hero-eye-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success-light); display: inline-block; flex-shrink: 0;
  box-shadow: 0 0 8px rgba(52,211,153,0.7);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(52,211,153,0.7); }
  50%       { opacity: 0.6; box-shadow: 0 0 3px rgba(52,211,153,0.3); }
}

.hero-btns { display: flex; gap: 1rem; justify-content: flex-start; flex-wrap: wrap; }

@media (max-width: 700px) {
  .hero { padding: calc(var(--nav-h) + 3rem) 1.5rem 3.5rem; }
  .hero-games-row { flex-direction: column; gap: 1.5rem; max-width: 100%; }
  .hg-item, .hg-item:last-child { padding: 0; }
  .hg-divider { display: none; }
}

/* ══════════════════════════════
   STATS — "TERMINAL"
══════════════════════════════ */
#s-stats {
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  background: var(--bg-2); position: relative;
}
/* Ligne prestige top */
#s-stats::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--gold-light) 30%, var(--gold-bright) 50%, var(--gold-light) 70%, transparent 95%);
  opacity: 0.45;
}
#s-stats::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 20%, rgba(27,111,232,0.3) 50%, transparent 80%);
  z-index: 2;
}

.stats { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); }
.stat  { padding: 2.5rem; text-align: center; position: relative; }
.stat + .stat::before {
  content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(27,111,232,0.25), transparent);
}

/* Valeur stat — glow électrique */
.sv {
  font-family: var(--font); font-size: 3.5rem; font-weight: 900;
  line-height: 1; margin-bottom: 0.6rem; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--elec-light) 60%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 16px rgba(27,111,232,0.4));
}
.sv.p {
  background: linear-gradient(135deg, var(--elec-bright), var(--elec-light));
  -webkit-background-clip: text; background-clip: text;
}
.sv.r {
  background: linear-gradient(135deg, #FFFFFF, var(--red-light));
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 16px rgba(232,40,27,0.35));
}
.sl {
  font-family: var(--font); font-size: 0.54rem; font-weight: 700;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--txt-4);
}

/* ══════════════════════════════
   NEWS SECTION
══════════════════════════════ */
#s-news { padding: 7rem 0; }
.nl { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
#idx-featured { display: flex; } #idx-featured a { flex: 1; }
.ns { display: flex; flex-direction: column; gap: 1.5rem; }
#news-featured { margin-bottom: 1.25rem; }
#news-grid { margin-top: 0; }

/* ══════════════════════════════
   JEUX SECTION (homepage)
══════════════════════════════ */
#s-games {
  padding: 7rem 0 0;
  margin-top: 3rem;
  background: var(--bg-2);
  border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr);
  position: relative; overflow: hidden;
}
#s-games::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 700px; height: 500px;
  background: radial-gradient(ellipse, rgba(27,111,232,0.05) 0%, transparent 60%);
  pointer-events: none;
}

/* ══════════════════════════════
   CTA SECTION
══════════════════════════════ */
#s-cta { padding: 8rem 0; text-align: center; position: relative; overflow: hidden; }
#s-cta::before {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse at 50% 100%, rgba(27,111,232,0.08), transparent 65%);
  pointer-events: none;
}
/* Ligne électrique décorative */
#s-cta::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 200px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.ct { max-width: 680px; margin: 0 auto; padding: 0 2rem; }
.ct h2 {
  font-family: var(--display); font-size: clamp(2.5rem,6vw,4.5rem); margin-bottom: 1.25rem;
  background: linear-gradient(135deg, var(--txt) 10%, var(--elec-light) 55%, var(--cyan) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 24px rgba(27,111,232,0.3));
}
.ct p { font-family: var(--body); font-size: 0.95rem; color: var(--txt-3); line-height: 1.85; margin-bottom: 2.75rem; }
.ct-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.modal-choice {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.75rem 1rem; text-decoration: none; border: 1px solid;
  background: var(--bg-2); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  border-radius: var(--radius);
}
.modal-choice:hover { transform: translateY(-3px); }
.wow-choice   { border-color: var(--bdr); }
.wow-choice:hover   { border-color: var(--bdr-elec); box-shadow: var(--glow-elec); }
.swtor-choice { border-color: var(--bdr); }
.swtor-choice:hover { border-color: rgba(232,40,27,0.4); box-shadow: var(--glow-red); }

/* ══════════════════════════════
   ROSTER
══════════════════════════════ */
.roster-tabs {
  display: flex; border-bottom: 1px solid var(--bdr);
  max-width: 960px; margin: 0 auto 0; padding: 0 2rem;
  position: relative;
}
/* Ligne électrique sous les tabs */
.roster-tabs::after {
  content: ''; position: absolute; bottom: -1px; left: 2rem; right: 2rem; height: 1px;
  background: linear-gradient(90deg, var(--elec-dim) 0%, rgba(27,111,232,0.3) 50%, transparent 100%);
}
.roster-tab {
  font-family: var(--font); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 0.9rem 2rem; border: none; background: none;
  cursor: pointer; color: var(--txt-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all var(--transition);
}
.roster-tab.wow.active   { color: var(--elec-light); border-bottom-color: var(--elec); }
.roster-tab.swtor.active { color: var(--red-light);  border-bottom-color: var(--red); }
.roster-tab:hover { color: var(--txt); }

.roster-panel { display: none; max-width: 960px; margin: 0 auto; padding: 0 2rem 4rem; }
.roster-panel.active { display: block; }
/* Enveloppe le contenu roster dans une bordure propre */
#rcontent-wow, #rcontent-swtor {
  border:1px solid var(--bdr);
  border-top:none;
}

.roster-stats {
  display: flex; gap: 2rem; flex-wrap: wrap;
  padding: 1rem 1.5rem; background: var(--bg-2);
  border: 1px solid var(--bdr); border-top: none;
  border-bottom: 1px solid rgba(27,111,232,0.12);
  margin-bottom: 1.5rem;
}
.rs-stat {
  font-family: var(--font); font-size: 0.6rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--txt-3);
  display: flex; align-items: center; gap: 0.5rem;
}
.rs-stat strong { font-size: 1.1rem; font-weight: 900; color: var(--txt); }
.rs-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Role section header — barre électrique */
.role-section { margin-bottom: 2.5rem; }
.role-header {
  display: flex; align-items: center; gap: 0.85rem;
  margin-bottom: 0.5rem; padding: 0.4rem 0.75rem 0.4rem 1rem;
  background: rgba(27,111,232,0.04);
  border-left: 2px solid var(--elec-dim);
  border-bottom: none;
}
.role-header-label { font-family: var(--font); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; }
.role-header-count { font-family: var(--font); font-size: 0.56rem; letter-spacing: 0.1em; color: var(--txt-4); border: 1px solid var(--bdr); padding: 0.08rem 0.4rem; }
.role-tank-lbl  { color: var(--elec-light); }
.role-heal-lbl  { color: var(--success-light); }
.role-dps-lbl   { color: var(--red-light); }
.role-staff-lbl { color: var(--cyan); }

/* Member row */
.member-grid { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--bdr); border-top: none; }
.mc {
  background: var(--bg-2); border-bottom: 1px solid rgba(27,111,232,0.07);
  padding: 0.65rem 1.25rem 0.65rem 1.5rem;
  align-items: center; gap: 1rem;
  transition: background var(--transition); position: relative; cursor: default;
}
.mc:last-child { border-bottom: none; }
.mc::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  transition: width var(--transition), box-shadow var(--transition);
}
.mc:hover::before { width: 3px; box-shadow: 2px 0 8px rgba(27,111,232,0.3); }
.mc.gm::before, .mc.admin::before, .mc.officier::before { background: var(--cyan); }
.mc.roster_mm::before { background: var(--elec-light); }
.mc.membre::before    { background: rgba(61,255,178,0.6); }
.mc.recrue::before    { background: rgba(255,255,255,0.1); }
.mc:hover { background: rgba(27,111,232,0.04); }

.mc-name  { font-family: var(--font); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--txt); }
.mc-grade { font-family: var(--font); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.mc-grade.gm, .mc-grade.admin, .mc-grade.officier { color: var(--cyan); }
.mc-grade.roster_mm { color: var(--elec-light); }
.mc-grade.membre    { color: var(--success-light); }
.mc-grade.recrue    { color: var(--txt-3); }
.mc-sub { font-family: var(--font); font-size: 0.72rem; color: var(--txt-3); }

.roster-empty { text-align: center; padding: 3rem; color: var(--txt-3); font-family: var(--font); font-size: 0.85rem; background: var(--bg-2); border: 1px solid var(--bdr); }
.roster-search { display: none; }
.search-count { font-family: var(--font); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--txt-3); }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 900px) {
  .news-grid { grid-template-columns: 1fr; gap: 0.75rem; background: none; }
  .rec-layout { grid-template-columns: 1fr; }
  .cand-box { position: static; }
  /* Split screen → empilement vertical sur mobile */
  .games-grid { flex-direction: column; min-height: unset; }
  .games-grid:has(.game-card:hover) .game-card:not(:hover) { flex: 1; }
  .games-grid .game-card:hover { flex: 1; }
  .game-card { min-height: 40vh; padding: 2.5rem 2rem; justify-content: center; }
  .game-card.wow { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .related-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .field-row { grid-template-columns: 1fr; }
  .roles-grid { gap: 0.75rem; }
  .nl { grid-template-columns: 1fr; gap: 0.75rem; }
  .stats { grid-template-columns: 1fr; }
  .stat + .stat::before { display: none; }
  .card { clip-path: none; }
  .card::before { display: none; }
}
@media (max-width: 700px) { .member-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 400px) { .member-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════
   RECRUTEMENT (page fusionnée)
══════════════════════════════ */

/* Couleur d'accent par jeu — défaut WoW */
:root {
  --rec-color: #3B82F6;
  --rec-color-bg:  rgba(59,130,246,0.06);
  --rec-color-bdr: rgba(59,130,246,0.2);
  --rec-color-bar: #48B8F0;
}
body.page-swtor {
  --rec-color: #FF3A3A;
  --rec-color-bg:  rgba(255,58,58,0.06);
  --rec-color-bdr: rgba(255,58,58,0.25);
  --rec-color-bar: #FF3A3A;
}

.rec-hero { padding: calc(var(--nav-h) + 3.5rem) 2rem 2.5rem; text-align: center; max-width: 700px; margin: 0 auto; }
.rec-hero-eyebrow { font-family: var(--font); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.45em; text-transform: uppercase; color: var(--rec-color); display: block; margin-bottom: 0.6rem; }
.rec-hero h1 { font-family: var(--font); font-size: clamp(2rem,6vw,4rem); font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); margin-bottom: 1rem; }
.rec-hero-sub { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; }

.rec-banner { max-width: 1200px; margin: 0 auto 3rem; padding: 0 2rem; }
.rec-banner-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding: 1.75rem 2rem;
  background: var(--rec-color-bg);
  border: 1px solid var(--rec-color-bdr);
  border-left: 4px solid var(--rec-color-bar);
}
.rb-left  { display: flex; align-items: center; gap: 1.25rem; }
.rb-icon  { font-size: 2.5rem; line-height: 1; }
.rb-title { font-family: var(--font); font-size: 1.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-primary); margin-bottom: 0.25rem; }
.rb-sub   { font-size: 0.82rem; color: var(--text-muted); }

.rec-W { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

.rec-roles-section { margin-bottom: 3rem; }
.rec-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.rec-sec-label { font-family: var(--font); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: var(--rec-color); }
.rec-sec-count { font-family: var(--font); font-size: 0.65rem; color: var(--text-muted); }

.rec-roles-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,0.05); }
.rec-role-block {
  background: var(--bg-surface); padding: 1.75rem 1.5rem;
  transition: background 0.15s; border-top: 2px solid transparent; position: relative;
}
.rec-role-block:hover { background: var(--bg-card-hover); }
.rec-role-block.status-open    { border-top-color: rgba(74,224,138,0.5); }
.rec-role-block.status-limited { border-top-color: rgba(240,192,64,0.5); }
.rec-role-block.status-closed  { border-top-color: rgba(255,255,255,0.08); }
.rec-role-block.full-width { grid-column: 1 / -1; }
.rb-top  { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1.1rem; }
.rb-name { font-family: var(--font); font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-primary); }
.rb-badge { font-family: var(--font); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.18rem 0.6rem; border: 1px solid; flex-shrink: 0; }
.rb-open   { color: #4AE08A; border-color: rgba(74,224,138,0.35); background: rgba(74,224,138,0.06); }
.rb-limit  { color: #F0C040; border-color: rgba(240,192,64,0.35); background: rgba(240,192,64,0.05); }
.rb-closed { color: var(--txt-4); border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
.rec-spec-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rec-spec { font-family: var(--font); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.22rem 0.6rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); color: var(--text-muted); }
.rec-spec.closed { color: rgba(255,58,58,0.55); border-color: rgba(255,58,58,0.2); text-decoration: line-through; opacity: 0.6; }
.rec-spec.on     { color: #4AE08A; border-color: rgba(74,224,138,0.3); background: rgba(74,224,138,0.06); }
.rb-notes { font-size: 0.78rem; color: var(--text-muted); margin-top: 1rem; line-height: 1.55; padding-top: 0.85rem; border-top: 1px solid rgba(255,255,255,0.05); }

.rec-bottom { display: grid; grid-template-columns: 1fr 420px; gap: 3rem; align-items: start; margin-bottom: 4rem; }

.attentes-box { background: var(--bg-surface); border: 1px solid rgba(255,255,255,0.06); padding: 2rem; }
.att-title { font-family: var(--font); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: var(--rec-color); display: block; margin-bottom: 1.25rem; }
.att-item  { display: flex; gap: 0.85rem; font-size: 0.88rem; color: var(--text-muted); margin-bottom: 0.85rem; line-height: 1.55; align-items: flex-start; }
.att-dot   { color: var(--rec-color); font-size: 0.5rem; flex-shrink: 0; margin-top: 0.4rem; }
.att-sched { margin-top: 1.25rem; padding: 0.85rem 1rem; background: var(--rec-color-bg); border: 1px solid var(--rec-color-bdr); border-left: 3px solid var(--rec-color-bar); }
.att-sched-label { font-family: var(--font); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--rec-color); margin-bottom: 0.4rem; display: block; }
.att-sched-text  { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }

.rec-form-box { border: 1px solid rgba(255,255,255,0.08); overflow: hidden; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.rec-form-head { padding: 1.25rem 1.75rem; background: var(--rec-color-bg); border-bottom: 1px solid rgba(255,255,255,0.06); }
.rec-form-label { font-family: var(--font); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: var(--rec-color); display: block; margin-bottom: 0.3rem; }
.rec-form-title { font-family: var(--font); font-size: 0.95rem; font-weight: 900; text-transform: uppercase; color: var(--text-primary); }
.rec-form-body { padding: 1.5rem 1.75rem; background: var(--bg-surface); }
.rec-form-foot { padding: 1.25rem 1.75rem; background: rgba(0,0,0,0.2); border-top: 1px solid rgba(255,255,255,0.06); }
.ff { margin-bottom: 0.85rem; }
.ff label { font-family: var(--font); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 0.3rem; }
.ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-error { font-size: 0.8rem; color: #FF3A3A; display: none; margin-bottom: 0.75rem; line-height: 1.5; }
.rec-cand-ok { display: none; padding: 3rem 2rem; text-align: center; background: var(--bg-surface); }

/* Skeleton chargement */
.skel { background: linear-gradient(90deg, var(--bg-2) 25%, rgba(255,255,255,0.04) 50%, var(--bg-2) 75%); background-size: 200% 100%; animation: skel-shimmer 1.5s ease infinite; }
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-line { height: 1rem; border-radius: 2px; margin-bottom: 0.6rem; }
.skel-line.w-40 { width: 40%; } .skel-line.w-60 { width: 60%; } .skel-line.w-80 { width: 80%; } .skel-line.w-100 { width: 100%; }
.skel-block { background: var(--bg-2); border: 1px solid var(--bdr); padding: 1.5rem; }

/* État d'erreur générique */
.load-error { text-align: center; padding: 2.5rem; color: var(--txt-3); font-family: var(--font); font-size: 0.85rem; }
.load-error strong { display: block; color: var(--red-light); margin-bottom: 0.5rem; font-size: 0.95rem; letter-spacing: 0.02em; }
.load-error .btn { margin-top: 1rem; }

@media (max-width: 960px) { .rec-roles-grid { grid-template-columns: repeat(2,1fr); } .rec-bottom { grid-template-columns: 1fr; } .rec-form-box { position: static; } }
@media (max-width: 600px)  { .rec-roles-grid { grid-template-columns: 1fr; } .rec-W { padding: 0 1rem; } .ff-row { grid-template-columns: 1fr; } }

/* ══════════════════════════════
   BOSS GRID (partagé index + jeux)
══════════════════════════════ */
.boss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.boss-grid.lg { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.boss-item { position: relative; border-right: 1px solid rgba(255,255,255,0.05); }
.boss-item:last-child { border-right: none; }
.boss-img-wrap {
  position: relative; aspect-ratio: 1 / 1.1; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(0,0,0,0.25));
}
.boss-img-wrap.has-img { background: none; }
.boss-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: filter 0.3s, transform 0.3s;
}
.boss-item.alive .boss-img-wrap img  { filter: grayscale(1) brightness(0.3); }
.boss-item.dead:hover .boss-img-wrap img { transform: scale(1.04); }
.boss-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: rgba(255,255,255,0.12);
}
.boss-item.alive .boss-num { color: rgba(255,255,255,0.06); }
.boss-badge {
  position: absolute; top: 3px; right: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 900;
}
.boss-badge.dead  { background: rgba(61,255,178,0.9); color: #05070E; }
.boss-badge.alive {
  background: rgba(0,0,0,0.65); color: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.1); font-size: 8px;
}
.boss-item.dead::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(61,255,178,0.15); pointer-events: none; z-index: 2;
}
.boss-name {
  font-size: 0.48rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3rem 0.25rem; text-align: center; background: var(--bg);
  border-top: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: rgba(255,255,255,0.22);
}
.boss-item.dead .boss-name { color: var(--success-light); }
@media (max-width: 700px) { .boss-grid.lg { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); } }

/* ══════════════════════════════
   PROGRESSION WIDGET (homepage)
══════════════════════════════ */
.prog-card {
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 3px solid var(--elec);
  background: var(--bg-2);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.prog-card.cleared {
  box-shadow: 0 0 0 1px rgba(61,255,178,0.2), 0 4px 32px rgba(0,0,0,0.4);
}
.prog-card-header { display: flex; align-items: center; gap: 1.25rem; padding: 1.1rem 1.4rem; }
.prog-card-info   { flex: 1; min-width: 0; }
.prog-card-eyebrow {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem;
  font-size: 0.5rem; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase;
}
.prog-card-eyebrow-sep { width: 1px; height: 10px; background: rgba(255,255,255,0.12); flex-shrink: 0; }
.prog-card-name {
  font-size: clamp(0.9rem, 2.5vw, 1.25rem); font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prog-card-score       { text-align: right; flex-shrink: 0; }
.prog-card-score-val {
  font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 900; line-height: 1; color: var(--txt);
}
.prog-card-score-val.cleared { color: var(--success-light); }
.prog-card-score-val span    { font-size: 0.8rem; color: var(--txt-3); font-weight: 400; }
.prog-card-diff {
  font-size: 0.52rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  margin-top: 0.1rem;
}
.prog-bar      { height: 3px; background: rgba(255,255,255,0.06); }
.prog-bar-fill { height: 100%; transition: width 0.9s cubic-bezier(0.4,0,0.2,1); }
.prog-card-footer {
  padding: 0.65rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,0,0,0.2); border-top: 1px solid rgba(255,255,255,0.04);
  font-size: 0.72rem; color: var(--txt-3);
}
.prog-footer-links { display: flex; align-items: center; gap: 1rem; }
.prog-rio-link {
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #FB923C; text-decoration: none; opacity: 0.8;
}
.prog-detail-link {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; text-decoration: none;
}
.prog-multi {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255,255,255,0.06);
}
@media (max-width: 700px) { .prog-multi { grid-template-columns: 1fr; } }

/* ══════════════════════════════
   JEUX.HTML — onglets, bandeaux, infos, progression détail
══════════════════════════════ */
.game-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); max-width:1200px; margin:0 auto 2.5rem; padding:0 2rem; }
.game-tab  { font-family:var(--font);font-size:0.72rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;padding:1rem 2rem;border:none;background:none;cursor:pointer;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.2s; }
.game-tab.wow.active   { color:#3B82F6; border-bottom-color:#3B82F6; }
.game-tab.swtor.active { color:#FF3A3A; border-bottom-color:#FF3A3A; }
.game-tab:hover { color:var(--text-primary); }
.game-panel { display:none; max-width:1200px; margin:0 auto; padding:0 2rem 4rem; }
.game-panel.active { display:block; }

.game-banner { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;padding:2rem 2.25rem;margin-bottom:2rem;border:1px solid var(--border);background:var(--bg-surface);position:relative;overflow:hidden; }
.game-banner::before { content:'';position:absolute;top:0;left:0;right:0;height:3px; }
.game-banner::after  { content:'';position:absolute;top:0;right:0;bottom:0;width:200px;pointer-events:none; }
.game-banner.wow::before   { background:linear-gradient(90deg,var(--color-primary),var(--cyan)); }
.game-banner.wow::after    { background:radial-gradient(ellipse at right center,rgba(27,111,232,0.08),transparent 70%); }
.game-banner.swtor::before { background:linear-gradient(90deg,var(--color-secondary),#FF8070); }
.game-banner.swtor::after  { background:radial-gradient(ellipse at right center,rgba(232,40,27,0.08),transparent 70%); }
.banner-icon { font-size:3.5rem;line-height:1;filter:drop-shadow(0 0 16px rgba(27,111,232,0.3)); }
.banner-name { font-family:var(--font);font-size:2.25rem;font-weight:900;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-primary); }
.banner-desc { font-size:0.88rem;color:var(--text-muted);margin-top:0.5rem;line-height:1.65;max-width:520px; }
.banner-factions { display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.85rem; }

.info-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-bottom:2.5rem;border:1px solid var(--border); }
.info-card { background:var(--bg-surface);padding:1.75rem 1.5rem;border-top:2px solid rgba(27,111,232,0.25);transition:background 0.15s; }
.info-card:hover { background:var(--bg-card-hover); }
.info-card-label { font-family:var(--font);font-size:0.54rem;font-weight:700;letter-spacing:0.4em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.85rem;display:block; }
.info-card-value { font-family:var(--font);font-size:1.6rem;font-weight:900;text-transform:uppercase;color:var(--text-primary);margin-bottom:0.35rem;letter-spacing:0.04em; }
.info-card-sub   { font-size:0.76rem;color:var(--text-muted);line-height:1.5; }

.events-section { margin-bottom:2.5rem; }
.events-title   { font-family:var(--font);font-size:0.6rem;font-weight:700;letter-spacing:0.35em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1.25rem;display:block; }
.event-row { display:grid;grid-template-columns:100px 1fr auto;align-items:center;gap:1.25rem;padding:1rem 1.25rem;background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--color-primary);margin-bottom:0.5rem; }
.event-row.swtor { border-left-color:var(--color-secondary); }
.event-date-box { text-align:center; }
.event-day   { font-family:var(--font);font-size:1.8rem;font-weight:900;line-height:1;color:var(--text-primary); }
.event-month { font-family:var(--font);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted); }
.event-name  { font-family:var(--font);font-size:0.95rem;font-weight:700;text-transform:uppercase;color:var(--text-primary);margin-bottom:0.25rem; }
.event-type  { font-family:var(--font);font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted); }
.event-time  { font-family:var(--font);font-size:0.72rem;font-weight:700;letter-spacing:0.1em;color:var(--text-secondary);text-align:right; }
.event-empty { padding:2rem;text-align:center;color:var(--text-muted);font-family:var(--font);font-size:0.85rem;background:var(--bg-card);border:1px solid var(--border); }
.game-news { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2.5rem; }
.game-cta { padding:2rem;text-align:center;border:1px solid var(--border);background:var(--bg-surface); }
.game-cta.wow   { border-color:rgba(59,130,246,0.3); }
.game-cta.swtor { border-color:rgba(255,58,58,0.3); }
.game-cta p  { font-size:0.88rem;color:var(--text-muted);margin-bottom:1.5rem; }

/* Progression détail (scoped sous .game-panel pour ne pas écraser le widget homepage) */
.prog-section { margin-bottom:2.5rem; }
.game-panel .prog-card { background:var(--bg-surface);border:1px solid var(--border);border-top:3px solid var(--pc,var(--color-primary));margin-bottom:1rem;overflow:hidden;transition:box-shadow 0.2s;box-shadow:none; }
.game-panel .prog-card.current { box-shadow:0 0 0 1px var(--pc,var(--color-primary)),0 8px 32px rgba(0,0,0,0.4); }
.game-panel .prog-card-header { display:flex;align-items:center;gap:1.25rem;padding:1.25rem 1.5rem; }
.game-panel .prog-card-name { font-family:var(--font);font-size:1rem;font-weight:900;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-primary);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.prog-diff-badge { font-family:var(--font);font-size:0.58rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;padding:0.2rem 0.55rem;border:1px solid;flex-shrink:0; }
.game-panel .prog-card-score { font-family:var(--font);font-size:1.7rem;font-weight:900;color:var(--text-primary);line-height:1;white-space:nowrap;flex-shrink:0; }
.game-panel .prog-card-score span { font-size:0.75rem;color:var(--text-muted);font-weight:400; }
.game-panel .prog-bar { height:4px;background:rgba(255,255,255,0.06); }
.game-panel .prog-bar-fill { height:100%;transition:width 0.9s cubic-bezier(.4,0,.2,1); }
.game-panel .prog-card-footer { padding:0.6rem 1.5rem;border-top:1px solid var(--border);background:rgba(0,0,0,0.15); }
.rio-link { font-family:var(--font);font-size:0.62rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);text-decoration:none;transition:color 0.15s; }
.rio-link:hover { color:#FF9800; }

/* Historique raids */
.hist-section { margin-top:1rem;border:1px solid rgba(255,255,255,0.06); }
.hist-header { display:flex;align-items:center;justify-content:space-between;padding:0.7rem 1.25rem;background:rgba(255,255,255,0.02);border-bottom:1px solid rgba(255,255,255,0.06); }
.hist-label { font-family:var(--font);font-size:0.55rem;font-weight:700;letter-spacing:0.35em;text-transform:uppercase;color:var(--text-muted); }
.hist-count { font-family:var(--font);font-size:0.6rem;color:var(--text-dim); }
.hist-row { display:grid;grid-template-columns:48px 1fr auto auto;align-items:center;gap:0 1rem;padding:0.75rem 1.25rem;border-bottom:1px solid rgba(255,255,255,0.04);transition:background 0.15s; }
.hist-row:last-child { border-bottom:none; }
.hist-row:hover { background:rgba(255,255,255,0.02); }
.hist-score { font-family:var(--font);font-size:1rem;font-weight:900;line-height:1;text-align:center; }
.hist-score span { font-size:0.62rem;color:var(--text-muted);font-weight:400; }
.hist-info { min-width:0; }
.hist-name { font-family:var(--font);font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:0.5rem;margin-bottom:0.35rem; }
.hist-cleared { font-size:0.48rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;padding:0.1rem 0.4rem;border:1px solid rgba(74,224,138,0.35);color:#4AE08A;flex-shrink:0; }
.hist-bar-wrap { height:3px;background:rgba(255,255,255,0.06);overflow:hidden; }
.hist-bar-fill { height:100%;transition:width 0.7s cubic-bezier(.4,0,.2,1); }
.hist-expand { font-family:var(--font);font-size:0.58rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;background:none;border:1px solid rgba(255,255,255,0.12);color:var(--text-muted);cursor:pointer;padding:0.25rem 0.65rem;transition:all 0.15s;white-space:nowrap; }
.hist-expand:hover { color:var(--text-primary);border-color:var(--color-primary); }
.hist-row.has-bosses { grid-template-rows:auto auto; }
.hist-bosses-panel { display:none;grid-column:1/-1;border-top:1px solid rgba(255,255,255,0.05);margin-top:0.5rem; }
.hist-bosses-panel .boss-grid { grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); }
.hist-bosses-panel .boss-img-wrap { aspect-ratio:1/1; }
.hist-bosses-panel .boss-name { font-size:0.47rem; }

@media(max-width:900px) { .info-grid{grid-template-columns:1fr 1fr;} .game-news{grid-template-columns:1fr;} .game-banner{grid-template-columns:auto 1fr;grid-template-rows:auto auto;} .banner-rec{grid-column:1/-1;} }
@media(max-width:640px) { .hist-row{grid-template-columns:44px 1fr auto;} .hist-expand{display:none;} }
@media(max-width:600px) { .info-grid{grid-template-columns:1fr;} .game-tabs .game-tab{padding:0.75rem 1rem;font-size:0.65rem;} .event-row{grid-template-columns:80px 1fr;} .event-time{display:none;} }

/* ══════════════════════════════
   ROSTER.HTML — filtres et cards v3
══════════════════════════════ */
:root { --c-staff:#F59E0B;--c-tank:#3B82F6;--c-heal:#22C55E;--c-dps:#EF4444;--c-mm:#60A5FA;--c-recrue:#6A7A8A; }

.roster-filters { display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap;padding:0.75rem 2rem;border-bottom:1px solid var(--border); }
.rf-group { display:flex;gap:0.3rem; }
.rf-sep   { width:1px;height:16px;background:var(--border);margin:0 0.35rem;align-self:center; }
.rf-btn { font-family:var(--font);font-size:0.56rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.28rem 0.8rem;background:none;border:1px solid var(--border);color:var(--text-muted);cursor:pointer;transition:all 0.12s; }
.rf-btn:hover { color:var(--text-primary);border-color:rgba(255,255,255,0.2); }
.rf-btn.active { color:var(--text-primary);border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.07); }
.rf-btn.active.all   { color:var(--text-primary);border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.1); }
.rf-btn.active.tank  { background:var(--c-tank);color:#05070E;border-color:var(--c-tank); }
.rf-btn.active.heal  { background:var(--c-heal);color:#05070E;border-color:var(--c-heal); }
.rf-btn.active.dps   { background:var(--c-dps);color:#fff;border-color:var(--c-dps); }
.rf-btn.active.staff { background:var(--c-staff);color:#05070E;border-color:var(--c-staff); }
.rf-label { font-size:0.48rem;font-weight:700;letter-spacing:0.28em;text-transform:uppercase;color:var(--text-muted); }

.roster-stats { display:flex;flex-wrap:wrap;border:1px solid var(--border);border-bottom:none;background:rgba(255,255,255,0.015); }
.rs-stat { display:flex;align-items:center;gap:0.55rem;padding:0.9rem 1.5rem;border-right:1px solid var(--border);font-family:var(--font);font-size:0.56rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted); }
.rs-stat strong { font-size:1.75rem;font-weight:900;letter-spacing:-0.02em;line-height:1;margin-right:0.1rem; }
.rs-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.rs-stat:last-of-type { margin-left:auto;border-right:none; }
.rs-stat.s-staff strong { color:var(--c-staff); }
.rs-stat.s-tank  strong { color:var(--c-tank); }
.rs-stat.s-heal  strong { color:var(--c-heal); }
.rs-stat.s-dps   strong { color:var(--c-dps); }
.rs-stat.s-total strong { color:var(--text-primary); }

.role-section { margin-bottom:0; }
.role-header { display:flex;align-items:center;gap:1rem;padding:0.55rem 1.5rem 0.55rem 1rem;border-top:1px solid var(--border); }
.role-header.h-staff { background:rgba(245,158,11,0.07);border-left:4px solid var(--c-staff); }
.role-header.h-tank  { background:rgba(59,130,246,0.07);border-left:4px solid var(--c-tank); }
.role-header.h-heal  { background:rgba(34,197,94,0.07);border-left:4px solid var(--c-heal); }
.role-header.h-dps   { background:rgba(239,68,68,0.07);border-left:4px solid var(--c-dps); }
.role-header.h-other { background:rgba(255,255,255,0.02);border-left:4px solid rgba(255,255,255,0.15); }
.role-header-label { font-family:var(--font);font-size:0.64rem;font-weight:800;letter-spacing:0.28em;text-transform:uppercase; }
.role-header.h-staff .role-header-label { color:var(--c-staff); }
.role-header.h-tank  .role-header-label { color:var(--c-tank); }
.role-header.h-heal  .role-header-label { color:var(--c-heal); }
.role-header.h-dps   .role-header-label { color:var(--c-dps); }
.role-header.h-other .role-header-label { color:var(--text-muted); }
.role-header-count { font-family:var(--font);font-size:0.65rem;font-weight:700;color:var(--text-muted);background:rgba(255,255,255,0.06);border:1px solid var(--border);padding:0.06rem 0.55rem;margin-left:auto;letter-spacing:0.05em; }

.member-grid { display:grid;grid-template-columns:repeat(5,1fr);border-left:1px solid var(--border);border-top:1px solid var(--border); }
.mc { display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background 0.12s;padding:1.25rem 0.75rem!important;position:relative;min-height:0; }
.mc:hover { background:rgba(255,255,255,0.028); }
.mc-avatar-wrap { display:flex;align-items:center;justify-content:center;padding:0 0 0.65rem 0; }
.mc-avatar { width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font);font-size:0.9rem;font-weight:900;overflow:hidden;flex-shrink:0; }
.mc.gm .mc-avatar,.mc.admin .mc-avatar,.mc.officier .mc-avatar { background:rgba(245,158,11,0.12);border:2px solid rgba(245,158,11,0.5);color:var(--c-staff); }
.mc.roster_mm .mc-avatar { background:rgba(59,130,246,0.12);border:2px solid rgba(59,130,246,0.4);color:var(--c-mm); }
.mc.membre .mc-avatar    { background:rgba(34,197,94,0.08);border:2px solid rgba(34,197,94,0.3);color:var(--c-heal); }
.mc.recrue .mc-avatar    { background:rgba(106,122,138,0.12);border:2px solid rgba(106,122,138,0.25);color:var(--c-recrue); }
.mc-avatar img { width:100%;height:100%;object-fit:cover; }
.mc-info { min-width:0;width:100%;text-align:center;margin-bottom:0.5rem; }
.mc-name { font-family:var(--font);font-size:0.74rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:0.2rem; }
.mc.gm .mc-name,.mc.admin .mc-name,.mc.officier .mc-name { color:var(--c-staff); }
.mc.roster_mm .mc-name { color:var(--c-mm); }
.mc.membre .mc-name    { color:var(--text-primary); }
.mc.recrue .mc-name    { color:var(--text-secondary); }
.mc-sub { font-size:0.58rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.mc-badge { display:flex;justify-content:center; }
.mc-grade { font-family:var(--font);font-size:0.5rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.12rem 0.55rem; }
.mc.gm .mc-grade,.mc.admin .mc-grade,.mc.officier .mc-grade { color:var(--c-staff);background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3); }
.mc.roster_mm .mc-grade { color:var(--c-mm);background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.3); }
.mc.membre .mc-grade    { color:var(--c-heal);background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25); }
.mc.recrue .mc-grade    { color:var(--c-recrue);background:rgba(106,122,138,0.08);border:1px solid rgba(106,122,138,0.2); }
.mc.mc-role-tank .mc-avatar { background:rgba(59,130,246,0.12);border:2px solid rgba(59,130,246,0.45);color:var(--c-tank); }
.mc.mc-role-heal .mc-avatar { background:rgba(34,197,94,0.10);border:2px solid rgba(34,197,94,0.4);color:var(--c-heal); }
.mc.mc-role-dps  .mc-avatar { background:rgba(239,68,68,0.10);border:2px solid rgba(239,68,68,0.4);color:var(--c-dps); }
.mc.mc-role-tank .mc-name { color:var(--c-tank); }
.mc.mc-role-heal .mc-name { color:var(--c-heal); }
.mc.mc-role-dps  .mc-name { color:var(--c-dps); }
.mc-grade.mc-role-tank { color:var(--c-tank);background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.3); }
.mc-grade.mc-role-heal { color:var(--c-heal);background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25); }
.mc-grade.mc-role-dps  { color:var(--c-dps);background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.25); }
@media(max-width:900px){ .member-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:500px){ .member-grid{grid-template-columns:repeat(2,1fr);} }

/* ══════════════════════════════
   CALENDRIER.HTML
══════════════════════════════ */
.cal-wrap { max-width:1400px;margin:0 auto;padding:0 2rem 4rem; }
.cal-game-tabs { display:flex;border-bottom:1px solid var(--border);margin-bottom:1.5rem; }
.cal-game-tab { font-family:var(--font);font-size:0.72rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;padding:0.85rem 2rem;border:none;background:none;cursor:pointer;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.2s; }
.cal-game-tab.wow.active   { color:#3B82F6;border-bottom-color:#3B82F6; }
.cal-game-tab.swtor.active { color:#FF3A3A;border-bottom-color:#FF3A3A; }
.cal-game-tab:hover { color:var(--text-primary); }
.view-tabs { display:flex;gap:0.5rem;margin-bottom:1.5rem;align-items:center; }
.view-tab { font-family:var(--font);font-size:0.65rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;padding:0.35rem 0.9rem;border:1px solid var(--border-strong);background:transparent;color:var(--text-muted);cursor:pointer;transition:all 0.15s; }
.view-tab.active { color:var(--color-primary);border-color:var(--color-primary);background:rgba(59,130,246,0.08); }
.view-tab:hover { color:var(--text-primary);border-color:var(--color-primary); }
.month-nav { display:flex;align-items:center;gap:0.75rem;margin-left:auto; }
.month-nav button { font-family:var(--font);font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.35rem 0.75rem;border:1px solid var(--border-strong);background:transparent;color:var(--text-muted);cursor:pointer;transition:all 0.15s; }
.month-nav button:hover { color:var(--text-primary);border-color:var(--color-primary); }
.month-nav .month-label { font-family:var(--font);font-size:0.82rem;font-weight:900;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-primary);min-width:160px;text-align:center; }
.month-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.05);margin-bottom:1.5rem;min-width:700px; }
.month-day-header { background:var(--bg-surface);padding:0.6rem;font-family:var(--font);font-size:0.65rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted);text-align:center; }
.month-day { background:var(--bg-base);min-height:150px;padding:0.6rem; }
.month-day.today { background:rgba(72,184,240,0.04); }
.month-day.other-month { opacity:0.35; }
.month-day-num { font-family:var(--font);font-size:1rem;font-weight:700;color:var(--text-muted);margin-bottom:0.5rem;padding:0 0.1rem; }
.month-day.today .month-day-num { color:var(--color-primary);font-size:0.9rem; }
#cal-content.game-wow  .month-day-header { background:rgba(72,184,240,0.07);color:#3B82F6;border-bottom:1px solid rgba(59,130,246,0.2); }
#cal-content.game-wow  .month-grid { border-color:rgba(59,130,246,0.2);background:rgba(72,184,240,0.06); }
#cal-content.game-wow  .month-day.today { background:rgba(72,184,240,0.07); }
#cal-content.game-wow  .month-day.today .month-day-num { color:#3B82F6; }
#cal-content.game-wow  .month-nav .month-label { color:#3B82F6; }
#cal-content.game-wow  .view-tab.active { color:#3B82F6;border-color:#3B82F6;background:rgba(59,130,246,0.08); }
#cal-content.game-swtor .month-day-header { background:rgba(255,58,58,0.07);color:#FF3A3A;border-bottom:1px solid rgba(255,58,58,0.2); }
#cal-content.game-swtor .month-grid { border-color:rgba(255,58,58,0.25);background:rgba(255,58,58,0.06); }
#cal-content.game-swtor .month-day.today { background:rgba(255,58,58,0.06); }
#cal-content.game-swtor .month-day.today .month-day-num { color:#FF3A3A; }
#cal-content.game-swtor .month-nav .month-label { color:#FF3A3A; }
#cal-content.game-swtor .view-tab.active { color:#FF3A3A;border-color:#FF3A3A;background:rgba(255,58,58,0.08); }
#cal-content.game-swtor .view-tab:hover { color:#FF3A3A;border-color:#FF3A3A; }
.ev-pill { padding:0.4rem 0.65rem;margin-bottom:0.35rem;cursor:pointer;transition:opacity 0.15s;border-left:3px solid;display:flex;align-items:center;gap:0.4rem;overflow:hidden; }
.ev-pill:hover { opacity:0.75; }
.ev-pill.wow   { background:rgba(72,184,240,0.1);border-color:#3B82F6; }
.ev-pill.swtor { background:rgba(255,58,58,0.1);border-color:#FF3A3A; }
.ev-pill.signed        { outline:1px solid rgba(74,224,138,0.4); }
.ev-pill.signed-absent { outline:1px solid rgba(255,58,58,0.4);opacity:0.6; }
.ev-pill.signed-maybe  { outline:1px solid rgba(240,192,64,0.4); }
.ev-pill-time  { font-family:var(--font);font-size:0.68rem;color:var(--text-muted);flex-shrink:0; }
.ev-pill-title { font-family:var(--font);font-size:0.78rem;font-weight:700;text-transform:uppercase;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1; }
.ev-pill-count { font-family:var(--font);font-size:0.68rem;color:var(--text-muted);flex-shrink:0;margin-left:auto; }
.event-card { background:var(--bg-surface);border:1px solid var(--border);border-left:3px solid var(--color-primary);margin-bottom:0.75rem;overflow:hidden;transition:background 0.15s; }
.event-card.swtor { border-left-color:var(--color-secondary); }
.event-card:hover { background:var(--bg-card-hover); }
.event-card.past { opacity:0.45; }
.event-card.signed-present { border-color:#4AE08A;box-shadow:0 0 0 1px rgba(74,224,138,0.3); }
.event-card.signed-absent  { border-color:#FF3A3A;box-shadow:0 0 0 1px rgba(255,58,58,0.3);opacity:0.8; }
.event-card.signed-maybe   { border-color:#F0C040;box-shadow:0 0 0 1px rgba(240,192,64,0.3); }
.event-header { display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:1.25rem;padding:1rem 1.5rem;cursor:pointer; }
.event-day   { font-family:var(--font);font-size:2rem;font-weight:900;line-height:1;color:var(--text-primary); }
.event-month { font-family:var(--font);font-size:0.58rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted); }
.event-time-lbl { font-family:var(--font);font-size:0.65rem;color:var(--text-muted);margin-top:0.2rem; }
.event-title { font-family:var(--font);font-size:1rem;font-weight:900;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-primary);margin-bottom:0.3rem; }
.event-meta  { display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap; }
.event-tag   { font-family:var(--font);font-size:0.6rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;padding:0.1rem 0.45rem;border:1px solid; }
.tag-wow     { color:#3B82F6;border-color:rgba(72,184,240,0.4); }
.tag-swtor   { color:#FF3A3A;border-color:rgba(255,58,58,0.4); }
.tag-type    { color:var(--text-muted);border-color:rgba(255,255,255,0.15); }
.event-actions { display:flex;align-items:center;gap:0.75rem;flex-shrink:0; }
.signup-count  { font-family:var(--font);font-size:0.65rem;color:var(--text-muted);white-space:nowrap; }
.btn-signup { font-family:var(--font);font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.4rem 1rem;border:1px solid;background:transparent;cursor:pointer;transition:all 0.15s;white-space:nowrap; }
.btn-signup.present { color:#4AE08A;border-color:rgba(74,224,138,0.5);background:rgba(74,224,138,0.08);font-weight:900; }
.btn-signup.absent  { color:#FF3A3A;border-color:rgba(255,58,58,0.4);background:rgba(255,58,58,0.06);font-weight:900; }
.btn-signup.maybe   { color:#F0C040;border-color:rgba(240,192,64,0.4);background:rgba(240,192,64,0.06); }
.btn-signup.none    { color:var(--text-muted);border-color:var(--border-strong); }
.btn-signup.none:hover { color:#4AE08A;border-color:rgba(74,224,138,0.5);background:rgba(74,224,138,0.06); }
.event-detail { display:none;padding:1rem 1.5rem 1.25rem;border-top:1px solid var(--border);background:rgba(0,0,0,0.15); }
.event-detail.open { display:block; }
.detail-desc { font-size:0.85rem;color:var(--text-muted);line-height:1.65;margin-bottom:1rem; }
.month-header { font-family:var(--font);font-size:0.6rem;font-weight:700;letter-spacing:0.35em;text-transform:uppercase;color:var(--text-muted);padding:1.5rem 0 0.75rem;border-bottom:1px solid var(--border);margin-bottom:1rem; }
#cal-content.game-wow  .month-header { color:#3B82F6;border-bottom-color:rgba(59,130,246,0.3); }
#cal-content.game-wow  .event-card:not(.swtor) { border-left-color:#3B82F6; }
#cal-content.game-wow  .event-card:not(.swtor):hover { background:rgba(72,184,240,0.04); }
#cal-content.game-wow  .btn-signup.none:hover { color:#3B82F6;border-color:rgba(72,184,240,0.5);background:rgba(72,184,240,0.06); }
#cal-content.game-swtor .month-header { color:#FF3A3A;border-bottom-color:rgba(255,58,58,0.3); }
#cal-content.game-swtor .event-card { border-left-color:#FF3A3A; }
#cal-content.game-swtor .event-card:hover { background:rgba(255,58,58,0.04); }
#cal-content.game-swtor .btn-signup.none:hover { color:#FF3A3A;border-color:rgba(255,58,58,0.5);background:rgba(255,58,58,0.06); }
.cal-empty { text-align:center;padding:3rem;color:var(--text-muted);font-family:var(--font);font-size:0.88rem; }
#cal-nologin { text-align:center;padding:4rem 2rem; }
#cal-nologin h2 { font-family:var(--font);font-size:1.1rem;font-weight:900;text-transform:uppercase;color:var(--text-primary);margin-bottom:0.75rem; }
#cal-nologin p { font-size:0.88rem;color:var(--text-muted);margin-bottom:1.5rem; }
.ev-popup { position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:2000;display:none;align-items:center;justify-content:center;padding:2rem; }
.ev-popup.open { display:flex; }
.ev-popup-box { background:var(--bg-surface);border:1px solid var(--border-strong);width:860px;max-width:95vw;padding:2.5rem;position:relative;max-height:88vh;overflow-y:auto; }
.ev-popup-close { position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--text-muted);font-size:1.2rem;cursor:pointer; }
@media(max-width:700px) { .ev-pill-title{display:none;} .event-header{grid-template-columns:70px 1fr;} .event-actions{grid-column:1/-1;} }