:root {
  --bg: #080a0b;
  --surface: #101516;
  --muted: #8e9b98;
  --green: #d9ff3f;
  --line: rgba(255,255,255,.11);
  --font-display: 'Barlow Condensed', sans-serif;
  --font: 'Manrope', sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: #f5f7ef;
  font-family: var(--font);
  overflow-x: hidden;
}

.page-noise {
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 20;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
}

.topbar {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px,5vw,80px);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
  background: rgba(8,10,11,.86);
  backdrop-filter: blur(15px);
}

.brand {
  color: #f7f8ef;
  text-decoration: none;
  font: 700 25px/1 var(--font-display);
  letter-spacing: .6px;
  display: inline-flex;
  align-items: center;
}

.brand span {
  color: var(--green);
}

.brand i {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--green);
  margin: 0 6px;
}

.desktop-nav {
  display: flex;
  gap: 30px;
  height: 100%;
  align-items: center;
}

.desktop-nav a {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .85px;
  color: #aab2ae;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 100%;
  border-bottom: 2px solid transparent;
}

.desktop-nav a.active,
.desktop-nav a:hover {
  color: #fff;
  border-color: var(--green);
}

.desktop-nav em {
  font-style: normal;
  background: var(--green);
  color: #101305;
  font-size: 8px;
  padding: 2px 4px;
  margin-left: 6px;
}

.header-actions {
  display: flex;
  gap: 17px;
  align-items: center;
}

.admin-link {
  border: 0;
  background: none;
  color: #e7ece6;
  text-transform: uppercase;
  font: 700 10px var(--font);
  letter-spacing: 1px;
  cursor: pointer;
}

.admin-link span {
  color: var(--green);
  font-size: 16px;
  margin-left: 5px;
}

.menu-button {
  display: none;
  background: none;
  border: 0;
  width: 34px;
  padding: 5px;
}

.menu-button span {
  display: block;
  height: 2px;
  background: white;
  margin: 5px 0;
}

.mobile-nav {
  display: none;
}

.hero {
  min-height: 650px;
  max-width: 1440px;
  margin: auto;
  padding: 96px clamp(24px,9vw,155px) 76px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr .86fr;
  align-items: center;
  background: radial-gradient(
    ellipse 55% 65% at 74% 41%,
    rgba(168,206,43,.11),
    transparent 65%
  );
}

.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8,10,11,.99) 0%,
    rgba(8,10,11,.78) 41%,
    transparent 75%
  );
}

.hero-copy,
.hero-art {
  position: relative;
  z-index: 1;
}

.eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 800;
  color: #a7b1ac;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.eyebrow span {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--green);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.hero h1,
.section h2,
.search-section h2,
.new-section h2 {
  font: 800 clamp(58px,7vw,96px)/.84 var(--font-display);
  letter-spacing: -1.5px;
  margin: 0;
}

.hero h1 strong,
.section h2 strong,
.search-section h2 strong,
.new-section h2 strong {
  color: var(--green);
  font-weight: 800;
}

.hero-text {
  max-width: 380px;
  line-height: 1.75;
  font-size: 13px;
  color: #b6c0bb;
  margin: 28px 0;
}

.hero-text b {
  color: #f2f6ed;
}

.hero-actions {
  display: flex;
  gap: 13px;
  align-items: center;
}

.button {
  border: 1px solid transparent;
  text-decoration: none;
  padding: 15px 19px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 21px;
  font-family: var(--font);
}

.primary {
  background: var(--green);
  color: #11150a;
}

.primary:hover {
  background: #edff91;
}

.primary span {
  font-size: 16px;
}

.ghost {
  border-color: var(--line);
  color: #f2f5f0;
  background: rgba(255,255,255,.02);
}

.ghost:hover {
  border-color: #697169;
}

.hero-trust {
  display: flex;
  align-items: center;
  margin-top: 38px;
  gap: 12px;
}

.hero-trust p {
  font-size: 10px;
  color: #93a09a;
  margin: 0;
}

.hero-trust b {
  color: white;
}

.avatars {
  display: flex;
}

.avatars span {
  height: 25px;
  width: 25px;
  border: 2px solid #101111;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-right: -7px;
  font: 700 9px var(--font-display);
  background: #425752;
  color: white;
}

.avatars span:nth-child(2) {
  background: #846846;
}

.avatars span:nth-child(3) {
  background: #626b8f;
}

.avatars span:last-child {
  background: var(--green);
  color: #1b200a;
}

.hero-art {
  height: 440px;
  min-width: 400px;
  display: grid;
  place-items: center;
}

.target-ring {
  position: absolute;
  border: 1px solid rgba(217,255,63,.13);
  border-radius: 50%;
  width: 440px;
  height: 440px;
}

.ring-two {
  width: 310px;
  height: 310px;
  border-color: rgba(217,255,63,.18);
}

.scan-line {
  position: absolute;
  width: 470px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--green),
    transparent
  );
  opacity: .3;
  transform: rotate(-38deg);
}

.loadout-card {
  width: 285px;
  background: linear-gradient(
    145deg,
    #1b2521,
    #101615 62%
  );
  border: 1px solid rgba(217,255,63,.38);
  box-shadow:
    0 18px 65px rgba(0,0,0,.47),
    0 0 35px rgba(217,255,63,.1);
  padding: 16px;
  position: relative;
  transform: rotate(3deg);
}

.loadout-card:before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255,255,255,.05);
  pointer-events: none;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tag {
  font-size: 8px;
  letter-spacing: .8px;
  font-weight: 800;
  padding: 5px 7px;
}

.tag.meta {
  color: #11150a;
  background: var(--green);
}

.tag.new {
  color: #1a1708;
  background: #ffd842;
}

.tag.pro {
  color: #eaf1ed;
  background: #394442;
}

.heart {
  background: none;
  border: 0;
  color: #b8c2bc;
  font-size: 22px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.weapon-visual {
  height: 153px;
  background: linear-gradient(
    135deg,
    #34463c,
    #1b2822
  );
  margin: 12px -3px 15px;
  position: relative;
  overflow: hidden;
}

.weapon-label {
  position: absolute;
  right: -5px;
  top: 14px;
  color: rgba(255,255,255,.1);
  font: 800 33px var(--font-display);
  letter-spacing: 2px;
  writing-mode: vertical-rl;
}

.weapon-shape {
  position: absolute;
  left: 35px;
  top: 75px;
  width: 180px;
  height: 22px;
  background: linear-gradient(
    #bac4b9,
    #5e6c63
  );
  transform: skew(-18deg);
  filter: drop-shadow(
    4px 6px 7px #0b0d0c
  );
}

.weapon-shape i {
  position: absolute;
  width: 78px;
  height: 12px;
  background: #819086;
  right: -48px;
  top: 5px;
}

.weapon-shape b {
  position: absolute;
  width: 37px;
  height: 41px;
  background: #47544c;
  left: 73px;
  top: 16px;
  transform: skew(17deg);
}

.weapon-shape em {
  position: absolute;
  width: 46px;
  height: 9px;
  background: #c8d2c9;
  left: -25px;
  top: 6px;
}

.weapon-shape strong {
  position: absolute;
  width: 60px;
  height: 7px;
  background: #202723;
  left: 95px;
  top: -9px;
}

.loadout-info p {
  font-size: 8px;
  letter-spacing: 1.2px;
  color: #a8b2ae;
  margin: 0 0 3px;
}

.loadout-info h2 {
  font: 700 29px/1 var(--font-display);
  margin: 0;
}

.rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.rating span {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--green);
}

.rating b {
  font-size: 10px;
}

.stat-row {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 14px;
  padding-top: 11px;
  display: flex;
  gap: 10px;
}

.stat-row div {
  flex: 1;
}

.stat-row small {
  font-size: 7px;
  letter-spacing: .8px;
  color: #9ba59f;
  display: block;
  margin-bottom: 5px;
}

.stat-row i {
  display: block;
  height: 3px;
  background: #33423b;
  position: relative;
}

.stat-row i:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--meter);
  background: var(--green);
}

.floating-chip {
  position: absolute;
  display: flex;
  gap: 8px;
  align-items: center;
  font: 700 8px/1.3 var(--font);
  letter-spacing: 1px;
}

.floating-chip b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #11150a;
  background: var(--green);
  font: 700 13px var(--font-display);
}

.top-chip {
  top: 35px;
  right: 3px;
}

.bottom-chip {
  left: 22px;
  bottom: 5px;
}

.bottom-chip b {
  background: #f5f7ef;
}

.hero-scroll {
  position: absolute;
  bottom: 27px;
  left: clamp(24px,9vw,155px);
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #77817d;
  display: flex;
  align-items: center;
  gap: 9px;
}

.hero-scroll span {
  width: 60px;
  height: 1px;
  background: #4a544e;
}

.ticker {
  height: 52px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  color: #d8ff41;
  background: #111612;
}

.ticker div {
  white-space: nowrap;
  animation: marquee 25s linear infinite;
  font: 700 14px var(--font-display);
  letter-spacing: 1.3px;
}

.ticker b {
  margin: 0 30px;
  color: #f5f7ef;
}

@keyframes marquee {
  to {
    transform: translateX(-28%);
  }
}

.section {
  padding: 95px clamp(24px,9vw,155px) 108px;
  max-width: 1440px;
  margin: auto;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 36px;
}

.section h2,
.search-section h2,
.new-section h2 {
  font-size: 54px;
}

.text-link {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #e8eee9;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid #677068;
  padding-bottom: 6px;
}

.text-link span {
  color: var(--green);
  font-size: 16px;
  margin-left: 8px;
}

.loadout-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}

.loadout-item {
  border: 1px solid var(--line);
  background: #0d1111;
  min-height: 230px;
  position: relative;
  transition:
    .25s transform,
    .25s border-color;
}

.loadout-item:hover {
  transform: translateY(-5px);
  border-color: rgba(217,255,63,.5);
}

.loadout-image {
  height: 126px;
  background: radial-gradient(
    circle at 50% 28%,
    var(--tone),
    #1b2521 30%,
    #101412 72%
  );
  position: relative;
  overflow: hidden;
}

.loadout-image:after {
  content: "";
  position: absolute;
  width: 160px;
  height: 18px;
  left: 50%;
  top: 53%;
  background: linear-gradient(
    90deg,
    #edf4e9,
    #78867e
  );
  transform: translate(-50%,-50%) skew(-18deg);
  box-shadow: 0 7px 12px #050605;
}

.loadout-image span {
  position: absolute;
  bottom: 9px;
  left: 12px;
  color: rgba(255,255,255,.45);
  font: 700 8px var(--font);
  letter-spacing: 1px;
}

.loadout-content {
  padding: 15px;
}

.loadout-content .tag {
  position: absolute;
  top: 11px;
  right: 11px;
}

.loadout-type {
  font-size: 8px;
  color: #95a19b;
  letter-spacing: 1.1px;
  margin: 0;
}

.loadout-name {
  font: 700 25px var(--font-display);
  margin: 4px 0 9px;
}

.loadout-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.loadout-stars {
  color: var(--green);
  font-size: 11px;
  letter-spacing: 1px;
}

.views {
  font-size: 9px;
  color: #8f9a95;
}

.search-section {
  padding: 75px clamp(24px,9vw,155px);
  background: #101614;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.filter-panel {
  display: grid;
  gap: 15px;
}

.search-box {
  display: flex;
  align-items: center;
  border: 1px solid #435048;
  background: #0d1110;
  height: 50px;
  padding: 0 17px;
  gap: 11px;
}

.search-box span {
  font-size: 27px;
  line-height: 1;
  color: var(--green);
}

.search-box input {
  width: 100%;
  border: 0;
  background: transparent;
  color: white;
  font: 500 12px var(--font);
  outline: 0;
}

.search-box input::placeholder {
  color: #78837d;
}

.filter-buttons {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.filter-buttons button {
  background: transparent;
  border: 1px solid #39443f;
  color: #aeb8b2;
  padding: 9px 13px;
  text-transform: uppercase;
  font: 700 9px var(--font);
  letter-spacing: .7px;
  cursor: pointer;
}

.filter-buttons button.selected,
.filter-buttons button:hover {
  color: #151a0b;
  background: var(--green);
  border-color: var(--green);
}

.new-section {
  max-width: 1440px;
  margin: auto;
  padding: 104px clamp(24px,9vw,155px);
}

.new-card {
  padding: 57px clamp(25px,6vw,90px);
  background: linear-gradient(
    105deg,
    #1e2b23,
    #111a16 60%,
    #172315
  );
  border: 1px solid rgba(217,255,63,.25);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 35px;
  align-items: center;
}

.new-card:after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border: 1px solid rgba(217,255,63,.08);
  border-radius: 50%;
  right: -260px;
  top: -180px;
}

.new-card > div {
  position: relative;
  z-index: 1;
}

.new-section h2 {
  margin-bottom: 21px;
}

.new-section h2 + p {
  font-size: 12px;
  line-height: 1.7;
  color: #abb8b0;
  max-width: 360px;
  margin-bottom: 26px;
}

.patch-panel {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,10,11,.38);
  padding: 20px;
}

.patch-panel p,
.patch-panel small {
  font-size: 8px;
  letter-spacing: 1px;
  color: #98a49e;
  margin: 0;
}

.patch-panel h3 {
  font: 700 34px var(--font-display);
  color: var(--green);
  margin: 4px 0 16px;
}

.patch-panel ul {
  list-style: none;
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 11px 0;
  margin: 0 0 12px;
}

.patch-panel li {
  font-size: 10px;
  color: #c7d0ca;
  padding: 6px 0;
}

.patch-panel li span {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--green);
  transform: rotate(45deg);
  margin-right: 7px;
}

