:root{
  --bg0:#070A12;
  --bg1:#0A1020;
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.72);
  --muted2:rgba(234,240,255,.52);
  --line:rgba(160,180,255,.14);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --shadow2: 0 10px 28px rgba(0,0,0,.35);
  --r:18px;
  --r2:26px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 18% 12%, rgba(120,140,255,.18), transparent 55%),
    radial-gradient(900px 600px at 82% 18%, rgba(255,190,120,.12), transparent 58%),
    radial-gradient(1200px 800px at 50% 120%, rgba(80,255,200,.10), transparent 65%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; }

.page{ max-width:1120px; margin:0 auto; padding:18px; }

.panel{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:var(--r2);
  padding:16px;
  box-shadow:var(--shadow2);
}

.section{ margin-top:18px; }
.section__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:14px; margin:18px 0 12px;
}
.section__title{ font-size:18px; font-weight:1100; }
.section__hint{ margin-top:6px; color:var(--muted2); font-size:12px; font-weight:700; }

.notice{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:12px 14px;
  color:var(--muted);
}
.notice--bad{
  border-color: rgba(255,120,120,.30);
  background: rgba(255,120,120,.06);
  color: rgba(255,230,230,.98);
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(9, 14, 30, .62);
  border-bottom: 1px solid rgba(160,180,255,.12);
}
.topbar__inner{
  max-width:1120px; margin:0 auto;
  padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand__logo{
  width:36px;height:36px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow2);
  object-fit:cover;
  background:rgba(255,255,255,.06);
}
.brand__name{ font-weight:1100; line-height:1.05; }
.brand__tag{ margin-top:2px; font-size:12px; color:var(--muted2); font-weight:700; }

.nav{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.nav__link, .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(160,180,255,.16);
  background: rgba(255,255,255,.03);
  color:var(--text);
  font-weight:950;
  font-size:13px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.nav__link:hover, .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(160,180,255,.28);
  background: rgba(255,255,255,.05);
}
.nav__link--primary, .btn--primary{
  border-color: rgba(120,140,255,.35);
  background: linear-gradient(180deg, rgba(120,140,255,.22), rgba(120,140,255,.10));
}

/* Home */
.homeTitle{ font-size:26px; font-weight:1200; }
.homeSub{ margin-top:8px; color:var(--muted); font-weight:750; }
.homeActions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

/* Hero profile */
.hero{
  border-radius: var(--r2);
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow);
}
.hero__banner{ height:180px; background: rgba(255,255,255,.04); }
.hero__banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__content{
  padding:14px 16px 16px;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.hero__avatar{
  width:76px;height:76px;border-radius:22px;
  border:1px solid rgba(255,255,255,.18);
  object-fit:cover;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  background: rgba(255,255,255,.06);
}
.hero__name{ font-size:22px; font-weight:1200; line-height:1.1; }
.hero__meta{ margin-top:6px; color:var(--muted); font-size:13px; font-weight:750; }

.kpis{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }
.kpi{
  border:1px solid rgba(160,180,255,.14);
  background: rgba(255,255,255,.03);
  border-radius:16px;
  padding:10px 12px;
  min-width:140px;
}
.kpi__label{ color:var(--muted2); font-size:12px; font-weight:850; }
.kpi__value{ margin-top:6px; font-size:18px; font-weight:1200; }

/* Grids */
.grid{ display:grid; gap:14px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width:1020px){ .grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:760px){ .grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:460px){ .grid{ grid-template-columns: 1fr; } }

.cardCenter{ max-width: min(420px, 94vw); margin: 0 auto; }

/* CARD (v2 – plus clean, lisible, badges compacts) */
.tc{
  --r: 22px;
  --frameLine: rgba(255,255,255,.12);
  --frameGlow: rgba(255,255,255,.10);
  --frameUrl: none;

  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background: rgba(255,255,255,.02);

  border: 1px solid var(--frameLine);
  box-shadow:
    0 18px 45px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 22px var(--frameGlow);
  transform: translateZ(0);
  isolation:isolate;
}

/* Raretés : on évite les bordures flashy, on passe en glow subtil */
.tc[data-rarity="common"]{ --frameGlow: rgba(225,235,255,.10); }
.tc[data-rarity="rare"]{ --frameGlow: rgba(110,170,255,.14); }
.tc[data-rarity="epic"]{ --frameGlow: rgba(195,120,255,.16); }
.tc[data-rarity="legendary"]{ --frameGlow: rgba(255,200,90,.16); }

.tile:hover .tc{ transform: translateY(-2px); transition: transform .16s ease; }

/* Zone media (image + overlay + badges) */
.tc__media{ position:relative; }

/* Image (ratio 2:1) */
.tc__img{
  width:100% !important;
  display:block !important;
  object-fit:cover !important;
  background: rgba(255,255,255,.06);
  filter: saturate(1.06) contrast(1.02);
  aspect-ratio: 2 / 3;
  height: auto !important;
}

/* Overlays – gradients + glass léger (uniquement sur la zone photo) */
.tc__media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.10) 32%, transparent 52%),
    linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.16) 45%, transparent 70%);
}

