/* === Design System : Rouge/Noir Futuriste === */
:root{
  --bg:#0b0b0f;
  --surface:#121217;
  --card:#16161d;
  --ink:#f3f4f6;
  --muted:#b4b7c3;
  --line:#242532;
  --brand:#e11d48; /* rouge cerise néon */
  --brand-2:#ff214f; /* rouge clair pour les lueurs */
  --ok:#22c55e;--warn:#f59e0b;--danger:#ef4444;
  --radius:18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background: radial-gradient(1200px 800px at 75% -10%, rgba(225,29,72,.15), transparent 60%),
           radial-gradient(900px 600px at -10% 80%, rgba(225,29,72,.09), transparent 60%),
           var(--bg);
  color:var(--ink); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  line-height:1.6; overflow-x:hidden;
}
h1,h2,h3{font-family:Oxanium,Inter,system-ui,sans-serif; letter-spacing:.5px}
h1{font-size:clamp(2.2rem,6vw,4rem); line-height:1.05}
h2{font-size:clamp(1.4rem,3vw,2rem)}
p{color:#dcdde4}
a{color:var(--ink); text-decoration:none}
.container{width:min(1120px,92vw); margin-inline:auto}

/* Header + Nav */
header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(140%) blur(8px); background:linear-gradient(180deg, rgba(18,18,23,.85), rgba(18,18,23,.35)); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  --s:42px; width:var(--s); height:var(--s); border-radius:50%; display:grid; place-items:center; font-weight:800; color:white;
  background: radial-gradient(60% 60% at 40% 30%, var(--brand-2), var(--brand));
  box-shadow: 0 0 0 2px rgba(255,255,255,.06), 0 10px 24px rgba(225,29,72,.35) inset, 0 0 35px rgba(225,29,72,.45);
  font-family:Oxanium,system-ui,sans-serif;
}
.brand .name{font-weight:800; letter-spacing:.4px}
.brand .sub{display:block; font-size:.8rem; color:var(--muted); margin-top:-2px}
.menu{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.menu a{opacity:.9; padding:8px 10px; border-radius:10px}
.menu a:hover{background:rgba(225,29,72,.12); color:white}
.cta{display:flex; gap:10px; align-items:center}

.btn{--p:12px; padding:10px var(--p); border-radius:14px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); color:white; font-weight:600; box-shadow:var(--shadow); transform:translateZ(0)}
.btn:hover{border-color:rgba(255,255,255,.18)}
.btn.brand{background:linear-gradient(180deg, rgba(225,29,72,.18), rgba(225,29,72,.1)); border-color:rgba(225,29,72,.35); box-shadow:0 8px 24px rgba(225,29,72,.35)}

/* User chip */
.user{display:none; align-items:center; gap:10px; padding:6px 8px; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08)}
.user .avatar{width:30px;height:30px;border-radius:50%;background:#222;object-fit:cover}
.user .name{font-weight:700}
.user .menu{position:relative}
.user .dropdown{position:absolute; right:0; top:40px; display:none; background:var(--surface); border:1px solid rgba(255,255,255,.08); border-radius:12px; box-shadow:var(--shadow); min-width:220px; padding:8px}
.user .dropdown a, .user .dropdown button{display:flex; width:100%; gap:8px; align-items:center; padding:8px 10px; border-radius:8px; border:0; background:transparent; color:var(--ink); cursor:pointer; font:inherit; text-align:left}
.user .dropdown a:hover, .user .dropdown button:hover{background:rgba(255,255,255,.06)}
.signin-btn{display:inline-flex; align-items:center; gap:8px}

/* Burger + Drawer (mobile) */
.burger{display:none; border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); padding:10px 12px; border-radius:12px; color:var(--ink)}
.burger svg{display:block}
.drawer-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:.2s; z-index:45}
.drawer{position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:var(--surface); border-left:1px solid rgba(255,255,255,.08); transform:translateX(100%); transition:transform .25s ease; z-index:50; display:flex; flex-direction:column; padding:14px}
.drawer .top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.drawer nav a{display:block; padding:10px 12px; border-radius:10px}
.drawer nav a:hover{background:rgba(255,255,255,.06)}
.drawer-open .drawer{transform:none}
.drawer-open .drawer-backdrop{opacity:1; pointer-events:auto}