footer {
  border-top: 1px solid var(--line);
  padding: 30px clamp(24px,5vw,80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

footer p,
footer small {
  margin: 0;
  color: #737f79;
  font-size: 8px;
  letter-spacing: 1px;
}

.toast {
  position: fixed;
  z-index: 30;
  right: 22px;
  bottom: 22px;
  background: var(--green);
  color: #13170b;
  padding: 14px 18px;
  font-weight: 800;
  font-size: 11px;
  transform: translateY(130%);
  transition: transform .3s;
  box-shadow: 0 10px 30px #000;
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:800px) {

  .topbar {
    height: 68px;
    padding: 0 20px;
  }

  .desktop-nav,
  .admin-link {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .mobile-nav {
    position: absolute;
    z-index: 9;
    width: 100%;
    background: #101413;
    border-bottom: 1px solid var(--line);
    padding: 12px 20px;
    transform: translateY(-130%);
    transition: transform .25s;
    display: grid;
    gap: 10px;
  }

  .mobile-nav.open {
    transform: translateY(0);
  }

  .mobile-nav a {
    color: #dfe6e0;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    font-weight: 800;
    padding: 8px 0;
  }

  .hero {
    display: block;
    padding: 72px 24px 74px;
    min-height: 690px;
  }

  .hero:before {
    background: linear-gradient(
      180deg,
      rgba(8,10,11,.86),
      rgba(8,10,11,.76) 48%,
      rgba(8,10,11,.99) 85%
    );
  }

  .hero h1 {
    font-size: 67px;
  }

  .hero-art {
    height: 310px;
    min-width: 0;
    margin-top: 35px;
    transform: scale(.78);
    transform-origin: center top;
  }

  .hero-scroll {
    left: 24px;
  }

  .section {
    padding: 70px 24px;
  }

  .section-heading {
    align-items: start;
  }

  .section h2,
  .search-section h2,
  .new-section h2 {
    font-size: 45px;
  }

  .loadout-grid {
    grid-template-columns: 1fr;
  }

  .search-section {
    padding: 65px 24px;
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .new-section {
    padding: 65px 24px;
  }

  .new-card {
    grid-template-columns: 1fr;
    padding: 37px 25px;
  }

  .patch-panel {
    max-width: 330px;
  }

  footer {
    padding: 25px 24px;
    display: grid;
  }

  footer p {
    display: none;
  }

  .brand {
    font-size: 22px;
  }
}


/* =========================
   ADMIN
========================= */

.admin-body {
  background: #0b0e0d;
}

.admin-status {
  font-size: 9px;
  letter-spacing: 1.3px;
  font-weight: 800;
  color: #bcc6c0;
}

.admin-status span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  margin-right: 7px;
}

.admin-shell {
  display: grid;
  grid-template-columns: 245px 1fr;
  min-height: calc(100vh - 80px);
}

.admin-sidebar {
  border-right: 1px solid var(--line);
  padding: 35px 23px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.admin-sidebar > p {
  font-size: 8px;
  letter-spacing: 1.3px;
  color: #647069;
  margin: 0 0 8px 10px;
}

.admin-sidebar a {
  padding: 12px 10px;
  color: #a7b0ab;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
}

.admin-sidebar a.active,
.admin-sidebar a:hover {
  background: rgba(217,255,63,.09);
  color: var(--green);
}

.admin-help {
  margin-top: auto;
  border: 1px solid var(--line);
  padding: 13px;
  font-size: 9px;
  line-height: 1.5;
  color: #89958e;
}

.admin-help b {
  display: block;
  color: #e4eae4;
  margin-bottom: 4px;
}

.admin-content {
  padding: 56px clamp(25px,5vw,78px);
  max-width: 1250px;
}

.admin-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 36px;
}

.admin-title h1 {
  font: 800 55px/.84 var(--font-display);
  margin: 0;
}

.admin-title h1 strong {
  color: var(--green);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 15px;
  margin-bottom: 54px;
}

.metric-grid article {
  background: #111714;
  border: 1px solid var(--line);
  padding: 19px;
  position: relative;
}

.metric-grid article > span {
  position: absolute;
  right: 16px;
  top: 14px;
  color: var(--green);
  font-size: 15px;
}

.metric-grid p {
  font-size: 8px;
  letter-spacing: 1px;
  color: #8d9892;
  margin: 0 0 15px;
}

.metric-grid h2 {
  font: 700 33px var(--font-display);
  margin: 0 0 8px;
}

.metric-grid small {
  color: var(--green);
  font-size: 9px;
}

.admin-panel {
  border-top: 1px solid var(--line);
  padding: 42px 0 55px;
}

.panel-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 28px;
}

.panel-heading h2 {
  font: 800 36px/.9 var(--font-display);
  margin: 0;
}

.panel-heading h2 strong {
  color: var(--green);
}

.panel-heading > p {
  font-size: 9px;
  color: #849089;
  margin: 0;
}

.loadout-form {
  background: #101513;
  border: 1px solid var(--line);
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.loadout-form label {
  font-size: 8px;
  color: #aab4ae;
  letter-spacing: 1px;
  font-weight: 800;
  display: grid;
  gap: 8px;
  text-transform: uppercase;
}

.loadout-form input,
.loadout-form select,
.loadout-form textarea {
  height: 43px;
  width: 100%;
  border: 1px solid #344039;
  background: #0d1110;
  color: #eef3ed;
  padding: 0 12px;
  font: 500 11px var(--font);
  outline: none;
}

.loadout-form input:focus,
.loadout-form select:focus,
.loadout-form textarea:focus {
  border-color: var(--green);
}

.loadout-form textarea {
  height: 76px;
  padding: 12px;
  resize: vertical;
}

.wide {
  grid-column: 1/-1;
}

.attachment-fields {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.attachment-fields p {
  font-size: 9px;
  margin: 0 0 10px;
  color: #e3e9e3;
}

.attachment-fields p span {
  color: #748078;
  margin-left: 6px;
}

.attachment-fields > div {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 8px;
}

.attachment-fields input {
  font-size: 9px;
}

.toggles {
  display: flex;
  gap: 22px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.toggles label {
  display: flex;
  align-items: center;
  gap: 7px;
  text-transform: none;
  font-size: 10px;
  letter-spacing: 0;
  color: #d7ded8;
}

.toggles input {
  width: auto;
  height: auto;
  accent-color: var(--green);
}

.toggles span {
  color: var(--green);
  font-size: 14px;
}

.form-actions {
  display: flex;
  gap: 10px;
}

.library .panel-heading .text-link {
  background: none;
  border: 0;
  cursor: pointer;
}

.admin-table {
  border: 1px solid var(--line);
}

.admin-table-head,
.admin-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 55px;
  gap: 10px;
  align-items: center;
  padding: 12px 17px;
}

.admin-table-head {
  background: #111714;
  color: #849088;
  font-size: 8px;
  letter-spacing: 1px;
}

.admin-row {
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: #aab4ae;
}

.admin-row b {
  display: block;
  color: #f0f3ee;
  font-size: 12px;
}

.admin-row small {
  font-size: 8px;
  color: #77827c;
}

.status {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .7px;
  width: max-content;
  padding: 4px 6px;
}

.status.meta {
  background: var(--green);
  color: #11150a;
}

.status.new {
  background: #ffd842;
  color: #201a08;
}

.status.published {
  background: #3b4841;
  color: #e6eee7;
}

.admin-row button {
  width: 28px;
  height: 28px;
  border: 1px solid #475149;
  background: none;
  color: #d3ddd5;
  font-size: 20px;
  cursor: pointer;
}

.admin-row button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

@media(max-width:800px) {

  .admin-status {
    display: none;
  }

  .admin-body .admin-link {
    display: inline-block;
  }

  .admin-shell {
    display: block;
  }

  .admin-sidebar {
    display: none;
  }

  .admin-content {
    padding: 42px 20px;
  }

  .admin-title {
    display: block;
  }

  .admin-title .button {
    margin-top: 20px;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .loadout-form {
    grid-template-columns: 1fr;
  }

  .attachment-fields > div {
    grid-template-columns: 1fr;
  }

  .toggles {
    display: grid;
    gap: 12px;
  }

  .panel-heading {
    align-items: start;
    flex-direction: column;
  }

  .admin-table-head {
    display: none;
  }

  .admin-row {
    grid-template-columns: 1fr auto auto 30px;
    padding: 12px;
  }

  .admin-row > span:nth-child(2) {
    display: none;
  }
}


/* =========================
   PAGE CONNEXION ADMIN
========================= */

.login-shell {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.login-card {
  width: 100%;
  max-width: 500px;
  padding: 50px;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.01)
  );
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #d9ff3f;
}

.login-card h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(48px,7vw,72px);
  line-height: .85;
  margin: 18px 0 20px;
  letter-spacing: 1px;
}

.login-card h1 strong {
  color: #d9ff3f;
}

.login-description {
  color: rgba(255,255,255,.55);
  line-height: 1.7;
  margin-bottom: 35px;
  max-width: 400px;
}

.login-form {
  display: grid;
  gap: 22px;
}

.login-form label {
  display: grid;
  gap: 10px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 15px;
}

.login-form input {
  width: 100%;
  padding: 15px 18px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.12);
  color: white;
  outline: none;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  transition: .2s;
}

.login-form input:focus {
  border-color: #d9ff3f;
  box-shadow: 0 0 0 3px rgba(217,255,63,.08);
}

.login-form button {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

.login-error {
  min-height: 20px;
  margin: -5px 0 0;
  color: #ff6464;
  font-size: 13px;
}

@media(max-width:600px) {

  .login-card {
    padding: 35px 25px;
  }

}


/* =========================
   BOUTON DÉCONNEXION
========================= */

.admin-logout {
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8);
  padding: 9px 14px;
  cursor: pointer;
  font-family: "Manrope", sans-serif;
  transition: .2s;
}

.admin-logout:hover {
  border-color: #d9ff3f;
  color: #d9ff3f;
}


/* =========================================================
   APERCUS EN DIRECT - ADMIN
========================================================= */

.live-previews {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
  margin-top: 28px;
  margin-bottom: 30px;
}

.preview-section {
  min-width: 0;
}

.preview-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #8f9a94;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.preview-label span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d9ff3f;
  box-shadow: 0 0 12px rgba(217,255,63,.7);
}

.preview-card {
  overflow: hidden;
  background: #101613;
  border: 1px solid rgba(255,255,255,.1);
  min-height: 420px;
}

.preview-image {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    #17211c,
    #0d120f
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.preview-image.has-image img {
  display: block;
}

.preview-placeholder {
  color: rgba(217,255,63,.55);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}

.preview-placeholder.hidden {
  display: none;
}

.preview-card-content {
  padding: 20px;
}

.preview-category {
  margin: 0 0 8px;
  color: #8f9a94;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.preview-name {
  margin: 0 0 14px;
  color: #ffffff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(30px,3vw,42px);
  font-weight: 900;
  line-height: .9;
  text-transform: uppercase;
  word-break: break-word;
}

.preview-type {
  display: inline-block;
  color: #d9ff3f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.preview-tag {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  padding: 7px 10px;
  border: 1px solid rgba(217,255,63,.35);
  color: #d9ff3f;
  background: rgba(217,255,63,.08);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.preview-tag.meta {
  color: #d9ff3f;
}

.preview-tag.new {
  color: #ffffff;
}

.preview-tag.pro {
  color: #aeb8b2;
}

/* =========================================================
   FORMULAIRE ACCESSOIRES
========================================================= */

.attachment-fields {
  grid-column: 1 / -1;
}

.attachment-fields > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.attachment-slot {
  display: grid;
  gap: 7px;
}

.attachment-slot label {
  color: #7f8b85;
  font-size: 8px;
  letter-spacing: 1px;
}

.attachment-slot select,
.attachment-slot input {
  width: 100%;
  min-width: 0;
}


/* =========================================================
   CODE DE CLASSE WARZONE
========================================================= */

.share-code-field {
  grid-column: 1 / -1;
}

.share-code-field label {
  display: grid;
  gap: 8px;
}

.share-code-field input {
  width: 100%;
}

.share-code-help {
  margin: 0;
  color: #69756e;
  font-size: 8px;
  line-height: 1.5;
}


/* =========================================================
   DETAIL CLASSE
========================================================= */

.detail {
  max-width: 1160px;
  margin: auto;
  padding: 55px clamp(22px,7vw,100px) 90px;
}

.back {
  display: inline-flex;
  color: #d9ff3f;
  text-decoration: none;
  font: 700 10px sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 45px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
}

.detail-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  border: 1px solid rgba(217,255,63,.35);
  background: #101613;
  overflow: hidden;
}

.detail-image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  display: block;
  background: #101613;
}

.placeholder {
  height: 370px;
  display: grid;
  place-items: center;
  color: #d9ff3f;
  font: 800 42px sans-serif;
  background: #18241d;
  text-align: center;
  padding: 25px;
}

.detail-category {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #aeb8b2;
}

.detail h1 {
  font: 800 clamp(52px,7vw,82px)/.84 sans-serif;
  margin: 0 0 20px;
}

.detail h1 strong {
  color: #d9ff3f;
}

.detail-desc {
  color: #b3bdb7;
  font-size: 13px;
  line-height: 1.8;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: 22px;
}

.attachment-title {
  font-size: 12px;
  letter-spacing: 1.3px;
  margin: 26px 0 13px;
}

.attachments {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.attachments li {
  background: #111714;
  border: 1px solid rgba(255,255,255,.1);
  padding: 13px 15px;
  font-size: 12px;
  color: #dae1dc;
}

.attachments li span {
  color: #d9ff3f;
  margin-right: 10px;
}

.attachment-category {
  display: block;
  color: #7f8b85;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.attachment-name {
  display: block;
  color: #dae1dc;
}

.detail-stats {
  display: flex;
  gap: 24px;
  margin-top: 25px;
}

.detail-stats div {
  border-left: 2px solid #d9ff3f;
  padding-left: 10px;
}

.detail-stats small {
  display: block;
  color: #8f9a94;
  font-size: 8px;
  letter-spacing: 1px;
}

.detail-stats b {
  font-size: 25px;
}


/* =========================================================
   CODE WARZONE — PAGE DETAIL
========================================================= */

.share-code {
  margin-top: 25px;
  padding: 15px;
  border: 1px solid rgba(217,255,63,.28);
  background: #101613;
}

.share-code-title {
  display: block;
  color: #8f9a94;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
  margin-bottom: 10px;
}

.share-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.share-code-value {
  flex: 1;
  min-width: 0;
  color: #d9ff3f;
  background: #0b0e0d;
  border: 1px solid rgba(255,255,255,.08);
  padding: 11px 12px;
  font-family: monospace;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copy-code {
  flex-shrink: 0;
  border: 1px solid #d9ff3f;
  background: #d9ff3f;
  color: #11150a;
  padding: 11px 13px;
  font: 800 8px var(--font);
  letter-spacing: .8px;
  cursor: pointer;
}

.copy-code:hover {
  background: #edff91;
}

.copy-code:active {
  transform: translateY(1px);
}


/* =========================================================
   META HERO DYNAMIQUE
========================================================= */

.loadout-card {
  transition:
    opacity .35s ease,
    transform .35s ease,
    border-color .35s ease;
}

.loadout-card.meta-changing {
  opacity: .25;
  transform: rotate(3deg) scale(.97);
}

.loadout-card .weapon-visual {
  position: relative;
  overflow: hidden;
}

.hero-meta-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.weapon-visual.has-real-image {
  background: #101615;
}

.weapon-visual.has-real-image .weapon-shape {
  display: none;
}

.weapon-visual.has-real-image .hero-meta-image {
  filter: saturate(.9);
}

.weapon-visual .weapon-label {
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}

.loadout-card .card-top,
.loadout-card .loadout-info,
.loadout-card .rating,
.loadout-card .stat-row {
  position: relative;
  z-index: 3;
}


/* =========================================================
   FAVORIS
========================================================= */

.card-heart {
  position: absolute;
  left: 12px;
  top: 10px;
  z-index: 5;
  border: 0;
  background: rgba(8,10,11,.6);
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  padding: 5px 8px;
  cursor: pointer;
  transition:
    color .2s,
    transform .2s;
}

.card-heart:hover {
  color: #d9ff3f;
  transform: scale(1.08);
}

.card-heart.saved {
  color: #d9ff3f;
}


/* =========================================================
   ETAT VIDE
========================================================= */

.empty-state {
  grid-column: 1 / -1;
  width: 100%;
  padding: 45px 20px;
  text-align: center;
  color: #7f8b85;
  border: 1px solid rgba(255,255,255,.08);
  background: #101513;
  font-size: 11px;
}


/* =========================================================
   ADMIN — RECHERCHE
========================================================= */

.admin-search {
  width: 100%;
  height: 44px;
  border: 1px solid #344039;
  background: #0d1110;
  color: #eef3ed;
  padding: 0 13px;
  font: 500 11px var(--font);
  outline: none;
}

.admin-search:focus {
  border-color: #d9ff3f;
}

.admin-search::placeholder {
  color: #65716b;
}


/* =========================================================
   ADMIN — APERCU IMAGE
========================================================= */

.preview-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  background: #101613;
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
  background: #101613;
}

.preview-image.has-image img {
  display: block;
}


/* =========================================================
   ADMIN — APERCU CARTE
========================================================= */

.preview-card {
  position: relative;
  overflow: hidden;
  background: #0d1110;
  border: 1px solid rgba(255,255,255,.1);
}

.preview-card-image {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    #34463c,
    #1b2822
  );
}

.preview-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.preview-card-image.has-image img {
  display: block;
}

.preview-card-info {
  padding: 16px;
}

.preview-card-info small {
  display: block;
  color: #8f9a94;
  font-size: 8px;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.preview-card-info h3 {
  margin: 0;
  font: 700 28px/1 var(--font-display);
}

.preview-card-info p {
  color: #9ba69f;
  font-size: 9px;
  letter-spacing: 1px;
}


/* =========================================================
   ADMIN — LIGNES
========================================================= */

.admin-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.edit-button,
.delete-button {
  transition:
    border-color .2s,
    color .2s,
    background .2s;
}

.edit-button:hover {
  border-color: #d9ff3f;
  color: #d9ff3f;
}

.delete-button:hover {
  border-color: #ff6464;
  color: #ff6464;
}


/* =========================================================
   TOAST
========================================================= */

.toast.visible {
  transform: translateY(0);
}


/* =========================================================
   RESPONSIVE DETAIL
========================================================= */

@media(max-width:800px) {

  .detail {
    padding: 35px 22px 65px;
  }

  .detail-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .detail-image,
  .detail-image img,
  .placeholder {
    min-height: 260px;
    height: 260px;
  }

  .detail h1 {
    font-size: 55px;
  }

  .share-code-row {
    flex-direction: column;
    align-items: stretch;
  }

  .copy-code {
    width: 100%;
  }

  .detail-stats {
    gap: 18px;
  }

  .live-previews {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   RESPONSIVE ADMIN
========================================================= */

@media(max-width:700px) {

  .admin-content {
    padding: 35px 18px;
  }

  .admin-title h1 {
    font-size: 48px;
  }

  .loadout-form {
    padding: 18px;
  }

  .attachment-fields > div {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .button {
    width: 100%;
    justify-content: center;
  }

}


/* =========================================================
   PETITS ECRANS
========================================================= */

@media(max-width:480px) {

  .hero h1 {
    font-size: 58px;
  }

  .hero-art {
    transform: scale(.68);
    margin-left: -30px;
    margin-right: -30px;
  }

  .section h2,
  .search-section h2,
  .new-section h2 {
    font-size: 40px;
  }

  .section-heading {
    gap: 15px;
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .button {
    justify-content: center;
  }

  .loadout-grid {
    gap: 12px;
  }

  .loadout-item {
    min-height: 215px;
  }

.loadout-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  background: #101412;
}

.loadout-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

  .detail h1 {
    font-size: 48px;
  }

  .detail-stats {
    flex-wrap: wrap;
  }

}


/* =========================================================
   ACCESSOIRES — NOUVELLE STRUCTURE
   8 CATEGORIES POSSIBLES
========================================================= */

.attachment-slots {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  grid-column: 1 / -1;
}

.attachment-slot {
  border: 1px solid rgba(255,255,255,.08);
  background: #0d1110;
  padding: 12px;
}

.attachment-slot-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d9ff3f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.attachment-slot-number {
  color: #65716b;
  font-family: var(--font-display);
  font-size: 13px;
}

.attachment-slot input,
.attachment-slot select {
  width: 100%;
}

@media(max-width:700px) {

  .attachment-slots {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   8 CATEGORIES — DETAIL
========================================================= */

.attachments li {
  position: relative;
}

.attachments li .attachment-index {
  display: inline-block;
  min-width: 24px;
  color: #d9ff3f;
  font-family: var(--font-display);
  font-size: 14px;
}

.attachments li .attachment-category {
  margin-left: 34px;
}

.attachments li .attachment-name {
  margin-left: 34px;
}


/* =========================================================
   ACCESSOIRES VIDES
========================================================= */

.attachments li.empty-attachment {
  opacity: .5;
}

.attachments li.empty-attachment
.attachment-name {
  color: #69756e;
}


/* =========================================================
   ANIMATION CHANGEMENT META
========================================================= */

@keyframes metaCardIn {

  0% {
    opacity: 0;
    transform:
      rotate(3deg)
      translateY(8px)
      scale(.97);
  }

  100% {
    opacity: 1;
    transform:
      rotate(3deg)
      translateY(0)
      scale(1);
  }

}

.loadout-card.meta-loaded {
  animation:
    metaCardIn .45s ease;
}

/* =========================================
   CATÉGORIE SOUS L'IMAGE — APERÇU ADMIN
========================================= */

.preview-category-under-image {
  padding: 10px 15px 0;
  background: #101613;
}

.preview-category-under-image span {
  display: block;
  color: #8f9a94;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}


/* =========================================================
   IMAGES DES CLASSES — FORMAT 1920x1080 / 16:9
   RÈGLE COMMUNE À TOUT LE SITE
========================================================= */

/* =========================
   CARTES PAGE D'ACCUEIL
========================= */

.loadout-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  min-height: 0;
  overflow: hidden;
  background: #101412;
}

.loadout-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}


/* =========================
   CAROUSEL META / HERO
========================= */

.loadout-card .weapon-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  min-height: 0;
  overflow: hidden;
}

.hero-meta-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.weapon-visual.has-real-image {
  background: #101615;
}

.weapon-visual.has-real-image .weapon-shape {
  display: none;
}


/* =========================
   APERÇU CRÉATION DE CLASSE
========================= */

.preview-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  min-height: 0;
  overflow: hidden;
  background: #101613;
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #101613;
}

.preview-image.has-image img {
  display: block;
}


/* =========================
   APERÇU CARTE
========================= */

.preview-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  min-height: 0;
  overflow: hidden;
  background: #101613;
}

.preview-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}


/* =========================
   PAGE INTÉRIEURE DE LA CLASSE
========================= */

.detail-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  min-height: 0;
  overflow: hidden;
  background: #101613;
  border: 1px solid rgba(217,255,63,.35);
}

.detail-image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: contain;
  background: #101613;
}


