/* ═══════════════════════════════════════════════════════════
   COSMETICS — Frames / Banners / Emotes / Titles (Battle Pass)
   ═══════════════════════════════════════════════════════════ */

/* ─── Avatar frames (circular, 80x80) ─────────────────────── */
.cos-frame {
  position:relative; display:inline-block;
  width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #1a2336 0%, var(--bg2) 100%);
  flex-shrink:0;
}
.cos-frame-inner {
  position:absolute; inset:6px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #2a3550, #0e1524 70%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:24px; color:#8ba7d9;
  overflow:hidden;
}
.cos-frame-inner::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 -12px 20px var(--shade-2);
}

/* Bronze : double anneau gravé avec rivets */
.cos-frame.bronze { background:conic-gradient(from 0deg, #4a2f14, #a8733a, #e0a860, #a8733a, #4a2f14); }
.cos-frame.bronze::before {
  content:''; position:absolute; inset:2px; border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #d8a870 0%, #8b5a2b 55%, #3e2815 100%);
  box-shadow:inset 0 0 10px var(--shade-2), inset 0 2px 0 rgba(255,220,180,0.25);
}
.cos-frame.bronze::after {
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 50% 5%,  #ffe0b0 1px, transparent 2.5px),
    radial-gradient(circle at 95% 50%, #ffe0b0 1px, transparent 2.5px),
    radial-gradient(circle at 50% 95%, #ffe0b0 1px, transparent 2.5px),
    radial-gradient(circle at 5% 50%,  #ffe0b0 1px, transparent 2.5px);
}

/* Argent : anneau poli + liseré brillant rotatif */
.cos-frame.silver { background:conic-gradient(from 0deg, #404a5e, var(--textmid), #ffffff, var(--textmid), #404a5e); animation:cosSpin 8s linear 1; }
.cos-frame.silver::before {
  content:''; position:absolute; inset:3px; border-radius:50%;
  background:radial-gradient(circle at 30% 25%, var(--text) 0%, #9ea9b8 55%, var(--surface3) 100%);
  box-shadow:inset 0 0 12px var(--shade-2), inset 0 2px 0 rgba(255,255,255,0.4);
}
.cos-frame.silver::after {
  content:''; position:absolute; inset:-2px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.8) 15deg, transparent 40deg, transparent 360deg);
  animation:cosSpin 3s linear 1;
  mask:radial-gradient(circle at center, transparent 36px, #000 38px, #000 40px, transparent 42px);
  -webkit-mask:radial-gradient(circle at center, transparent 36px, #000 38px, #000 40px, transparent 42px);
}

/* Or (Champion) : conic rainbow-gold rotatif + glow pulsant */
.cos-frame.gold {
  background:conic-gradient(from 0deg, #6b4a0b, #ffd56b, #fff5c0, #ffd56b, #6b4a0b);
  animation:cosSpin 4s linear 1;
  box-shadow:0 0 24px rgba(255,213,107,0.6), 0 0 48px rgba(255,213,107,0.3);
}
.cos-frame.gold::before {
  content:''; position:absolute; inset:3px; border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #fff8dc 0%, var(--gold-deep) 55%, #5a3d0b 100%);
  box-shadow:inset 0 0 14px rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.55);
}
.cos-frame.gold::after {
  content:''; position:absolute; inset:-4px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, #fff5c0 20deg, transparent 50deg, transparent 180deg, #fff5c0 200deg, transparent 230deg, transparent 360deg);
  animation:cosSpin 2s linear 1 reverse;
  mask:radial-gradient(circle at center, transparent 38px, #000 40px, #000 42px, transparent 44px);
  -webkit-mask:radial-gradient(circle at center, transparent 38px, #000 40px, #000 42px, transparent 44px);
  filter:blur(0.5px);
}
.cos-frame .cos-frame-inner { z-index:2; }

@keyframes cosSpin { to { transform:rotate(360deg); } }

/* ─── Banner (stellar, 240x56) ─────────────────────────────── */
.cos-banner {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; max-width:240px; height:56px; border-radius:10px;
  background:linear-gradient(135deg, #0b1e3a 0%, #18305c 40%, var(--surface-card) 100%);
  border:1px solid rgba(130,180,255,0.4);
  overflow:hidden; box-shadow:0 0 14px rgba(80,140,240,0.25);
  font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:2px;
  color:#cfe0ff; text-shadow:0 0 8px rgba(140,200,255,0.7);
}
/* Nébuleuse mouvante */
.cos-banner::before {
  content:''; position:absolute; inset:-20%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(80,140,240,0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(180,100,220,0.25) 0%, transparent 50%);
  animation:cosBanDrift 8s ease-in-out infinite alternate;
}
/* Étoiles scintillantes */
.cos-banner::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 12% 30%, #fff 0.8px, transparent 1.5px),
    radial-gradient(circle at 28% 70%, #fff 0.8px, transparent 1.5px),
    radial-gradient(circle at 48% 20%, #fff 1px, transparent 2px),
    radial-gradient(circle at 62% 80%, #fff 0.8px, transparent 1.5px),
    radial-gradient(circle at 78% 35%, #fff 1px, transparent 2px),
    radial-gradient(circle at 92% 65%, #fff 0.8px, transparent 1.5px);
  animation:cosTwinkle 3s ease-in-out infinite;
}
.cos-banner-txt { position:relative; z-index:2; }
@keyframes cosBanDrift { 0% { transform:translate(0,0); } 100% { transform:translate(8%,-4%); } }
@keyframes cosTwinkle  { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

/* ─── Emote Pack (5 mini-emotes 38x38) ────────────────────── */
.cos-emotes { display:flex; gap:6px; flex-wrap:wrap; }
.cos-em {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:8px;
  background:radial-gradient(circle at 50% 50%, #1a2236 0%, var(--bg2) 100%);
  border:1px solid rgba(130,180,255,0.35);
  cursor:help; transition:transform .15s ease;
  overflow:hidden; font-size:0;
}
.cos-em:hover { transform:scale(1.2); border-color:#ffd56b; z-index:5; box-shadow:0 0 12px rgba(255,213,107,0.5); }

/* Vortex — anneaux concentriques bleus pulsants */
.cos-em.vortex::before {
  content:''; position:absolute; inset:6px; border-radius:50%;
  border:2px solid #5aa0ff; border-top-color:transparent;
  animation:cosSpin 1.2s linear 1;
}
.cos-em.vortex::after {
  content:''; position:absolute; inset:10px; border-radius:50%;
  background:radial-gradient(circle, #a0d0ff 0%, #5aa0ff 40%, transparent 80%);
  animation:cosVortexPulse 1.5s ease-in-out infinite;
}
@keyframes cosVortexPulse { 0%,100% { transform:scale(0.6); opacity:0.6; } 50% { transform:scale(1); opacity:1; } }

/* Chevron — triangle gold pulsant avec ring */
.cos-em.chevron::before {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-60%);
  width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent;
  border-bottom:12px solid #ffd56b;
  filter:drop-shadow(0 0 4px #ffd56b);
  animation:cosChevPulse 1.2s ease-in-out infinite;
}
.cos-em.chevron::after {
  content:''; position:absolute; inset:4px; border-radius:50%;
  border:1px solid rgba(255,213,107,0.6);
  animation:cosSpin 3s linear 1 reverse;
}
@keyframes cosChevPulse { 0%,100% { transform:translate(-50%,-60%) scale(1); } 50% { transform:translate(-50%,-60%) scale(1.2); filter:drop-shadow(0 0 10px #ffd56b); } }

/* Salut Jaffa — silhouette stylisée gold */
.cos-em.salute { background:radial-gradient(circle at 50% 30%, #3a2e10, var(--bg2)); }
.cos-em.salute::before {
  content:'⚔'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#ffd56b;
  text-shadow:0 0 8px rgba(255,213,107,0.8);
  animation:cosSalutShine 2s ease-in-out infinite;
}
@keyframes cosSalutShine {
  0%,100% { text-shadow:0 0 8px rgba(255,213,107,0.8); transform:rotate(0deg); }
  50%     { text-shadow:0 0 16px rgba(255,213,107,1), 0 0 24px rgba(255,255,200,0.6); transform:rotate(-5deg); }
}

/* Boom — détonation particules */
.cos-em.boom { background:radial-gradient(circle at 50% 50%, #5a1a1a, var(--bg2) 70%); }
.cos-em.boom::before {
  content:''; position:absolute; inset:50%; width:4px; height:4px; margin:-2px;
  border-radius:50%; background:var(--gold);
  box-shadow:
    0  -10px 0 -1px #ff7722,
    7   -7px 0 -1px #ff7722,
    10    0 0 -1px #ff7722,
    7    7px 0 -1px #ff7722,
    0  10px 0 -1px #ff7722,
    -7   7px 0 -1px #ff7722,
    -10   0 0 -1px #ff7722,
    -7  -7px 0 -1px #ff7722;
  animation:cosBoom 1.4s ease-out infinite;
}
@keyframes cosBoom {
  0%   { transform:scale(0.2); opacity:1; }
  60%  { transform:scale(1.6); opacity:0.9; }
  100% { transform:scale(2.2); opacity:0; }
}

/* Lock — symbole Stargate verrouillé */
.cos-em.lock::before {
  content:''; position:absolute; inset:7px; border-radius:50%;
  border:2px solid #9d5cd7; border-right-color:#e3b5ff; border-bottom-color:#e3b5ff;
  animation:cosSpin 2.5s linear 1;
}
.cos-em.lock::after {
  content:'✧'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#e3b5ff; font-size:16px;
  text-shadow:0 0 8px #9d5cd7;
  animation:cosLockPulse 1.8s ease-in-out infinite;
}
@keyframes cosLockPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.3); } }

/* ─── Title (animated gold text for Champion) ─────────────── */
.cos-title {
  display:inline-block; position:relative;
  font-family:var(--font-display); font-weight:900; font-size:13px; letter-spacing:2px;
  padding:4px 12px; border-radius:6px;
  background:linear-gradient(90deg, transparent, rgba(255,213,107,0.15), transparent);
  color:transparent;
  background-clip:text; -webkit-background-clip:text;
  background-image:linear-gradient(90deg, var(--gold-deep) 0%, #fff5c0 30%, #ffffff 50%, #fff5c0 70%, var(--gold-deep) 100%);
  background-size:200% 100%;
  animation:cosTitleShimmer 3s linear infinite;
  text-shadow:0 0 12px rgba(255,213,107,0.5);
  border:1px solid rgba(255,213,107,0.4);
  white-space:nowrap;
}
@keyframes cosTitleShimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* ─── Cosmetic cell wrapper (BP row) ──────────────────────── */
.cos-wrap {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 10px; border-radius:10px;
  background:linear-gradient(135deg, rgba(224,168,48,0.08), rgba(126,59,199,0.06));
  border:1px solid rgba(255,213,107,0.3);
  max-width:100%; min-width:0; overflow:hidden;
}
.cos-wrap-label {
  font-family:var(--font-mono); font-size:10px;
  color:var(--gold); text-transform:uppercase; letter-spacing:1px;
  text-align:center;
}
.cos-wrap.legend { border-color:#ffd56b; box-shadow:0 0 14px rgba(255,213,107,0.35); }

/* ─── Mini preview (for promo banners) ────────────────────── */
.cos-preview-row {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.cos-preview-cell {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; padding:4px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(224,168,48,0.12), rgba(11,15,28,0.4));
  border:1px solid rgba(255,213,107,0.4);
  overflow:hidden; cursor:help;
  transition:transform .15s ease, box-shadow .15s ease;
}
/* 🔑 LES PORTRAITS ÉTAIENT COUPÉS EN HAUT. La case fait 54 px et le rendu d'un
   avatar en fait 72 : `overflow:hidden` tranchait le crâne. On met le contenu à
   l'échelle de la case plutôt que d'agrandir la case, qui doit rester assez
   petite pour en aligner cinq. */
.cos-preview-cell > * { max-width: 100%; max-height: 100%; }
.cos-preview-cell > div,
.cos-preview-cell .sgc-frame,
.cos-preview-cell .sgc-emblem,
.cos-preview-cell .sgc-avatar-cosmetic {
  width: 46px !important; height: 46px !important;
  display: flex; align-items: center; justify-content: center;
}
.cos-preview-cell img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }
.cos-preview-cell .cos-wrap-label { display: none; }
.cos-preview-cell:hover { transform:translateY(-3px) scale(1.08); box-shadow:0 6px 14px rgba(255,213,107,0.35); z-index:5; }
.cos-preview-cell.legend { border-color:#ffd56b; box-shadow:0 0 10px rgba(255,213,107,0.35); }
.cos-preview-cell .cos-frame { width:46px; height:46px; }
.cos-preview-cell .cos-frame-inner { font-size:14px; inset:4px; }
.cos-preview-cell .cos-frame-inner::after { box-shadow:inset 0 -7px 11px var(--shade-2); }
.cos-preview-cell .cos-frame.bronze::after  { background:
    radial-gradient(circle at 50% 5%,  #ffe0b0 0.6px, transparent 1.4px),
    radial-gradient(circle at 95% 50%, #ffe0b0 0.6px, transparent 1.4px),
    radial-gradient(circle at 50% 95%, #ffe0b0 0.6px, transparent 1.4px),
    radial-gradient(circle at 5% 50%,  #ffe0b0 0.6px, transparent 1.4px); }
.cos-preview-cell .cos-frame.silver::after  { mask:radial-gradient(circle at center, transparent 20px, #000 21px, #000 23px, transparent 24px); -webkit-mask:radial-gradient(circle at center, transparent 20px, #000 21px, #000 23px, transparent 24px); }
.cos-preview-cell .cos-frame.gold::after    { mask:radial-gradient(circle at center, transparent 21px, #000 23px, #000 25px, transparent 26px); -webkit-mask:radial-gradient(circle at center, transparent 21px, #000 23px, #000 25px, transparent 26px); }

.cos-preview-cell .cos-banner { width:50px; height:20px; font-size:7px; letter-spacing:0.5px; border-radius:4px; }
.cos-preview-cell .cos-banner-txt { font-size:7px; }

.cos-preview-cell .cos-emotes { gap:2px; }
.cos-preview-cell .cos-em { width:14px; height:14px; border-radius:3px; }
.cos-preview-cell .cos-em.chevron::before { border-left-width:3px; border-right-width:3px; border-bottom-width:5px; }
.cos-preview-cell .cos-em.chevron::after  { inset:2px; }
.cos-preview-cell .cos-em.vortex::before  { inset:2px; border-width:1px; }
.cos-preview-cell .cos-em.vortex::after   { inset:3px; }
.cos-preview-cell .cos-em.salute::before  { font-size:9px; }
.cos-preview-cell .cos-em.boom::before    { width:2px; height:2px; margin:-1px;
  box-shadow:
    0  -4px 0 -0.5px #ff7722, 3 -3px 0 -0.5px #ff7722, 4 0 0 -0.5px #ff7722, 3 3px 0 -0.5px #ff7722,
    0 4px 0 -0.5px #ff7722, -3 3px 0 -0.5px #ff7722, -4 0 0 -0.5px #ff7722, -3 -3px 0 -0.5px #ff7722; }
.cos-preview-cell .cos-em.lock::before    { inset:3px; border-width:1px; }
.cos-preview-cell .cos-em.lock::after     { font-size:7px; }
/* Pack d'émotes : afficher en 2 lignes compactes */
.cos-preview-cell.emote-pack { width:auto; min-width:54px; padding:6px; }
.cos-preview-cell.emote-pack .cos-emotes { flex-wrap:wrap; max-width:44px; justify-content:center; }

.cos-preview-cell .cos-title {
  font-size:8px; padding:2px 6px; letter-spacing:1px;
}

/* 🔑 « LE NUMÉRO DES RANGS EN HAUT DE LA CASE EST COUPÉ. » Le badge était posé
   à `top:-6px; right:-6px`, donc SIX PIXELS EN DEHORS d'une case qui porte
   `overflow:hidden` : le haut du chiffre était tranché sur les cinq vignettes,
   toujours, depuis le premier jour.
   🔑 Un élément posé en dehors de son parent n'existe que si le parent laisse
      déborder. Poser en négatif et couper au bord sont deux règles qui se
      contredisent en silence — aucune erreur, juste un chiffre à moitié là.
   On le rentre DANS la case. Il se lit par-dessus le coin du dessin, ce qui est
   la place habituelle d'un numéro de palier. */
.cos-preview-tier {
  position:absolute; top:2px; right:2px; z-index:3;
  background:var(--gold); color:#000;
  font-family:var(--font-display); font-size:8px; font-weight:900;
  line-height:1.1; padding:1px 4px; border-radius:7px;
  border:1px solid #3a2a00; box-shadow:0 1px 3px rgba(0,0,0,0.6);
  min-width:15px; text-align:center;
}

/* ═══════════════════════════════════════════════════════════
   STARGATE — Porte des Étoiles (Mode Survie + Ascensionnée)
   ═══════════════════════════════════════════════════════════ */

/* Anneau Stargate : ring extérieur + event horizon + chevrons */
.sg-sg {
  position:relative; display:inline-block;
  width:64px; height:64px;
  --sg-chev-radius:26px;
  --sg-ring-dark:#3d2810;
  --sg-ring-mid:#8a5a2a;
  --sg-ring-light:#c48540;
  --sg-glow: rgba(196,133,64,0.45);
  --sg-eh-inner:var(--bg-deep); --sg-eh-mid:var(--bg-deep); --sg-eh-outer:#000;
  --sg-chev-off:#1a1208; --sg-chev-on:#ffb366;
}
.sg-sg .sg-ring {
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 45%),
    conic-gradient(from 15deg,
      var(--sg-ring-dark), var(--sg-ring-mid), var(--sg-ring-light),
      var(--sg-ring-mid), var(--sg-ring-dark),
      var(--sg-ring-mid), var(--sg-ring-light), var(--sg-ring-mid),
      var(--sg-ring-dark));
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.9),
    inset 0 0 2px var(--tint-10),
    0 0 18px var(--sg-glow);
  animation:sgRingSpin 26s linear infinite;
}
.sg-sg .sg-ring::before {
  content:''; position:absolute; inset:3px; border-radius:50%;
  border:1px solid var(--shade-5);
  box-shadow:inset 0 0 0 1px var(--tint-4);
}
.sg-sg .sg-eh {
  position:absolute; inset:15%; border-radius:50%;
  background:radial-gradient(circle, var(--sg-eh-inner) 0%, var(--sg-eh-mid) 60%, var(--sg-eh-outer) 100%);
  box-shadow:inset 0 0 16px rgba(0,0,0,0.75);
  z-index:1;
}
.sg-sg .sg-chev {
  position:absolute; top:50%; left:50%;
  width:8px; height:6px; margin:-3px 0 0 -4px;
  background:var(--sg-chev-off);
  clip-path:polygon(50% 100%, 100% 0%, 0% 0%);
  opacity:0.55;
  transform:rotate(var(--sg-chev-angle,0deg)) translateY(calc(var(--sg-chev-radius) * -1));
  transform-origin:50% 50%;
  z-index:2;
}
.sg-sg .sg-chev.lit {
  background:var(--sg-chev-on);
  opacity:1;
  filter:drop-shadow(0 0 3px var(--sg-chev-on)) drop-shadow(0 0 6px var(--sg-chev-on));
  animation:sgChevBurn 2.4s ease-in-out infinite;
}
@keyframes sgRingSpin { to { transform:rotate(360deg); } }
@keyframes sgChevBurn {
  0%,100% { filter:drop-shadow(0 0 3px var(--sg-chev-on)) drop-shadow(0 0 6px var(--sg-chev-on)); }
  50%     { filter:drop-shadow(0 0 6px var(--sg-chev-on)) drop-shadow(0 0 12px var(--sg-chev-on)); }
}

/* Tier variations */
.sg-sg.bronze {
  --sg-ring-dark:#2e1e08; --sg-ring-mid:#7a4a1e; --sg-ring-light:#b87838;
  --sg-glow: rgba(184,120,56,0.45);
  --sg-chev-on:#ffb366;
}
.sg-sg.silver {
  --sg-ring-dark:var(--surface); --sg-ring-mid:#5a6270; --sg-ring-light:var(--textsoft);
  --sg-glow: rgba(168,176,188,0.4);
  --sg-chev-on:var(--text);
}
.sg-sg.gold {
  --sg-ring-dark:#2a1f08; --sg-ring-mid:#8a6820; --sg-ring-light:var(--gold-deep);
  --sg-glow: rgba(224,176,64,0.55);
  --sg-eh-inner:#1f5a8f; --sg-eh-mid:#0a2840; --sg-eh-outer:var(--surface-card);
  --sg-chev-on:#ffd88a;
}
.sg-sg.gold .sg-eh {
  background:radial-gradient(circle, var(--sg-eh-inner) 0%, var(--sg-eh-mid) 55%, var(--sg-eh-outer) 100%);
  animation:sgEhShimmer 3.6s ease-in-out infinite;
}
.sg-sg.gold .sg-eh::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 30% 35%, rgba(180,220,255,0.35) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(140,200,255,0.25) 0%, transparent 35%);
  animation:sgEhRipple 5s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes sgEhShimmer {
  0%,100% { box-shadow:inset 0 0 16px rgba(0,0,0,0.75), inset 0 0 12px rgba(80,160,240,0.3); }
  50%     { box-shadow:inset 0 0 14px rgba(0,0,0,0.65), inset 0 0 20px rgba(120,200,255,0.5); }
}
@keyframes sgEhRipple {
  0%,100% { transform:scale(1) rotate(0deg); opacity:0.9; }
  50%     { transform:scale(1.08) rotate(8deg); opacity:1; }
}

/* Kawoosh — explosion légendaire d'ouverture de porte */
.sg-kawoosh {
  position:relative; display:inline-block;
  width:80px; height:80px;
}
.sg-kawoosh .sg-sg {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:56px; height:56px;
  --sg-chev-radius:22px;
  z-index:2;
}
.sg-kawoosh::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle,
    rgba(180,230,255,0.95) 0%,
    rgba(100,180,240,0.7)  22%,
    rgba(50,130,220,0.4)   45%,
    rgba(20,60,150,0.15)   65%,
    transparent 82%);
  animation:sgKawooshBurst 2.2s ease-out infinite;
  mix-blend-mode:screen;
  z-index:1;
}
.sg-kawoosh::after {
  content:''; position:absolute; inset:18%; border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(200,230,255,0.85) 30deg, transparent 80deg,
    transparent 120deg, rgba(160,210,255,0.75) 160deg, transparent 210deg,
    transparent 250deg, rgba(200,230,255,0.7) 290deg, transparent 340deg);
  animation:sgVortexSpin 1.8s linear 1;
  mix-blend-mode:screen;
  filter:blur(1px);
  z-index:3;
}
@keyframes sgKawooshBurst {
  0%   { transform:scale(0.65); opacity:1; }
  55%  { transform:scale(1.08); opacity:0.65; }
  100% { transform:scale(1.28); opacity:0; }
}
@keyframes sgVortexSpin { to { transform:rotate(360deg); } }

/* Top 1 — Porte couronnée avec aura */
.sg-crown {
  position:relative; display:inline-block;
  width:72px; height:80px;
  padding-top:10px;
}
.sg-crown .sg-sg {
  width:60px; height:60px;
  --sg-chev-radius:24px;
  position:absolute; bottom:4px; left:50%;
  transform:translateX(-50%);
}
.sg-crown::before {
  content:'♛'; position:absolute;
  top:-4px; left:50%; transform:translateX(-50%);
  font-size:22px; color:#ffd88a;
  text-shadow:0 0 10px #ffd88a, 0 0 18px rgba(255,200,120,0.7);
  animation:sgCrownFloat 3s ease-in-out infinite;
  z-index:3;
}
.sg-crown::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background:radial-gradient(circle at 50% 70%,
    rgba(255,216,138,0.35) 0%,
    rgba(255,180,80,0.15) 35%,
    transparent 60%);
  animation:sgCrownAura 4s ease-in-out infinite;
  z-index:0;
}
@keyframes sgCrownFloat {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%     { transform:translateX(-50%) translateY(-3px); }
}
@keyframes sgCrownAura {
  0%,100% { opacity:0.7; transform:scale(1); }
  50%     { opacity:1; transform:scale(1.05); }
}

/* Ascensionné — forme énergétique Alterans (blanc/doré) */
.sg-ascended {
  position:relative; display:inline-block;
  width:68px; height:68px;
}
.sg-ascended::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,0.95) 0%,
    rgba(255,245,210,0.7)  22%,
    rgba(255,210,130,0.35) 45%,
    rgba(220,160,60,0.15)  65%,
    transparent 80%);
  animation:sgAscPulse 3s ease-in-out infinite;
  mix-blend-mode:screen;
  z-index:1;
}
.sg-ascended::after {
  content:''; position:absolute; inset:12%; border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent, rgba(255,255,255,0.9), transparent,
    rgba(255,230,170,0.85), transparent,
    rgba(255,255,255,0.9), transparent);
  filter:blur(1.5px);
  animation:sgVortexSpin 4.2s linear 1 reverse;
  mix-blend-mode:screen;
  z-index:2;
}
.sg-ascended .sg-asc-core {
  position:absolute; top:50%; left:50%;
  width:20px; height:38px;
  border-radius:50% 50% 45% 45% / 60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 30%,
    #ffffff 0%,
    rgba(255,240,200,0.85) 40%,
    rgba(255,200,120,0.4) 70%,
    transparent 100%);
  transform:translate(-50%,-50%);
  filter:blur(0.8px) drop-shadow(0 0 8px rgba(255,240,200,0.8));
  animation:sgAscFloat 3.5s ease-in-out infinite;
  z-index:3;
}
.sg-ascended .sg-asc-core::before {
  content:''; position:absolute; inset:-20% 30%;
  background:radial-gradient(circle,
    rgba(255,255,255,0.6) 0%, transparent 70%);
  border-radius:50%;
  animation:sgAscHead 3.5s ease-in-out infinite;
}
@keyframes sgAscPulse {
  0%,100% { transform:scale(1); opacity:0.85; }
  50%     { transform:scale(1.08); opacity:1; }
}
@keyframes sgAscFloat {
  0%,100% { transform:translate(-50%,-50%) scaleY(1); }
  50%     { transform:translate(-50%,-56%) scaleY(1.06); }
}
@keyframes sgAscHead {
  0%,100% { transform:translateY(0); opacity:0.7; }
  50%     { transform:translateY(-3px); opacity:1; }
}

/* Intégration dans les cartes milestones du mode Survie (tailles déjà compactes, pas de scale) */

/* ═══════════════════════════════════════════════════════════
   COSMETICS EQUIP UI v2 — Slots + inventaire (onglet Cosmétiques)
   ═══════════════════════════════════════════════════════════ */
/* Avatar framed : neutralise le conteneur prof2-avatar pour laisser passer le cadre cosmetic */
.prof2-avatar.prof2-avatar-framed {
  border: none !important;
  background: none !important;
  overflow: visible !important;
  box-shadow: none !important;
  width: 80px; height: 80px;
}
.prof2-avatar.prof2-avatar-framed:hover { box-shadow: none !important; transform: none; }
.prof2-avatar.prof2-avatar-framed > .cos-frame { width:80px; height:80px; }
.prof2-avatar.prof2-avatar-framed img,
.prof2-avatar.prof2-avatar-framed svg,
.prof2-avatar.prof2-avatar-framed canvas { width: auto; height: auto; }

/* Neutralise les stroke/border dans la preview avatar de l'édition profil si encadré */
#peAvatarPreview:has(.cos-frame) { border: none !important; box-shadow: none !important; overflow: visible !important; }

/* ─── Wrapper principal ─── */
.cos-v2-wrap { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }

.cos-section-hdr {
  font-family:var(--font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--textsoft); padding: 6px 2px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.18);
  margin-bottom: 10px;
}
.cos-inv-total {
  display: inline-block; margin-left: 10px;
  padding: 2px 10px; border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent);
  font-size: 11px; font-weight: 700;
}

/* ─── Slots équipés ─── */
.cos-slots-v2 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 6px;
}
.cos-slot-v2 {
  position: relative; background: var(--tint-1);
  border: 1px dashed rgba(var(--accent-rgb), 0.22);
  border-radius: 12px; padding: 12px 10px 10px;
  min-height: 170px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; gap: 8px;
  transition: all 0.25s;
}
.cos-slot-v2.filled {
  background: linear-gradient(160deg, rgba(var(--accent-rgb),0.08) 0%, rgba(var(--accent-rgb),0.02) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.12);
}
.cos-slot-v2:hover { border-color: rgba(var(--accent-rgb), 0.5); transform: translateY(-1px); }
.cos-slot-type {
  font-family:var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--textsoft); margin-bottom: 4px;
}
.cos-slot-v2.filled .cos-slot-type { color: var(--accent); }
.cos-slot-preview {
  flex: 1; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 80px;
}
.cos-slot-name {
  font-family:var(--font-mono);
  font-size: 11px; color: var(--textmid);
  text-align: center; line-height: 1.25;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.cos-slot-blank {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family:var(--font-mono);
  font-size: 12px; color: var(--textsoft);
  opacity: 0.4; letter-spacing: 1px;
}
.cos-slot-remove {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(var(--danger-rgb, 255, 64, 64), 0.5);
  background: var(--shade-5); color: var(--danger, #ff4040);
  font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0; transition: all 0.2s;
}
.cos-slot-remove:hover { background: var(--danger, #ff4040); color: #000; transform: scale(1.1); }

/* ─── Inventaire par type ─── */
.cos-inv-group-v2 { margin-bottom: 14px; }
.cos-inv-group-hdr-v2 {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; padding: 4px 2px;
}
.cos-inv-group-type {
  font-family:var(--font-mono);
  font-size: 12px; color: var(--textmid);
  letter-spacing: 1.5px; text-transform: uppercase;
}
.cos-inv-count-v2 {
  padding: 1px 8px; border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 10px; font-weight: 700;
  font-family:var(--font-display);
}
.cos-inv-grid-v2 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.cos-card-v2 {
  background: var(--tint-1);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 10px; padding: 14px 8px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: all 0.2s;
}
.cos-card-v2:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.05);
  transform: translateY(-2px);
}
.cos-card-v2.equipped {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.2);
}
.cos-card-preview-v2 {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 90px; width: 100%; overflow: hidden;
}
.cos-card-preview-v2 .cos-title,
.cos-slot-preview .cos-title {
  font-size: 9px; letter-spacing: 1px; padding: 3px 6px;
  max-width: 100%; white-space: normal; word-break: break-word;
  text-align: center; line-height: 1.2;
}
.cos-card-preview-v2 .cos-frame,
.cos-slot-preview .cos-frame { width: 48px; height: 48px; }
.cos-card-preview-v2 .sg-sg,
.cos-slot-preview .sg-sg { width: 48px; height: 48px; --sg-chev-radius: 20px; }
.cos-slot-preview { flex-direction: column; gap: 6px; overflow: hidden; }
.cos-card-name-v2 {
  font-family:var(--font-mono);
  font-size: 11px; color: var(--textmid);
  text-align: center; line-height: 1.3;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.cos-card-btn-v2 {
  width: 100%; padding: 6px 10px;
  font-family:var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; border-radius: var(--radius-s);
  cursor: pointer;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent); transition:var(--btn-tr);
}
.cos-card-btn-v2:hover { background: rgba(var(--accent-rgb), 0.2); }
.cos-card-btn-v2.equipped {
  background: var(--accent); color: #000;
  border-color: var(--accent);
}
.cos-card-btn-v2.equipped:hover { background: rgba(var(--danger, #ff4040), 0.8); color:var(--textbright); border-color: var(--danger, #ff4040); }

.cos-empty-v2 {
  padding: 50px 20px; margin-top: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}
.cos-empty-txt {
  font-family:var(--font-mono);
  color: var(--textsoft); max-width: 420px;
  line-height: 1.5; font-size: 13px;
}

@media (max-width: 700px) {
  .cos-slots-v2 { grid-template-columns: repeat(2, 1fr); }
  .cos-inv-grid-v2 { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ─── Chat : badge titre équipé + bouton emote picker ─── */
.chat-cos-title {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,200,80,0.25), rgba(255,230,120,0.12));
  border: 1px solid rgba(255,200,80,0.45);
  color: #ffd77a;
  font-family:var(--font-display);
  font-size: 9px; font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(255,200,80,0.6);
  vertical-align: middle;
}

.chat-emote-btn {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: var(--radius);
  width: 36px; height: 36px;
  font-size: 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition:var(--btn-tr);
  color: var(--textmid); padding: 0; margin-right: 4px;
}
.chat-emote-btn:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.45);
  transform: scale(1.05);
}

.chat-emote-picker {
  background: rgba(12, 18, 30, 0.98);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 10px;
  padding: 8px;
  display: flex; gap: 6px;
  box-shadow: 0 6px 24px var(--shade-5), 0 0 16px rgba(var(--accent-rgb), 0.2);
  z-index:var(--z-overlay-fullscreen);
  backdrop-filter: blur(10px);
}
.chat-emote-pick {
  background: var(--tint-2);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s; padding: 0;
}
.chat-emote-pick:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.5);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════
   ANCIENNES CLASSES (sgc-cosmetics-equip v1) — ignorer
   ═══════════════════════════════════════════════════════════ */
.cos-slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.cos-slot {
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 10px;
  padding: 10px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: all 0.2s;
}
.cos-slot:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.07);
}
.cos-slot-hdr {
  font-family:var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--textsoft);
  text-transform: uppercase;
}
.cos-slot-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}
.cos-slot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--textsoft);
  opacity: 0.45;
  font-size: 28px;
  font-family:var(--font-mono);
}
.cos-unequip-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--danger, #ff4040);
  background: var(--shade-3);
  color: var(--danger, #ff4040);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition:var(--btn-tr);
}
.cos-unequip-btn:hover { background: var(--danger, #ff4040); color: #000; }

.cos-inv-group { margin-bottom: 18px; }
.cos-inv-group-hdr {
  font-family:var(--font-mono);
  font-size: 13px;
  color: var(--textmid);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.15);
}
.cos-inv-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 11px;
  font-family:var(--font-display);
  font-weight: 700;
}
.cos-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.cos-inv-card {
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 10px;
  padding: 12px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.cos-inv-card:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
  transform: translateY(-2px);
}
.cos-inv-card.cos-inv-eq {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.25);
}
.cos-inv-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  width: 100%;
}
.cos-inv-btn {
  width: 100%;
  padding: 6px 10px;
  font-family:var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: var(--radius-s);
  cursor: pointer;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  transition:var(--btn-tr);
}
.cos-inv-btn:hover { background: rgba(var(--accent-rgb), 0.18); }
.cos-inv-btn-eq {
  background: var(--accent);
  color: #000;
  cursor: default;
}
.cos-inv-btn-eq:hover { background: var(--accent); }

.cos-empty {
  padding: 50px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

@media (max-width: 700px) {
  .cos-slots-grid { grid-template-columns: repeat(2, 1fr); }
  .cos-inv-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════
   v3 — Auras / Titres / Bannières / Emblèmes (Monument/Survie/BP/Faction)
   Catalogue : backend/src/data/cosmetics-catalog.js
   ═══════════════════════════════════════════════════════════ */

.sgc-avatar-cosmetic { position:relative; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; line-height:0; font-size:0; vertical-align:middle; --halo-out:-10%; --halo-in:-3%; }
.sgc-avatar-cosmetic > * { position:relative; z-index:2; }

.a-cyan::before, .a-cyan::after,
.a-holo::before, .a-holo::after,
.a-prism::before, .a-prism::after,
.a-void::before, .a-void::after,
.a-flame::before, .a-flame::after,
.a-blood::before, .a-blood::after,
.a-wraith::before, .a-wraith::after,
.a-ashes::before, .a-ashes::after,
.a-plasma::before, .a-plasma::after,
.a-apoc::before, .a-apoc::after,
.a-nebula::before, .a-nebula::after,
.a-comet::before, .a-comet::after { content:''; position:absolute; border-radius:50%; pointer-events:none; }

@keyframes sgcSpin { to { transform:rotate(360deg); } }
@keyframes sgcPulse { 0%,100% { opacity:.5; transform:scale(.95); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes sgcFlicker { 0%,100% { opacity:.6; transform:scale(1); } 25% { opacity:.95; transform:scale(1.04); } 50% { opacity:.7; transform:scale(.97); } 75% { opacity:1; transform:scale(1.06); } }
@keyframes sgcHoloshift { 0% { background-position:0% 0%; } 100% { background-position:300% 300%; } }
@keyframes sgcTitleshift { to { background-position:200% 0; } }
@keyframes sgcOrbit { from { transform:rotate(0) translateX(70%) rotate(0); } to { transform:rotate(360deg) translateX(70%) rotate(-360deg); } }
@keyframes sgcAshFall { 0% { transform:translateY(-10%); opacity:0; } 50% { opacity:.8; } 100% { transform:translateY(120%); opacity:0; } }

/* 🏛 MONUMENT */
.a-cyan::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(77,255,234,.6) 0%,rgba(77,108,255,.3) 50%,transparent 70%); filter:blur(8px); animation:sgcPulse 2.4s ease-in-out 1; z-index:0; }
.a-cyan::after { inset:var(--halo-in); border:2px solid rgba(77,255,234,.8); box-shadow:0 0 30px rgba(77,255,234,.6),inset 0 0 30px rgba(77,108,255,.4); z-index:1; }
.a-holo::before { inset:var(--halo-out); background:linear-gradient(115deg,transparent 0%,#ff4d9e 25%,#4dffea 50%,#ffd33d 75%,transparent 100%); background-size:300% 300%; filter:blur(10px); animation:sgcHoloshift 4s linear 1; mix-blend-mode:screen; z-index:0; }
.a-holo::after { inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%); background-size:200% 200%; animation:sgcHoloshift 3s linear 1; mix-blend-mode:overlay; z-index:3; }
.a-prism::before { inset:var(--halo-out); background:conic-gradient(from 0deg,#ff4d2e,#ffd33d,#9aff4d,#4dffea,#4d6cff,#c44dff,#ff4d2e); filter:blur(14px); opacity:.85; animation:sgcSpin 8s linear infinite; z-index:0; }
.a-prism::after { inset:var(--halo-in); background:conic-gradient(from 90deg,transparent 0%,#fff 5%,transparent 15%,transparent 100%); animation:sgcSpin 3s linear infinite reverse; opacity:.6; z-index:1; mix-blend-mode:screen; }
.a-void::before { inset:var(--halo-out); background:radial-gradient(circle,#000 30%,#7c2eff 50%,transparent 75%); filter:blur(12px); animation:sgcPulse 4s ease-in-out 1; z-index:0; }
.a-void::after { inset:var(--halo-in); border:1px solid rgba(196,77,255,.8); box-shadow:0 0 20px rgba(124,46,255,.8),inset 0 0 20px rgba(196,77,255,.5); z-index:1; }
.a-flame::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(255,180,80,.5) 0%,rgba(201,59,30,.4) 40%,transparent 70%); filter:blur(12px); animation:sgcFlicker 1.4s ease-in-out 1; z-index:0; }
.a-flame::after { inset:var(--halo-in); background:conic-gradient(from 0deg,#ffb850,#c93b1e,#ff7a2e,#ffd33d,#c93b1e,#ffb850); filter:blur(4px); animation:sgcSpin 4s linear infinite; opacity:.7; mix-blend-mode:screen; z-index:1; }

/* ⚔ SURVIE */
.a-blood::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(255,30,30,.5) 0%,rgba(160,0,0,.4) 50%,transparent 75%); filter:blur(10px); animation:sgcPulse 1.1s ease-in-out 1; z-index:0; }
.a-blood::after { inset:var(--halo-in); border:1px solid rgba(255,40,40,.7); box-shadow:0 0 24px rgba(255,30,30,.7),inset 0 0 16px rgba(160,0,0,.5); z-index:1; }
.a-wraith::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(120,255,80,.5) 0%,rgba(50,160,30,.4) 50%,transparent 75%); filter:blur(11px); animation:sgcPulse 3s ease-in-out 1; z-index:0; }
.a-wraith::after { inset:var(--halo-in); border:1px solid rgba(120,255,80,.7); box-shadow:0 0 22px rgba(80,200,40,.7),inset 0 0 16px rgba(50,160,30,.5); z-index:1; mix-blend-mode:screen; }
.a-ashes::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(80,75,70,.6) 0%,rgba(30,28,26,.4) 50%,transparent 75%); filter:blur(10px); z-index:0; }
.a-ashes::after { inset:var(--halo-out); background-image:radial-gradient(2px 2px at 30% 20%,#888 50%,transparent),radial-gradient(1px 1px at 60% 50%,#aaa 50%,transparent),radial-gradient(2px 2px at 80% 80%,#666 50%,transparent); animation:sgcAshFall 3.2s linear infinite; z-index:1; }
.a-plasma::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(80,180,255,.5) 0%,rgba(120,40,255,.4) 50%,transparent 75%); filter:blur(9px); animation:sgcPulse 1.8s ease-in-out 1; z-index:0; }
.a-plasma::after { inset:var(--halo-in); border:2px dashed rgba(140,200,255,.85); box-shadow:0 0 30px rgba(80,180,255,.7),inset 0 0 18px rgba(120,40,255,.6); animation:sgcSpin 2.4s linear infinite; z-index:1; }
.a-apoc::before { inset:var(--halo-out); background:conic-gradient(from 0deg,#400000,#000,#8a0000,#1a1a1a,#400000); filter:blur(13px); animation:sgcSpin 6s linear infinite; z-index:0; }
.a-apoc::after { inset:var(--halo-in); background:radial-gradient(circle,rgba(255,30,30,.7) 0%,rgba(40,0,0,.4) 60%,transparent 80%); filter:blur(6px); animation:sgcFlicker 1.6s ease-in-out 1; mix-blend-mode:screen; z-index:1; }

/* ⭐ BATTLE PASS */
.a-nebula::before { inset:var(--halo-out); background:radial-gradient(circle at 30% 30%,rgba(196,77,255,.5),transparent 60%),radial-gradient(circle at 70% 60%,rgba(77,255,234,.4),transparent 60%),radial-gradient(circle at 50% 80%,rgba(255,140,200,.4),transparent 60%); filter:blur(12px); animation:sgcPulse 5s ease-in-out 1; z-index:0; }
.a-nebula::after { inset:var(--halo-in); border:1px solid rgba(196,77,255,.5); box-shadow:0 0 22px rgba(120,80,255,.5); z-index:1; }
.a-comet::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(77,170,255,.4) 0%,rgba(40,80,180,.3) 50%,transparent 75%); filter:blur(9px); animation:sgcPulse 4s ease-in-out 1; z-index:0; }
.a-comet::after { width:14px; height:14px; top:50%; left:50%; margin:-7px 0 0 -7px; background:radial-gradient(circle,#fff 0%,#aaddff 40%,transparent 70%); box-shadow:0 0 16px #aaddff,0 0 32px #4dccff,-30px 0 24px rgba(170,221,255,.4); animation:sgcOrbit 4s linear infinite; z-index:1; }

/* TITRES */
.sgc-title { font-family:var(--font-mystic-deco); font-weight:900; letter-spacing:5px; text-transform:uppercase; }
.t-architect { background:linear-gradient(180deg,#fff7d6,#ffd33d 50%,#a07a10); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 6px rgba(255,211,61,.3); }
.t-legend { background:linear-gradient(90deg,#4dffea,#4d6cff,#c44dff,#4dffea); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sgcTitleshift 4s linear 1; text-shadow:0 0 12px rgba(77,255,234,.4); }
.t-doci { font-family:'MedievalSharp',serif; color:var(--textbright); text-shadow:0 0 6px #c93b1e,0 0 14px #ff7a2e,0 0 24px #c93b1e; animation:sgcFlicker 2s ease-in-out 1; }
.t-gate { background:linear-gradient(90deg,#ffd33d,#fff,#ffd33d); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sgcTitleshift 3s linear 1; }
.t-steel { background:linear-gradient(180deg,var(--textmid),#90a4ae 60%,#3e5060); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 4px rgba(0,0,0,.5); }
.t-apoc { background:linear-gradient(90deg,#8a0000,#1a1a1a,#8a0000); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sgcTitleshift 2s linear 1; text-shadow:0 0 10px rgba(255,30,30,.5); }
.t-pioneer { background:linear-gradient(90deg,#cfdde8,#4dccff,#a8b8d8); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sgcTitleshift 5s linear 1; text-shadow:0 0 12px rgba(120,200,255,.4); }

/* ── ⚔ PODIUM D'OPÉRATION D'ESCOUADE (26/08) ────────────────────────────────
   Les titres du jeu animent UNE SEULE FOIS (`animation: … 1`), et c'est le bon
   réglage par défaut : un texte qui bouge en permanence sur un profil devient
   du bruit au bout de dix secondes.
   « Fer de Lance » fait exception, en connaissance de cause : il ne se gagne
   qu'à la clôture d'un cycle, par les quatre membres d'UNE escouade sur
   cinquante-cinq. C'est la distinction la plus rare du jeu, elle a le droit de
   se voir. Le mouvement reste lent (5,5 s) et n'est qu'un reflet qui traverse —
   la couleur, elle, ne bouge pas.
   Deux couches de dégradé, toutes deux découpées sur le texte : l'acier chauffé
   en dessous, un éclat qui glisse au-dessus, comme une lame qui accroche la
   lumière en tournant. */
.t-fer-de-lance {
  background:
    linear-gradient(105deg, transparent 40%, rgba(255,255,255,.92) 50%, transparent 60%),
    linear-gradient(180deg, #fff3d4 0%, #ffb347 40%, #e0641c 64%, #8a3608 100%);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 10px rgba(255,150,60,.55), 0 0 24px rgba(255,90,20,.32);
  animation: sgcLanceSweep 5.5s linear infinite;
}
@keyframes sgcLanceSweep {
  0%   { background-position: -130% 0, 0 0; }
  100% { background-position:  230% 0, 0 0; }
}

/* Le podium 2-3 : le même acier, sans la chauffe ni la boucle. On distingue la
   première place au premier coup d'oeil — sinon les trois titres se valent et
   la victoire ne se voit plus. */
.t-ligne-de-front {
  background: linear-gradient(180deg, #e8f0f8 0%, #9fb4c9 45%, #4a6076 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 12px rgba(150,190,230,.30);
}

/* Mouvement réduit : le reflet s'arrête, la couleur reste. Un titre ne perd
   jamais sa lisibilité pour un réglage d'accessibilité. */
@media (prefers-reduced-motion: reduce) {
  .t-fer-de-lance { animation: none; background-position: 50% 0, 0 0; }
}

/* BANNIÈRES */
.sgc-banner { display:inline-block; padding:10px 24px; font-family:var(--font-mystic-deco); font-size:13px; letter-spacing:3px; text-transform:uppercase; position:relative; }
.b-gold { background:linear-gradient(180deg,#3d2a08,#1a0f02); border:1px solid #a07a10; color:#ffd33d; box-shadow:0 0 20px rgba(255,211,61,.25),inset 0 0 12px rgba(255,211,61,.15); }
.b-gold::before, .b-gold::after { content:'❖'; position:absolute; top:50%; transform:translateY(-50%); color:#ffd33d; font-size:12px; }
.b-gold::before { left:6px; } .b-gold::after { right:6px; }
.b-ori { background:linear-gradient(180deg,#2a0a04,#100302); border:1px solid #c93b1e; color:#ffb89b; box-shadow:0 0 22px rgba(201,59,30,.4),inset 0 0 14px rgba(255,122,46,.2); clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%); }
.b-prism { background:linear-gradient(90deg,#2a0a04,var(--surface-card),#1a0a2e,#2a0a04); border:1px solid; border-image:linear-gradient(90deg,#ff4d2e,#ffd33d,#4dffea,#c44dff,#ff4d2e) 1; color:var(--textbright); box-shadow:0 0 25px rgba(196,77,255,.3); }
.b-firstlight { background:linear-gradient(135deg,#0a1a3e 0%,#3e1a5a 40%,#5a3e7a 70%,#7a5a9e 100%); border:1px solid #4dccff; color:var(--textbright); box-shadow:0 0 25px rgba(77,170,255,.45),inset 0 0 14px rgba(255,180,220,.25); }

/* EMBLÈMES */
.sgc-emblem { width:80px; height:80px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:40px; position:relative; }
.e-hexa { background:radial-gradient(circle,var(--surface-card) 0%,#000 80%); border:2px solid #4dccff; color:#cfdde8; box-shadow:0 0 24px rgba(77,170,255,.5),inset 0 0 16px rgba(120,200,255,.2); }
.e-hexa::before { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px dashed #4dccff; animation:sgcSpin 18s linear infinite; opacity:.6; }
.e-ori { background:radial-gradient(circle,#1a0a2e 0%,#000 80%); border:2px solid #c93b1e; color:#ffd33d; box-shadow:0 0 30px rgba(201,59,30,.5),inset 0 0 20px rgba(255,211,61,.2); animation:sgcPulse 3s ease-in-out 1; }
.e-ori::before { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px dashed #ffd33d; animation:sgcSpin 20s linear infinite; opacity:.6; }
.e-atom { background:radial-gradient(circle,#0a0a2e 0%,#000 80%); border:2px solid #4dffea; color:var(--textbright); box-shadow:0 0 24px rgba(77,255,234,.5); }
.e-atom::before, .e-atom::after { content:''; position:absolute; inset:-2px; border-radius:50%; border:1px solid rgba(77,255,234,.6); }
.e-atom::before { animation:sgcSpin 4s linear infinite; clip-path:polygon(0 50%,100% 50%,100% 52%,0 52%); }
.e-atom::after { animation:sgcSpin 6s linear infinite reverse; clip-path:polygon(50% 0,52% 0,52% 100%,50% 100%); }

/* CADRE Pioneer (BP T3) — l'avatar (img/svg/div) remplit complètement le cercle.
   box-sizing:border-box → la border 2px et padding 0 sont inclus dans la taille,
   pas d'overflow inattendu. Les enfants directs sont absolutely-positioned pour
   fill le cercle visible (chat 36px ET apothéose plus grand). */
.f-pioneer {
  position:relative;
  background:radial-gradient(circle,#0a1a3e 0%,#0a0a1a 70%);
  border:2px solid #4dccff;
  box-shadow:0 0 18px rgba(77,170,255,.5),inset 0 0 10px rgba(170,221,255,.2);
  padding:0; border-radius:50%; overflow:hidden;
  box-sizing:border-box;
}
.f-pioneer > img,
.f-pioneer > svg,
.f-pioneer > div {
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  border-radius:50%; object-fit:cover; display:block;
}

/* SKIN bât. Monument tier 2 */
.skin-mon-t2 { filter:hue-rotate(15deg) brightness(1.15) drop-shadow(0 0 12px rgba(255,211,61,.5)); }

/* ── Conseil Galactique — titre « L'Insaisissable » (survivant d'un avis) ── */
.t-insaisissable { background:linear-gradient(180deg,#d8ffe9,#4fd48a 50%,#1a7a4a); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 6px rgba(79,212,138,.3); }
.t-hegemon { background:linear-gradient(90deg,var(--gold-bright),#fff2c0,#c9a227,#a24dff,var(--gold-bright)); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sgcTitleshift 5s linear 1; text-shadow:0 0 12px rgba(255,211,61,.45),0 0 22px rgba(162,77,255,.25); }

/* ═══ Battle Pass S2 — « L'Ordre du Serpent » (régalia Goa'uld, or/serpent) ═══ */
/* Auras */
.a-naquadah::before, .a-naquadah::after,
.a-goauld::before, .a-goauld::after { content:''; position:absolute; border-radius:50%; pointer-events:none; }
.a-naquadah::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(255,211,61,.6) 0%,rgba(200,150,20,.3) 50%,transparent 70%); filter:blur(8px); animation:sgcPulse 2.6s ease-in-out infinite; z-index:0; }
.a-naquadah::after { inset:var(--halo-in); border:2px solid rgba(255,211,61,.85); box-shadow:0 0 30px rgba(255,211,61,.6),inset 0 0 26px rgba(255,180,40,.4); z-index:1; }
.a-goauld::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(255,240,180,.6) 0%,rgba(255,180,40,.35) 45%,transparent 72%); filter:blur(9px); animation:sgcPulse 2.1s ease-in-out infinite; z-index:0; }
.a-goauld::after { inset:var(--halo-in); border:2px solid rgba(255,236,150,.9); box-shadow:0 0 34px rgba(255,220,120,.7),inset 0 0 28px rgba(255,200,60,.5); z-index:1; }
/* Titre */
.t-grandmaitre { background:linear-gradient(90deg,#ffe9a8,#ffd33d,#c9971a,#ffe9a8); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sgcTitleshift 4s linear infinite; text-shadow:0 0 12px rgba(255,200,60,.45); }
/* Bannière */
.b-serpent { background:linear-gradient(180deg,#3a2606,#160c01); border:1px solid #c9971a; color:#ffe9a8; box-shadow:0 0 22px rgba(255,200,60,.35),inset 0 0 14px rgba(255,211,61,.2); }
.b-serpent::before, .b-serpent::after { content:'🐍'; position:absolute; top:50%; transform:translateY(-50%); font-size:11px; }
.b-serpent::before { left:6px; } .b-serpent::after { right:6px; }
/* Cadre */
.f-serpent { position:relative; background:radial-gradient(circle,#2a1c05 0%,#0f0a02 70%); border:2px solid var(--gold-deep); box-shadow:0 0 18px rgba(255,200,60,.55),inset 0 0 10px rgba(255,211,61,.25); padding:0; border-radius:50%; overflow:hidden; box-sizing:border-box; }
.f-serpent > img, .f-serpent > svg, .f-serpent > div { position:absolute; inset:0; width:100% !important; height:100% !important; border-radius:50%; object-fit:cover; display:block; }
/* Emblème */
.e-serpent { background:radial-gradient(circle,#1c1205 0%,#000 80%); border:2px solid var(--gold-deep); color:#ffd33d; box-shadow:0 0 30px rgba(255,200,60,.5),inset 0 0 20px rgba(255,211,61,.2); }
.e-serpent::before { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px dashed #ffd33d; animation:sgcSpin 20s linear infinite; opacity:.6; }

/* ── S2 : rendu par IMAGES détourées (override du CSS procédural ci-dessus) ── */
/* Auras : PNG halo (centre transparent) débordant autour de l'avatar */
.a-naquadah::before, .a-goauld::before {
  inset:-55%; background-repeat:no-repeat; background-position:center; background-size:contain;
  filter:none; border:none; border-radius:0; box-shadow:none; z-index:0;
  animation:sgcPulse 3.2s ease-in-out infinite;
}
.a-naquadah::before { background-image:url('../img/cosmetics/aura_naquadah.png?v=1'); }
.a-goauld::before   { background-image:url('../img/cosmetics/aura_goauld.png?v=2'); }
.a-naquadah::after, .a-goauld::after { content:none; }
/* Titre : plaque gravée (texte du jeu masqué, l'image porte le libellé) */
.t-grandmaitre {
  display:inline-block; height:1.9em; aspect-ratio:1024/276;
  background:url('../img/cosmetics/title_grandmaitre.png?v=1') center/contain no-repeat;
  -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:transparent; color:transparent; text-shadow:none;
  text-indent:-9999px; overflow:hidden; white-space:nowrap; vertical-align:middle; animation:none;
}
/* Bannière : étendard portrait */
.b-serpent {
  display:inline-block; width:64px; height:94px; padding:0;
  background:url('../img/cosmetics/banner_grandmaitre.png?v=1') center/contain no-repeat;
  border:none; box-shadow:none; color:transparent; font-size:0;
}
.b-serpent::before, .b-serpent::after { content:none; }
/* Emblème : médaillon rond */
.e-serpent {
  background:url('../img/cosmetics/emblem_serpent.png?v=1') center/contain no-repeat;
  border:none; box-shadow:none; color:transparent; font-size:0;
}
.e-serpent::before { content:none; }
/* Cadre : anneau serpent en overlay au-dessus de l'avatar (trou transparent) */
.f-serpent { background:none; border:none; box-shadow:none; overflow:visible; }
.f-serpent > img, .f-serpent > svg, .f-serpent > div { inset:8%; width:84% !important; height:84% !important; }
.f-serpent::after {
  content:''; position:absolute; inset:-16%; z-index:5; pointer-events:none;
  background:url('../img/cosmetics/frame_serpent.png?v=2') center/contain no-repeat;
}
/* Empyre — Hégémon : emblème (médaillon) + cadre (anneau overlay), même mécanique que le Serpent */
.e-hegemon {
  background:url('../img/cosmetics/emblem_hegemon.png?v=1') center/contain no-repeat;
  border:none; box-shadow:none; color:transparent; font-size:0;
}
.e-hegemon::before { content:none; }
.f-hegemon { background:none; border:none; box-shadow:none; overflow:visible; }
.f-hegemon > img, .f-hegemon > svg, .f-hegemon > div { inset:8%; width:84% !important; height:84% !important; }
.f-hegemon::after {
  content:''; position:absolute; inset:-16%; z-index:5; pointer-events:none;
  background:url('../img/cosmetics/frame_hegemon.png?v=2') center/contain no-repeat;
}
/* Empyre — Combattant (rang inférieur) : titre acier/pourpre + emblème */
.t-combattant { background:linear-gradient(90deg,var(--textmid),var(--text),#9aa6b2,#a24dff,var(--textmid)); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 10px rgba(180,190,210,.4),0 0 18px rgba(162,77,255,.2); }
.e-combattant {
  background:url('../img/cosmetics/emblem_combattant.png?v=1') center/contain no-repeat;
  border:none; box-shadow:none; color:transparent; font-size:0;
}
.e-combattant::before { content:none; }
/* Empyre — Saison 2 (cyan glacé / argent Anciens) */
.t-hegemon-s2 { background:linear-gradient(90deg,#9ff0ff,#eafcff,#4dd0e8,var(--rarity-rare),#9ff0ff); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sgcTitleshift 5s linear 1; text-shadow:0 0 12px rgba(77,208,232,.5),0 0 22px rgba(127,176,255,.25); }
.t-combattant-s2 { background:linear-gradient(90deg,#cfe6ee,#eafcff,#8fb8c4,#4dd0e8,#cfe6ee); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 10px rgba(140,190,205,.4),0 0 18px rgba(77,208,232,.2); }
.e-hegemon-s2 {
  background:url('../img/cosmetics/emblem_hegemon_s2.png?v=1') center/contain no-repeat;
  border:none; box-shadow:none; color:transparent; font-size:0;
}
.e-hegemon-s2::before { content:none; }
.e-combattant-s2 {
  background:url('../img/cosmetics/emblem_combattant_s2.png?v=1') center/contain no-repeat;
  border:none; box-shadow:none; color:transparent; font-size:0;
}
.e-combattant-s2::before { content:none; }
.f-hegemon-s2 { background:none; border:none; box-shadow:none; overflow:visible; }
.f-hegemon-s2 > img, .f-hegemon-s2 > svg, .f-hegemon-s2 > div { inset:8%; width:84% !important; height:84% !important; }
.f-hegemon-s2::after {
  content:''; position:absolute; inset:-16%; z-index:5; pointer-events:none;
  background:url('../img/cosmetics/frame_hegemon_s2.png?v=2') center/contain no-repeat;
}

/* ── Aperçu cosmétique au clic (Pass + Apothéose) ── */
.cos-prev-ov { position:fixed; inset:0; z-index:99999; background:rgba(3,6,14,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:24px; animation:cosPrevIn .18s ease; }
@keyframes cosPrevIn { from { opacity:0; } to { opacity:1; } }
.cos-prev-card { position:relative; max-width:420px; width:100%; background:linear-gradient(170deg,var(--bg2),var(--surface)); border:1px solid rgba(212,165,48,.4); border-radius:18px; padding:34px 26px 26px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(255,200,60,.12); }
.cos-prev-close { position:absolute; top:8px; right:12px; background:none; border:none; color:#9aabc0; font-size:28px; line-height:1; cursor:pointer; }
.cos-prev-close:hover { color:#fff; }
.cos-prev-visual { min-height:200px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.cos-prev-img { filter:drop-shadow(0 6px 18px rgba(0,0,0,.55)); }
.cos-prev-aura, .cos-prev-emblem, .cos-prev-frame { width:210px; height:210px; object-fit:contain; }
.cos-prev-title { max-width:100%; height:auto; }
.cos-prev-banner { max-height:270px; width:auto; }
.cos-prev-stage { width:200px; height:200px; display:inline-flex; align-items:center; justify-content:center; }
.cos-prev-name { font-family:var(--font-display,inherit); font-size:21px; font-weight:700; color:var(--gold,#ffd33d); letter-spacing:.5px; margin-bottom:8px; }
.cos-prev-desc { font-size:13px; color:#9aabc0; line-height:1.55; max-width:340px; margin:0 auto; }
.cos-prev-av { width:auto !important; height:auto !important; }
.cos-prev-av img, .cos-prev-av > div { width:200px !important; height:200px !important; border-radius:50%; }

/* ── Titres de profil diplomatique (18/08) ───────────────────────────────────────────────
   Une teinte par ORIENTATION, pas seize dégradés arbitraires : le joueur doit reconnaître au
   premier coup d'œil ce que le titre raconte. Vert = conciliation, ambre = négoce,
   acier = industrie, rouge = puissance armée. Sobres : ces titres se méritent, ils ne crient pas. */
.t-dip-conciliateur, .t-dip-main-tendue { color:#7fe0a0; text-shadow:0 0 10px rgba(127,224,160,.35); }
.t-dip-gardien-silencieux, .t-dip-veilleur-genereux, .t-dip-empire-discret { color:#9fb6d8; text-shadow:0 0 10px rgba(159,182,216,.30); }
.t-dip-batisseur-pacifique, .t-dip-forge-discrete, .t-dip-atelier-ouvert { color:var(--textmid); text-shadow:0 0 10px rgba(200,212,226,.30); }
.t-dip-marchand-du-partage, .t-dip-capitaine-marchand, .t-dip-premier-negociant { color:#f0c069; text-shadow:0 0 10px rgba(240,192,105,.35); }
.t-dip-bras-arme, .t-dip-sentinelle, .t-dip-arsenal { color:#e08a7f; text-shadow:0 0 10px rgba(224,138,127,.35); }
.t-dip-strategie-froide { color:#8fd8e0; text-shadow:0 0 10px rgba(143,216,224,.35); }
.t-dip-hegemon-industriel {
  background:linear-gradient(180deg,#fff2cf,#e0b45a 55%,#8a6a18);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 6px rgba(224,180,90,.30);
}

/* ══════════════════════════════════════════════════════════════════════════
   SAISON 3 — LA RUCHE (26/08)
   ──────────────────────────────────────────────────────────────────────────
   🔑 TOUTES LES CLASSES SONT PRÉFIXÉES `s3-`. `f-ruche` était DÉJÀ pris par un
      cadre de vaisseau : deux cosmétiques sous la même classe portent la même
      apparence, et rien ne le signale — ni erreur, ni avertissement. On ne
      découvre le doublon que le jour où un joueur montre sa capture.

   🔑 LE CADRE ET L'EMBLÈME SONT DES IMAGES, pas des dégradés. Six des neuf
      cosmétiques de la S2 étaient du CSS procédural, et le pass à l'unité est
      passé de 22 acheteurs à 1. Ce que vend la voie premium, c'est exactement
      ça : il faut que ça ait l'air dessiné, parce que ça l'est.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cadre : anneau de chitine posé PAR-DESSUS l'avatar, trou transparent ──── */
/* Même mécanique que le Serpent et l'Hégémon : l'avatar rétrécit à 84 % et
   l'anneau déborde en `::after`, sinon le dessin mordrait sur le visage. */
/* 🔑 LES PROPORTIONS SONT MESURÉES SUR L'IMAGE, PAS RECOPIÉES DU SERPENT.
   J'avais repris telles quelles les valeurs de `.f-serpent` (avatar à 84 %,
   anneau débordant de 16 %). Signalé aussitôt : « le cadre, y a un os en plein
   milieu ».
   Mesure du fichier : le premier os se rencontre à 55,1 % du rayon (et 56,3 %
   au plus loin — le trou est bien circulaire). Donc l'anneau, agrandi de 32 %,
   laisse un trou de 0,55 × 1,32 = 0,73 de la case, alors que l'avatar en
   occupait 0,84. L'avatar était PLUS LARGE QUE LE TROU : les pointes hautes et
   basses lui tombaient sur le visage.
   On agrandit donc l'anneau à 1,46 (trou = 0,80) et on met l'avatar à 0,78 :
   il rentre, avec une marge.
   🔑 Chaque dessin a ses propres proportions. Recopier les réglages d'un autre
      cadre, c'est appliquer la géométrie d'une image à une image différente. */
/* 🔑 SECOND RÉGLAGE : `inset: -23%` DÉBORDAIT DE LA FENÊTRE D'APERÇU. Le calcul
   était juste pour l'usage courant — un anneau posé PAR-DESSUS un avatar dans
   une liste — mais dans l'aperçu le cadre EST le sujet : agrandi de 46 %, il
   sortait de la boîte et recouvrait son propre titre.
   🔑 Un débordement qui marche dans un contexte se paie dans tous les autres.
      Plus il est grand, plus il y a d'endroits où il dépasse. On préfère donc
      RÉTRÉCIR L'AVATAR plutôt qu'AGRANDIR L'ANNEAU : même résultat visuel, et
      le cosmétique reste dans sa case partout.
   Trou mesuré = 55 % du rayon. Anneau à 1,16 → trou = 0,638. Avatar à 0,62 :
   il rentre, et l'anneau ne dépasse que de 8 %. */
/* 🔑 « Y A ENCORE CE PUTAIN D'OS DANS LE CADRE. » Ce n'était PAS l'image : le
   rendu d'un cadre place l'icône du catalogue au centre comme contenu de
   remplacement (`${c.icon || '★'}`), et j'avais choisi `icon:'🦴'`. Un os, donc,
   posé pile au milieu de l'anneau. J'ai mesuré les pixels du fichier trois fois
   avant de regarder le code qui l'affiche.
   🔑 Quand un défaut résiste à la mesure de l'ASSET, c'est que le défaut n'est
      pas dans l'asset. Regarder ce qui le RENVOIE.
   Dans un aperçu, un cadre doit encercler une silhouette neutre — pas un emoji
   qu'on prendra pour une pièce du dessin. */
/* 🔑 J'AVAIS REMPLACÉ L'OS PAR UN ROND NOIR. Pour masquer l'emoji du catalogue
   j'avais mis une silhouette au centre de l'anneau — donc un disque sombre au
   milieu, que le propriétaire a signalé aussitôt. Un cadre encercle le VIDE :
   c'est l'avatar du joueur qui viendra dedans, pas un substitut.
   🔑 Remplacer un élément parasite par un autre élément n'est pas le retirer. */
.f-s3-ruche > div { font-size: 0 !important; color: transparent !important; background: none !important; }
.f-s3-ruche > div::after { content: none !important; }
/* 🔑 LE TEXTE DANS L'ANNEAU, C'ÉTAIT LE LIBELLÉ DU COSMÉTIQUE. `renderCosmetic`
   pose `<div class="cos-wrap-label">` juste sous le rendu ; l'anneau, qui
   déborde de sa case, retombait dessus. On lui laisse la place.
   🔑 Un élément qui DÉBORDE ne prend pas de place dans le flux : ses voisins
      ignorent qu'il existe et se rangent dessous. Il faut la leur donner. */
.cos-wrap:has(.f-s3-ruche) .sgc-frame { margin-bottom: 16px; }
.cos-wrap:has(.f-s3-ruche) .cos-wrap-label { position: relative; z-index: 6; }
.f-s3-ruche { background:none; border:none; box-shadow:none; overflow:visible; }
.f-s3-ruche > img, .f-s3-ruche > svg, .f-s3-ruche > div { inset:19%; width:62% !important; height:62% !important; }
.f-s3-ruche::after {
  content:''; position:absolute; inset:-8%; z-index:5; pointer-events:none;
  background:url('../img/cosmetics/s3_frame_wraith.png?v=3') center/contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(140, 255, 170, 0.30));
}

/* ── Emblème : médaillon rond ─────────────────────────────────────────────── */
.e-s3-ruche {
  background:url('../img/cosmetics/s3_emblem_wraith.png?v=1') center/contain no-repeat;
  border:none; box-shadow:none; color:transparent; font-size:0;
  filter: drop-shadow(0 0 8px rgba(140, 255, 170, 0.30));
}
.e-s3-ruche::before, .e-s3-ruche::after { content:none; }

/* ── Aura : le souffle du spectre ─────────────────────────────────────────── */
/* Pas d'image ici : une brume se rend mieux en dégradé qu'en PNG, et elle doit
   respirer. Cycle lent (4,5 s) — une aura permanente qui clignote fatigue. */
/* 🔑 « LE HALO VERT, ON VOIT QUEDAL. » Il était à 34 % d'opacité sur un fond
   déjà sombre, et débordait de 30 % seulement : un halo qui ne dépasse pas
   franchement de l'avatar se confond avec son ombre portée. Les auras du jeu
   qui SE VOIENT (Naquadah, Goa'uld) sont des images qui débordent de 55 %.
   On monte donc l'opacité, on double le débordement, et on ajoute une seconde
   couche plus resserrée : un halo se lit par son NOYAU autant que par sa
   diffusion. */
.a-s3-spectre::before {
  content:''; position:absolute; inset:-55%; border-radius:50%; z-index:0;
  background:
    radial-gradient(circle at 50% 52%,
      rgba(150, 255, 180, 0.62) 0%,
      rgba(120, 235, 160, 0.30) 28%,
      rgba(90, 190, 130, 0.12) 52%,
      transparent 74%);
  filter: blur(2px);
  animation: sgcS3Souffle 4.5s ease-in-out infinite;
  pointer-events:none;
}
.a-s3-spectre::after { content:none; }
/* 🔑 L'EMOJI AU CENTRE DE L'AURA. Le rendu d'une aura CSS place un mini-disque
   portant `c.icon` — j'avais mis 💨, donc un nuage de bande dessinée au milieu
   d'un halo de spectre. On vide le disque : une aura se lit par sa lumière, pas
   par ce qu'on met dedans.
   Et cette fois on ne remplace RIEN — la dernière fois, masquer l'emoji du
   cadre par une silhouette a produit un rond noir tout aussi parasite. */
.a-s3-spectre > div {
  font-size: 0 !important; color: transparent !important;
  background: none !important; box-shadow: none !important;
}
@keyframes sgcS3Souffle {
  0%, 100% { opacity: .72; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* ── Bannière : étendard de chitine ───────────────────────────────────────── */
/* 🔑 LA BANNIÈRE ÉTAIT UN DÉGRADÉ VIDE. Je l'avais faite en CSS — un
   `clip-path` en écusson rempli d'un dégradé — c'est-à-dire exactement le
   reproche fait aux cosmétiques de la S2 : « moches et mal faits ». Un
   cosmétique premium se DESSINE.
   Elle est maintenant une image détourée, comme le cadre et le sceau. */
.b-s3-ruche {
  display:inline-block !important;
  width:64px !important; height:94px !important;
  padding:0 !important; min-width:0;
  background: url('../img/cosmetics/s3_banner_wraith.png?v=1') center/contain no-repeat !important;
  clip-path: none;
  border:none !important; box-shadow:none !important;
  color:transparent !important; font-size:0 !important;
  filter: drop-shadow(0 0 8px rgba(140, 255, 170, 0.28));
}
.b-s3-ruche::before, .b-s3-ruche::after { content:none; }

/* ── Titre : os et brume ──────────────────────────────────────────────────── */
/* Comme « Fer de Lance », il boucle — mais plus lentement, et sans chauffe :
   c'est un titre de saison, pas une distinction rare. */
.t-s3-hiveborn {
  /* 🔑 LA POLICE VENAIT DU SOCLE. `.sgc-title` impose `--font-mystic-deco`, un
     serif décoratif hérité des titres de Monument. Sur une saison Wraith il
     jure, et le propriétaire le trouve laid. On reprend la police d'affichage
     du jeu : c'est celle de toute l'interface, elle lit militaire et sci-fi
     plutôt que fantasy.
     Le socle a raison par défaut ; il a tort quand la saison a son propre
     monde. */
  font-family: var(--font-display) !important;
  font-weight: 800 !important; letter-spacing: 3px;
  /* 🔑 LE TITRE ÉTAIT ILLISIBLE. Mon dégradé descendait jusqu'à #222b28 —
     quasi noir — sur une page sombre : la moitié basse des lettres disparaissait
     dans le fond. Les titres du jeu qui se lisent (`t-architect`, `t-steel`)
     s'arrêtent tous à un ton MOYEN, jamais au noir.
     🔑 Un dégradé sur du texte doit rester au-dessus du fond sur TOUTE sa
        course : le point le plus sombre du texte est la vraie limite, pas le
        point le plus clair. */
  background:
    linear-gradient(100deg, transparent 42%, rgba(215,255,230,.92) 50%, transparent 58%),
    linear-gradient(180deg, #f4f8ef 0%, #cfd9c6 40%, #9fb0a2 72%, #7d8f84 100%);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 12px rgba(140,255,170,.45);
  animation: sgcS3Titre 7s linear infinite;
}
@keyframes sgcS3Titre {
  0%   { background-position: -130% 0, 0 0; }
  100% { background-position:  230% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .a-s3-spectre::before { animation:none; }
  .t-s3-hiveborn { animation:none; background-position:50% 0, 0 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   L'APERÇU D'UN COSMÉTIQUE DOIT LE MONTRER (26/08)
   ──────────────────────────────────────────────────────────────────────────
   Mesuré en ouvrant les cinq aperçus moi-même — ce que j'aurais dû faire dès le
   début au lieu de laisser le propriétaire tester à ma place :
     bannière : dessin de 64 × 94 dans une fenêtre de 1400 × 900 → 10 %
     titre    : 194 × 17                                          →  2 %
   La cause est dans `S2_COSMO_IMG` (sgc-cosmetics.js) : les cosmétiques inscrits
   là reçoivent le grand rendu `.cos-prev-img`, les autres retombent sur le rendu
   de VIGNETTE. Les S3 y sont maintenant. Il reste à agrandir ce qui n'est pas
   une image — l'aura et le titre, qui sont du CSS.
   ══════════════════════════════════════════════════════════════════════════ */
.cos-prev-stage .sgc-avatar-cosmetic { width: 210px !important; height: 210px !important; }
.cos-prev-stage .sgc-frame,
.cos-prev-stage .sgc-emblem { width: 210px !important; height: 210px !important; }
.cos-prev-stage .sgc-banner { width: 150px !important; height: 220px !important; }
.cos-prev-stage .sgc-title  { font-size: 30px !important; letter-spacing: 4px; }
.cos-prev-visual { min-height: 240px; display: flex; align-items: center; justify-content: center; }

/* ══ TENUES DE FACTION — Garde-robe (02/09/2026) ═══════════════════════════════
   Cinq tenues à 7,99 € : avatar (image), cadre, aura, titre. Écrites dans le moule
   des cosmétiques procéduraux ci-dessus (.a-cyan, .f-serpent première version,
   .t-architect). Aucune image pour cadres/auras/titres : CSS seul. */
.a-iris::before, .a-iris::after, .a-hote::before, .a-hote::after,
.a-ascension::before, .a-ascension::after, .a-faim::before, .a-faim::after,
.a-tunnel::before, .a-tunnel::after { content:''; position:absolute; border-radius:50%; pointer-events:none; }
/* Tau'ri — Halo d'Iris : trinium froid, anneau net */
.a-iris::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(184,196,204,.55) 0%,rgba(90,110,130,.25) 55%,transparent 72%); filter:blur(8px); animation:sgcPulse 3s ease-in-out 1; z-index:0; }
.a-iris::after { inset:var(--halo-in); border:2px solid rgba(214,224,232,.85); box-shadow:0 0 22px rgba(184,196,204,.55),inset 0 0 18px rgba(120,140,160,.35); z-index:1; }
/* Goa'uld — Lueur d'Hôte : blanc doré qui palpite */
.a-hote::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(255,244,200,.8) 0%,rgba(255,208,0,.35) 50%,transparent 72%); filter:blur(9px); animation:sgcFlicker 2.2s ease-in-out infinite; z-index:0; }
.a-hote::after { inset:var(--halo-in); border:2px solid rgba(255,230,140,.9); box-shadow:0 0 28px rgba(255,208,0,.6),inset 0 0 22px rgba(255,244,200,.35); z-index:1; }
/* Anciens — Souffle d'Ascension : volutes blanches lentes */
.a-ascension::before { inset:var(--halo-out); background:conic-gradient(from 0deg,rgba(255,255,255,0),rgba(200,235,255,.7),rgba(255,255,255,0),rgba(160,215,255,.6),rgba(255,255,255,0)); filter:blur(11px); animation:sgcSpin 9s linear infinite; z-index:0; }
.a-ascension::after { inset:var(--halo-in); border:1px solid rgba(220,240,255,.8); box-shadow:0 0 34px rgba(160,215,255,.55),inset 0 0 26px rgba(255,255,255,.3); z-index:1; }
/* Wraith — Faim : pulsation verte */
.a-faim::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(127,224,122,.7) 0%,rgba(40,90,50,.35) 55%,transparent 74%); filter:blur(9px); animation:sgcPulse 1.6s ease-in-out infinite; z-index:0; }
.a-faim::after { inset:var(--halo-in); border:2px solid rgba(127,224,122,.8); box-shadow:0 0 26px rgba(127,224,122,.55),inset 0 0 20px rgba(106,42,122,.4); z-index:1; }
/* Tok'ra — Éclat des Tunnels : reflet ambré */
.a-tunnel::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(255,179,71,.65) 0%,rgba(255,233,196,.25) 50%,transparent 72%); filter:blur(8px); animation:sgcPulse 2.8s ease-in-out 1; z-index:0; }
.a-tunnel::after { inset:var(--halo-in); border:2px solid rgba(255,233,196,.85); box-shadow:0 0 24px rgba(255,179,71,.55),inset 0 0 18px rgba(255,179,71,.3); z-index:1; }

/* Cadres : anneau coloré à dégradé conique, le portrait dedans */
.f-sgc, .f-goauld, .f-lantien, .f-ruche, .f-tokra { position:relative; padding:0; border-radius:50%; overflow:hidden; box-sizing:border-box; border:2px solid transparent; }
.f-sgc > img, .f-goauld > img, .f-lantien > img, .f-ruche > img, .f-tokra > img,
.f-sgc > svg, .f-goauld > svg, .f-lantien > svg, .f-ruche > svg, .f-tokra > svg,
.f-sgc > div, .f-goauld > div, .f-lantien > div, .f-ruche > div, .f-tokra > div { position:absolute; inset:6%; width:88% !important; height:88% !important; border-radius:50%; object-fit:cover; display:block; }
.f-sgc     { background:conic-gradient(from 0deg,#3a4a3a,#b8c4cc,#6b8e4e,#b8c4cc,#3a4a3a); box-shadow:0 0 16px rgba(184,196,204,.4); }
.f-goauld  { background:conic-gradient(from 0deg,#5a3d05,#ffd000,#fff3b0,#ffd000,#5a3d05); box-shadow:0 0 18px rgba(255,208,0,.5); }
.f-lantien { background:conic-gradient(from 0deg,#2a4d66,#9fd8ff,#ffffff,#9fd8ff,#2a4d66); box-shadow:0 0 18px rgba(159,216,255,.5); }
.f-ruche   { background:conic-gradient(from 0deg,#1e3a1e,#7fe07a,#6a2a7a,#7fe07a,#1e3a1e); box-shadow:0 0 18px rgba(127,224,122,.45); }
.f-tokra   { background:conic-gradient(from 0deg,#5a3a10,#ffb347,#ffe9c4,#ffb347,#5a3a10); box-shadow:0 0 18px rgba(255,179,71,.5); }

/* Titres */
.t-tauri    { background:linear-gradient(180deg,#e8f0f6,#b8c4cc 55%,#6b8e4e); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 1px 4px rgba(184,196,204,.25); }
.t-seigneur { background:linear-gradient(90deg,#fff3b0,#ffd000,#a07a10,#ffd000,#fff3b0); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sgcTitleshift 3s linear 1; text-shadow:0 0 10px rgba(255,208,0,.35); }
.t-lantien  { background:linear-gradient(180deg,#ffffff,#9fd8ff 60%,#4d8fc4); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 12px rgba(159,216,255,.45); }
.t-ruche    { background:linear-gradient(90deg,#7fe07a,#c9a3d9,#7fe07a); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sgcTitleshift 4s linear 1; text-shadow:0 0 10px rgba(127,224,122,.35); }
.t-tokra    { background:linear-gradient(180deg,#ffe9c4,#ffb347 60%,#a05a10); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 10px rgba(255,179,71,.35); }

/* ── Cadre, halo et titre du HAUT COMMANDEMENT — Pass Haut Commandement (05/09/2026) ────────────────────
   Trois pièces vendues avec le pass groupé, et avec rien d'autre. Écrites en CSS PUR :
   aucune image à produire, donc aucune pièce achetée qui ne s'affiche pas — c'est ce trou
   qui a fermé le rayon Tenues le 02/09 (neuf pièces sur onze sans classe).
   Registre volontairement RETENU : de l'acier, trois étoiles d'or, une pulsation lente.
   Ce qui distingue un état-major, ce n'est pas de briller plus fort que les autres. */

/* Titre — acier brossé traversé d'or, sans clignotement */
.t-haut-commandement {
  background:linear-gradient(90deg,#c9d4e0,#f4e2b0,#ffd33d,#f4e2b0,#c9d4e0);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sgcTitleshift 7s linear 1;
  text-shadow:0 0 12px rgba(255,211,61,.35),0 1px 3px rgba(0,0,0,.6);
}

/* Cadre — l'anneau de la Porte : neuf chevrons d'acier, celui du haut doré comme un
   chevron verrouillé, et les trois étoiles de grade au sommet. Dessiné en SVG (data-URI),
   pas en dégradés empilés : la première version était un simple disque conique et se lisait
   comme un anneau générique, sans rien qui dise ni Stargate ni commandement.
   Aucun fichier image — donc rien qui puisse manquer au déploiement.
   ⚠️ ENCODÉ EN BASE64, PAS EN URL. Un SVG collé tel quel dans url("data:image/svg+xml,…")
      fait rejeter TOUTE la déclaration par le parseur CSS, en silence : la règle existe,
      l'image est absente, et rien ne dit pourquoi. Ses guillemets ferment ceux du url(),
      et les « # » de ses couleurs y démarrent un fragment. Le base64 n'a rien à échapper.
   `overflow:visible` est obligatoire : l'anneau déborde volontairement du portrait. */
.f-haut-commandement {
  position:relative; border-radius:50%; box-sizing:border-box; padding:0; overflow:visible;
  background:none; border:none;
}
.f-haut-commandement > img,
.f-haut-commandement > svg,
.f-haut-commandement > div {
  position:absolute; inset:9%; width:82% !important; height:82% !important;
  border-radius:50%; object-fit:cover; display:block;
}
.f-haut-commandement::after {
  content:''; position:absolute; inset:-9%; z-index:6; pointer-events:none;
  background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9Im1ldCIgeDE9Ii4xIiB5MT0iLS4wNSIgeDI9Ii45IiB5Mj0iMS4wNSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmRmZWZlIi8+PHN0b3Agb2Zmc2V0PSIuMTQiIHN0b3AtY29sb3I9IiNjOGQ1ZTQiLz48c3RvcCBvZmZzZXQ9Ii4zMyIgc3RvcC1jb2xvcj0iIzdjOGE5ZiIvPjxzdG9wIG9mZnNldD0iLjUiIHN0b3AtY29sb3I9IiM0YTU3NjkiLz48c3RvcCBvZmZzZXQ9Ii42NyIgc3RvcC1jb2xvcj0iIzZmN2Q5MiIvPjxzdG9wIG9mZnNldD0iLjg2IiBzdG9wLWNvbG9yPSIjYjRjMmQzIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZTlmMGY4Ii8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImNoYXQiIHgxPSIxIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjM0Ii8+PHN0b3Agb2Zmc2V0PSIuMyIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+PHN0b3Agb2Zmc2V0PSIuNjIiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iLjIyIi8+PHN0b3Agb2Zmc2V0PSIuODUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjIiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJmYWNlRSIgeDE9Ii4xNSIgeTE9IjAiIHgyPSIuODUiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjUiLz48c3RvcCBvZmZzZXQ9Ii40NSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIuMDUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjMiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iZmFjZUkiIHgxPSIuMTUiIHkxPSIwIiB4Mj0iLjg1IiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9Ii4zNCIvPjxzdG9wIG9mZnNldD0iLjUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iLjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iLjI2Ii8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImFyZXRlIiB4MT0iLjEiIHkxPSIwIiB4Mj0iLjkiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjg1Ii8+PHN0b3Agb2Zmc2V0PSIuMzgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjEyIi8+PHN0b3Agb2Zmc2V0PSIuNzIiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjQyIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9Ii4xIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9Im9yIiB4MT0iLjE1IiB5MT0iMCIgeDI9Ii44NSIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZjhlMiIvPjxzdG9wIG9mZnNldD0iLjI2IiBzdG9wLWNvbG9yPSIjZjRkNjhjIi8+PHN0b3Agb2Zmc2V0PSIuNTUiIHN0b3AtY29sb3I9IiNhOTdkMjgiLz48c3RvcCBvZmZzZXQ9Ii43OCIgc3RvcC1jb2xvcj0iI2VjY2Q4NSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzdlNWExNSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJvckNsYWlyIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmY2YzIi8+PHN0b3Agb2Zmc2V0PSIuNDIiIHN0b3AtY29sb3I9IiNmZmRjOGMiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNjZjk4MjAiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iY2hldkJhcyIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzZjN2M5MiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzI1MmUzYiIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJjaGV2SGF1dCIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2NmZGNlYSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzdlOGVhNCIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJjcmV1eCIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzBmMTUxZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzI4MzIzZiIvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJhbm5lYXUiPjxwYXRoIGQ9Ik01MCAyLjYwIEE0Ny40MCA0Ny40MCAwIDEgMSA0OS45OSAyLjYwIFogTTUwIDE3LjQwIEEzMi42MCAzMi42MCAwIDEgMCA0OS45OSAxNy40MCBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L2NsaXBQYXRoPjwvZGVmcz48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0OC4zMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDQwNjBiIiBzdHJva2Utd2lkdGg9IjIuNiIgb3BhY2l0eT0iLjU1Ii8+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAuMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNtZXQpIiBzdHJva2Utd2lkdGg9IjE0LjgwIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAuMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNjaGF0KSIgc3Ryb2tlLXdpZHRoPSIxNC44MCIvPjxnIGNsaXAtcGF0aD0idXJsKCNhbm5lYXUpIj48cGF0aCBkPSJNODQuMjAgNTAuMDAgTDk1LjgwIDUwLjAwIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjA1Ii8+PHBhdGggZD0iTTg0LjA3IDUyLjk4IEw5NS42MyA1My45OSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4xMCIvPjxwYXRoIGQ9Ik04My42OCA1NS45NCBMOTUuMTAgNTcuOTUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMDUiLz48cGF0aCBkPSJNODMuMDMgNTguODUgTDk0LjI0IDYxLjg1IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjEwIi8+PHBhdGggZD0iTTgyLjE0IDYxLjcwIEw5My4wNCA2NS42NiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4wNSIvPjxwYXRoIGQ9Ik04MS4wMCA2NC40NSBMOTEuNTEgNjkuMzYiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMTAiLz48cGF0aCBkPSJNNzkuNjIgNjcuMTAgTDg5LjY2IDcyLjkwIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjA1Ii8+PHBhdGggZD0iTTc4LjAxIDY5LjYyIEw4Ny41MiA3Ni4yNyIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4xMCIvPjxwYXRoIGQ9Ik03Ni4yMCA3MS45OCBMODUuMDggNzkuNDQiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMDUiLz48cGF0aCBkPSJNNzQuMTggNzQuMTggTDgyLjM5IDgyLjM5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjEwIi8+PHBhdGggZD0iTTcxLjk4IDc2LjIwIEw3OS40NCA4NS4wOCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4wNSIvPjxwYXRoIGQ9Ik02OS42MiA3OC4wMSBMNzYuMjcgODcuNTIiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMTAiLz48cGF0aCBkPSJNNjcuMTAgNzkuNjIgTDcyLjkwIDg5LjY2IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjA1Ii8+PHBhdGggZD0iTTY0LjQ1IDgxLjAwIEw2OS4zNiA5MS41MSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4xMCIvPjxwYXRoIGQ9Ik02MS43MCA4Mi4xNCBMNjUuNjYgOTMuMDQiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMDUiLz48cGF0aCBkPSJNNTguODUgODMuMDMgTDYxLjg1IDk0LjI0IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjEwIi8+PHBhdGggZD0iTTU1Ljk0IDgzLjY4IEw1Ny45NSA5NS4xMCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4wNSIvPjxwYXRoIGQ9Ik01Mi45OCA4NC4wNyBMNTMuOTkgOTUuNjMiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMTAiLz48cGF0aCBkPSJNNTAuMDAgODQuMjAgTDUwLjAwIDk1LjgwIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjA1Ii8+PHBhdGggZD0iTTQ3LjAyIDg0LjA3IEw0Ni4wMSA5NS42MyIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4xMCIvPjxwYXRoIGQ9Ik00NC4wNiA4My42OCBMNDIuMDUgOTUuMTAiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMDUiLz48cGF0aCBkPSJNNDEuMTUgODMuMDMgTDM4LjE1IDk0LjI0IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjEwIi8+PHBhdGggZD0iTTM4LjMwIDgyLjE0IEwzNC4zNCA5My4wNCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4wNSIvPjxwYXRoIGQ9Ik0zNS41NSA4MS4wMCBMMzAuNjQgOTEuNTEiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMTAiLz48cGF0aCBkPSJNMzIuOTAgNzkuNjIgTDI3LjEwIDg5LjY2IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjA1Ii8+PHBhdGggZD0iTTMwLjM4IDc4LjAxIEwyMy43MyA4Ny41MiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4xMCIvPjxwYXRoIGQ9Ik0yOC4wMiA3Ni4yMCBMMjAuNTYgODUuMDgiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMDUiLz48cGF0aCBkPSJNMjUuODIgNzQuMTggTDE3LjYxIDgyLjM5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjEwIi8+PHBhdGggZD0iTTIzLjgwIDcxLjk4IEwxNC45MiA3OS40NCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4wNSIvPjxwYXRoIGQ9Ik0yMS45OSA2OS42MiBMMTIuNDggNzYuMjciIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMTAiLz48cGF0aCBkPSJNMjAuMzggNjcuMTAgTDEwLjM0IDcyLjkwIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjA1Ii8+PHBhdGggZD0iTTE5LjAwIDY0LjQ1IEw4LjQ5IDY5LjM2IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjEwIi8+PHBhdGggZD0iTTE3Ljg2IDYxLjcwIEw2Ljk2IDY1LjY2IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjA1Ii8+PHBhdGggZD0iTTE2Ljk3IDU4Ljg1IEw1Ljc2IDYxLjg1IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjEwIi8+PHBhdGggZD0iTTE2LjMyIDU1Ljk0IEw0LjkwIDU3Ljk1IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjA1Ii8+PHBhdGggZD0iTTE1LjkzIDUyLjk4IEw0LjM3IDUzLjk5IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjEwIi8+PHBhdGggZD0iTTE1LjgwIDUwLjAwIEw0LjIwIDUwLjAwIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjA1Ii8+PHBhdGggZD0iTTE1LjkzIDQ3LjAyIEw0LjM3IDQ2LjAxIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjEwIi8+PHBhdGggZD0iTTE2LjMyIDQ0LjA2IEw0LjkwIDQyLjA1IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjA1Ii8+PHBhdGggZD0iTTE2Ljk3IDQxLjE1IEw1Ljc2IDM4LjE1IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjEwIi8+PHBhdGggZD0iTTE3Ljg2IDM4LjMwIEw2Ljk2IDM0LjM0IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjA1Ii8+PHBhdGggZD0iTTE5LjAwIDM1LjU1IEw4LjQ5IDMwLjY0IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjEwIi8+PHBhdGggZD0iTTIwLjM4IDMyLjkwIEwxMC4zNCAyNy4xMCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4wNSIvPjxwYXRoIGQ9Ik0yMS45OSAzMC4zOCBMMTIuNDggMjMuNzMiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMTAiLz48cGF0aCBkPSJNMjMuODAgMjguMDIgTDE0LjkyIDIwLjU2IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjA1Ii8+PHBhdGggZD0iTTI1LjgyIDI1LjgyIEwxNy42MSAxNy42MSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4xMCIvPjxwYXRoIGQ9Ik0yOC4wMiAyMy44MCBMMjAuNTYgMTQuOTIiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMDUiLz48cGF0aCBkPSJNMzAuMzggMjEuOTkgTDIzLjczIDEyLjQ4IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjEwIi8+PHBhdGggZD0iTTMyLjkwIDIwLjM4IEwyNy4xMCAxMC4zNCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4wNSIvPjxwYXRoIGQ9Ik0zNS41NSAxOS4wMCBMMzAuNjQgOC40OSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4xMCIvPjxwYXRoIGQ9Ik0zOC4zMCAxNy44NiBMMzQuMzQgNi45NiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4wNSIvPjxwYXRoIGQ9Ik00MS4xNSAxNi45NyBMMzguMTUgNS43NiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4xMCIvPjxwYXRoIGQ9Ik00NC4wNiAxNi4zMiBMNDIuMDUgNC45MCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4wNSIvPjxwYXRoIGQ9Ik00Ny4wMiAxNS45MyBMNDYuMDEgNC4zNyIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4xMCIvPjxwYXRoIGQ9Ik01MC4wMCAxNS44MCBMNTAuMDAgNC4yMCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4wNSIvPjxwYXRoIGQ9Ik01Mi45OCAxNS45MyBMNTMuOTkgNC4zNyIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4xMCIvPjxwYXRoIGQ9Ik01NS45NCAxNi4zMiBMNTcuOTUgNC45MCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4wNSIvPjxwYXRoIGQ9Ik01OC44NSAxNi45NyBMNjEuODUgNS43NiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4xMCIvPjxwYXRoIGQ9Ik02MS43MCAxNy44NiBMNjUuNjYgNi45NiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4wNSIvPjxwYXRoIGQ9Ik02NC40NSAxOS4wMCBMNjkuMzYgOC40OSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4xMCIvPjxwYXRoIGQ9Ik02Ny4xMCAyMC4zOCBMNzIuOTAgMTAuMzQiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMDUiLz48cGF0aCBkPSJNNjkuNjIgMjEuOTkgTDc2LjI3IDEyLjQ4IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjEwIi8+PHBhdGggZD0iTTcxLjk4IDIzLjgwIEw3OS40NCAxNC45MiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4wNSIvPjxwYXRoIGQ9Ik03NC4xOCAyNS44MiBMODIuMzkgMTcuNjEiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMTAiLz48cGF0aCBkPSJNNzYuMjAgMjguMDIgTDg1LjA4IDIwLjU2IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjA1Ii8+PHBhdGggZD0iTTc4LjAxIDMwLjM4IEw4Ny41MiAyMy43MyIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4xMCIvPjxwYXRoIGQ9Ik03OS42MiAzMi45MCBMODkuNjYgMjcuMTAiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMDUiLz48cGF0aCBkPSJNODEuMDAgMzUuNTUgTDkxLjUxIDMwLjY0IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjEwIi8+PHBhdGggZD0iTTgyLjE0IDM4LjMwIEw5My4wNCAzNC4zNCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4wNSIvPjxwYXRoIGQ9Ik04My4wMyA0MS4xNSBMOTQuMjQgMzguMTUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuMzgiIG9wYWNpdHk9IjAuMTAiLz48cGF0aCBkPSJNODMuNjggNDQuMDYgTDk1LjEwIDQyLjA1IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjM4IiBvcGFjaXR5PSIwLjA1Ii8+PHBhdGggZD0iTTg0LjA3IDQ3LjAyIEw5NS42MyA0Ni4wMSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii4zOCIgb3BhY2l0eT0iMC4xMCIvPjwvZz48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0NS4yMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ1cmwoI2ZhY2VFKSIgc3Ryb2tlLXdpZHRoPSI0LjQiLz48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIzNC44MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ1cmwoI2ZhY2VJKSIgc3Ryb2tlLXdpZHRoPSI0LjQiLz48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MC4wMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ1cmwoI2FyZXRlKSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBkPSJNMzEuODQgMTQuMzYgQTQwLjAwIDQwLjAwIDAgMCAxIDY4LjE2IDE0LjM2IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjY3JldXgpIiBzdHJva2Utd2lkdGg9IjEzLjYwIi8+PHBhdGggZD0iTTI5LjEyIDkuMDEgQTQ2LjAwIDQ2LjAwIDAgMCAxIDcwLjg4IDkuMDEiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIG9wYWNpdHk9Ii4zIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDcuNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNvcikiIHN0cm9rZS13aWR0aD0iMS43Ii8+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMzIuNjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNvcikiIHN0cm9rZS13aWR0aD0iMS4zIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMzEuNTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjIiIG9wYWNpdHk9Ii40NSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc1LjcxIDE5LjM2KSByb3RhdGUoNDApIj48cGF0aCBkPSJNLTQuNiAtNS42IEw0LjYgLTUuNiBMNC42IC0xLjkgTDAgNS4xIEwtNC42IC0xLjkgWiIgZmlsbD0idXJsKCNjaGV2QmFzKSIgc3Ryb2tlPSIjMGMxMTE5IiBzdHJva2Utd2lkdGg9Ii41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTS00LjYgLTUuNiBMNC42IC01LjYgTDQuNiAtMS45IEwwIDEuMiBMLTQuNiAtMS45IFoiIGZpbGw9InVybCgjY2hldkhhdXQpIi8+PHBhdGggZD0iTS0zLjEgLTQuNCBMMy4xIC00LjQiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuNTUiIG9wYWNpdHk9Ii4zOCIvPjxwYXRoIGQ9Ik0tNC42IC01LjYgTDQuNiAtNS42IiBzdHJva2U9InVybCgjb3IpIiBzdHJva2Utd2lkdGg9Ii43Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg5LjM5IDQzLjA1KSByb3RhdGUoODApIj48cGF0aCBkPSJNLTQuNiAtNS42IEw0LjYgLTUuNiBMNC42IC0xLjkgTDAgNS4xIEwtNC42IC0xLjkgWiIgZmlsbD0idXJsKCNjaGV2QmFzKSIgc3Ryb2tlPSIjMGMxMTE5IiBzdHJva2Utd2lkdGg9Ii41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTS00LjYgLTUuNiBMNC42IC01LjYgTDQuNiAtMS45IEwwIDEuMiBMLTQuNiAtMS45IFoiIGZpbGw9InVybCgjY2hldkhhdXQpIi8+PHBhdGggZD0iTS0zLjEgLTQuNCBMMy4xIC00LjQiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuNTUiIG9wYWNpdHk9Ii4zOCIvPjxwYXRoIGQ9Ik0tNC42IC01LjYgTDQuNiAtNS42IiBzdHJva2U9InVybCgjb3IpIiBzdHJva2Utd2lkdGg9Ii43Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg0LjY0IDcwLjAwKSByb3RhdGUoMTIwKSI+PHBhdGggZD0iTS00LjYgLTUuNiBMNC42IC01LjYgTDQuNiAtMS45IEwwIDUuMSBMLTQuNiAtMS45IFoiIGZpbGw9InVybCgjY2hldkJhcykiIHN0cm9rZT0iIzBjMTExOSIgc3Ryb2tlLXdpZHRoPSIuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0tNC42IC01LjYgTDQuNiAtNS42IEw0LjYgLTEuOSBMMCAxLjIgTC00LjYgLTEuOSBaIiBmaWxsPSJ1cmwoI2NoZXZIYXV0KSIvPjxwYXRoIGQ9Ik0tMy4xIC00LjQgTDMuMSAtNC40IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjU1IiBvcGFjaXR5PSIuMzgiLz48cGF0aCBkPSJNLTQuNiAtNS42IEw0LjYgLTUuNiIgc3Ryb2tlPSJ1cmwoI29yKSIgc3Ryb2tlLXdpZHRoPSIuNyIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2My42OCA4Ny41OSkgcm90YXRlKDE2MCkiPjxwYXRoIGQ9Ik0tNC42IC01LjYgTDQuNiAtNS42IEw0LjYgLTEuOSBMMCA1LjEgTC00LjYgLTEuOSBaIiBmaWxsPSJ1cmwoI2NoZXZCYXMpIiBzdHJva2U9IiMwYzExMTkiIHN0cm9rZS13aWR0aD0iLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNLTQuNiAtNS42IEw0LjYgLTUuNiBMNC42IC0xLjkgTDAgMS4yIEwtNC42IC0xLjkgWiIgZmlsbD0idXJsKCNjaGV2SGF1dCkiLz48cGF0aCBkPSJNLTMuMSAtNC40IEwzLjEgLTQuNCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii41NSIgb3BhY2l0eT0iLjM4Ii8+PHBhdGggZD0iTS00LjYgLTUuNiBMNC42IC01LjYiIHN0cm9rZT0idXJsKCNvcikiIHN0cm9rZS13aWR0aD0iLjciLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzYuMzIgODcuNTkpIHJvdGF0ZSgyMDApIj48cGF0aCBkPSJNLTQuNiAtNS42IEw0LjYgLTUuNiBMNC42IC0xLjkgTDAgNS4xIEwtNC42IC0xLjkgWiIgZmlsbD0idXJsKCNjaGV2QmFzKSIgc3Ryb2tlPSIjMGMxMTE5IiBzdHJva2Utd2lkdGg9Ii41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTS00LjYgLTUuNiBMNC42IC01LjYgTDQuNiAtMS45IEwwIDEuMiBMLTQuNiAtMS45IFoiIGZpbGw9InVybCgjY2hldkhhdXQpIi8+PHBhdGggZD0iTS0zLjEgLTQuNCBMMy4xIC00LjQiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuNTUiIG9wYWNpdHk9Ii4zOCIvPjxwYXRoIGQ9Ik0tNC42IC01LjYgTDQuNiAtNS42IiBzdHJva2U9InVybCgjb3IpIiBzdHJva2Utd2lkdGg9Ii43Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1LjM2IDcwLjAwKSByb3RhdGUoMjQwKSI+PHBhdGggZD0iTS00LjYgLTUuNiBMNC42IC01LjYgTDQuNiAtMS45IEwwIDUuMSBMLTQuNiAtMS45IFoiIGZpbGw9InVybCgjY2hldkJhcykiIHN0cm9rZT0iIzBjMTExOSIgc3Ryb2tlLXdpZHRoPSIuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0tNC42IC01LjYgTDQuNiAtNS42IEw0LjYgLTEuOSBMMCAxLjIgTC00LjYgLTEuOSBaIiBmaWxsPSJ1cmwoI2NoZXZIYXV0KSIvPjxwYXRoIGQ9Ik0tMy4xIC00LjQgTDMuMSAtNC40IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iLjU1IiBvcGFjaXR5PSIuMzgiLz48cGF0aCBkPSJNLTQuNiAtNS42IEw0LjYgLTUuNiIgc3Ryb2tlPSJ1cmwoI29yKSIgc3Ryb2tlLXdpZHRoPSIuNyIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMC42MSA0My4wNSkgcm90YXRlKDI4MCkiPjxwYXRoIGQ9Ik0tNC42IC01LjYgTDQuNiAtNS42IEw0LjYgLTEuOSBMMCA1LjEgTC00LjYgLTEuOSBaIiBmaWxsPSJ1cmwoI2NoZXZCYXMpIiBzdHJva2U9IiMwYzExMTkiIHN0cm9rZS13aWR0aD0iLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNLTQuNiAtNS42IEw0LjYgLTUuNiBMNC42IC0xLjkgTDAgMS4yIEwtNC42IC0xLjkgWiIgZmlsbD0idXJsKCNjaGV2SGF1dCkiLz48cGF0aCBkPSJNLTMuMSAtNC40IEwzLjEgLTQuNCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9Ii41NSIgb3BhY2l0eT0iLjM4Ii8+PHBhdGggZD0iTS00LjYgLTUuNiBMNC42IC01LjYiIHN0cm9rZT0idXJsKCNvcikiIHN0cm9rZS13aWR0aD0iLjciLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQuMjkgMTkuMzYpIHJvdGF0ZSgzMjApIj48cGF0aCBkPSJNLTQuNiAtNS42IEw0LjYgLTUuNiBMNC42IC0xLjkgTDAgNS4xIEwtNC42IC0xLjkgWiIgZmlsbD0idXJsKCNjaGV2QmFzKSIgc3Ryb2tlPSIjMGMxMTE5IiBzdHJva2Utd2lkdGg9Ii41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTS00LjYgLTUuNiBMNC42IC01LjYgTDQuNiAtMS45IEwwIDEuMiBMLTQuNiAtMS45IFoiIGZpbGw9InVybCgjY2hldkhhdXQpIi8+PHBhdGggZD0iTS0zLjEgLTQuNCBMMy4xIC00LjQiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIuNTUiIG9wYWNpdHk9Ii4zOCIvPjxwYXRoIGQ9Ik0tNC42IC01LjYgTDQuNiAtNS42IiBzdHJva2U9InVybCgjb3IpIiBzdHJva2Utd2lkdGg9Ii43Ii8+PC9nPjxwYXRoIGQ9Ik01MC4wMCA1LjQwTDUxLjIyIDguMzNMNTQuMzcgOC41OEw1MS45NyAxMC42NEw1Mi43MCAxMy43Mkw1MC4wMCAxMi4wN0w0Ny4zMCAxMy43Mkw0OC4wMyAxMC42NEw0NS42MyA4LjU4TDQ4Ljc4IDguMzNaIiBmaWxsPSIjM2EyYzBkIiBvcGFjaXR5PSIuNTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLjUpIi8+PHBhdGggZD0iTTUwLjAwIDUuNDBMNTEuMjIgOC4zM0w1NC4zNyA4LjU4TDUxLjk3IDEwLjY0TDUyLjcwIDEzLjcyTDUwLjAwIDEyLjA3TDQ3LjMwIDEzLjcyTDQ4LjAzIDEwLjY0TDQ1LjYzIDguNThMNDguNzggOC4zM1oiIGZpbGw9InVybCgjb3JDbGFpcikiLz48cGF0aCBkPSJNNTAuMDAgNS40MEw1MS4yMiA4LjMzTDU0LjM3IDguNThMNTEuOTcgMTAuNjRMNTIuNzAgMTMuNzJMNTAuMDAgMTIuMDdMNDcuMzAgMTMuNzJMNDguMDMgMTAuNjRMNDUuNjMgOC41OEw0OC43OCA4LjMzWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmYWVhIiBzdHJva2Utd2lkdGg9Ii4yOCIgb3BhY2l0eT0iLjciLz48cGF0aCBkPSJNMzguOTcgOC4zNUwzOS44MiAxMC4zOEw0Mi4wMiAxMC41Nkw0MC4zNCAxMS45OUw0MC44NiAxNC4xNEwzOC45NyAxMi45OUwzNy4wOSAxNC4xNEwzNy42MCAxMS45OUwzNS45MyAxMC41NkwzOC4xMyAxMC4zOFoiIGZpbGw9IiMzYTJjMGQiIG9wYWNpdHk9Ii41NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAuNSkiLz48cGF0aCBkPSJNMzguOTcgOC4zNUwzOS44MiAxMC4zOEw0Mi4wMiAxMC41Nkw0MC4zNCAxMS45OUw0MC44NiAxNC4xNEwzOC45NyAxMi45OUwzNy4wOSAxNC4xNEwzNy42MCAxMS45OUwzNS45MyAxMC41NkwzOC4xMyAxMC4zOFoiIGZpbGw9InVybCgjb3JDbGFpcikiLz48cGF0aCBkPSJNMzguOTcgOC4zNUwzOS44MiAxMC4zOEw0Mi4wMiAxMC41Nkw0MC4zNCAxMS45OUw0MC44NiAxNC4xNEwzOC45NyAxMi45OUwzNy4wOSAxNC4xNEwzNy42MCAxMS45OUwzNS45MyAxMC41NkwzOC4xMyAxMC4zOFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmFlYSIgc3Ryb2tlLXdpZHRoPSIuMjgiIG9wYWNpdHk9Ii43Ii8+PHBhdGggZD0iTTYxLjAzIDguMzVMNjEuODcgMTAuMzhMNjQuMDcgMTAuNTZMNjIuNDAgMTEuOTlMNjIuOTEgMTQuMTRMNjEuMDMgMTIuOTlMNTkuMTQgMTQuMTRMNTkuNjYgMTEuOTlMNTcuOTggMTAuNTZMNjAuMTggMTAuMzhaIiBmaWxsPSIjM2EyYzBkIiBvcGFjaXR5PSIuNTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLjUpIi8+PHBhdGggZD0iTTYxLjAzIDguMzVMNjEuODcgMTAuMzhMNjQuMDcgMTAuNTZMNjIuNDAgMTEuOTlMNjIuOTEgMTQuMTRMNjEuMDMgMTIuOTlMNTkuMTQgMTQuMTRMNTkuNjYgMTEuOTlMNTcuOTggMTAuNTZMNjAuMTggMTAuMzhaIiBmaWxsPSJ1cmwoI29yQ2xhaXIpIi8+PHBhdGggZD0iTTYxLjAzIDguMzVMNjEuODcgMTAuMzhMNjQuMDcgMTAuNTZMNjIuNDAgMTEuOTlMNjIuOTEgMTQuMTRMNjEuMDMgMTIuOTlMNTkuMTQgMTQuMTRMNTkuNjYgMTEuOTlMNTcuOTggMTAuNTZMNjAuMTggMTAuMzhaIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZhZWEiIHN0cm9rZS13aWR0aD0iLjI4IiBvcGFjaXR5PSIuNyIvPjxwYXRoIGQ9Ik02LjI0IDQ1LjQwIEE0NC4wMCA0NC4wMCAwIDAgMSAxNy4zMCAyMC41NiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIuNDUiLz48cGF0aCBkPSJNODMuMTkgNjMuNDEgQTM1LjgwIDM1LjgwIDAgMCAxIDcwLjAyIDc5LjY4IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWNhcD0icm91bmQiIG9wYWNpdHk9Ii4yNCIvPjwvc3ZnPg==") center/contain no-repeat;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7)) drop-shadow(0 0 9px rgba(255,205,110,.35));
}

/* Aura — halo d'acier froid, une seule respiration ; l'anneau d'or reste fixe */
.a-haut-commandement::before,
.a-haut-commandement::after { content:''; position:absolute; border-radius:50%; pointer-events:none; }
.a-haut-commandement::before {
  inset:var(--halo-out);
  background:radial-gradient(circle,rgba(200,214,230,.45) 0%,rgba(255,211,61,.22) 55%,transparent 75%);
  filter:blur(10px); animation:sgcPulse 6s ease-in-out 1; z-index:0;
}
.a-haut-commandement::after {
  inset:var(--halo-in); border:1px solid rgba(244,226,176,.75);
  box-shadow:0 0 20px rgba(255,211,61,.45),inset 0 0 18px rgba(174,188,203,.35); z-index:1;
}