:root{
  --bg:#37548e;
  --panel:#ffffff;
  --muted:#37548e;
  --text:#222222;
  --brand:#37548e;
  --brand-strong:#27447c;
  --border:#e3e3e3;
  --ok:#10b981;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: #37548e;
  color:var(--text);
  line-height:1.6;
}

.container{max-width:1100px;margin:0 auto;padding:24px;}

.site-header .container{
  color: #ffffff;
  text-align: center;
  max-width: 700px;
}

.site-header .container img{
  width: 100%;
}

.narrow{max-width:800px}
h1{font-size:28px;margin:0 0 8px}
h2{
  margin: 0 0 8px;
}
.muted{color:var(--muted)}
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
  margin-top:24px;
}
.card{
  background:var(--panel);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
/*.thumb img{width:100%;height:250px;object-fit:cover;display:block}*/
.thumb img
{
  width:100%;
  object-fit:cover;display:block
}
.content{padding:16px 16px 0}
.game-title{margin:0;font-size:20px}
.author{margin:6px 0 10px;color:var(--muted);font-weight:600}
.desc{margin:0 0 16px;color:#363636}
.card-footer{padding:16px;border-top:1px solid var(--border); display:flex; align-items:center; justify-content:flex-end}
.btn{
  display:inline-block;
  padding:10px 16px;
  background:var(--brand);
  color:white;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  border:1px solid transparent;
  transition: transform .05s ease, background .2s ease;
}
.btn:hover{background:var(--brand-strong)}
.btn:active{transform: translateY(1px)}
.btn-ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--border);
  margin-left:8px;
}
.empty{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px;
  text-align:center;
  color:var(--muted);
  margin-top:24px;
}
.register-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  margin-top:24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.register-info{
  display:flex; gap:16px; align-items:flex-start; margin-bottom:16px;
}
.register-thumb{width:300px; object-fit:cover; border-radius:12px; border:1px solid var(--border)}
.form label{display:block;margin:10px 0 6px;color:#222222;font-weight:600}
.form input, .form select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
 color:var(--text); outline:none;
}
.form input:focus{border-color:#334155}
.thanks{
  margin-top:80px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px;
  text-align:center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.thanks .icon{
  width:60px; height:60px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(16,185,129,0.15); border:1px solid rgba(16,185,129,0.4); color:var(--ok);
  font-weight:700; font-size:28px; margin-bottom:12px;
}
.site-footer{border-top:1px solid var(--border); margin-top:40px; color:var(--muted)}


/* Menu horizontal */
.main-nav {
  background-color: #333;
  color: #fff;
  padding: 0.5rem 0;
}

.main-nav .container {
  display: flex;
  justify-content: flex-start;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-list li a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.nav-list li a:hover {
  color: #ffd700; /* couleur or au survol */
}