/* =========================
   PLACEHOLDER PAGE DETAIL
========================= */

.detail-image .placeholder,
.placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  color: #d9ff3f;
  background: #18241d;
  text-align: center;
  padding: 25px;
}


/* =========================
   MOBILE
   ON CONSERVE LE 16:9
========================= */

@media (max-width: 800px) {

  .loadout-image,
  .loadout-card .weapon-visual,
  .preview-image,
  .preview-card-image,
  .detail-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto !important;
    min-height: 0 !important;
  }

  .loadout-image img,
  .loadout-card .weapon-visual img,
  .preview-image img,
  .preview-card-image img,
  .detail-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .detail-image .placeholder,
  .placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

}

/* =================================
   GESTION DES ARMES
================================= */

.weapon-image-preview {
  width: 100%;
  max-width: 100%;
  height: 360px;
  min-height: 360px;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border: 1px solid rgba(217, 255, 63, .25);
  background: #080b09;
}

/* Image de l'arme */

.weapon-image-preview img {
  display: none;

  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  position: absolute;
  inset: 0;
}

/* Placeholder */

.weapon-image-preview > div {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  color: #68736d;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Sécurité supplémentaire */

#weapon-library-preview {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
}

/* =================================
   MESSAGE DE BIENVENUE
   ================================= */

h1 .welcome-green {
  color: #c6ff00 !important;
}

h1 #welcome-name {
  color: #ffffff !important;
}

/* ==========================================
   MODÉRATEURS
========================================== */

/* =========================
   SECTION
========================= */

#moderators {
  width: 100%;
}

#moderators .section-heading {
  margin-bottom: 32px;
}

#moderators .section-heading h2 {
  margin-bottom: 8px;
}

#moderators .section-heading p {
  margin: 0;
  color: #89948d;
  font-size: 13px;
}


/* =========================
   CARTES
========================= */

#moderators .admin-card {
  width: 100%;
  margin-bottom: 28px;
  padding: 24px;
  border: 1px solid var(--line);
  background: #0d1210;
  box-sizing: border-box;
}

#moderators .admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

#moderators .admin-card-header h3 {
  margin: 5px 0 0;
  color: #f0f3ee;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .5px;
}


/* =========================
   FORMULAIRE
========================= */

#moderators #moderator-form {
  display: grid;
  gap: 18px;
}

#moderators .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

#moderators .field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#moderators .field label {
  color: #849088;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#moderators .field input {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;

  padding: 10px 12px;

  border: 1px solid #344039;
  outline: none;

  background: #080b09;
  color: #f0f3ee;

  font-family: "Manrope", sans-serif;
  font-size: 12px;

  transition:
    border-color .15s ease,
    background .15s ease;
}

#moderators .field input::placeholder {
  color: #56615a;
}

#moderators .field input:focus {
  border-color: var(--green);
  background: #0b100d;
}


/* =========================
   MOT DE PASSE + GÉNÉRER
========================= */

#moderators .password-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

#moderators .password-field input {
  min-width: 0;
}

#moderators #generate-moderator-password {
  min-height: 42px;

  padding: 0 15px;

  border: 1px solid #475149;
  background: transparent;
  color: #d9ff3f;

  font-family: "Barlow Condensed", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;

  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

#moderators #generate-moderator-password:hover {
  border-color: var(--green);
  background: var(--green);
  color: #10140c;
}


/* =========================
   BOUTON CRÉATION
========================= */

#moderators #moderator-form .primary-button {
  width: max-content;

  margin-top: 4px;
  padding: 11px 18px;

  border: 1px solid var(--green);
  background: var(--green);
  color: #10140c;

  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .7px;

  cursor: pointer;

  transition:
    background .15s ease,
    transform .15s ease;
}

#moderators #moderator-form .primary-button:hover {
  background: #e8ff82;
}

#moderators #moderator-form .primary-button:active {
  transform: translateY(1px);
}


/* =========================
   LISTE
========================= */

#moderators .admin-list {
  width: 100%;
  border: 1px solid var(--line);
  box-sizing: border-box;
}


/* =========================
   LIGNE MODÉRATEUR
========================= */

#moderators .moderator-row {
  display: grid;

  grid-template-columns:
    minmax(180px, 2fr)
    80px
    110px
    minmax(250px, auto);

  gap: 14px;

  align-items: center;

  min-height: 68px;

  padding: 12px 17px;

  box-sizing: border-box;
}


/* =========================
   INFORMATIONS
========================= */

#moderators .moderator-info {
  min-width: 0;
}

#moderators .moderator-info b {
  display: block;

  color: #f0f3ee;

  font-size: 12px;
  font-weight: 800;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#moderators .moderator-info small {
  display: block;

  margin-top: 3px;

  color: #77827c;

  font-size: 8px;
}


/* =========================
   STATUT
========================= */

#moderators .moderator-status {
  width: max-content;

  padding: 5px 7px;

  font-size: 8px;
  font-weight: 900;
  letter-spacing: .7px;

  box-sizing: border-box;
}

#moderators .status-active {
  background: var(--green);
  color: #11150a;
}

#moderators .status-disabled {
  background: #392526;
  color: #ff9a9a;
}


/* =========================
   ROLE
========================= */

#moderators .moderator-role {
  width: max-content;

  padding: 5px 7px;

  border: 1px solid #344039;

  color: #9ba59f;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .7px;
}


/* =========================
   ACTIONS
========================= */

#moderators .moderator-row .admin-actions {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 7px;

  min-width: 0;
}


/*
   On annule la règle générale
   .admin-row button { width:28px; ... }
   pour les boutons texte.
*/

#moderators .moderator-row .admin-actions button {
  width: auto;
  height: 30px;

  min-width: 0;

  padding: 0 9px;

  border: 1px solid #475149;

  background: transparent;
  color: #d3ddd5;

  font-family: "Barlow Condensed", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;

  cursor: pointer;

  box-sizing: border-box;

  white-space: nowrap;

  transition:
    border-color .15s ease,
    background .15s ease,
    color .15s ease;
}


/* RESET */

#moderators .moderator-row
.admin-actions
[data-reset-moderator]:hover {

  border-color: var(--green);

  background: var(--green);

  color: #10140c;
}


/* ACTIVER / DÉSACTIVER */

#moderators .moderator-row
.admin-actions
[data-toggle-moderator]:hover {

  border-color: #d9ff3f;

  color: #d9ff3f;

  background: rgba(217, 255, 63, .06);
}


/* SUPPRESSION */

#moderators .moderator-row
.admin-actions
[data-delete-moderator] {

  width: 30px;
  min-width: 30px;

  padding: 0;

  color: #d3ddd5;

  font-size: 18px;
  line-height: 1;
}

#moderators .moderator-row
.admin-actions
[data-delete-moderator]:hover {

  border-color: #ff6868;

  background: #ff6868;

  color: #160808;
}


/* =========================
   COMPTE DÉSACTIVÉ
========================= */

#moderators .moderator-disabled {
  opacity: .72;
}

#moderators .moderator-disabled .moderator-info b {
  color: #9ba39e;
}


/* =========================
   IDENTIFIANTS GÉNÉRÉS
========================= */

#moderators .moderator-credentials {

  padding: 18px;

  margin-bottom: 18px;

  border: 1px solid rgba(217, 255, 63, .35);

  background: #111811;

  box-sizing: border-box;
}

#moderators .credentials-header {

  margin-bottom: 15px;

  color: var(--green);

  font-family: "Barlow Condensed", sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .8px;
}

#moderators .credentials-line {

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 10px 0;

  border-top: 1px solid rgba(255,255,255,.06);
}

#moderators .credentials-line span {

  color: #77827c;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .8px;
}

#moderators .credentials-line strong {

  color: #f0f3ee;

  font-family: monospace;
  font-size: 12px;

  word-break: break-all;

  text-align: right;
}

#moderators .moderator-credentials p {

  margin: 15px 0 0;

  color: #d6a84d;

  font-size: 10px;
  line-height: 1.5;
}


