*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Segoe UI',sans-serif;
  line-height:1.6;
  color:#f5f7ff;
  background:#0b0f1a;
}

/* HEADER */
.topbar{
  position:fixed;top:0;left:0;right:0;
  height:70px;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 24px;
  background:rgba(12,16,36,0.9);
  backdrop-filter: blur(6px);
  z-index:1000;
  box-shadow:0 2px 10px rgba(0,0,0,0.6);
}

/* LOGO */
.logo-link{
  display:flex;
  align-items:center;
  height:100%;
  text-decoration:none;
}
.site-logo{
  height:130px;        /* desktop */
  width:auto;
  display:block;
}

/* NAV */
.nav-links a{
  margin-left:20px;
  color:#cfd6ff;
  text-decoration:none;
  font-weight:500;
}
.nav-links a:hover{color:#6cf2c2;}

.burger{
  display:none;
  cursor:pointer;
  font-size:1.8rem;
  color:#6cf2c2;
}

/* HERO */
.hero{
  height:100vh;
  background:
    linear-gradient(120deg, rgba(108,242,194,0.25), rgba(112,96,255,0.25)),
    url('img/18-25-bg.png') no-repeat center/cover;
  display:flex;justify-content:center;align-items:center;
  text-align:center;position:relative;
}
.hero .overlay{position:absolute;inset:0;background:rgba(5,8,20,0.7);}
.hero .content{position:relative;z-index:2;max-width:700px;padding:20px;}
.hero h1{font-size:3rem;color:#6cf2c2;}
.hero p{margin:15px 0;color:#dfe5ff;}
.hero .btn{
  display:inline-block;padding:12px 22px;border-radius:999px;
  background:linear-gradient(45deg,#6cf2c2,#7060ff);
  color:#0b0f1a;font-weight:bold;text-decoration:none;
}
.hero .btn:hover{filter:brightness(1.1);}

/* SECTIONS */
.section{
  max-width:1000px;margin:110px auto;padding:20px;text-align:center;
}
.section.light{
  background:#121834;border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.section h2{margin-bottom:20px;color:#6cf2c2;}

/* FEATURES GRID */
.features{
  list-style:none;
  margin-top:20px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.features li{
  background:#0f1430;
  border:1px solid rgba(108,242,194,0.2);
  padding:12px 14px;
  border-radius:10px;
}

/* FORM */
.chat-form{max-width:480px;margin:0 auto;}
.chat-form input,
.chat-form select,
.chat-form button{
  width:100%;padding:12px;margin:8px 0;border-radius:999px;border:none;font-size:1rem;
}
.chat-form button{
  background:linear-gradient(45deg,#6cf2c2,#7060ff);
  color:#0b0f1a;font-weight:bold;cursor:pointer;
}

/* REGLES */
#regles ul{
  list-style:none;
  padding:0;
  margin:0 auto;
  max-width:700px;
  text-align:left;
}
#regles li{
  background:rgba(108,242,194,0.08);
  border-left:4px solid #6cf2c2;
  padding:12px 15px;
  margin:10px 0;
  border-radius:8px;
  color:#e9edff;
  font-weight:500;
}

/* FOOTER */
footer{
  text-align:center;padding:20px;background:#0c1024;color:#9aa3ff;
}
footer a{color:#6cf2c2;text-decoration:none;}
footer a:hover{text-decoration:underline;}

/* MODAL */
.modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.7);
  z-index:9999;justify-content:center;align-items:center;padding:20px;
}
.modal-content{
  background:#121834;color:#f5f7ff;
  max-width:700px;max-height:90vh;overflow:auto;
  padding:25px;border-radius:10px;
  box-shadow:0 0 30px rgba(0,0,0,0.8);
}
.modal-content h2,.modal-content h3{color:#6cf2c2;}
.modal-content a{color:#6cf2c2;}
.modal-close{
  position:absolute;top:15px;right:20px;
  font-size:2rem;cursor:pointer;color:#6cf2c2;
}

/* NOTE SOUS LES REGLES */
.rules-note{
  margin-top:16px;
  padding:12px 16px;
  background:rgba(255, 77, 77, 0.12);
  border:1px solid rgba(255, 77, 77, 0.35);
  border-radius:10px;
  color:#ffd1d1;
  font-size:0.95rem;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

#accueil, #tchat, #ambiance, #regles{
  scroll-margin-top: 90px;
}
html{
  scroll-behavior: smooth;
}


/* MOBILE */
@media(max-width:768px){
  .burger{
    display:block;
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    z-index:1100;
  }

  .topbar{
    position:fixed;
    justify-content:center;
    padding:0 48px; /* espace à droite pour le burger */
  }

  /* Logo parfaitement centré, au-dessus du menu */
  .logo{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    z-index:1101;          /* au-dessus du menu */
    pointer-events:auto;
  }

  .site-logo{
    height:120px;
  }

  /* Menu mobile sous le header */
  .nav-links{
    display:none;
    flex-direction:column;
    position:fixed;       /* on le sort du flux du header */
    top:70px;             /* juste sous la topbar */
    right:0;
    left:0;               /* prend toute la largeur */
    background:#0c1024;
    padding:16px 0;
    z-index:1090;         /* sous le logo */
    text-align:center;
  }

  .nav-links a{
    margin:12px 0;
    font-size:1.1rem;
  }

  .nav-links.open{
    display:flex;
  }

  .features{
    grid-template-columns:repeat(2, 1fr);
  }
}