:root {
        --bg: #0b0e19;
        --bg-soft: #12162a;
        --card: #171b31;
        --text: #e6e7ee;
        --muted: #a7b0c0;
        --primary: #813b12ff; /* violet */
        --primary-2: #c7610f; /* cyan */
        --accent: #ffb800;   /* gold */
        --success: #2ecc71;
        --danger: #ff5c7c;
        --shadow: 0 10px 30px rgba(56, 35, 12, 0.35);
      }
      html, body {background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial;}
      a {color: var(--primary-2);} a:hover {color: #96521bff; text-decoration: none;}
      .navbar {background: linear-gradient(180deg, rgba(34, 20, 7, 0.9), rgba(12,15,28,.4)); backdrop-filter: blur(6px);} 
      .navbar-brand img {height: 36px;}
      .btn-primary {background: linear-gradient(90deg, var(--primary) 0%, var(--primary-2) 100%); border: 0; box-shadow: var(--shadow);} 
      .btn-outline {border: 1px solid rgba(255,255,255,.12); color: var(--text);} 
      .btn-outline:hover {border-color: var(--primary-2); color: var(--primary-2);} 

      /* Hero */
      .hero {position: relative; isolation: isolate; overflow: hidden; padding: 104px 0 56px;
        background: radial-gradient(1200px 600px at 10% -10%, rgba(108,92,231,.25), transparent 60%),
                    radial-gradient(900px 500px at 90% 10%, rgba(199, 97, 15, 0.16), transparent 60%);
      }
      .hero:after {content: ""; position: absolute; inset: 0; opacity: .06; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(60% 60% at 50% 0%, #000 70%, transparent 100%);}
      .hero h1 {font-weight: 800; letter-spacing: -.02em; font-size: 48px;}
      .hero p {color: var(--muted); max-width: 720px;}

      /* Section header */
      .section-title {display:flex; align-items:center; gap:12px; margin-bottom: 16px;}
      .section-title .dot {width:10px; height:10px; background: var(--primary-2); border-radius: 50%; box-shadow: 0 0 16px var(--primary-2);} 
      .section-title h2 {margin:0; font-size: 28px; font-weight: 800;}
      .section-sub {color: var(--muted);} 

      /* Ticker */
      .ticker {background: #0f1430; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; overflow: hidden;}
      .ticker__track {display: flex; gap: 24px; padding: 12px 16px; animation: marquee 28s linear infinite;}
      .ticker__item {white-space: nowrap; color: var(--muted);} 
      @keyframes marquee { 0% {transform: translateX(0);} 100% {transform: translateX(-50%);} }

      /* Cards */
      .card-neo {background: var(--card); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; box-shadow: var(--shadow);} 
      .chip {display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; background: rgba(255,255,255,.06); color: var(--muted);} 
      .chip.online {background: rgba(46, 204, 113, .15); color: #bdf2cf;}
      .chip.offline {background: rgba(255, 92, 124, .15); color: #ffc2cf;}

      /* Game cards */
      .game-card .cover {position:relative; border-radius: 12px; overflow:hidden;}
      .game-card .cover img {width:100%; height:180px; object-fit: cover; display:block;}
      .game-card .cover .badge {position:absolute; left:12px; top:12px;}
      .game-card .meta {display:flex; flex-wrap:wrap; gap:8px; color: var(--muted); font-size: 13px;}

      /* Servers status */
      .status-dot {width:10px; height:10px; border-radius: 50%; display:inline-block; margin-right:6px;}

      footer {border-top: 1px solid rgba(255,255,255,.06);} 
      .small, small {color: var(--muted);} 

      .blur-cta {position:relative; isolation:isolate;}
      .blur-cta:before {content:""; position:absolute; inset:-12px; background: radial-gradient(200px 80px at 50% 50%, rgba(108,92,231,.35), transparent 70%); filter: blur(22px); z-index:-1;}

      .hero--compact{padding:96px 0 48px}
      .profile-stat{display:flex;gap:16px;flex-wrap:wrap}
      .profile-stat .chip{background:rgba(255,255,255,.06)}
      .label-muted{color:var(--muted)}
      .navbar.fixed-top { z-index: 1085; }
body { padding-top: 80px; }
/* === Dropdown "Jeux" — thème Norageux === */
.navbar .dropdown-menu.nrg-dd-menu{
  --bg: #0e1221;
  --ring: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.08);
  --txt: #e6e8ef;
  --muted: rgba(230,232,239,.65);
  --brand: #ff9900;
  --brand-2: #c7610f;

  background: radial-gradient(120% 120% at 10% -10%, rgba(255,153,0,.12) 0%, rgba(199,97,15,.08) 22%, transparent 38%) , var(--bg);
  color: var(--txt);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  min-width: 260px;
  margin-top: 8px;
  box-shadow: 0 14px 36px rgba(0,0,0,.45), inset 0 0 0 1px var(--ring);
  z-index: 1051;
}

.navbar .dropdown-menu.nrg-dd-menu .nrg-dd-header{
  padding: 6px 10px 8px;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.navbar .dropdown-menu.nrg-dd-menu .dropdown-divider{
  border-top-color: var(--border);
  margin: 8px 0;
}

.navbar .dropdown-menu.nrg-dd-menu .dropdown-item{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  color: var(--txt);
  border-radius: 10px;
  line-height: 1.15;
  transition: background .12s ease, box-shadow .12s ease, transform .06s ease;
}

.navbar .dropdown-menu.nrg-dd-menu .dropdown-item small{
  display: block; font-size: .75rem; color: var(--muted);
}

.navbar .dropdown-menu.nrg-dd-menu .dropdown-item:hover,
.navbar .dropdown-menu.nrg-dd-menu .dropdown-item:focus,
.navbar .dropdown-menu.nrg-dd-menu .dropdown-item.active{
  background: linear-gradient(135deg, rgba(255,153,0,.16), rgba(199,97,15,.18));
  box-shadow: inset 0 0 0 1px rgba(255,153,0,.35);
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}

.navbar .dropdown-menu.nrg-dd-menu .nrg-dd-icon{
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  flex: 0 0 26px;
}

.navbar .dropdown-menu.nrg-dd-menu .nrg-dd-badge{
  margin-left: auto;
  padding: 2px 6px; border-radius: 999px;
  font-size: .7rem;
  color: #ffd39a;
  background: rgba(255,153,0,.2);
  border: 1px solid rgba(255,153,0,.35);
}

.navbar .dropdown-menu.nrg-dd-menu .nrg-dd-cta{
  display:flex; align-items:center; gap:8px;
  padding: 10px 12px; border-radius: 10px; color: #ffd39a;
}
.navbar .dropdown-menu.nrg-dd-menu .nrg-dd-cta:hover{
  background: linear-gradient(135deg, rgba(255,153,0,.16), rgba(199,97,15,.18));
  color: #fff;
}

/* caret blanc/orange sur la nav sombre */
.navbar-dark .dropdown-toggle::after{
  border-top-color: #fff;
  opacity: .85;
}
/* === Boutons thème Norageux (sombre + accent) === */
.btn-primary{
  background: linear-gradient(135deg, #1a2146, #0f1634); /* bleu nuit */
  border: 1px solid rgba(255,255,255,.12);
  color: #e6e8ef;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn-primary:hover,
.btn-primary:focus{
  background: linear-gradient(135deg, #23306a, #162458);
  color:#fff;
  border-color: rgba(255,255,255,.18);
}

.btn-outline{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: #e6e8ef;
}
.btn-outline:hover,
.btn-outline:focus{
  background: rgba(255,255,255,.08);
  color:#fff;
  border-color: rgba(255,255,255,.22);
}

/* Inputs en modal (sombre lisible) */
.modal .form-control{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #e6e8ef;
}
.modal .form-control::placeholder{ color: rgba(230,232,239,.55); }
.modal .form-control:focus{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,153,0,.35); /* accent orange */
  box-shadow: 0 0 0 0.2rem rgba(255,153,0,.15);
}

/* Liste des membres (look sombre) */
.nrg-member-list{
  background: radial-gradient(120% 120% at 10% -10%, rgba(255,153,0,.10) 0%, rgba(199,97,15,.08) 22%, transparent 38%) , #0e1221;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}
.nrg-member-list .list-group-item{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  color: #e6e8ef;
}
.nrg-member-list .list-group-item + .list-group-item{
  border-top-color: rgba(255,255,255,.06);
}
.nrg-member-list .list-group-item:hover{
  background: linear-gradient(135deg, rgba(255,153,0,.12), rgba(199,97,15,.14));
  border-color: rgba(255,153,0,.28);
}

/* Badge "Steam non lié" en cohérence */
.badge-warning{
  background: rgba(255,153,0,.2);
  color: #ffd39a;
  border: 1px solid rgba(255,153,0,.35);
}
.badge-secondary{
  background: rgba(255,255,255,.22);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
}
/* Overrides locaux à la page équipe */
.page-team .container{
  padding-top:56px !important;   /* était trop grand via Bootstrap/DA */
  padding-bottom:28px !important;
  margin-top:0 !important;
}
.page-team .team-hero{ min-height:160px !important; }
.page-team .team-hero .info{ padding:16px 18px !important; }
.page-team .team-hero h1{ margin:0 0 4px !important; line-height:1.2 !important; }

/* Si ta nav est fixed-top et qu'une règle globale ajoute un offset */
.navbar.fixed-top + .container{ margin-top:0 !important; }

/* ==== Cartes "membres" (look proche de la section Games) ==== */
.member-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
}
.member-card{
  background: radial-gradient(120% 120% at 15% -25%, rgba(255,153,0,.10) 0%, rgba(199,97,15,.08) 22%, transparent 42%), rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px;
  display:flex; align-items:center; gap:12px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.member-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,153,0,.25);
}
.member-avatar{
  width:48px; height:48px; border-radius:12px; object-fit:cover;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.member-name a{
  color:#e6e8ef; text-decoration:none;
}
.member-name a:hover{ color:#fff; text-decoration:underline; }

.member-role{ font-size:.78rem; opacity:.75; }
.member-badges .badge{ margin-left:6px; }

.badge-captain{
  background: rgba(255,153,0,.2);
  color:#ffd39a;
  border:1px solid rgba(255,153,0,.35);
}
.badge-steam{
  background: rgba(102,170,238,.16);
  color:#cfe6ff;
  border:1px solid rgba(102,170,238,.35);
}


/* === Tuiles HÉRO (Tournois / Duels) === */
.feature-card{
  position:relative; overflow:hidden; border-radius:20px; min-height:240px;
  display:flex; align-items:center; padding:24px; isolation:isolate;
  background: radial-gradient(120% 120% at 100% 0%, rgba(255,153,0,0.08) 0%, rgba(14,18,34,1) 45%),
              linear-gradient(180deg, rgba(255,153,0,0.06) 0%, rgba(14,18,34,0.9) 100%);
  border:1px solid rgba(255,255,255,.08);
}
.feature-card .fc-content{ position:relative; z-index:2; max-width:70%; }
.feature-card .fc-deco{
  position:absolute; inset:0 auto 0 54%;
  width:60%; z-index:1;
  background: linear-gradient(135deg, rgba(255,153,0,.16), rgba(199,97,15,.10));
  transform: skewX(-14deg) translateX(6%);
  filter: blur(0.2px);
  border-left: 1px solid rgba(255,255,255,.06);
}
.feature-card h3{ font-weight:800; letter-spacing:.3px; }
.feature-card p{ opacity:.9; }

.feature-tournaments{
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(255,153,0,0.12) 0%, rgba(14,18,34,1) 52%),
    linear-gradient(180deg, rgba(255,153,0,.05) 0%, rgba(14,18,34,.92) 100%);
}
.feature-duels{
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(255,153,0,0.10) 0%, rgba(14,18,34,1) 52%),
    linear-gradient(180deg, rgba(255,153,0,.04) 0%, rgba(14,18,34,.92) 100%);
}

/* Apparition glissée */
.animate-on-visible{ opacity:0; transform: translateY(24px); transition: transform .75s cubic-bezier(.2,.8,.2,1), opacity .6s ease; }
.animate-on-visible.in{ opacity:1; transform: translateY(0); }

/* Petites retouches pour coller à la DA */
.feature-card .btn.btn-outline{
  background:transparent; border:1px solid rgba(255,153,0,.45); color:#ffd39a;
}
.feature-card .btn.btn-outline:hover{
  background:rgba(255,153,0,.12); color:#fff;
}
/* === Feature Duo: pleine largeur mais avec marges respirables === */
.feature-duo .feature-container{
  /* quasi full-width avec marges fluides */
  padding-left: 5vw;
  padding-right: 5vw;
}

/* Augmente légèrement les gouttières */
.feature-duo .row{
  margin-left: -14px;
  margin-right: -14px;
}
.feature-duo .row > [class*="col-"]{
  padding-left: 14px;
  padding-right: 14px;
}

/* Plus d'air à l'intérieur des cartes + un peu plus hautes */
.feature-card{
  min-height: 300px;           /* était ~240px */
  padding: 32px 36px;          /* était 24px */
}
.feature-card .fc-content{
  max-width: 70%;              /* laisse de l'espace pour la déco diagonale */
}

/* Option: étirer un peu le panneau diagonal pour grand écran */
@media (min-width: 1200px){
  .feature-card .fc-deco{
    inset: 0 auto 0 52%;
    width: 60%;
    transform: skewX(-14deg) translateX(4%);
  }
}

/* Si tu veux encore plus large sur desktop (moins de marges latérales) */
@media (min-width: 1400px){
  .feature-duo .feature-container{
    padding-left: 4vw;
    padding-right: 4vw;
  }
}

/* Badge rôle — nuance orangée / violette suivant le thème */
.badge-chip.lvl-5{ background:linear-gradient(135deg,#ff9f1a33,#ff630a33); border:1px solid #ff9f1a66; color:#ffd9a3; }
.badge-chip.lvl-4{ background:linear-gradient(135deg,#f08b1e2b,#e7690b2b); border:1px solid #f08b1e55; color:#ffd3a0; }
.badge-chip.lvl-3{ background:linear-gradient(135deg,#9b59b62b,#8e44ad2b); border:1px solid #9b59b655; color:#e6d2ff; }
.badge-chip.lvl-2{ background:linear-gradient(135deg,#16a0852b,#1abc9c2b); border:1px solid #1abc9c55; color:#bff5ea; }
.badge-chip.lvl-1{ background:linear-gradient(135deg,#ffffff0f,#ffffff12);  border:1px solid #ffffff22;  color:#e9e9e9; }

.btn-admin{
  background: linear-gradient(135deg, rgba(255,153,0,.18), rgba(199,97,15,.22));
  border:1px solid rgba(255,153,0,.45);
  color:#ffd39a;
}
.btn-admin:hover{
  filter: brightness(1.08);
  color:#fff1d6;
}
.admin-modal-wide{
  max-width: min(1280px, 95vw) !important;
}