/* =========================
   ÉTAT VIDE
========================= */

#moderators .admin-empty {

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 6px;

  min-height: 100px;

  text-align: center;
}

#moderators .admin-empty strong {

  color: #d9ff3f;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .8px;
}

#moderators .admin-empty span {

  color: #69736d;

  font-size: 9px;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {

  #moderators .moderator-row {

    grid-template-columns:
      1fr
      auto;

    gap: 12px;

    padding: 16px;
  }

  #moderators .moderator-status {
    grid-column: 2;
    grid-row: 1;
  }

  #moderators .moderator-role {
    grid-column: 1;
    grid-row: 2;
  }

  #moderators .moderator-row .admin-actions {

    grid-column: 1 / -1;
    grid-row: 3;

    justify-content: flex-start;

    flex-wrap: wrap;
  }

}


@media (max-width: 700px) {

  #moderators .admin-card {
    padding: 18px;
  }

  #moderators .form-grid {
    grid-template-columns: 1fr;
  }

  #moderators #moderator-form .primary-button {
    width: 100%;
  }

  #moderators .password-field {
    grid-template-columns: 1fr;
  }

  #moderators #generate-moderator-password {
    width: 100%;
  }

  #moderators .credentials-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  #moderators .credentials-line strong {
    text-align: left;
  }

}

/* =================================
   ACTIONS MODÉRATEURS
================================= */

.moderator-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: nowrap;
}

.moderator-action-button {
  width: auto !important;
  min-width: 60px;
  height: 30px !important;

  padding: 0 9px;

  border: 1px solid #475149 !important;
  background: transparent !important;

  color: #d3ddd5 !important;

  font-family: "Barlow Condensed", sans-serif;
  font-size: 9px !important;
  font-weight: 800;

  letter-spacing: .4px;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.moderator-action-button:hover {
  border-color: var(--green) !important;
  background: var(--green) !important;
  color: #10140c !important;
}

.admin-row .delete-button {
  flex-shrink: 0;
}


/* =========================
   MODÉRATEUR DÉSACTIVÉ
========================= */

.moderator-disabled {
  opacity: .65;
}

.moderator-disabled b {
  color: #9ca59f !important;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 800px) {

  .moderator-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

}

/* =========================================================
   MODÉRATEURS — STATUT & ACTIONS
========================================================= */

.moderator-row {
  grid-template-columns: 2fr 1fr 1fr minmax(280px, auto);
}

.moderator-info {
  min-width: 0;
}

.moderator-info b {
  display: block;
  color: #f0f3ee;
  font-size: 12px;
  margin-bottom: 5px;
}

.moderator-info small {
  display: inline-block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.moderator-role {
  color: #aab4ae;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
}

.moderator-date {
  color: #77827c;
  font-size: 9px;
}

.moderator-status {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .8px;
}

.status-active {
  color: var(--green) !important;
}

.status-disabled {
  color: #ff6464 !important;
}

.moderator-disabled {
  opacity: .72;
}

.moderator-disabled .moderator-info b {
  color: #a0a8a3;
}


/* =========================================================
   ACTIONS MODÉRATEURS
========================================================= */

.admin-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.admin-actions .secondary-button {
  width: auto;
  height: 28px;
  min-width: auto;
  padding: 0 10px;

  border: 1px solid #475149;
  background: rgba(255,255,255,.02);

  color: #cbd3ce;

  font-family: var(--font);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .7px;

  cursor: pointer;
  transition:
    border-color .2s ease,
    color .2s ease,
    background .2s ease,
    transform .15s ease;
}

.admin-actions .secondary-button:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(217,255,63,.06);
}

.admin-actions .secondary-button:active {
  transform: translateY(1px);
}


/* RESET */

.admin-actions .secondary-button[data-reset-moderator] {
  color: #d9ff3f;
  border-color: rgba(217,255,63,.28);
}

.admin-actions .secondary-button[data-reset-moderator]:hover {
  border-color: var(--green);
  background: rgba(217,255,63,.1);
}


/* DÉSACTIVATION */

.admin-actions .secondary-button[data-toggle-moderator] {
  color: #ffb0b0;
  border-color: rgba(255,100,100,.25);
}

.admin-actions .secondary-button[data-toggle-moderator]:hover {
  color: #ff6464;
  border-color: #ff6464;
  background: rgba(255,100,100,.07);
}


/* RÉACTIVATION */

.moderator-disabled
.admin-actions
.secondary-button[data-toggle-moderator] {
  color: var(--green);
  border-color: rgba(217,255,63,.28);
}

.moderator-disabled
.admin-actions
.secondary-button[data-toggle-moderator]:hover {
  color: #11150a;
  background: var(--green);
  border-color: var(--green);
}


/* SUPPRESSION */

.admin-actions .delete-button {
  flex-shrink: 0;
}


/* =========================================================
   RESPONSIVE MODÉRATEURS
========================================================= */

@media(max-width:1000px) {

  .moderator-row {
    grid-template-columns:
      minmax(170px, 1.5fr)
      minmax(100px, .8fr)
      minmax(100px, .8fr)
      minmax(220px, auto);
  }

  .admin-actions {
    justify-content: flex-start;
  }

}


@media(max-width:800px) {

  .moderator-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 12px;
  }

  .moderator-role,
  .moderator-date {
    display: block;
  }

  .moderator-role::before {
    content: "RÔLE : ";
    color: #59645e;
  }

  .moderator-date::before {
    content: "CRÉÉ LE : ";
    color: #59645e;
  }

  .admin-actions {
    width: 100%;
    justify-content: flex-start;
    margin-top: 5px;
  }

  .admin-actions .secondary-button {
    height: 32px;
    padding: 0 11px;
  }

  .admin-actions .delete-button {
    height: 32px;
    width: 32px;
  }

}

/* ==========================================
   RECHERCHE ARME - CRÉATION DE CLASSE
========================================== */

.weapon-search-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}


.weapon-search {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;

  border: 1px solid var(--line);
  border-radius: 0;

  background: rgba(255,255,255,.025);
  color: #f0f3ee;

  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;

  outline: none;

  transition:
    border-color .2s ease,
    background .2s ease;
}


.weapon-search::placeholder {
  color: #59645e;
}


.weapon-search:focus {
  border-color: var(--green);
  background: rgba(217,255,63,.035);
}


.weapon-search-icon {
  position: absolute;

  left: 14px;
  top: 50%;

  transform: translateY(-50%);

  font-size: 13px;

  pointer-events: none;

  opacity: .65;
}


#weapon-select {
  width: 100%;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 800px) {

  .weapon-search {
    height: 46px;
    font-size: 12px;
  }

}

/* =========================================================
   LUB1 LOADOUT — ADMIN DASHBOARD PREMIUM
   STYLE : DARK BLUE / SAAS / GAMING
   ========================================================= */

:root {
  --admin-bg: #050914;
  --admin-bg-2: #070c18;
  --admin-sidebar: #060b16;
  --admin-card: #0d1424;
  --admin-card-2: #10192b;

  --admin-blue: #2f6bff;
  --admin-blue-light: #4b83ff;
  --admin-blue-soft: rgba(47, 107, 255, .12);

  --admin-green: #39d98a;
  --admin-green-soft: rgba(57, 217, 138, .12);

  --admin-orange: #ff9d3d;
  --admin-orange-soft: rgba(255, 157, 61, .12);

  --admin-red: #ff5c68;
  --admin-red-soft: rgba(255, 92, 104, .12);

  --admin-text: #f1f5fb;
  --admin-text-soft: #9aa8bd;
  --admin-text-muted: #66748b;

  --admin-border: rgba(137, 157, 190, .12);
  --admin-border-strong: rgba(137, 157, 190, .20);
}


/* =========================================================
   PAGE
   ========================================================= */

.admin-body {
  background:
    radial-gradient(
      circle at 72% 8%,
      rgba(47, 107, 255, .08),
      transparent 30%
    ),
    var(--admin-bg);

  color: var(--admin-text);
}


/* =========================================================
   TOPBAR
   ========================================================= */

.admin-body .topbar {
  height: 72px;

  padding:
    0 clamp(22px, 3vw, 42px);

  background:
    rgba(5, 9, 20, .92);

  border-bottom:
    1px solid var(--admin-border);

  backdrop-filter: blur(18px);
}


/* LOGO */

.admin-body .brand {
  font-size: 24px;
  letter-spacing: .5px;
}

.admin-body .brand span {
  color: var(--admin-blue-light);
}

.admin-body .brand i {
  background: var(--admin-blue);
}


/* STATUT */

.admin-body .admin-status {
  display: flex;
  align-items: center;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;

  color: var(--admin-text-soft);
}

.admin-body .admin-status span {
  width: 7px;
  height: 7px;

  margin-right: 8px;

  background: var(--admin-green);

  box-shadow:
    0 0 12px
    rgba(57, 217, 138, .65);
}


/* LIEN SITE */

.admin-body .admin-link {
  color: var(--admin-text-soft);

  transition:
    color .2s ease;
}

.admin-body .admin-link:hover {
  color: var(--admin-blue-light);
}

.admin-body .admin-link span {
  color: var(--admin-blue-light);
}


/* =========================================================
   STRUCTURE
   ========================================================= */

.admin-body .admin-shell {
  grid-template-columns: 250px minmax(0, 1fr);

  min-height:
    calc(100vh - 72px);

  background:
    var(--admin-bg);
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.admin-body .admin-sidebar {
  position: sticky;
  top: 0;

  height:
    calc(100vh - 72px);

  padding:
    28px 18px;

  background:
    linear-gradient(
      180deg,
      #060b16 0%,
      #050914 100%
    );

  border-right:
    1px solid var(--admin-border);

  gap: 5px;
}


/* TITRE SIDEBAR */

.admin-body .admin-sidebar > p {
  margin:
    0 0 10px 10px;

  color:
    var(--admin-text-muted);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 1.6px;
}


/* LIENS */

.admin-body .admin-sidebar a {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 42px;

  padding:
    0 12px;

  border:
    1px solid transparent;

  border-radius: 7px;

  color:
    var(--admin-text-soft);

  font-size: 10px;
  font-weight: 700;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease;
}


.admin-body .admin-sidebar a:hover {
  color: var(--admin-text);

  background:
    rgba(47, 107, 255, .055);

  border-color:
    rgba(47, 107, 255, .10);

  transform:
    translateX(2px);
}


.admin-body .admin-sidebar a.active {
  color: #ffffff;

  background:
    var(--admin-blue-soft);

  border-color:
    rgba(47, 107, 255, .20);
}


/* PETITE BARRE BLEUE */

.admin-body .admin-sidebar a.active::before {
  content: "";

  position: absolute;

  left: -1px;
  top: 9px;
  bottom: 9px;

  width: 3px;

  border-radius: 0 3px 3px 0;

  background:
    var(--admin-blue);

  box-shadow:
    0 0 12px
    rgba(47, 107, 255, .65);
}


/* AIDE */

.admin-body .admin-help {
  margin-top: auto;

  padding: 15px;

  background:
    rgba(255,255,255,.015);

  border:
    1px solid var(--admin-border);

  border-radius: 8px;

  color:
    var(--admin-text-muted);

  font-size: 9px;
}

.admin-body .admin-help b {
  color:
    var(--admin-text);

  margin-bottom: 6px;
}


/* =========================================================
   CONTENU
   ========================================================= */

.admin-body .admin-content {
  width: 100%;
  max-width: 1450px;

  padding:
    38px clamp(24px, 4vw, 55px);

  margin: 0 auto;
}


/* =========================================================
   HEADER DASHBOARD
   ========================================================= */

.admin-body .admin-title {
  margin-bottom: 30px;

  padding:
    24px 26px;

  background:
    linear-gradient(
      135deg,
      rgba(16, 25, 43, .96),
      rgba(9, 15, 28, .96)
    );

  border:
    1px solid var(--admin-border);

  border-radius: 9px;

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.16);
}


.admin-body .admin-title h1 {
  font-size: 45px;

  letter-spacing:
    -.4px;
}


.admin-body .admin-title h1 strong {
  color:
    var(--admin-blue-light);

  text-shadow:
    0 0 25px
    rgba(47, 107, 255, .18);
}


/* EYEBROW */

.admin-body .eyebrow {
  color:
    var(--admin-text-muted);

  font-size: 9px;
  letter-spacing: 1.5px;
}

.admin-body .eyebrow span {
  background:
    var(--admin-blue);

  box-shadow:
    0 0 10px
    rgba(47, 107, 255, .5);
}


/* =========================================================
   BOUTONS
   ========================================================= */

.admin-body .button.primary {
  background:
    var(--admin-blue);

  color:
    #ffffff;

  border:
    1px solid
    rgba(75, 131, 255, .45);

  border-radius: 6px;

  box-shadow:
    0 8px 22px
    rgba(47, 107, 255, .18);

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.admin-body .button.primary:hover {
  background:
    var(--admin-blue-light);

  box-shadow:
    0 10px 28px
    rgba(47, 107, 255, .28);

  transform:
    translateY(-1px);
}


.admin-body .button.ghost {
  background:
    rgba(255,255,255,.025);

  color:
    var(--admin-text-soft);

  border-color:
    var(--admin-border);

  border-radius: 6px;
}

.admin-body .button.ghost:hover {
  color:
    var(--admin-text);

  border-color:
    var(--admin-border-strong);

  background:
    rgba(255,255,255,.045);
}


/* =========================================================
   STATISTIQUES RAPIDES
   ========================================================= */

.admin-body .metric-grid {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 14px;

  margin-bottom: 35px;
}


.admin-body .metric-grid article {
  min-height: 130px;

  padding: 19px 20px;

  background:
    linear-gradient(
      145deg,
      #0e1627,
      #0b1220
    );

  border:
    1px solid var(--admin-border);

  border-radius: 8px;

  overflow: hidden;

  transition:
    transform .2s ease,
    border-color .2s ease;
}


.admin-body .metric-grid article:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(47, 107, 255, .28);
}


/* ACCENT GAUCHE */

.admin-body .metric-grid article::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background:
    var(--admin-blue);

  opacity: .9;
}


/* ICONE */

.admin-body .metric-grid article > span {
  right: 17px;
  top: 16px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    var(--admin-blue-soft);

  color:
    var(--admin-blue-light);

  font-size: 13px;
}


/* LABEL */

.admin-body .metric-grid p {
  color:
    var(--admin-text-muted);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 1.1px;
}


/* VALEUR */

.admin-body .metric-grid h2 {
  color:
    var(--admin-text);

  font-size: 34px;

  letter-spacing: -.5px;
}


/* SOUS TEXTE */

.admin-body .metric-grid small {
  color:
    var(--admin-text-soft);

  font-size: 8px;
}


/* =========================================================
   PANELS
   ========================================================= */

.admin-body .admin-panel {
  padding:
    35px 0 45px;

  border-top:
    1px solid var(--admin-border);
}