.tc__top{
  position:absolute;
  left:12px; right:12px; top:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  z-index:6; /* au-dessus du frame PNG */
}
.tc__left{ display:flex; flex-direction:column; gap:6px; min-width:0; max-width:72%; }

/* Nom toujours lisible (fond glass + shadow) */
.tc__name{
  font-weight:1150;
  font-size:18px;
  line-height:1.1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color: rgba(255,255,255,.96);

  padding:6px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.36);
  backdrop-filter: blur(10px);
  text-shadow: 0 8px 24px rgba(0,0,0,.55);
}

/* Petits pills (ID + Lvl) – finis les gros ronds */
.tc__id, .tc__age{
  display:inline-flex;
  width:fit-content;
  align-items:center;
  gap:6px;
  font-weight:1050;
  font-size:11px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.32);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  white-space:nowrap;
}
.tc__age{
  font-size:10px;
  padding:4px 8px;
  font-weight:1150;
}

.tc__bottom{
  position:relative;
  padding:12px;
  z-index:6;
  background:
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.28) 16%, rgba(0,0,0,.34) 100%);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Stats en chips (plus clean, moins 'gros rectangle') */
.tc__chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tc__chip{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color: rgba(255,255,255,.92);
  font-size:11.5px;
  font-weight:900;
  letter-spacing:.12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.tc__chip span{
  font-weight:1200;
  color: rgba(255,255,255,.98);
}

.tc__sub{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.tc__rarity{ font-size:12px; font-weight:1100; letter-spacing:.4px; text-transform:uppercase; }
.tc__qty{ font-size:12px; font-weight:950; color: rgba(255,255,255,.86); }

/* Frame PNG : au-dessus de l'image, mais sous le texte */
.tc--frame{ border-color: rgba(255,255,255,.10); }
.tc--frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background-image: var(--frameUrl);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Si support mask, on peut "évider" pour ne garder que l'anneau */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .tc--frame::after{
    padding: 8px;
    box-sizing: border-box;

    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;

    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity:.95;
  }
}

/* Gallery */
.gallery{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width:1020px){ .gallery{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:760px){ .gallery{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:460px){ .gallery{ grid-template-columns: 1fr; } }

.gallery img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
}

/* Footer */
.footer{
  margin-top:28px;
  padding:22px 0;
  border-top:1px solid rgba(160,180,255,.10);
  color:var(--muted2);
}
.footer__inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* Forms (Webflow-ish) */
label{ font-weight:900; font-size:13px; }
input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(160,180,255,.18);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline:none;
}
input::placeholder, textarea::placeholder{ color: rgba(234,240,255,.45); }
input:focus, select:focus, textarea:focus{
  border-color: rgba(120,140,255,.45);
  box-shadow: 0 0 0 4px rgba(120,140,255,.12);
}
select{ cursor:pointer; }

.form{ display:grid; gap:12px; }
.form__row{ display:grid; gap:10px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.form__row--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.form__row--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width:760px){
  .form__row, .form__row--3, .form__row--4{ grid-template-columns: 1fr; }
}

.btn--danger{
  border-color: rgba(255,120,120,.35);
  background: rgba(255,120,120,.10);
}

/* Admin */
.adminGrid{ display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:980px){ .adminGrid{ grid-template-columns: 1fr; } }

.noticeLink{ display:block; }

/* Webflow compatibility helpers (optional) */
.w-container{ max-width:1120px; margin:0 auto; padding:0 18px; }
.w-section{ padding:18px 0; }
.w-button{ display:inline-flex; align-items:center; justify-content:center; }

/* Utilities */
.stack{ display:grid; gap:10px; }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.notice--tight{ margin:0; }

/* Legacy class aliases (for Admin markup) */
.form--row{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.field{ display:flex; flex-direction:column; gap:6px; }
.label{ display:grid; gap:6px; }
.adminCardTitle{ font-weight:1100; margin-bottom:10px; }
.formCols{ display:grid; grid-template-columns: 160px 1fr; gap:10px; }
@media (max-width:760px){ .formCols{ grid-template-columns: 1fr; } }
.adminImgGrid{ display:grid; gap:10px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width:1020px){ .adminImgGrid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:760px){ .adminImgGrid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:460px){ .adminImgGrid{ grid-template-columns: 1fr; } }
.adminImg{ width:100%; height:160px; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); }

/* Lightbox */
.rl-lightbox{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.85);
  display:grid;
  place-items:center;
  z-index:9999;
  padding:18px;
}
.rl-lightbox__img{
  max-width:92vw;
  max-height:92vh;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}