/* Hero */
.hero{position:relative; padding:90px 0 60px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:min(6vw,54px); align-items:center}
.kicker{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#ffdce2; background:rgba(225,29,72,.14); border:1px solid rgba(225,29,72,.35); padding:6px 10px; border-radius:999px}
.kicker .dot{width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff, var(--brand-2)); box-shadow:0 0 16px var(--brand-2)}
.glitch{position:relative; display:inline-block; text-shadow: 0 0 25px rgba(225,29,72,.45)}
.glitch::before,.glitch::after{content:attr(data-text); position:absolute; left:0; top:0; clip-path:polygon(0 0,100% 0,100% 45%,0 45%); opacity:.6}
.glitch::before{transform:translate(2px,-1px); color:#ff335c; mix-blend-mode:screen}
.glitch::after{transform:translate(-2px,1px); color:#ff5577; clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%)}
@keyframes glitchShift{0%,100%{transform:translate(0,0)} 20%{transform:translate(1px,-1px)} 40%{transform:translate(-1px,1px)} 60%{transform:translate(1px,1px)} 80%{transform:translate(-1px,-1px)}}
.glitch{animation:glitchShift 4s infinite ease-in-out}
.hero p{font-size:clamp(1rem,1.4vw,1.15rem)}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px}
.stat{padding:16px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06)}
.stat strong{font-size:1.4rem; font-family:Oxanium}