.admin-body .panel-heading {
  margin-bottom: 20px;
}


.admin-body .panel-heading h2 {
  color:
    var(--admin-text);

  font-size: 32px;
}


.admin-body .panel-heading h2 strong {
  color:
    var(--admin-blue-light);
}


.admin-body .panel-heading > p {
  color:
    var(--admin-text-muted);
}


/* =========================================================
   FORMULAIRES
   ========================================================= */

.admin-body .loadout-form {
  padding: 22px;

  background:
    linear-gradient(
      145deg,
      #0d1424,
      #0a111e
    );

  border:
    1px solid var(--admin-border);

  border-radius: 9px;

  box-shadow:
    0 15px 45px
    rgba(0,0,0,.12);
}


.admin-body .loadout-form label {
  color:
    var(--admin-text-soft);

  font-size: 8px;
}


.admin-body .loadout-form input,
.admin-body .loadout-form select,
.admin-body .loadout-form textarea {
  height: 45px;

  background:
    #080f1c;

  color:
    var(--admin-text);

  border:
    1px solid var(--admin-border-strong);

  border-radius: 5px;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.admin-body .loadout-form input:hover,
.admin-body .loadout-form select:hover,
.admin-body .loadout-form textarea:hover {
  border-color:
    rgba(137,157,190,.28);
}


.admin-body .loadout-form input:focus,
.admin-body .loadout-form select:focus,
.admin-body .loadout-form textarea:focus {
  border-color:
    var(--admin-blue);

  background:
    #09111f;

  box-shadow:
    0 0 0 3px
    rgba(47,107,255,.09);
}


/* =========================================================
   ACCESSOIRES
   ========================================================= */

.admin-body .attachment-fields {
  border-top:
    1px solid var(--admin-border);
}


.admin-body .attachment-fields p {
  color:
    var(--admin-text);

  font-size: 9px;
  font-weight: 800;
}


.admin-body .attachment-fields p span {
  color:
    var(--admin-text-muted);
}


.admin-body .attachment-row {
  display: grid;

  grid-template-columns:
    minmax(150px, .65fr)
    minmax(0, 1fr);

  gap: 8px;
}


/* =========================================================
   TOGGLES
   ========================================================= */

.admin-body .toggles {
  border-top:
    1px solid var(--admin-border);
}


.admin-body .toggles label {
  color:
    var(--admin-text-soft);
}


.admin-body .toggles span {
  color:
    var(--admin-blue-light);
}


.admin-body .toggles input {
  accent-color:
    var(--admin-blue);
}


/* =========================================================
   TABLEAUX / LISTES
   ========================================================= */

.admin-body .admin-table {
  overflow: hidden;

  background:
    var(--admin-card);

  border:
    1px solid var(--admin-border);

  border-radius: 8px;
}


.admin-body .admin-table-head {
  background:
    #111a2b;

  color:
    var(--admin-text-muted);

  border-bottom:
    1px solid var(--admin-border);
}


.admin-body .admin-row {
  min-height: 62px;

  background:
    rgba(8,14,25,.55);

  border-top:
    1px solid var(--admin-border);

  transition:
    background .2s ease;
}


.admin-body .admin-row:hover {
  background:
    rgba(47,107,255,.035);
}


.admin-body .admin-row b {
  color:
    var(--admin-text);
}


.admin-body .admin-row small {
  color:
    var(--admin-text-muted);
}


/* =========================================================
   STATUTS
   ========================================================= */

.admin-body .status.meta {
  background:
    var(--admin-blue-soft);

  color:
    var(--admin-blue-light);

  border:
    1px solid
    rgba(47,107,255,.18);

  border-radius: 4px;
}


.admin-body .status.new {
  background:
    var(--admin-orange-soft);

  color:
    var(--admin-orange);

  border:
    1px solid
    rgba(255,157,61,.18);

  border-radius: 4px;
}


.admin-body .status.published {
  background:
    var(--admin-green-soft);

  color:
    var(--admin-green);

  border:
    1px solid
    rgba(57,217,138,.18);

  border-radius: 4px;
}


/* =========================================================
   BOUTONS D'ACTION
   ========================================================= */

.admin-body .admin-row button {
  background:
    rgba(255,255,255,.02);

  border:
    1px solid var(--admin-border-strong);

  border-radius: 5px;

  color:
    var(--admin-text-soft);

  transition:
    border-color .2s ease,
    color .2s ease,
    background .2s ease;
}


.admin-body .admin-row button:hover {
  border-color:
    rgba(47,107,255,.35);

  color:
    var(--admin-blue-light);

  background:
    var(--admin-blue-soft);
}


/* =========================================================
   APERÇU EN DIRECT
   ========================================================= */

.admin-body .live-preview {
  background:
    linear-gradient(
      145deg,
      #0d1424,
      #09101d
    );

  border:
    1px solid var(--admin-border);

  border-radius: 8px;

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.12);
}


.admin-body .live-preview-heading {
  padding-bottom: 16px;

  border-bottom:
    1px solid var(--admin-border);
}


.admin-body .live-preview-heading h3 {
  color:
    var(--admin-text);

  font-size: 28px;
}


.admin-body .live-preview-heading h3 strong {
  color:
    var(--admin-blue-light);
}


.admin-body .live-preview-heading > small {
  color:
    var(--admin-text-muted);
}


/* =========================================================
   CARTE APERÇU
   ========================================================= */

.admin-body .preview-card {
  background:
    #0a111e;

  border:
    1px solid var(--admin-border-strong);

  border-radius: 7px;

  box-shadow:
    0 20px 45px
    rgba(0,0,0,.28);
}


.admin-body .preview-card:hover {
  border-color:
    rgba(47,107,255,.35);

  transform:
    translateY(-3px);
}


.admin-body .preview-image {
  background:
    radial-gradient(
      circle at 50% 30%,
      #1b315c,
      #0c1627 52%,
      #070d17 100%
    );
}


.admin-body .preview-type {
  color:
    var(--admin-blue-light);
}


.admin-body .preview-stars {
  color:
    var(--admin-blue-light);
}


.admin-body .preview-tag {
  border-color:
    rgba(47,107,255,.25);

  background:
    var(--admin-blue-soft);

  color:
    var(--admin-blue-light);
}


/* =========================================================
   RECHERCHE ARME
   ========================================================= */

.admin-body .weapon-search-wrapper {
  position: relative;

  width: 100%;

  margin-bottom: 8px;
}


.admin-body .weapon-search {
  width: 100%;

  height: 45px;

  padding:
    0 14px 0 40px !important;

  background:
    #080f1c !important;

  border:
    1px solid var(--admin-border-strong) !important;

  color:
    var(--admin-text) !important;

  border-radius: 5px !important;
}


.admin-body .weapon-search:focus {
  border-color:
    var(--admin-blue) !important;

  box-shadow:
    0 0 0 3px
    rgba(47,107,255,.09);
}


.admin-body .weapon-search::placeholder {
  color:
    var(--admin-text-muted);
}


.admin-body .weapon-search-icon {
  color:
    var(--admin-blue-light);

  opacity: .8;
}


/* =========================================================
   CODE WARZONE
   ========================================================= */

.admin-body .share-code-box,
.admin-body .share-code-input {
  background:
    #080f1c;

  border-color:
    var(--admin-border-strong);

  border-radius: 5px;
}


.admin-body .share-code-box code {
  color:
    var(--admin-blue-light);
}


/* =========================================================
   DÉCONNEXION
   ========================================================= */

.admin-body .admin-logout {
  background:
    rgba(255,255,255,.02);

  border:
    1px solid var(--admin-border-strong);

  border-radius: 5px;

  color:
    var(--admin-text-soft);

  transition:
    .2s ease;
}


.admin-body .admin-logout:hover {
  background:
    var(--admin-red-soft);

  border-color:
    rgba(255,92,104,.3);

  color:
    var(--admin-red);
}


/* =========================================================
   TOAST
   ========================================================= */

.admin-body .toast {
  background:
    var(--admin-card-2);

  color:
    var(--admin-text);

  border:
    1px solid
    rgba(47,107,255,.25);

  border-left:
    3px solid
    var(--admin-blue);

  border-radius: 6px;

  box-shadow:
    0 15px 45px
    rgba(0,0,0,.35);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

  .admin-body .admin-shell {
    display: block;
  }

  .admin-body .admin-sidebar {
    display: none;
  }

  .admin-body .admin-content {
    padding:
      25px 16px 40px;
  }

  .admin-body .admin-title {
    padding:
      20px;

    margin-bottom:
      20px;
  }

  .admin-body .admin-title h1 {
    font-size:
      40px;
  }

  .admin-body .metric-grid {
    grid-template-columns:
      1fr;

    gap: 10px;
  }

  .admin-body .metric-grid article {
    min-height:
      115px;
  }

  .admin-body .loadout-form {
    padding:
      16px;
  }

  .admin-body .attachment-row {
    grid-template-columns:
      1fr;
  }

  .admin-body .live-preview {
    padding:
      16px;
  }

  .admin-body .admin-row {
    grid-template-columns:
      1fr auto 30px;
  }

}

/* =========================================================
   LUB1 LOADOUT — CLIENT PREMIUM
   DARK BLUE / ELECTRIC BLUE
   ========================================================= */


/* =========================================================
   VARIABLES CLIENT
   ========================================================= */

:root {
  --client-bg: #050914;
  --client-bg-2: #070d19;

  --client-surface: #0c1423;
  --client-surface-2: #101a2c;

  --client-blue: #2f6bff;
  --client-blue-light: #4b83ff;
  --client-blue-soft: rgba(47,107,255,.12);

  --client-green: #39d98a;
  --client-green-soft: rgba(57,217,138,.12);

  --client-orange: #ff9d3d;
  --client-orange-soft: rgba(255,157,61,.12);

  --client-text: #f1f5fb;
  --client-text-soft: #9aa8bd;
  --client-text-muted: #66748b;

  --client-line: rgba(137,157,190,.13);
  --client-line-strong: rgba(137,157,190,.22);
}


/* =========================================================
   BASE
   ========================================================= */

body:not(.admin-body) {
  background:
    radial-gradient(
      circle at 75% 5%,
      rgba(47,107,255,.08),
      transparent 28%
    ),
    var(--client-bg);

  color:
    var(--client-text);
}


/* =========================================================
   HEADER
   ========================================================= */

body:not(.admin-body) .topbar {
  background:
    rgba(5,9,20,.90);

  border-bottom:
    1px solid var(--client-line);

  box-shadow:
    0 10px 40px rgba(0,0,0,.15);

  backdrop-filter:
    blur(18px);
}


body:not(.admin-body) .brand {
  color:
    var(--client-text);
}


body:not(.admin-body) .brand span {
  color:
    var(--client-blue-light);
}


body:not(.admin-body) .brand i {
  background:
    var(--client-blue);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

body:not(.admin-body) .desktop-nav a {
  color:
    var(--client-text-soft);

  transition:
    color .2s ease,
    border-color .2s ease;
}


body:not(.admin-body) .desktop-nav a:hover,
body:not(.admin-body) .desktop-nav a.active {
  color:
    #ffffff;

  border-color:
    var(--client-blue);
}


body:not(.admin-body) .desktop-nav em {
  background:
    var(--client-blue);

  color:
    #ffffff;
}


/* =========================================================
   HERO
   ========================================================= */

body:not(.admin-body) .hero {
  background:
    radial-gradient(
      ellipse 55% 65% at 74% 41%,
      rgba(47,107,255,.13),
      transparent 65%
    );
}


body:not(.admin-body) .hero:before {
  background:
    linear-gradient(
      90deg,
      rgba(5,9,20,.99) 0%,
      rgba(5,9,20,.82) 42%,
      transparent 76%
    );
}


/* LUMIÈRE BLEUE */

body:not(.admin-body) .hero::after {
  content: "";

  position: absolute;

  width: 450px;
  height: 450px;

  right: 5%;
  top: 50%;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(47,107,255,.10),
      transparent 68%
    );

  pointer-events: none;
}


/* =========================================================
   HERO TITRES
   ========================================================= */

body:not(.admin-body) .hero h1 {
  color:
    #ffffff;

  text-shadow:
    0 8px 35px rgba(0,0,0,.35);
}


body:not(.admin-body) .hero h1 strong {
  color:
    var(--client-blue-light);

  text-shadow:
    0 0 30px
    rgba(47,107,255,.22);
}


body:not(.admin-body) .eyebrow {
  color:
    var(--client-text-muted);
}


body:not(.admin-body) .eyebrow span {
  background:
    var(--client-blue);

  box-shadow:
    0 0 12px
    rgba(47,107,255,.65);
}


body:not(.admin-body) .hero-text {
  color:
    var(--client-text-soft);
}


body:not(.admin-body) .hero-text b {
  color:
    #ffffff;
}


/* =========================================================
   BOUTONS
   ========================================================= */

body:not(.admin-body) .button.primary {
  background:
    var(--client-blue);

  color:
    #ffffff;

  border:
    1px solid
    rgba(75,131,255,.45);

  border-radius:
    6px;

  box-shadow:
    0 8px 25px
    rgba(47,107,255,.18);

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


body:not(.admin-body) .button.primary:hover {
  background:
    var(--client-blue-light);

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 32px
    rgba(47,107,255,.28);
}


body:not(.admin-body) .button.ghost {
  background:
    rgba(255,255,255,.025);

  border-color:
    var(--client-line-strong);

  color:
    var(--client-text-soft);

  border-radius:
    6px;
}


body:not(.admin-body) .button.ghost:hover {
  border-color:
    rgba(47,107,255,.4);

  color:
    #ffffff;

  background:
    var(--client-blue-soft);
}


/* =========================================================
   HERO CARD
   ========================================================= */

body:not(.admin-body) .loadout-card {
  background:
    linear-gradient(
      145deg,
      #13213a,
      #0a111e 65%
    );

  border-color:
    rgba(47,107,255,.38);

  box-shadow:
    0 25px 70px rgba(0,0,0,.45),
    0 0 40px rgba(47,107,255,.10);
}


body:not(.admin-body) .target-ring {
  border-color:
    rgba(47,107,255,.16);
}


body:not(.admin-body) .ring-two {
  border-color:
    rgba(47,107,255,.23);
}


body:not(.admin-body) .scan-line {
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--client-blue-light),
      transparent
    );
}


body:not(.admin-body) .stat-row i:after {
  background:
    var(--client-blue);
}


/* =========================================================
   HERO CHIP
   ========================================================= */

body:not(.admin-body) .floating-chip b {
  background:
    var(--client-blue);

  color:
    #ffffff;
}


body:not(.admin-body) .bottom-chip b {
  background:
    #ffffff;

  color:
    #07101e;
}


/* =========================================================
   TICKER
   ========================================================= */

body:not(.admin-body) .ticker {
  background:
    #0a111e;

  border-color:
    var(--client-line);

  color:
    var(--client-blue-light);
}


