/* ---------------------------------
   NEONBYTE — Cyberpunk Styles (final + hamburger fix + Team V3 + Play Modal)
   --------------------------------- */

:root{
  --bg:#07070a; --panel:#0d0f16; --text:#e9f0ff; --muted:#98a0b3;
  --accent:#00ffe0; --accent-2:#ff00c8; --accent-3:#7bff00;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --grid:rgba(0,255,224,.06); --scan:rgba(255,255,255,.035);
}

*{box-sizing:border-box}
::selection{background:rgba(255,0,200,.35);color:#fff}
html,body{height:100%;scroll-behavior:smooth}

/* --- Fond + halos fixes --- */
body{
  margin:0; font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text); background: var(--bg); overflow-x:hidden;
}
body::before, body::after{
  content:""; position:fixed; inset:-30vmax; z-index:-4; pointer-events:none; filter: blur(90px) saturate(1.05);
}
body::before{ background: radial-gradient(60vmax 40vmax at 85% -10%, rgba(255,0,200,.18), transparent 60%); }
body::after { background: radial-gradient(55vmax 50vmax at -10% 55%, rgba(0,255,224,.18), transparent 60%); }

/* Progress */
.scrollbar{ position:fixed; top:0; left:0; height:4px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, var(--accent), var(--accent-2)); z-index:9999; }

/* Background layers */
#bgCanvas{ position:fixed; inset:0; z-index:-3; }
.grid-overlay{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.06;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 64px 64px;
  transform: translateZ(0);
}
.scanlines{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06; background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.05) 2px 3px); background-size:100% 3px; }
.noise{ position:fixed; inset:-100px; z-index:-1; opacity:.05; pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>") center/200px;
  animation:noise .6s steps(2) infinite;
}
@keyframes noise{ to{ transform: translate3d(0,0,0) scale(1.01); } }

/* Boot */
#boot{ position:fixed; inset:0; background:#000; display:grid; place-items:center; z-index:99999; transition:opacity .6s ease .1s, visibility 0s linear .7s; }
#boot.off{ opacity:0; visibility:hidden; }
.boot-text{ font-weight:800; letter-spacing:.25em; color:#fff; opacity:.7; text-shadow:0 0 20px #fff; animation:bootflicker 1.5s steps(5) infinite; }
.boot-glow{ position:absolute; width:60vmax; height:60vmax; border-radius:50%;
  background: radial-gradient(circle, rgba(0,255,224,.25), transparent 60%), radial-gradient(circle at 70% 40%, rgba(255,0,200,.25), transparent 60%); filter: blur(40px); }
@keyframes bootflicker{ 50%{ opacity:.3 } }

/* =========================
   NAV / HEADER
   ========================= */
.nav{
  position:sticky; top:0; left:0; right:0;
  z-index:70;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:1rem; padding:.65rem 1rem;
  background:linear-gradient(180deg, rgba(8,10,16,.85), rgba(8,10,16,.65));
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{ display:flex; align-items:center; gap:.9rem; text-decoration:none; }
.brand-avatar{ width:42px; height:42px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.brand-wordmark{ height:28px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.links{ display:flex; align-items:center; gap:.6rem; justify-self:start; }
.links a{ color:var(--text); text-decoration:none; padding:.35rem .4rem; border-bottom:2px solid transparent; opacity:.9; transition:.2s ease; }
.links a:hover{ opacity:1; border-color:var(--accent); }
.links .pill{ border:none; background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 20px rgba(0,255,224,.25); }

/* Burger */
#nav-toggle{ display:none; }
.burger{ display:none; width:40px; height:40px; cursor:pointer; position:relative; justify-self:end; }
.burger span, .burger span::before, .burger span::after{ content:""; position:absolute; left:8px; right:8px; height:2px; background:#fff; transition:.25s; }
.burger span{ top:50%; transform:translateY(-50%); }
.burger span::before{ top:-9px; }
.burger span::after{ top:9px; }
#nav-toggle:checked + .burger span{ background:transparent; }
#nav-toggle:checked + .burger span::before{ top:0; transform:rotate(45deg); }
#nav-toggle:checked + .burger span::after{ top:0; transform:rotate(-45deg); }

/* Mobile menu */
@media (max-width: 900px){
  .burger{ display:block; }

  .links{
    display:none;
    position:fixed; z-index:80; inset:56px 0 0 0;
    padding:1rem 1.2rem 2rem;
    flex-direction:column; align-items:flex-start; gap:.2rem;
    height:calc(100dvh - 56px);
    background:linear-gradient(180deg, rgba(8,10,16,.97), rgba(8,10,16,.94));
    backdrop-filter: blur(12px);
    border-top:1px solid rgba(255,255,255,.06);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
    transition:transform .26s ease, opacity .2s ease, visibility 0s linear .26s;
  }
  .links a{ font-size:1.06rem; padding:.9rem .2rem; width:100%; border-bottom:0; }
  #nav-toggle:checked ~ .links{
    display:flex;
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
    transition:transform .26s ease, opacity .2s ease;
  }
  .hide-sm{ display:none; }
}

/* =========================
   LANG SWITCHER
   ========================= */
.lang{ position:relative; margin-left:.4rem; z-index:120; }
.lang-btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .6rem; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:var(--text); cursor:pointer; }
.lang-btn:hover{ border-color:var(--accent); }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  min-width:170px; padding:.25rem 0;
  background:#0c0f16; border:1px solid rgba(255,255,255,.14); border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.45); display:none; z-index:150;
}
.lang-menu.open{ display:block; }
.lang:focus-within .lang-menu{ display:block; }
.lang-menu li{ list-style:none; padding:.5rem .75rem; cursor:pointer; white-space:nowrap; }
.lang-menu li:hover{ background:rgba(255,255,255,.06); }
.lang-menu li.active{ background:linear-gradient(90deg, rgba(0,255,224,.18), rgba(255,0,200,.18)); }
@media (max-width:900px){ .lang{ display:none; } }

/* HERO */
.hero{ min-height:88vh; display:grid; place-items:center; position:relative; padding:4rem 1.2rem 2rem; }
.hero-inner{ text-align:center; max-width:980px; }
.hero-video{ isolation:isolate; }
.hero-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.05) brightness(.9); }
.video-vignette{ position:absolute; inset:0; background: radial-gradient(1200px 700px at 50% 30%, rgba(0,0,0,0), rgba(0,0,0,.35) 60% , rgba(0,0,0,.6) 100%); }
.kicker{ color:var(--muted); text-transform:uppercase; letter-spacing:.2em; font-weight:700; font-size:.78rem; }
.glitch{ --glitch-x:0px; --glitch-y:0px; --glitch-skew:0deg; font-size:clamp(32px,7.5vw,96px); font-weight:900; letter-spacing:.02em; position:relative; text-transform:uppercase; text-shadow: 0 0 14px rgba(0,255,224,.35), 0 0 28px rgba(255,0,200,.25); }
.glitch::before,.glitch::after{ content:attr(data-text); position:absolute; inset:0; mix-blend-mode:screen; transform: translate(var(--glitch-x), var(--glitch-y)) skew(var(--glitch-skew)); }
.glitch::before{ color:var(--accent); clip-path:polygon(0 2%,100% 8%,100% 55%,0 60%); opacity:.85; }
.glitch::after { color:var(--accent-2); clip-path:polygon(0 62%,100% 55%,100% 98%,0 90%); opacity:.85; }
.tagline{ margin:1rem auto 1.4rem; color:var(--muted); max-width:760px; }
.cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.btn{ --glow: drop-shadow(0 0 12px rgba(0,255,224,.35)); display:inline-flex; align-items:center; justify-content:center; padding:.9rem 1.2rem; border-radius:calc(var(--radius) - 6px); text-decoration:none; font-weight:700; letter-spacing:.03em; border:1px solid rgba(255,255,255,.12); transition:.2s ease; backdrop-filter:blur(2px); }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ color:#06100e; background:linear-gradient(90deg,var(--accent),var(--accent-2)); filter:var(--glow); }
.btn-ghost{ color:var(--text); background:rgba(255,255,255,.04); }
.hero-badge{ position:absolute; right:3vw; bottom:6vh; width:min(22vmin,220px); transform:rotate(-8deg); filter: drop-shadow(0 12px 24px rgba(0,0,0,.5)); }
.hero-badge img{ width:100%; border-radius:50%; outline:3px solid rgba(255,255,255,.15); }
@media (max-width:700px){ .hero-badge{ display:none; } }

/* Social pills */
.social-bar{ display:flex; gap:.5rem; justify-content:center; margin-top:1rem; flex-wrap:wrap; }
.pill{ display:flex; align-items:center; gap:.45rem; padding:.5rem .8rem; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.04); text-decoration:none; color:var(--text) }
.pill .ico{ width:18px; height:18px; }

/* Sections */
.section{ padding:5rem 1.2rem; }
.section-head{ text-align:center; margin-bottom:2.2rem; }
.section-title{ font-size:clamp(24px,4.4vw,44px); margin:0 0 .6rem; }
.section-title .accent{ color:var(--accent); text-shadow:0 0 12px rgba(0,255,224,.25); }

/* Projects */
.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; max-width:1200px; margin:0 auto; }
@media (max-width:1000px){ .cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:700px){  .cards{ grid-template-columns:1fr; } }
.card{ perspective:800px; transform-style:preserve-3d; border-radius:var(--radius); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow); overflow:hidden }
.card-media{ position:relative; height:220px; overflow:hidden }
.gradient-a{ background: radial-gradient(circle at 20% 20%, rgba(0,255,224,.35), transparent 55%), linear-gradient(90deg, #111, #0e0f14) }
.gradient-b{ background: radial-gradient(circle at 80% 30%, rgba(255,0,200,.35), transparent 55%), linear-gradient(90deg, #101113, #0e0f14) }
.gradient-c{ background: radial-gradient(circle at 50% 70%, rgba(123,255,0,.35), transparent 55%), linear-gradient(90deg, #101113, #0e0f14) }
.card-media .label{ position:absolute; top:12px; left:12px; padding:.3rem .6rem; border-radius:999px; font-size:.8rem; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.15) }
.card-media .spark{ position:absolute; inset:0; background:conic-gradient(from 180deg at 50% 50%, transparent, rgba(255,255,255,.15), transparent 30%); mix-blend-mode:screen; filter:blur(26px); animation:spin 8s linear infinite }
@keyframes spin{ to{ transform: rotate(360deg) } }
.card-body{ padding:1rem 1rem 1.2rem }
.card h3{ margin:.2rem 0 .4rem; font-size:1.25rem }
.card p{ margin:0 0 .8rem; color:var(--muted) }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem }
.chips span{ padding:.25rem .5rem; border:1px solid rgba(255,255,255,.15); border-radius:999px; font-size:.8rem; color:#cfe }

/* Ribbon */
.ribbon{ overflow:hidden; margin-top:2.2rem; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.02) }
.ribbon span{ display:inline-block; padding:.7rem 0; white-space:nowrap; font-weight:800; letter-spacing:.15em; animation:marquee 18s linear infinite; text-shadow:0 0 10px rgba(0,255,224,.15) }
.ribbon span::after{ content:attr(data-text); padding-left:2rem }
@keyframes marquee{ to{ transform: translateX(-50%) } }

/* Manifesto */
.manifesto-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
@media (max-width:900px){ .manifesto-grid{ grid-template-columns:1fr } }
.m-item{ border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); padding:1.1rem; border-radius:var(--radius); box-shadow:var(--shadow) }
.m-item h3{ margin-top:.2rem }

/* Community */
.socials{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; max-width:1000px; margin:0 auto }
.social{ display:flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.12); padding:.7rem 1rem; border-radius:calc(var(--radius) - 8px); text-decoration:none; color:var(--text); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); transition:.2s ease; box-shadow:var(--shadow) }
.social img{ width:20px; height:20px; filter: drop-shadow(0 0 10px rgba(0,255,224,.2)) }
.social:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:0 0 22px rgba(0,255,224,.2) }

/* Games */
.sec-head{ max-width:1200px; margin:0 auto 1.6rem; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; text-align:left }
.sec-title{ margin:.2rem 0 }
.sec-sub{ color:var(--muted) }
.grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; max-width:1200px; margin:0 auto }
@media (max-width:1100px){ .grid{ grid-template-columns:1fr 1fr } }
@media (max-width:680px){  .grid{ grid-template-columns:1fr } }

.card.game{ position:relative; transform:perspective(800px) rotateX(var(--tiltX,0)) rotateY(var(--tiltY,0)) }

/* === Cover plein cadre + léger zoom (évite les bords) === */
.card.game .cover{
  position:relative;
  aspect-ratio:16/9;
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  background-color:#0a0d14;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.card.game .cover.zoom{
  background-size: 106%;
}

.card.game .platforms{ position:absolute; top:12px; right:12px; display:flex; gap:6px; opacity:.92; z-index:2 }
.card.game .platforms svg{ width:24px; height:24px }
.card.game .play{ position:absolute; top:12px; left:12px; z-index:2; display:inline-flex; gap:.45rem; align-items:center; padding:.44rem .72rem; border-radius:12px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#06100e; border:none; text-decoration:none; font-weight:800; letter-spacing:.02em; box-shadow:0 6px 18px rgba(0,0,0,.35) }
.card.game .play svg{ width:20px; height:20px; stroke:currentColor }
.card.game .glow{ position:absolute; inset:0; pointer-events:none; background: radial-gradient(200px 200px at var(--mx,50%) var(--my,50%), rgba(0,255,224,.14), transparent 60%) }
.card.game .meta{ padding:.9rem 1rem }
.tagz{ display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.35rem }
.tag{ padding:.15rem .45rem; border:1px solid rgba(255,255,255,.2); border-radius:999px; font-size:.78rem; color:#dff }
.title-sm{ font-weight:900 }

/* TEAM V3 */
.studio{ max-width:1150px; margin:0 auto; text-align:center; position:relative }
.marquee{ overflow:hidden; margin:1rem 0; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent) }
.marquee-track{ display:inline-block; white-space:nowrap; animation:marqueeX 26s linear infinite }
.marquee-track span{ margin:0 .9rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; font-weight:800; font-size:.85rem }
@keyframes marqueeX{ to{ transform: translateX(-50%) } }
.team-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; max-width:1150px; margin:1.2rem auto 0 }
@media (max-width:1200px){ .team-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:900px){  .team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){  .team-grid{ grid-template-columns:1fr } }
.mcard{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center; padding:1rem; border-radius:16px; overflow:hidden; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); box-shadow:var(--shadow); transform:perspective(800px) rotateX(var(--tiltX,0)) rotateY(var(--tiltY,0)); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease }
.mcard::before{ content:""; position:absolute; inset:-1px; border-radius:18px; padding:1px; background: linear-gradient(90deg, rgba(0,255,224,.25), rgba(255,0,200,.25)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6 }
.mcard:hover{ border-color:rgba(0,255,224,.35); box-shadow:0 18px 36px rgba(0,0,0,.45) }
.m-portrait{ position:relative; width:96px; height:96px; border-radius:50%; display:grid; place-items:center }
.m-portrait img{ width:92px; height:92px; border-radius:50%; object-fit:cover; display:block; position:relative; z-index:1 }
.m-portrait .ring{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent)); animation:ringspin 6s linear infinite; filter:blur(.3px) }
@keyframes ringspin{ to{ transform: rotate(360deg) } }
.m-portrait .pulse{ content:""; position:absolute; inset:-10px; border-radius:50%; background: radial-gradient(circle, rgba(0,255,224,.25), transparent 60%); filter: blur(14px); opacity:.45 }
.m-body{ min-width:0 }
.m-top{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap }
.m-name{ font-weight:900; font-size:1.05rem; line-height:1.2; word-break:break-word }
.m-role{ color:var(--accent); font-weight:800; letter-spacing:.05em; line-height:1.2; word-break:break-word }

/* Bio sans ellipses */
.m-bio{ margin:.3rem 0 .4rem; color:var(--muted); display:block; overflow:visible; white-space:normal; -webkit-line-clamp:unset; -webkit-box-orient:unset; }

.m-tags{ display:flex; gap:.35rem; flex-wrap:wrap }
.m-tags span{ padding:.12rem .45rem; border:1px solid rgba(255,255,255,.2); border-radius:999px; font-size:.72rem; color:#cfe }
.m-links{ margin-top:.5rem; display:flex; gap:.5rem }
.m-links a{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04) }
.m-links img{ width:18px; height:18px; filter: drop-shadow(0 0 8px rgba(0,255,224,.25)) }
.m-links a:hover{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(0,255,224,.12) inset }

/* Prism / wordmark */
.prism{ margin-top:1.4rem }
.prism-glass{ position:relative; display:inline-block; padding:1rem 1.6rem; border-radius:18px; border:1px solid rgba(255,255,255,.18); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); backdrop-filter:blur(6px); overflow:hidden }
.prism .logo-main{ height:38px; display:block }
.prism .glass-sheen{ position:absolute; inset:0; mask:linear-gradient(75deg, transparent 0 35%, #fff 50%, transparent 65%); background:#fff; opacity:.12; transform:skewX(-15deg) translateX(-120%); animation:sheen 6s ease-in-out infinite }
@keyframes sheen{ 50%{ transform:skewX(-15deg) translateX(0) } 100%{ transform:skewX(-15deg) translateX(120%) } }
.scanline-local{ display:none !important }
.prism .halo{ position:absolute; inset:-30px; filter:blur(20px); background: radial-gradient(circle, rgba(0,255,224,.25), transparent 60%), radial-gradient(circle at 70% 40%, rgba(255,0,200,.25), transparent 60%); z-index:-1 }
.logo-tagline{ color:var(--muted); margin:.6rem 0 0 }
.logo-tagline .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); margin-right:.4rem }
.logo-highlights{ list-style:none; padding:0; margin:.6rem 0 0; display:flex; justify-content:center; flex-wrap:wrap; gap:.75rem 1rem }
.logo-highlights li{ margin:0; padding:0 }
.logo-highlights li::marker{ content:"" }
.logo-highlights li::before{ content:none }

/* Discord overlay */
.discord-toggle{
  position: fixed;
  inset-inline-end: max(16px, env(safe-area-inset-right));
  inset-block-end:  max(16px, env(safe-area-inset-bottom));
  z-index: 10001;
  border-radius: 999px;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#06100e; border:none; padding:.7rem .8rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  cursor:pointer;
}
.discord-toggle.active{ filter: drop-shadow(0 0 12px rgba(0,255,224,.35)); }
.discord-widget{
  position: fixed;
  inset-inline-end: max(16px, env(safe-area-inset-right));
  inset-block-end: calc(max(16px, env(safe-area-inset-bottom)) + 56px);
  width: min(420px, 96vw);
  height: min(560px, calc(100dvh - 120px));
  z-index: 10000;
  visibility: hidden; opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
  transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
}
.discord-widget.open{ visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
.discord-widget iframe{ display:block; width:100%; height:100%; border-radius: 16px; border:1px solid rgba(255,255,255,.14); background:#1b1f2a; overflow:hidden }

/* Footer */
.footer{ position:relative; text-align:center; padding:3rem 1rem 4rem; color:var(--muted); background: radial-gradient(800px 300px at 50% -20%, rgba(255,255,255,.04), transparent 60%) }
.footer::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background: linear-gradient(90deg, rgba(0,255,224,.5), rgba(255,0,200,.45)); opacity:.35 }
.footer-brand img{ height:36px; opacity:.95; filter: drop-shadow(0 6px 16px rgba(0,0,0,.55)); margin-bottom:.6rem }
.footer p{ margin:.35rem 0 }
.footer a{ color:var(--text); text-decoration:none }
.footer a:hover{ text-decoration:underline; text-underline-offset:3px }
.footer-mini{ margin-top:.5rem; display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem }
.footer-mini a{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04) }
.footer-mini a:hover{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(0,255,224,.12) inset }

/* Reveal */
.reveal{ opacity:0; transform:translateY(12px) scale(.98); transition:.5s ease }
.reveal.in{ opacity:1; transform:none }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
}

/* === GLITCH PATCH (robuste & i18n-proof) ================================ */
.glitch{
  position: relative;
  display: inline-block;
  font-size: clamp(40px, 10vw, 120px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  isolation: isolate;
  --glitch-x: 0px;
  --glitch-y: 0px;
  --glitch-skew: 0deg;
  filter: drop-shadow(0 8px 28px rgba(255,0,200,.18));
}
.glitch::before,
.glitch::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, clip-path, opacity;
}
.glitch::before{
  color: #00fff0;
  text-shadow: 0 0 14px rgba(0,255,240,.55);
  transform: translate(var(--glitch-x), var(--glitch-y)) skewX(var(--glitch-skew));
  clip-path: polygon(0 2%,100% 0,100% 46%,0 54%);
  opacity: .9;
}
.glitch::after{
  color: #ff00f0;
  text-shadow: 0 0 14px rgba(255,0,240,.55);
  transform: translate(calc(var(--glitch-x)*-1), calc(var(--glitch-y)*-1)) skewX(calc(var(--glitch-skew)*-1));
  clip-path: polygon(0 56%,100% 44%,100% 100%,0 98%);
  opacity: .9;
}
@media (prefers-reduced-motion: reduce){
  .glitch::before, .glitch::after{ transform: none; clip-path: none; opacity: .35; }
}

/* === WRAP SAFE MULTILINGUE pour .glitch ================================ */
.glitch{
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: manual;
  line-break: strict;
  text-wrap: balance;
}
@supports not (text-wrap: balance){
  .glitch{ text-wrap: pretty; }
}
@supports (word-break: auto-phrase){
  .glitch{ word-break: auto-phrase; }
}

/* =======================================================================
   >>> ADDITIF : Team V3++ + images sur Projects
   ======================================================================= */
.team-grid{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
}
.mcard{
  grid-template-columns: 1fr;
  text-align: center;
  padding: 1.1rem 1rem 1.0rem;
  align-items: start;
}
.m-portrait{
  width: 112px; height: 112px; margin: 0 auto .6rem;
}
.m-portrait img{
  width: 108px; height: 108px;
}
.m-top{ justify-content: center; gap: .4rem; }
.m-name{ font-size: 1.08rem; }
.m-role{
  padding: .14rem .5rem;
  border-radius: 999px;
  background: rgba(0,255,224,.10);
  border: 1px solid rgba(0,255,224,.28);
}
.m-bio{ margin: .55rem 0 .6rem; color: var(--muted); }
.m-tags{ justify-content: center; gap: .3rem; }
.m-tags span{ font-size: .7rem; padding: .1rem .42rem; }
.m-links{ margin-top: .7rem; justify-content: center; }

.mcard:hover{
  transform: translateY(-2px) rotateX(0) rotateY(0);
}

@media (min-width: 900px){
  .mcard.mcard--lead{ grid-column: span 2; }
  .mcard.mcard--lead .m-portrait{ width:132px; height:132px; }
  .mcard.mcard--lead .m-portrait img{ width:128px; height:128px; }
}

/* PROJECT CARD IMAGES */
.card-media{
  position: relative;
  overflow: hidden;
}
.card-media .media-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  opacity: .9;
  transition: transform .6s ease, opacity .3s ease;
}
.card:hover .card-media .media-img{
  transform: scale(1.06);
  opacity: 1;
}
.card-media::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 20%, rgba(0,0,0,.00), rgba(0,0,0,.25) 60%, rgba(0,0,0,.45));
  pointer-events: none;
}

/* =========================
   PLAY CAPSULE (modale)
   ========================= */
.play-modal{
  position: fixed; inset: 0; z-index: 11000;
  display: grid; place-items: center;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.play-modal.open{
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity .22s ease;
}
.play-backdrop{
  position:absolute; inset:0;
  background: rgba(5,7,12,.72);
  backdrop-filter: blur(8px);
}
.play-panel{
  position: relative;
  width: min(760px, 92vw);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
  transform: translateY(10px) scale(.98);
  transition: transform .22s ease;
}
.play-modal.open .play-panel{ transform: none; }

.play-close{
  position:absolute; top:10px; right:10px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  border-radius: 10px; width:36px; height:36px; color:var(--text); cursor:pointer;
}
.play-close:hover{ border-color: var(--accent); }

.play-hero{ position:relative; height:220px; background:#0a0d14; }
.play-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02) }
.play-hero .play-veil{
  position:absolute; inset:0;
  background: radial-gradient(120% 80% at 50% 25%, rgba(0,0,0,0), rgba(0,0,0,.45) 60%, rgba(0,0,0,.65));
}

.play-body{ padding:1rem 1rem 1.2rem; text-align:center; }
#playTitle{ margin:.4rem 0 .2rem; font-size:1.4rem; }
.play-sub{ margin:.2rem 0 1rem; color:var(--muted); }

.play-actions{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.btn-store{
  display:inline-flex; gap:.5rem; align-items:center;
  padding:.8rem 1.1rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04); color:var(--text); text-decoration:none; font-weight:800;
  box-shadow: var(--shadow);
}
.btn-store:hover{ border-color: var(--accent); box-shadow:0 0 22px rgba(0,255,224,.18) }
.btn-store[aria-disabled="true"]{
  opacity:.45; pointer-events:none; filter:grayscale(1);
}

/* =========================
   FIX LISIBILITÉ HERO (kicker + tagline)
   ========================= */
.hero .kicker{
  color:#fff;
  opacity:1;
  font-weight:800;
  letter-spacing:.22em;
  text-shadow: 0 2px 12px rgba(0,0,0,.55), 0 0 18px rgba(0,255,224,.25);
}

/* Variante lumineuse par défaut */
.hero .tagline{
  color:#fff;                /* remplace var(--muted) */
  font-weight:600;
  text-shadow:
    0 2px 14px rgba(0,0,0,.55),
    0 0 22px rgba(0,255,224,.15),
    0 0 28px rgba(255,0,200,.08);
  -webkit-text-stroke:.2px rgba(0,0,0,.35);
}

/* Optionnel: voile vidéo un peu plus sombre pour booster le contraste global */
.video-vignette{
  background: radial-gradient(1200px 700px at 50% 30%,
    rgba(0,0,0,0),
    rgba(0,0,0,.52) 60%,
    rgba(0,0,0,.72) 100%);
}

/* Variante pastille (désactivée par défaut)
.hero .tagline{
  color:#fff;
  font-weight:700;
  display:inline-block;
  padding:.55rem .8rem;
  border-radius:12px;
  background: rgba(6,10,16,.55);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(4px);
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
*/