:root{
  --bg:#0b0c10;
  --panel:#13151b;
  --text:#e6e8ee;
  --muted:#9aa0aa;
  --line:#1c1f27;
  --primary:#e53935; /* rouge néon */
  --gold:#caa22e;    /* or Orzal */
  --radius:20px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(229,57,53,.15), transparent 60%),
              radial-gradient(900px 500px at 80% 20%, rgba(202,162,46,.18), transparent 60%),
              var(--bg);
  color:var(--text);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{color:inherit;text-decoration:none}

.nav{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
  backdrop-filter: blur(8px);
  background: linear-gradient(to bottom, rgba(10,10,14,.8), rgba(10,10,14,.3));
  border-bottom:1px solid #12131a;
}
.nav__left{display:flex; gap:12px; align-items:center}
.nav__logo{height:28px; width:auto}
.nav__brand{font-weight:800; letter-spacing:.06em}
.nav__right{display:flex; gap:18px; align-items:center}
.nav__link{opacity:.9}
.nav__link:hover{opacity:1}
.nav__pill{
  padding:8px 14px; border-radius:999px; border:1px solid #2a2d37;
  background:#151822;
}
.nav__pill:hover{border-color:#3d4250}

.hero{
  position:relative; display:grid; place-items:center;
  min-height:52vh; text-align:center; overflow:hidden;
}
.hero__content{padding:64px 22px}
.hero__title{
  font-size: clamp(48px, 10vw, 140px);
  line-height: .85; margin: 0;
  letter-spacing:.04em; font-weight:800;
}
.hero__subtitle{margin:.75rem 0 1.5rem; color:var(--muted); font-weight:600}
.hero__glow{
  position:absolute; inset:-10% -10% auto -10%;
  height:40vh; filter: blur(60px);
  background: radial-gradient(45% 65% at 65% 40%, rgba(229,57,53,.25), transparent 60%),
              radial-gradient(35% 55% at 35% 65%, rgba(202,162,46,.25), transparent 60%);
  pointer-events:none; opacity:.6;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:12px 18px; border-radius:12px; background:#191c24; border:1px solid #2a2d37;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  font-weight:700;
}
.btn:hover{transform: translateY(-1px); border-color:#3a3f4f; box-shadow: var(--shadow)}
.btn--primary{background: linear-gradient(135deg, var(--primary), #ff6b6b); border-color: transparent; color:#fff}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 12px 35px rgba(229,57,53,.35)}

.grid{
  max-width:1200px; margin:32px auto 80px; padding:0 18px;
  display:grid; gap:28px; grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
}

.card{
  position:relative; background: linear-gradient(180deg, #12141a, #0e1016);
  border:1px solid #232633; border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform: translateY(-4px); border-color:#33394a; box-shadow:0 18px 50px rgba(0,0,0,.55)}
.card__halo{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(350px 120px at 50% -10%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%),
              radial-gradient(260px 90px at 20% -10%, rgba(255,255,255,.06), transparent 50%);
  opacity:.6;
}

.card__header{display:flex; align-items:center; gap:14px; padding:18px; border-bottom:1px solid #1b1e28}
.card__icon{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:var(--accent);
  background: linear-gradient(180deg, #171a22, #0f1117); border:1px solid #22262f}
.card__title{margin:0; font-size:1.2rem; font-weight:800}
.card__subtitle{margin:2px 0 0; color:var(--muted); font-size:.92rem; font-weight:600}
.card__badge{
  margin-left:auto; font-size:.75rem; letter-spacing:.08em;
  border:1px solid color-mix(in srgb, var(--accent) 60%, #2a2d37);
  color: color-mix(in srgb, var(--accent) 80%, #ffffff);
  padding:6px 10px; border-radius:999px; background:#11131a;
}

.card__media{aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid #1b1e28}
.card__media img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition: transform .5s ease}
.card:hover .card__media img{transform:scale(1.06)}

.card__footer{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px}
.players{color:#8fd77b; font-weight:700}
.players--muted{color:var(--muted)}

.foot{max-width:1200px; margin:48px auto 40px; padding:0 18px; color:var(--muted); text-align:center; font-size:.92rem}

/* Empêche le fond de “remonter” ou se répéter */
html, body {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  background-attachment: fixed;
}

.foot {
  position: relative;
  z-index: 2;
  background: linear-gradient(to top, rgba(11,12,16,0.95), rgba(11,12,16,0.7));
  border-top: 1px solid #1c1f27;
  padding: 24px 0 40px;
}

/* Fondu discret au-dessus du footer, derrière le contenu du footer */
.foot::before {
  content: "";
  position: absolute;
  top: -120px;   /* hauteur du fondu au-dessus du footer */
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(11,12,16,0), rgba(11,12,16,0.9));
  z-index: -1;   /* reste derrière le footer */
}