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

/* HEADER */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:72px;                 /* hauteur fixe pour éviter les espaces chelous */
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 24px;              /* pas de padding vertical */
  background:#1c1008;
  z-index:1000;
  box-shadow:0 2px 8px rgba(0,0,0,0.6);
}

/* LOGO */
.logo-link{
  height:100%;
  display:flex;
  align-items:center;
  text-decoration:none;
}
.site-logo{
  height:140px;                /* taille du logo desktop */
  width:auto;
  display:block;
  object-fit:contain;
  margin:0;
  padding:0;
}

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

.burger{display:none;cursor:pointer;font-size:1.6rem;}

/* HERO */
.hero{
  height:100vh;
  background:url('img/maghreb-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(0,0,0,0.6);
}
.hero .content{position:relative;z-index:2;}
.hero h1{font-size:3rem;color:#ff9f1c;}
.hero p{margin:15px 0;}
.hero .btn{
  display:inline-block;
  padding:12px 22px;
  border-radius:8px;
  background:#ff9f1c;
  color:#1c1008;
  font-weight:bold;
  text-decoration:none;
}
.hero .btn:hover{background:#ffc966;}

/* SECTIONS */
.section{
  max-width:1000px;
  margin:110px auto;
  padding:20px;
  text-align:center;
}
.section.light{
  background:#1f140c;
  border-radius:12px;
  box-shadow:0 3px 10px rgba(0,0,0,0.5);
}
.section h2{margin-bottom:20px;color:#ff9f1c;}

/* FORM */
.chat-form{max-width:500px;margin:0 auto;}
.chat-form input,
.chat-form select,
.chat-form button{
  width:100%;
  padding:12px;
  margin:8px 0;
  border-radius:8px;
  border:none;
  font-size:1rem;
}
.chat-form button{
  background:linear-gradient(45deg,#ff9f1c,#ffcc66);
  color:#1c1008;
  font-weight:bold;
  cursor:pointer;
}
.chat-form button:hover{
  background:linear-gradient(45deg,#ffc966,#ffd999);
}

/* FOOTER */
footer{
  text-align:center;
  padding:20px;
  background:#1c1008;
  color:#aaa;
}
footer a{
  color:#ff9f1c;
  text-decoration:none;
  font-weight:500;
}
footer a:hover{
  color:#ffd999;
  text-decoration:underline;
}

/* LISTE REGLES */
#regles ul{
  list-style:none;
  padding:0;
  margin:0 auto;
  text-align:left;
  max-width:700px;
}
#regles li{
  background:rgba(255,159,28,0.08);
  border-left:4px solid #ff9f1c;
  padding:12px 15px;
  margin:10px 0;
  border-radius:6px;
  color:#f5f0ea;
  font-weight:500;
}

/* MODAL MENTIONS LEGALES */
.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:#1f140c;
  color:#f5f0ea;
  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:#ff9f1c;
}
.modal-content a{
  color:#ffcc66;
}
.modal-close{
  position:absolute;
  top:15px;
  right:20px;
  font-size:2rem;
  cursor:pointer;
  color:#ff9f1c;
}

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

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

  .site-logo{
    height:130px;            /* logo lisible en mobile */
  }

  .nav-links{
    display:none;
    flex-direction:column;
    position:absolute;
    top:64px;
    right:0;
    background:#1c1008;
    padding:15px;
  }
  .nav-links.open{display:flex;}
}