body:not(.admin-body) .ticker b {
  color:
    #ffffff;
}


/* =========================================================
   SECTIONS
   ========================================================= */

body:not(.admin-body) .section {
  background:
    var(--client-bg);
}


body:not(.admin-body) .section h2 {
  color:
    #ffffff;
}


body:not(.admin-body) .section h2 strong {
  color:
    var(--client-blue-light);
}


/* =========================================================
   CARTES DE LOADOUT
   ========================================================= */

body:not(.admin-body) .loadout-item {
  background:
    linear-gradient(
      145deg,
      #0d1524,
      #090f1b
    );

  border-color:
    var(--client-line);

  border-radius:
    7px;

  box-shadow:
    0 10px 35px
    rgba(0,0,0,.12);

  overflow:
    hidden;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


body:not(.admin-body) .loadout-item:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(47,107,255,.40);

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.25),
    0 0 25px
    rgba(47,107,255,.06);
}


/* =========================================================
   IMAGE LOADOUT
   ========================================================= */

body:not(.admin-body) .loadout-image {
  background:
    radial-gradient(
      circle at 50% 28%,
      #1b315c,
      #101c30 42%,
      #080e18 78%
    );
}


body:not(.admin-body) .loadout-image:after {
  background:
    linear-gradient(
      90deg,
      #e7eefb,
      #71829a
    );

  box-shadow:
    0 7px 14px
    rgba(0,0,0,.7);
}


/* =========================================================
   TAGS
   ========================================================= */

body:not(.admin-body) .tag.meta {
  background:
    var(--client-blue);

  color:
    #ffffff;
}


body:not(.admin-body) .tag.new {
  background:
    var(--client-orange);

  color:
    #201306;
}


body:not(.admin-body) .tag.pro {
  background:
    #26344b;

  color:
    #dce7f7;

  border:
    1px solid
    rgba(137,157,190,.15);
}


/* =========================================================
   TEXTE CARTES
   ========================================================= */

body:not(.admin-body) .loadout-type {
  color:
    var(--client-text-muted);
}


body:not(.admin-body) .loadout-name {
  color:
    #ffffff;
}


body:not(.admin-body) .loadout-stars {
  color:
    var(--client-blue-light);
}


body:not(.admin-body) .views {
  color:
    var(--client-text-muted);
}


/* =========================================================
   RECHERCHE
   ========================================================= */

body:not(.admin-body) .search-section {
  background:
    linear-gradient(
      180deg,
      #0a111e,
      #080f1b
    );

  border-top:
    1px solid var(--client-line);

  border-bottom:
    1px solid var(--client-line);
}


body:not(.admin-body) .search-section h2 {
  color:
    #ffffff;
}


body:not(.admin-body) .search-section h2 strong {
  color:
    var(--client-blue-light);
}


/* =========================================================
   SEARCH BOX
   ========================================================= */

body:not(.admin-body) .search-box {
  background:
    #070e1a;

  border:
    1px solid var(--client-line-strong);

  border-radius:
    6px;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}


body:not(.admin-body) .search-box:focus-within {
  border-color:
    var(--client-blue);

  box-shadow:
    0 0 0 3px
    rgba(47,107,255,.08);
}


body:not(.admin-body) .search-box span {
  color:
    var(--client-blue-light);
}


body:not(.admin-body) .search-box input {
  color:
    #ffffff;
}


body:not(.admin-body) .search-box input::placeholder {
  color:
    var(--client-text-muted);
}


/* =========================================================
   FILTRES
   ========================================================= */

body:not(.admin-body) .filter-buttons button {
  background:
    rgba(255,255,255,.015);

  border:
    1px solid var(--client-line-strong);

  color:
    var(--client-text-soft);

  border-radius:
    5px;

  transition:
    .2s ease;
}


body:not(.admin-body) .filter-buttons button:hover,
body:not(.admin-body) .filter-buttons button.selected {
  background:
    var(--client-blue);

  border-color:
    var(--client-blue);

  color:
    #ffffff;

  box-shadow:
    0 6px 18px
    rgba(47,107,255,.16);
}


/* =========================================================
   LIENS
   ========================================================= */

body:not(.admin-body) .text-link {
  color:
    var(--client-text-soft);

  border-color:
    var(--client-line-strong);
}


body:not(.admin-body) .text-link:hover {
  color:
    #ffffff;

  border-color:
    var(--client-blue);
}


body:not(.admin-body) .text-link span {
  color:
    var(--client-blue-light);
}


/* =========================================================
   SECTION NOUVEAUTÉ
   ========================================================= */

body:not(.admin-body) .new-section {
  background:
    var(--client-bg);
}


body:not(.admin-body) .new-card {
  background:
    linear-gradient(
      110deg,
      #10203b,
      #0b1527 62%,
      #0d1b31
    );

  border:
    1px solid
    rgba(47,107,255,.25);

  border-radius:
    8px;

  box-shadow:
    0 20px 60px
    rgba(0,0,0,.22);
}


body:not(.admin-body) .new-card:after {
  border-color:
    rgba(47,107,255,.09);
}


body:not(.admin-body) .new-section h2 strong {
  color:
    var(--client-blue-light);
}


body:not(.admin-body) .new-section h2+p {
  color:
    var(--client-text-soft);
}


/* =========================================================
   PATCH PANEL
   ========================================================= */

body:not(.admin-body) .patch-panel {
  background:
    rgba(4,9,18,.55);

  border:
    1px solid var(--client-line-strong);

  border-radius:
    6px;
}


body:not(.admin-body) .patch-panel h3 {
  color:
    var(--client-blue-light);
}


body:not(.admin-body) .patch-panel li {
  color:
    var(--client-text-soft);
}


body:not(.admin-body) .patch-panel li span {
  background:
    var(--client-blue);
}


/* =========================================================
   FOOTER
   ========================================================= */

body:not(.admin-body) footer {
  background:
    #050a14;

  border-top:
    1px solid var(--client-line);
}


body:not(.admin-body) footer p,
body:not(.admin-body) footer small {
  color:
    var(--client-text-muted);
}


/* =========================================================
   MOBILE NAV
   ========================================================= */

@media (max-width: 800px) {

  body:not(.admin-body) .mobile-nav {
    background:
      #080f1b;

    border-bottom:
      1px solid var(--client-line);
  }

  body:not(.admin-body) .mobile-nav a {
    color:
      var(--client-text-soft);
  }

  body:not(.admin-body) .mobile-nav a:hover {
    color:
      var(--client-blue-light);
  }

  body:not(.admin-body) .menu-button span {
    background:
      #ffffff;
  }

}


.news-ticker {
  position: relative;
  width: 100%;
  height: 48px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(5, 9, 20, 0.98),
      rgba(8, 15, 28, 0.98),
      rgba(5, 9, 20, 0.98)
    );

  border-top: 1px solid rgba(75, 131, 255, 0.08);
  border-bottom: 1px solid rgba(75, 131, 255, 0.14);
}

.news-ticker-track {
  display: flex;
  align-items: center;

  width: max-content;
  flex-shrink: 0;

  animation: newsTickerScroll 22s linear infinite;

  will-change: transform;
}

.news-ticker-group {
  display: flex;
  align-items: center;

  flex-shrink: 0;

  gap: 38px;
  padding-right: 38px;
}

.news-ticker-group strong {
  color: #4b83ff;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 1px;
  text-transform: uppercase;
}

.news-ticker-group span {
  color: #ffffff;

  font-size: 14px;
  line-height: 1;

  opacity: 0.9;
}

@keyframes newsTickerScroll {
  0% {
    transform: translateX(100vw);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 800px) {
  .news-ticker {
    height: 44px;
  }

  .news-ticker-track {
    animation-duration: 18s;
  }

  .news-ticker-group {
    gap: 28px;
    padding-right: 28px;
  }

  .news-ticker-group strong {
    font-size: 9px;
  }

  .news-ticker-group span {
    font-size: 12px;
  }
}


/* =========================================================
   LUB1 LOADOUT — EFFETS VISUELS PREMIUM
   ========================================================= */

/* ---------------------------------------------------------
   VARIABLES
--------------------------------------------------------- */

:root {
  --fx-blue: #3f7cff;
  --fx-blue-light: #6f9cff;
  --fx-blue-soft: rgba(63, 124, 255, .18);
  --fx-blue-glow: rgba(63, 124, 255, .38);
  --fx-green-glow: rgba(217, 255, 63, .25);
}


/* ---------------------------------------------------------
   OVERLAY LUMINEUX GLOBAL
--------------------------------------------------------- */

body:not(.admin-body)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 19;

  background:
    radial-gradient(
      circle at 75% 15%,
      rgba(63,124,255,.075),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 65%,
      rgba(63,124,255,.035),
      transparent 25%
    );

  opacity: .8;
}


/* ---------------------------------------------------------
   LIGNE DE SCAN AU CHARGEMENT
--------------------------------------------------------- */

body:not(.admin-body)::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: -3px;
  height: 2px;
  z-index: 100;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(63,124,255,0) 20%,
    rgba(63,124,255,.95) 50%,
    rgba(63,124,255,0) 80%,
    transparent 100%
  );

  box-shadow:
    0 0 18px rgba(63,124,255,.8),
    0 0 40px rgba(63,124,255,.35);

  animation: pageScan 1.4s cubic-bezier(.65,0,.35,1) forwards;
  pointer-events: none;
}

@keyframes pageScan {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}


/* =========================================================
   ACCUEIL — HERO
   ========================================================= */

.hero {
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;

  right: 2%;
  top: 50%;

  transform: translateY(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(63,124,255,.09) 0%,
      rgba(63,124,255,.025) 35%,
      transparent 70%
    );

  filter: blur(8px);
  pointer-events: none;
  z-index: -1;

  animation: heroGlow 7s ease-in-out infinite alternate;
}

@keyframes heroGlow {
  0% {
    transform: translateY(-50%) scale(.94);
    opacity: .55;
  }

  100% {
    transform: translateY(-50%) scale(1.08);
    opacity: 1;
  }
}


/* ---------------------------------------------------------
   CERCLES DU HERO
--------------------------------------------------------- */

.target-ring {
  animation: ringPulse 5s ease-in-out infinite;
}

.ring-two {
  animation-delay: -2s;
}

@keyframes ringPulse {
  0%,
  100% {
    opacity: .45;
    transform: scale(.97);
  }

  50% {
    opacity: 1;
    transform: scale(1.035);
  }
}


/* ---------------------------------------------------------
   SCAN LINE HERO
--------------------------------------------------------- */

.scan-line {
  animation: heroScan 4.5s ease-in-out infinite;
}

@keyframes heroScan {
  0%,
  15% {
    opacity: 0;
    transform:
      rotate(-38deg)
      translateX(-150px);
  }

  35% {
    opacity: .45;
  }

  60% {
    opacity: .1;
  }

  100% {
    opacity: 0;
    transform:
      rotate(-38deg)
      translateX(150px);
  }
}


/* ---------------------------------------------------------
   CARTE HERO
--------------------------------------------------------- */

.loadout-card {
  animation:
    heroCardIn .9s cubic-bezier(.16,1,.3,1) both,
    heroCardFloat 6s ease-in-out 1s infinite;
  transform-origin: center center;
}

@keyframes heroCardIn {
  0% {
    opacity: 0;
    transform:
      rotate(8deg)
      translateY(45px)
      scale(.9);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform:
      rotate(3deg)
      translateY(0)
      scale(1);
    filter: blur(0);
  }
}

@keyframes heroCardFloat {
  0%,
  100% {
    transform:
      rotate(3deg)
      translateY(0);
  }

  50% {
    transform:
      rotate(2deg)
      translateY(-8px);
  }
}

/* ---------------------------------------------------------
   CHIPS FLOTTANTS
--------------------------------------------------------- */

.top-chip {
  animation:
    chipIn .7s .35s cubic-bezier(.16,1,.3,1) both,
    chipFloat 4s 1s ease-in-out infinite;
}

.bottom-chip {
  animation:
    chipIn .7s .55s cubic-bezier(.16,1,.3,1) both,
    chipFloat 5s 1.2s ease-in-out infinite reverse;
}

@keyframes chipIn {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes chipFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}


/* =========================================================
   BOUTONS
   ========================================================= */

.button {
  position: relative;
  overflow: hidden;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.button::before {
  content: "";

  position: absolute;
  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.25),
    transparent
  );

  transform: skewX(-20deg);
  transition: left .55s ease;
}

.button:hover::before {
  left: 150%;
}

.button:hover {
  transform: translateY(-2px);
}

.primary:hover {
  box-shadow:
    0 8px 25px rgba(217,255,63,.18),
    0 0 25px rgba(217,255,63,.08);
}

.ghost:hover {
  box-shadow:
    0 8px 25px rgba(0,0,0,.3);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.desktop-nav a {
  position: relative;
  transition:
    color .25s ease,
    border-color .25s ease;
}

.desktop-nav a::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: -1px;

  width: 0;
  height: 2px;

  background: var(--green);

  transform: translateX(-50%);
  transition: width .25s ease;
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after {
  width: 100%;
}


/* =========================================================
   TICKER
   ========================================================= */

.ticker {
  position: relative;
  box-shadow:
    inset 0 0 25px rgba(63,124,255,.025);
}

.ticker::before,
.ticker::after {
  content: "";

  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;

  z-index: 2;
  pointer-events: none;
}

.ticker::before {
  left: 0;

  background: linear-gradient(
    90deg,
    #111612,
    transparent
  );
}

.ticker::after {
  right: 0;

  background: linear-gradient(
    270deg,
    #111612,
    transparent
  );
}

.ticker b {
  animation: tickerPulse 2.2s ease-in-out infinite;
}

@keyframes tickerPulse {
  0%,
  100% {
    opacity: .45;
    transform: scale(.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}


/* =========================================================
   CARTES DE CLASSES
   ========================================================= */

.loadout-item {
  overflow: hidden;

  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    border-color .3s ease,
    box-shadow .3s ease;
}

.loadout-item::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      125deg,
      transparent 25%,
      rgba(63,124,255,.08),
      transparent 65%
    );

  transform: translateX(-120%);
  transition: transform .65s ease;

  pointer-events: none;
  z-index: 3;
}

.loadout-item::after {
  content: "";

  position: absolute;
  left: 0;
  top: 0;

  width: 2px;
  height: 0;

  background: var(--fx-blue);

  box-shadow:
    0 0 12px var(--fx-blue-glow);

  transition: height .35s ease;
  z-index: 4;
}

.loadout-item:hover {
  transform:
    translateY(-8px)
    scale(1.012);

  border-color: rgba(63,124,255,.65);

  box-shadow:
    0 18px 40px rgba(0,0,0,.3),
    0 0 28px rgba(63,124,255,.08);
}

.loadout-item:hover::before {
  transform: translateX(120%);
}

.loadout-item:hover::after {
  height: 100%;
}


/* ---------------------------------------------------------
   IMAGE DES CARTES
--------------------------------------------------------- */

.loadout-image {
  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    filter .45s ease;
}

.loadout-item:hover .loadout-image {
  transform: scale(1.035);
  filter: brightness(1.08);
}

.loadout-image::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      115deg,
      transparent 35%,
      rgba(255,255,255,.07) 50%,
      transparent 65%
    );

  transform: translateX(-100%);
  transition: transform .7s ease;

  z-index: 2;
}