.holo{position:relative; height:420px; border-radius:var(--radius); background:radial-gradient(80% 80% at 50% 45%, rgba(225,29,72,.12), rgba(0,0,0,.2)), linear-gradient(180deg, #111218, #0b0b0f); border:1px solid rgba(225,29,72,.2); box-shadow:0 20px 60px rgba(225,29,72,.1), inset 0 0 120px rgba(225,29,72,.12)}
.holo canvas{position:absolute; inset:0; width:100%; height:100%}
.holo .overlay{position:absolute; inset:0; display:grid; place-items:center; text-align:center; pointer-events:none}
.holo .overlay h3{font-size:clamp(1.2rem,2vw,1.6rem); color:#ffdce2}

/* Sections */
section{padding:64px 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px}
.section-head p{color:var(--muted); max-width:70ch}

/* Vision */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.tile{position:relative; padding:18px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease}
.tile:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(225,29,72,.15), var(--shadow)}
.tile h3{margin:8px 0 6px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(225,29,72,.1); border:1px solid rgba(225,29,72,.3); color:#ffdce2; font-size:.9rem}

/* Cards (Jeux) */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{position:relative; border-radius:18px; overflow:hidden; background:var(--card); border:1px solid rgba(255,255,255,.06)}
.card-media{height:170px; background:linear-gradient(135deg, rgba(225,29,72,.25), rgba(225,29,72,.05)), url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400"><defs><linearGradient id="g" x1="0" x2="1" y1="0" y2="1"><stop stop-color="%23e11d48"/><stop offset="1" stop-color="%230b0b0f"/></linearGradient></defs><rect width="800" height="400" fill="url(%23g)"/><g fill="%23ffffff11"><circle cx="100" cy="300" r="60"/><circle cx="340" cy="120" r="40"/><circle cx="620" cy="260" r="70"/></g></svg>') center/cover no-repeat}
.card-body{padding:16px}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0}
.tag{padding:4px 10px; border:1px solid rgba(255,255,255,.08); border-radius:999px; font-size:.85rem; color:#f7cad3}
.card .cta-inline{display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:8px}

/* Tech */
.tech{display:grid; grid-template-columns:1.3fr .7fr; gap:18px}
.stack{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.stack .item{padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
.code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:#0f0f14; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; overflow:auto}

/* Careers */
.jobs{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.job{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); padding:16px; border-radius:16px}
.job small{color:var(--muted)}

/* Press */
.press{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.press .note{padding:16px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02))}

/* Discord */
.discord-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:center}
.discord-card{border:1px solid rgba(255,255,255,.08); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); padding:18px; box-shadow:var(--shadow)}
.discord-hero{height:280px; border-radius:18px; border:1px solid rgba(225,29,72,.25);
  background:
    radial-gradient(60% 60% at 40% 35%, rgba(225,29,72,.16), transparent 60%),
    radial-gradient(60% 60% at 70% 65%, rgba(225,29,72,.14), transparent 60%),
    linear-gradient(180deg, #111218, #0b0b0f);
  position:relative; overflow:hidden;
}
.discord-hero::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(225,29,72,.06) 0 2px, transparent 2px 8px);
  mix-blend-mode:screen; opacity:.5;
}
.discord-btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.discord-badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(114,137,218,.1); border:1px solid rgba(114,137,218,.35)}
.discord-iframe{width:100%; height:260px; border:0; border-radius:14px}

/* Contact */
form{display:grid; gap:12px}
input, textarea{background:#0f0f14; border:1px solid rgba(255,255,255,.08); color:var(--ink); padding:12px 14px; border-radius:14px}
input:focus, textarea:focus{outline:none; border-color:rgba(225,29,72,.45); box-shadow:0 0 0 3px rgba(225,29,72,.18)}

/* Footer */
footer{padding:30px 0; color:var(--muted); border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}

/* Utilities */
.row{display:flex; gap:14px; flex-wrap:wrap}
.spacer{height:12px}
.right{margin-left:auto}
.muted{color:var(--muted)}
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* Responsive */
@media (max-width: 1120px){
  .nav{padding:12px 0}
  .cta .btn{padding:8px 12px}
}
@media (max-width: 980px){
  .hero-grid, .tech, .discord-wrap{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:1fr 1fr}
  .jobs, .press{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 740px){
  .menu{display:none}
  .burger{display:inline-flex}
  .stats{grid-template-columns:1fr 1fr}
  .holo{height:360px}
  .row{gap:10px}
}
@media (max-width: 560px){
  .stats{grid-template-columns:1fr}
  .holo{height:300px}
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  .glitch, .reveal{animation:none}
}
/* === A11y & Focus ======================================================= */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:12px;top:12px;width:auto;height:auto;padding:10px 12px;border-radius:10px;
  background:rgba(225,29,72,.18);border:1px solid rgba(225,29,72,.35);z-index:1000}

:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px}
.menu a[aria-current="page"]{background:rgba(225,29,72,.12);color:#fff;border-radius:10px}

/* Drawer accessible */
.drawer{position:fixed;right:0;top:0;height:100dvh;width:min(92vw,360px);background:var(--surface);
  border-left:1px solid rgba(255,255,255,.08);transform:translateX(100%);
  transition:transform .25s ease;z-index:60;display:flex;flex-direction:column;gap:16px;padding:16px}
.drawer.open{transform:translateX(0)}
.drawer-backdrop{position:fixed;inset:0;background:#0008;backdrop-filter:blur(2px);opacity:0;pointer-events:none;z-index:50;transition:opacity .2s ease}
.drawer-backdrop.show{opacity:1;pointer-events:auto}

/* Visuel dynamique global (canvas BG) */
#omega-bg{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* Perf progressive rendering */
section,.cards,.pillars,.jobs,.press,.tech,.discord-wrap{content-visibility:auto;contain-intrinsic-size:600px}
img{max-width:100%;height:auto;display:block}

/* Motion safe */
@media (prefers-reduced-motion: reduce){
  .glitch,.reveal{animation:none}
}

/* Petites touches UI */
.menu a, .btn, .card, .tile{transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease}