/* style.css */
/* Thème: Spacefa RP — violet néon (#7a29ff), tons sombres, esthétique futuriste */
/* Polices: 'Orbitron' pour le style futuriste et 'Inter' pour le texte. */

/* ========================
   Variables & Reset
   ======================== */
:root{
  --bg:#070710; /* très sombre */
  --panel:#0d0d16;
  --muted:#9aa0b4;
  --primary:#7a29ff; /* couleur principale demandée */
  --accent:rgba(122,41,255,0.18);
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(122,41,255,0.06);
  --success: #4ad29f;
  --transition: 250ms cubic-bezier(.2,.9,.3,1);
  --max-width:1200px;
}

/* Reset minimal */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg, #06060a 0%, #050513 100%);
  color:#e9eefb;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  scroll-behavior:smooth;
}

/* Layout container */
.container{
  width:95%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:2rem 0;
}

/* ========================
   Header / Navigation
   ======================== */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(6,6,10,0.6), rgba(6,6,10,0.35));
  border-bottom: 1px solid rgba(122,41,255,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.6rem 0;
}

/* Brand */
.brand{
  display:flex;
  gap:0.75rem;
  align-items:center;
  text-decoration:none;
  color:inherit;
}
.logo-placeholder{
  width:48px;
  height:48px;
  border-radius:8px;
  background: linear-gradient(135deg,var(--glass), var(--glass-2));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  font-weight:700;
  box-shadow: 0 0 16px rgba(122,41,255,0.08), inset 0 -3px 10px rgba(0,0,0,0.4);
  border:1px solid rgba(255,255,255,0.03);
}

.brand-text h1{
  font-family:'Orbitron', sans-serif;
  font-size:1rem;
  margin:0;
  letter-spacing:0.6px;
  color:#fff;
}

/* Nav */
.main-nav{ display:block; }
.nav-list{
  list-style:none;
  display:flex;
  gap:1rem;
  margin:0;
  padding:0;
  align-items:center;
}
.nav-list a{
  color:var(--muted);
  text-decoration:none;
  padding:0.6rem 0.8rem;
  border-radius:8px;
  transition:var(--transition);
  font-weight:600;
  font-size:0.95rem;
}
.nav-list a:hover,
.nav-list a:focus{
  color:#fff;
  background: linear-gradient(90deg, rgba(122,41,255,0.08), rgba(122,41,255,0.04));
  box-shadow: 0 6px 22px rgba(122,41,255,0.06);
  transform:translateY(-2px);
}

/* Burger (mobile) */
.burger{
  display:none;
  background:transparent;
  border:0;
  width:46px;
  height:46px;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  gap:4px;
  padding:6px;
  transition:var(--transition);
}
.burger:hover{ background: rgba(122,41,255,0.04); }
.burger-line{
  display:block;
  width:22px;
  height:2px;
  background:linear-gradient(90deg,var(--primary), #b38cff);
  border-radius:2px;
}

/* ========================
   Hero
   ======================== */
.hero-section{
  position:relative;
  min-height:62vh;
  display:flex;
  align-items:center;
  color:#fff;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  isolation:isolate;
}
.hero-section .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(2,2,6,0.6), rgba(2,2,8,0.75));
  mix-blend-mode:overlay;
}
.hero-content{
  position:relative;
  z-index:2;
  padding:5rem 0;
  max-width:900px;
}
.hero-title{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(1.8rem,4vw,3.6rem);
  margin:0 0 0.4rem 0;
  text-shadow: 0 6px 30px rgba(122,41,255,0.08);
  letter-spacing:0.6px;
}
.hero-subtitle{
  color:var(--muted);
  margin:0 0 1.2rem 0;
  font-size:1.05rem;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.65rem 1rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  transition:var(--transition);
  border:1px solid transparent;
}
.btn-primary{
  background: linear-gradient(90deg,var(--primary), #b38cff);
  color:#fff;
  box-shadow: 0 10px 30px rgba(122,41,255,0.14);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow: 0 14px 42px rgba(122,41,255,0.22); }
.btn-outline{
  border:1px solid rgba(255,255,255,0.06);
  color:var(--muted);
  background:transparent;
}
.btn-discord{
  background: linear-gradient(90deg, #5964ff 0%, var(--primary) 100%);
  color:white;
  padding:0.6rem 1rem;
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
}

/* hero decor neon */
.neon-pulse{
  position:absolute;
  right:3%;
  bottom:6%;
  width:160px;
  height:160px;
  border-radius:50%;
  box-shadow: 0 0 100px rgba(122,41,255,0.12), 0 0 30px rgba(122,41,255,0.06) inset;
  filter: blur(12px);
  opacity:0.9;
  z-index:1;
  animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(1); opacity:0.85 }
  50%{ transform:scale(1.08); opacity:1 }
}

/* ========================
   Sections common styling
   ======================== */
.section{
  padding:3.2rem 0;
  border-top:1px solid rgba(255,255,255,0.02);
}
.section-title{
  font-family:'Orbitron',sans-serif;
  margin:0 0 0.25rem 0;
  font-size:1.3rem;
  color:#fff;
}
.section-sub{ color:var(--muted); margin:0 0 1.25rem 0; }

/* ========================
   Staff grid
   ======================== */
.staff-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:1.2rem;
  align-items:start;
}
.staff-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:1rem;
  border-radius:12px;
  border:1px solid rgba(122,41,255,0.04);
  box-shadow: 0 6px 20px rgba(2,2,10,0.6);
  text-align:center;
  transition:var(--transition);
}
.staff-card:hover{
  transform:translateY(-6px);
  box-shadow: 0 18px 40px rgba(122,41,255,0.08);
}
.role-icon{ font-size:1.8rem; color:var(--primary); margin-bottom:0.5rem; }
.portrait-placeholder{
  width:100%;
  height:110px;
  margin:0.6rem 0;
  border-radius:8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(122,41,255,0.03));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-weight:600;
}

/* ========================
   Jobs grid
   ======================== */
.jobs-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:1rem;
}
.job-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:10px;
  padding:1rem;
  border:1px solid rgba(122,41,255,0.04);
}
.hierarchy-list{ margin:0.6rem 0 0 1rem; color:var(--muted); }

/* ========================
   Gallery
   ======================== */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap:0.8rem;
}
.gallery-item{
  overflow:hidden;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.03);
  background:var(--panel);
  transition: transform var(--transition), box-shadow var(--transition);
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform var(--transition);
}
.gallery-item:hover img{ transform:scale(1.06); filter:drop-shadow(0 8px 30px rgba(122,41,255,0.06)); }

/* ========================
   Discord CTA
   ======================== */
.discord-section{
  background: linear-gradient(90deg, rgba(122,41,255,0.06), rgba(20,20,40,0.2));
  border-radius:12px;
  padding:2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.discord-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.discord-content h3{ margin:0 0 0.2rem 0; font-size:1.25rem; }
.discord-cta{}

/* ========================
   Credits & Footer
   ======================== */
.credits-list{ color:var(--muted); padding-left:0.8rem; }
.site-footer{
  border-top:1px solid rgba(255,255,255,0.02);
  padding:1rem 0;
  background:linear-gradient(180deg, rgba(6,6,10,0.05), rgba(6,6,10,0.08));
}
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--muted); font-size:0.95rem; }

/* ========================
   Reveal animations (appear on scroll)
   ======================== */
.reveal{
  opacity:0;
  transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(.2,.9,.3,1), transform 600ms cubic-bezier(.2,.9,.3,1);
}
.reveal.in-view{
  opacity:1;
  transform: none;
}

/* ========================
   Responsive
   ======================== */
@media (max-width: 900px){
  .header-inner{ gap:0.5rem; }
  .nav-list{ display:none; }
  .burger{ display:flex; }
  .hero-content{ padding-top:3rem; padding-bottom:3rem; }
  .discord-inner{ flex-direction:column; align-items:flex-start; }
}

/* Mobile open nav styles */
.main-nav.open{
  position: absolute;
  top:64px;
  right:16px;
  background: linear-gradient(180deg, rgba(6,6,10,0.98), rgba(6,6,10,0.96));
  border-radius:12px;
  padding:0.8rem;
  width:200px;
  box-shadow: 0 12px 50px rgba(0,0,0,0.6);
}
.main-nav.open .nav-list{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
}
.main-nav.open .nav-list a{ padding:0.6rem 0.8rem; }

/* small screens for hero text */
@media (max-width:560px){
  .hero-title{ font-size:1.6rem; }
  .brand-text h1{ font-size:0.95rem; }
}

/* small polish */
a{ color:inherit }