.loadout-item:hover .loadout-image::before {
  transform: translateX(100%);
}


/* ---------------------------------------------------------
   NOM DES CLASSES
--------------------------------------------------------- */

.loadout-name {
  transition:
    transform .3s ease,
    color .3s ease;
}

.loadout-item:hover .loadout-name {
  transform: translateX(4px);
  color: #ffffff;
}


/* ---------------------------------------------------------
   ÉTOILES
--------------------------------------------------------- */

.loadout-stars {
  transition:
    filter .3s ease,
    transform .3s ease;
}

.loadout-item:hover .loadout-stars {
  filter:
    drop-shadow(0 0 7px rgba(217,255,63,.4));
  transform: translateX(3px);
}


/* =========================================================
   SECTION SEARCH
   ========================================================= */

.search-section {
  position: relative;
  overflow: hidden;
}

.search-section::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  right: -180px;
  top: -180px;

  border-radius: 50%;

  border: 1px solid rgba(63,124,255,.07);

  box-shadow:
    0 0 70px rgba(63,124,255,.025);

  animation: searchOrb 9s linear infinite;
  pointer-events: none;
}

@keyframes searchOrb {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


/* ---------------------------------------------------------
   CHAMP DE RECHERCHE
--------------------------------------------------------- */

.search-box {
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.search-box:focus-within {
  border-color: var(--fx-blue);

  background:
    rgba(63,124,255,.025);

  box-shadow:
    0 0 0 1px rgba(63,124,255,.12),
    0 0 25px rgba(63,124,255,.07);
}

.search-box span {
  transition:
    transform .3s ease,
    filter .3s ease;
}

.search-box:focus-within span {
  transform: scale(1.12);
  filter:
    drop-shadow(0 0 7px rgba(217,255,63,.5));
}


/* ---------------------------------------------------------
   FILTRES
--------------------------------------------------------- */

.filter-buttons button {
  position: relative;
  overflow: hidden;

  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.filter-buttons button:hover {
  transform: translateY(-2px);
}

.filter-buttons button::before {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    110deg,
    transparent,
    rgba(255,255,255,.15),
    transparent
  );

  transform: translateX(-120%);
  transition: transform .5s ease;
}

.filter-buttons button:hover::before {
  transform: translateX(120%);
}


/* =========================================================
   NOUVEAUTÉS
   ========================================================= */

.new-card {
  transition:
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}

.new-card:hover {
  border-color: rgba(63,124,255,.42);

  box-shadow:
    0 20px 60px rgba(0,0,0,.28),
    0 0 35px rgba(63,124,255,.06);
}

.new-card::before {
  content: "";

  position: absolute;

  width: 240px;
  height: 240px;

  left: -120px;
  bottom: -120px;

  border: 1px solid rgba(63,124,255,.07);
  border-radius: 50%;

  animation: newOrb 8s ease-in-out infinite;
}

@keyframes newOrb {
  0%,
  100% {
    transform: scale(.85);
  }

  50% {
    transform: scale(1.12);
  }
}

.patch-panel {
  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.new-card:hover .patch-panel {
  transform: translateY(-4px);

  border-color:
    rgba(63,124,255,.3);

  box-shadow:
    0 12px 30px rgba(0,0,0,.2);
}

.patch-panel li span {
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.patch-panel li:hover span {
  transform: rotate(135deg) scale(1.25);
  box-shadow: 0 0 8px rgba(217,255,63,.5);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer .brand {
  transition:
    transform .3s ease,
    filter .3s ease;
}

footer .brand:hover {
  transform: translateX(4px);

  filter:
    drop-shadow(0 0 8px rgba(217,255,63,.2));
}


/* =========================================================
   PAGE CLASSE
   ========================================================= */

.detail {
  position: relative;
}

.detail::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  right: -260px;
  top: 70px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(63,124,255,.08),
      transparent 68%
    );

  filter: blur(10px);

  pointer-events: none;

  animation: detailGlow 8s ease-in-out infinite alternate;
}

@keyframes detailGlow {
  from {
    transform: scale(.9);
    opacity: .4;
  }

  to {
    transform: scale(1.1);
    opacity: 1;
  }
}


/* ---------------------------------------------------------
   BOUTON RETOUR
--------------------------------------------------------- */

.back {
  position: relative;

  transition:
    color .25s ease,
    transform .25s ease;
}

.back::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -5px;

  width: 0;
  height: 1px;

  background: var(--green);

  transition: width .3s ease;
}

.back:hover {
  transform: translateX(-4px);
}

.back:hover::after {
  width: 100%;
}


/* ---------------------------------------------------------
   IMAGE DE LA CLASSE
--------------------------------------------------------- */

.detail-image {
  box-shadow:
    0 20px 55px rgba(0,0,0,.28),
    0 0 0 1px rgba(63,124,255,.025);

  animation: detailImageIn .8s cubic-bezier(.16,1,.3,1) both;
}

.detail-image::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      transparent 30%,
      rgba(255,255,255,.08) 48%,
      transparent 66%
    );

  transform: translateX(-120%);
  animation: detailImageScan 5s 1s ease-in-out infinite;
}

.detail-image::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;
  pointer-events: none;

  border: 1px solid rgba(63,124,255,.35);

  box-shadow:
    inset 0 0 35px rgba(63,124,255,.04);
}

.detail-image img {
  transition:
    transform .7s cubic-bezier(.16,1,.3,1),
    filter .7s ease;
}

.detail-image:hover img {
  transform: scale(1.025);
  filter: brightness(1.07);
}

@keyframes detailImageIn {
  from {
    opacity: 0;
    transform: translateX(-35px) scale(.97);
    filter: blur(5px);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes detailImageScan {
  0%,
  45% {
    transform: translateX(-120%);
  }

  70% {
    transform: translateX(120%);
  }

  100% {
    transform: translateX(120%);
  }
}


/* ---------------------------------------------------------
   INFORMATIONS DE LA CLASSE
--------------------------------------------------------- */

.detail-grid article {
  animation:
    detailContentIn .75s .12s
    cubic-bezier(.16,1,.3,1)
    both;
}

@keyframes detailContentIn {
  from {
    opacity: 0;
    transform: translateX(35px);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

.detail-category {
  transition:
    color .3s ease,
    letter-spacing .3s ease;
}

.detail-grid article:hover .detail-category {
  color: var(--fx-blue-light);
  letter-spacing: 1.9px;
}

.detail h1 {
  text-shadow:
    0 0 35px rgba(255,255,255,.015);
}

.detail h1 strong {
  text-shadow:
    0 0 25px rgba(217,255,63,.08);
}


/* ---------------------------------------------------------
   ACCESSOIRES
--------------------------------------------------------- */

.attachments li {
  position: relative;
  overflow: hidden;

  transition:
    transform .3s cubic-bezier(.16,1,.3,1),
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.attachments li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 2px;

  background: var(--fx-blue);

  transform: scaleY(0);
  transform-origin: bottom;

  transition:
    transform .3s cubic-bezier(.16,1,.3,1);

  box-shadow:
    0 0 12px rgba(63,124,255,.5);
}

.attachments li::after {
  content: "";

  position: absolute;

  top: 0;
  left: -100%;

  width: 70%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(63,124,255,.055),
      transparent
    );

  transition: left .55s ease;
}

.attachments li:hover {
  transform: translateX(7px);

  border-color:
    rgba(63,124,255,.32);

  background:
    rgba(63,124,255,.035);

  box-shadow:
    -10px 0 25px rgba(63,124,255,.035);
}

.attachments li:hover::before {
  transform: scaleY(1);
}

.attachments li:hover::after {
  left: 120%;
}

.attachments li span {
  transition:
    color .3s ease,
    transform .3s ease;
}

.attachments li:hover > span {
  color: var(--fx-blue-light);
  transform: translateX(2px);
}


/* ---------------------------------------------------------
   STATS
--------------------------------------------------------- */

.detail-stats div {
  position: relative;

  transition:
    transform .3s ease,
    border-color .3s ease;
}

.detail-stats div::after {
  content: "";

  position: absolute;

  left: -2px;
  bottom: 0;

  width: 2px;
  height: 0;

  background: var(--fx-blue);

  transition: height .3s ease;

  box-shadow:
    0 0 10px rgba(63,124,255,.45);
}

.detail-stats div:hover {
  transform: translateY(-3px);
}

.detail-stats div:hover::after {
  height: 100%;
}

.detail-stats b {
  display: inline-block;

  animation: statNumberIn .8s .55s
    cubic-bezier(.16,1,.3,1)
    both;
}

@keyframes statNumberIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   SÉLECTION / FOCUS
   ========================================================= */

::selection {
  background: rgba(63,124,255,.75);
  color: white;
}


/* =========================================================
   ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

  .hero::after {
    width: 380px;
    height: 380px;

    right: 50%;
    transform: translate(50%, -50%);
  }

  .loadout-card {
    animation:
      heroCardIn .8s
      cubic-bezier(.16,1,.3,1)
      both,
      heroCardFloat 6s 1s ease-in-out infinite;
  }

  .loadout-item:hover {
    transform: translateY(-4px);
  }

  .attachments li:hover {
    transform: translateX(3px);
  }

  .detail::before {
    width: 350px;
    height: 350px;
  }

}


/* =========================================================
   LUB1 LOADOUT — ACCESSOIRES DETAIL
   VERSION FINALE
   À LAISSER TOUT EN BAS DU CSS
========================================================= */

.detail .attachments{
  list-style:none !important;
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;

  width:100% !important;

  margin:0 !important;
  padding:0 !important;
}


/* =========================================================
   CARTE
========================================================= */

.detail .attachments > li{
  position:relative !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;

  width:100% !important;
  min-height:52px !important;

  box-sizing:border-box !important;

  margin:0 !important;
  padding:10px 13px !important;

  background:
    linear-gradient(
      135deg,
      #111814 0%,
      #0d1311 100%
    ) !important;

  border:1px solid rgba(255,255,255,.10) !important;

  font-size:12px !important;
  color:#dae1dc !important;

  overflow:hidden !important;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease !important;
}


/* =========================================================
   BARRE VERTE À GAUCHE
========================================================= */

.detail .attachments > li::before{
  content:"" !important;

  position:absolute !important;

  left:0 !important;
  top:0 !important;
  bottom:0 !important;

  width:2px !important;

  background:#d9ff3f !important;

  opacity:.2 !important;

  transition:
    opacity .2s ease,
    box-shadow .2s ease !important;
}


/* =========================================================
   HOVER
========================================================= */

.detail .attachments > li:hover{
  transform:translateX(3px) !important;

  border-color:rgba(217,255,63,.35) !important;

  background:
    linear-gradient(
      135deg,
      #141d18 0%,
      #101713 100%
    ) !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,.22) !important;
}

.detail .attachments > li:hover::before{
  opacity:1 !important;

  box-shadow:
    0 0 12px rgba(217,255,63,.45) !important;
}


/* =========================================================
   TYPE D'ACCESSOIRE
========================================================= */

.detail .attachments > li .attachment-category{
  display:block !important;

  width:auto !important;

  margin:0 0 5px 0 !important;
  padding:0 !important;

  color:#d9ff3f !important;

  font-family:
    var(--font-display),
    "Arial Narrow",
    Arial,
    sans-serif !important;

  font-size:9px !important;

  font-weight:900 !important;

  line-height:1 !important;

  letter-spacing:1px !important;

  text-transform:uppercase !important;
}


/* =========================================================
   NOM DE L'ACCESSOIRE
========================================================= */

.detail .attachments > li .attachment-name{
  display:block !important;

  width:auto !important;

  margin:0 !important;
  padding:0 !important;

  color:#dae1dc !important;

  font-family:
    var(--font),
    Arial,
    sans-serif !important;

  font-size:12px !important;

  font-weight:700 !important;

  line-height:1.2 !important;

  letter-spacing:0 !important;
}


/* =========================================================
   SUPPRESSION TOTALE DES ANCIENS NUMÉROS
========================================================= */

.detail .attachments > li .attachment-index{
  display:none !important;
}


/* Ancien span utilisé pour les numéros */
.detail .attachments > li > span:not(.attachment-category){
  display:none !important;
}


/* =========================================================
   TITRE ACCESSOIRES
========================================================= */

.detail .attachment-title{
  margin:26px 0 13px !important;

  color:#f5f7ef !important;

  font-family:
    var(--font-display),
    "Arial Narrow",
    Arial,
    sans-serif !important;

  font-size:12px !important;

  font-weight:800 !important;

  line-height:1 !important;

  letter-spacing:1.3px !important;

  text-transform:uppercase !important;
}


/* =========================================================
   ACCESSOIRE SANS CATÉGORIE
========================================================= */

.detail .attachments > li
.attachment-name:only-child{
  color:#8e9b98 !important;
}


/* =========================================================
   ACCESSOIRES VIDES
========================================================= */

.detail .attachments > li.empty-attachment{
  opacity:.5 !important;
}

.detail .attachments > li.empty-attachment
.attachment-name{
  color:#69756e !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:800px){

  .detail .attachments{
    width:100% !important;
  }

  .detail .attachments > li{
    min-height:52px !important;
    padding:10px 13px !important;
  }

}


/* =========================================================
   IMAGE DE CLASSE — CADRE AGRANDI
========================================================= */

.detail .detail-image{
  position:relative !important;

  width:100% !important;

  /*
     On augmente la hauteur du cadre
     pour donner plus d'espace autour de l'image.
  */
  aspect-ratio:16 / 11 !important;

  min-height:0 !important;

  box-sizing:border-box !important;

  padding:24px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:#050914 !important;

  border:1px solid rgba(217,255,63,.35) !important;

  overflow:hidden !important;
}


/* IMAGE */

.detail .detail-image img{
  display:block !important;

  width:100% !important;
  height:100% !important;

  max-width:100% !important;
  max-height:100% !important;

  object-fit:contain !important;

  background:transparent !important;

  /*
     L'image garde maintenant un espace
     tout autour dans le cadre.
  */
}


/* =========================================================
   CADRE PLUS LARGE SUR GRAND ÉCRAN
========================================================= */

@media(min-width:1200px){

  .detail .detail-image{
    padding:28px !important;

    /*
       Cadre légèrement plus haut
       pour mieux respirer autour de l'arme.
    */
    aspect-ratio:16 / 10.5 !important;
  }

}


/* =========================================================
   ÉCRANS MOYENS
========================================================= */

@media(min-width:801px) and (max-width:1199px){

  .detail .detail-image{
    padding:22px !important;
    aspect-ratio:16 / 10.5 !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:800px){

  .detail .detail-image{
    padding:18px !important;
    aspect-ratio:16 / 10 !important;
  }

}


/* =========================================================
   CODE DE CLASSE — BOUTON COPIER
   À LAISSER TOUT EN BAS DU CSS
========================================================= */

.detail .share-code{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;

  width:100% !important;

  box-sizing:border-box !important;

  padding:16px 16px 16px 15px !important;

  background:#111714 !important;

  border:1px solid rgba(217,255,63,.35) !important;
}


/* CONTENU DU CODE */

.detail .share-code-content{
  min-width:0 !important;

  display:flex !important;
  flex-direction:column !important;

  gap:6px !important;
}


/* TITRE */

.detail .share-code-title{
  display:block !important;

  color:#7f8b85 !important;

  font-family:
    var(--font),
    Arial,
    sans-serif !important;

  font-size:8px !important;

  font-weight:800 !important;

  letter-spacing:1.4px !important;

  line-height:1 !important;

  text-transform:uppercase !important;
}


/* CODE */

.detail .share-code-content strong{
  display:block !important;

  color:#f1f5fb !important;

  font-family:
    var(--font),
    Arial,
    sans-serif !important;

  font-size:15px !important;

  font-weight:800 !important;

  line-height:1.2 !important;

  letter-spacing:.2px !important;

  word-break:break-all !important;
}


/* =========================================================
   BOUTON COPIER
========================================================= */

.detail .copy-code-button{
  flex:0 0 auto !important;

  min-width:88px !important;

  height:38px !important;

  padding:0 13px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid rgba(217,255,63,.45) !important;

  background:rgba(217,255,63,.08) !important;

  color:#d9ff3f !important;

  font-family:
    var(--font),
    Arial,
    sans-serif !important;

  font-size:9px !important;

  font-weight:900 !important;

  letter-spacing:1px !important;

  cursor:pointer !important;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease !important;
}


/* HOVER */

.detail .copy-code-button:hover{
  background:#d9ff3f !important;

  border-color:#d9ff3f !important;

  color:#11150a !important;

  transform:translateY(-1px) !important;
}


/* CLIC */

.detail .copy-code-button:active{
  transform:translateY(0) scale(.97) !important;
}


/* APRÈS COPIE */

.detail .copy-code-button.copied{
  background:#d9ff3f !important;

  border-color:#d9ff3f !important;

  color:#11150a !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

  .detail .share-code{
    gap:12px !important;

    padding:14px !important;
  }

  .detail .share-code-content strong{
    font-size:12px !important;
  }

  .detail .copy-code-button{
    min-width:76px !important;

    height:34px !important;

    padding:0 10px !important;

    font-size:8px !important;
  }

}


/* =========================================================
   LUB1 LOADOUT — EFFETS PAGE CLASSE
   À PLACER TOUT EN BAS DE styles.css
========================================================= */


/* =========================================================
   HALO BLEU SUR LE CÔTÉ DROIT
========================================================= */

.detail{
  position:relative !important;
  isolation:isolate !important;
}

.detail::before{
  content:"" !important;

  position:absolute !important;

  width:650px !important;
  height:650px !important;

  right:-300px !important;
  top:180px !important;

  border-radius:50% !important;

  background:
    radial-gradient(
      circle,
      rgba(47,107,255,.16) 0%,
      rgba(47,107,255,.08) 25%,
      rgba(47,107,255,.025) 48%,
      transparent 72%
    ) !important;

  filter:blur(18px) !important;

  pointer-events:none !important;

  z-index:-1 !important;

  animation:
    classSideGlow 8s ease-in-out infinite alternate !important;
}


@keyframes classSideGlow{

  0%{
    transform:translate(0,0) scale(.92);
    opacity:.55;
  }

  50%{
    opacity:.9;
  }

  100%{
    transform:translate(-55px,35px) scale(1.08);
    opacity:1;
  }

}


/* =========================================================
   SECOND HALO PLUS PETIT
========================================================= */

.detail::after{
  content:"" !important;

  position:absolute !important;

  width:280px !important;
  height:280px !important;

  right:-90px !important;
  top:520px !important;

  border-radius:50% !important;

  background:
    radial-gradient(
      circle,
      rgba(75,131,255,.12),
      rgba(75,131,255,.035) 45%,
      transparent 72%
    ) !important;

  filter:blur(12px) !important;

  pointer-events:none !important;

  z-index:-1 !important;

  animation:
    classSmallGlow 6s ease-in-out infinite alternate !important;
}


@keyframes classSmallGlow{

  from{
    transform:translateY(-20px);
    opacity:.35;
  }

  to{
    transform:translateY(35px);
    opacity:.8;
  }

}


/* =========================================================
   LÉGER HALO DERRIÈRE LES INFORMATIONS
========================================================= */

.detail-grid article{
  position:relative !important;
}


.detail-grid article::before{
  content:"" !important;

  position:absolute !important;

  width:420px !important;
  height:420px !important;

  right:-170px !important;
  top:30px !important;

  border-radius:50% !important;

  background:
    radial-gradient(
      circle,
      rgba(47,107,255,.055),
      transparent 68%
    ) !important;

  filter:blur(10px) !important;

  pointer-events:none !important;

  z-index:-1 !important;

  animation:
    articleGlow 7s ease-in-out infinite alternate !important;
}


@keyframes articleGlow{

  from{
    transform:scale(.9);
    opacity:.35;
  }

  to{
    transform:scale(1.08);
    opacity:.8;
  }

}


/* =========================================================
   LIGNE DE SCAN VERTICALE
========================================================= */

.detail-grid article::after{
  content:"" !important;

  position:absolute !important;

  right:-120px !important;

  top:-40px !important;

  width:1px !important;
  height:90px !important;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(75,131,255,.7),
      transparent
    ) !important;

  box-shadow:
    0 0 12px rgba(75,131,255,.45) !important;

  opacity:.5 !important;

  pointer-events:none !important;

  animation:
    classScanLine 5s linear infinite !important;
}


@keyframes classScanLine{

  0%{
    transform:translateY(-40px);
    opacity:0;
  }

  10%{
    opacity:.65;
  }

  50%{
    opacity:.5;
  }

  90%{
    opacity:.65;
  }

  100%{
    transform:translateY(650px);
    opacity:0;
  }

}


/* =========================================================
   LÉGER ÉCLAIRAGE ANIMÉ SUR LE CADRE IMAGE
========================================================= */

.detail .detail-image{
  position:relative !important;

  overflow:hidden !important;
}

/* =========================================================
   LÉGER GLOW SUR LE BOUTON COPIER
========================================================= */

.detail .copy-code-button{
  position:relative !important;

  overflow:hidden !important;
}


.detail .copy-code-button::after{
  content:"" !important;

  position:absolute !important;

  top:0 !important;
  left:-120% !important;

  width:70% !important;
  height:100% !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(217,255,63,.22),
      transparent
    ) !important;

  transform:skewX(-20deg) !important;

  pointer-events:none !important;

  animation:
    copyButtonSweep 5s ease-in-out infinite !important;
}


@keyframes copyButtonSweep{

  0%{
    left:-120%;
  }

  25%{
    left:140%;
  }

  100%{
    left:140%;
  }

}


/* =========================================================
   PETIT POINT LUMINEUX
========================================================= */

.detail-grid article{
  --detail-dot-x:92%;
  --detail-dot-y:8%;
}


.detail-grid article > h1::after{
  content:"" !important;

  position:absolute !important;

  left:var(--detail-dot-x) !important;
  top:var(--detail-dot-y) !important;

  width:4px !important;
  height:4px !important;

  border-radius:50% !important;

  background:#4b83ff !important;

  box-shadow:
    0 0 8px rgba(75,131,255,.8),
    0 0 18px rgba(75,131,255,.35) !important;

  animation:
    detailDotPulse 2.5s ease-in-out infinite !important;
}


@keyframes detailDotPulse{

  0%,
  100%{
    opacity:.25;
    transform:scale(.7);
  }

  50%{
    opacity:1;
    transform:scale(1.35);
  }

}


/* =========================================================
   RÉDUCTION DES ANIMATIONS
========================================================= */

@media(prefers-reduced-motion:reduce){

  .detail::before,
  .detail::after,
  .detail-grid article::before,
  .detail-grid article::after,
  .detail .detail-image::after,
  .detail .copy-code-button::after,
  .detail-grid article > h1::after{
    animation:none !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:800px){

  .detail::before{
    width:450px !important;
    height:450px !important;

    right:-260px !important;
    top:350px !important;
  }

  .detail::after{
    display:none !important;
  }

  .detail-grid article::after{
    display:none !important;
  }

}


/* =========================================
   FOOTER — LUB1 LOADOUT
   ========================================= */

.site-footer {
    background: #080a0b;
    border-top: 1px solid var(--line);
    padding: 55px 24px 25px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Logo */

.footer-brand .brand {
    display: inline-block;
    text-decoration: none;
}

.footer-brand p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Liens légaux */

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid var(--line);
}

.footer-links a {
    color: var(--muted);
    text-decoration: none;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
    transition: color .2s ease;
}

.footer-links a:hover {
    color: var(--green);
}

/* Bas du footer */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 35px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.footer-bottom span {
    color: #65706d;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

/* Responsive */

@media (max-width: 650px) {

    .site-footer {
        padding: 40px 18px 22px;
    }

    .footer-links {
        flex-direction: column;
        gap: 14px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

}


.legal-page{
    min-height:calc(100vh - 80px);
    padding:70px 24px 100px;
    background:var(--bg);
}

.legal-wrap{
    max-width:1050px;
    margin:0 auto;
}

.legal-kicker{
    font-family:var(--font-display);
    font-size:13px;
    letter-spacing:2px;
    color:var(--green);
    text-transform:uppercase;
    margin-bottom:10px;
}

.legal-title{
    font-family:var(--font-display);
    font-size:clamp(42px,7vw,76px);
    line-height:.92;
    text-transform:uppercase;
    margin:0 0 18px;
    letter-spacing:-1px;
}

.legal-intro{
    max-width:800px;
    color:var(--muted);
    font-size:16px;
    line-height:1.7;
    margin-bottom:45px;
}

.legal-card{
    background:var(--surface);
    border:1px solid var(--line);
    padding:30px 34px;
    margin:0 0 18px;
    box-shadow:0 12px 35px rgba(0,0,0,.12);
}

.legal-card h2{
    font-family:var(--font-display);
    font-size:27px;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin:0 0 15px;
    color:#fff;
}

.legal-card h3{
    font-family:var(--font-display);
    font-size:20px;
    text-transform:uppercase;
    margin:25px 0 10px;
    color:var(--green);
}

.legal-card p,
.legal-card li{
    color:#c3ccca;
    font-size:14px;
    line-height:1.8;
}

.legal-card ul{
    padding-left:20px;
    margin:10px 0;
}

.legal-card li{
    margin:6px 0;
}

.legal-note{
    border-left:3px solid var(--green);
    padding:14px 18px;
    background:rgba(217,255,63,.04);
    margin-top:18px;
}

.legal-note p{
    margin:0;
}

.legal-date{
    font-size:12px;
    color:var(--muted);
    margin-top:10px;
}

.legal-footer-links{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:18px;
}

.legal-footer-links a{
    color:var(--muted);
    text-decoration:none;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.legal-footer-links a:hover{
    color:var(--green);
}

@media(max-width:650px){
    .legal-page{
        padding:45px 16px 70px;
    }

    .legal-card{
        padding:23px 20px;
    }

    .legal-title{
        font-size:48px;
    }
}


/* =========================================
   FOOTER PAGES LÉGALES
   ========================================= */

.legal-footer {
    width: 100%;
    min-height: 105px;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 25px 70px;

    background: #080a0b;
    border-top: 1px solid var(--line);
}


/* ================================
   GAUCHE
   ================================ */

.legal-footer-left {
    display: flex;
    align-items: center;
    gap: 22px;
}

.legal-footer-left .brand {
    flex-shrink: 0;
    text-decoration: none;
}

.legal-footer-left p {
    margin: 0;

    color: var(--muted);

    font-family: var(--font);
    font-size: 9px;
    font-weight: 600;

    letter-spacing: .8px;
    text-transform: uppercase;
}


/* ================================
   CENTRE
   ================================ */

.legal-footer-center {
    text-align: center;
}

.legal-footer-center small {
    color: #65706d;

    font-family: var(--font);
    font-size: 9px;
    font-weight: 500;

    letter-spacing: .6px;
    text-transform: uppercase;
}


/* ================================
   LIENS
   ================================ */

.legal-footer-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 20px;

    margin: 0;
    padding: 0;

    border: none;
}

.legal-footer-links a {
    color: var(--muted);

    font-family: var(--font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: .5px;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        color .2s ease,
        opacity .2s ease;
}

.legal-footer-links a:hover {
    color: var(--green);
}


/* ================================
   MOBILE
   ================================ */

@media (max-width: 800px) {

    .legal-footer {
        grid-template-columns: 1fr;
        gap: 22px;

        padding: 30px 24px;

        text-align: center;
    }

    .legal-footer-left {
        justify-content: center;
        flex-direction: column;
        gap: 8px;
    }

    .legal-footer-center {
        order: 3;
    }

    .legal-footer-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px 20px;
    }

}

/* =========================================
   FOOTER PAGES LÉGALES
   ========================================= */

.legal-footer {
    width: 100%;
    min-height: 105px;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 25px 70px;

    background: #080a0b;
    border-top: 1px solid var(--line);
}


/* ================================
   GAUCHE
   ================================ */

.legal-footer-left {
    display: flex;
    align-items: center;
    gap: 22px;
}

.legal-footer-left .brand {
    flex-shrink: 0;
    text-decoration: none;
}

.legal-footer-left p {
    margin: 0;

    color: var(--muted);

    font-family: var(--font);
    font-size: 9px;
    font-weight: 600;

    letter-spacing: .8px;
    text-transform: uppercase;
}


/* ================================
   CENTRE
   ================================ */

.legal-footer-center {
    text-align: center;
}

.legal-footer-center small {
    color: #65706d;

    font-family: var(--font);
    font-size: 9px;
    font-weight: 500;

    letter-spacing: .6px;
    text-transform: uppercase;
}


/* ================================
   LIENS
   ================================ */

.legal-footer-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 20px;

    margin: 0;
    padding: 0;

    border: none;
}

.legal-footer-links a {
    color: var(--muted);

    font-family: var(--font);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: .5px;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        color .2s ease,
        opacity .2s ease;
}

.legal-footer-links a:hover {
    color: var(--green);
}


/* ================================
   MOBILE
   ================================ */

@media (max-width: 800px) {

    .legal-footer {
        grid-template-columns: 1fr;
        gap: 22px;

        padding: 30px 24px;

        text-align: center;
    }

    .legal-footer-left {
        justify-content: center;
        flex-direction: column;
        gap: 8px;
    }

    .legal-footer-center {
        order: 3;
    }

    .legal-footer-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px 20px;
    }

}