/* styles.css — Charte sobre & épique (inspirée Exkalibur) */
:root{
  --bg:#0f1314;
  --panel:#111416;
  --accent:#b58b1f; /* or gold */
  --muted:#9aa0a6;
  --glass: rgba(255,255,255,0.03);
  --max-width:1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, #0b0d0e 0%, #111416 100%);
  color:#e8eef1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.container{width:90%; max-width:var(--max-width); margin:0 auto;}

/* header */
.site-header{
  border-bottom:1px solid rgba(255,255,255,0.03);
  background: linear-gradient(90deg, rgba(16,18,20,0.8), rgba(8,10,12,0.6));
  position:sticky; top:0; z-index: 30;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; padding:18px 0;
}
.brand{display:flex; align-items:center; gap:14px}
.brand img{width:68px; height:68px; object-fit:contain; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6))}
.title-block .site-title{font-family: 'Merriweather', serif; margin:0; font-size:20px; letter-spacing:0.8px; color:var(--accent)}
.title-block .site-sub{margin:0; font-size:12px; color:var(--muted)}

.main-nav a{color:var(--muted); text-decoration:none; margin-left:18px; font-weight:600}
.main-nav a.cta{background:transparent; border:1px solid rgba(255,255,255,0.04); padding:8px 12px; border-radius:6px; color:var(--accent)}

/* hero */
.hero{display:grid; grid-template-columns: 1fr 360px; gap:28px; align-items:center; padding:40px 0}
.hero-inner h2{font-family:'Merriweather', serif; font-size:36px; margin:0 0 8px; color:#f6e9c6}
.hero-inner .lead{color:var(--muted); max-width:60%}
.hero-cta{margin-top:18px}
.btn{
  background:var(--accent); color:#091011; padding:12px 20px; border-radius:10px; text-decoration:none; font-weight:700; display:inline-block; margin-right:10px;
  box-shadow: 0 8px 24px rgba(181,139,31,0.12);
}
.btn-ghost{background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--muted)}

/* hero visual */
.hero-visual{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:20px; border-radius:10px; text-align:center}
.hero-visual img{max-width:100%; border-radius:6px; box-shadow: 0 12px 40px rgba(0,0,0,0.5)}
.caption{font-size:13px; color:var(--muted); margin-top:8px}

/* features */
.features{display:flex; gap:18px; margin:28px 0}
.card{flex:1; background:var(--glass); padding:18px; border-radius:10px; border:1px solid rgba(255,255,255,0.03)}
.card h3{margin-top:0; font-family:'Merriweather', serif}

/* lore */
.lore-article{padding:24px 0}
.lore-header h2{font-family:'Merriweather', serif; color:var(--accent)}
.lore-body{display:grid; grid-template-columns: 1fr 360px; gap:24px}
.lore-figure img{width:100%; border-radius:8px}
.lore-body p{color:var(--muted)}
.lore-column {
  padding: 0;
  padding-right: 10px;
  padding-left: 10px;
	width: 50%;
	vertical-align: top;
}
.lore-columns  {
  border-collapse: collapse;
}
.note{margin-top:14px; color:var(--muted); font-style:italic}

/* upload page */
.quest-section{padding:20px 0}
.upload-panel{display:flex; gap:20px; align-items:flex-start}
.upload-form{flex:1; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:10px; border:1px solid rgba(255,255,255,0.03)}
.file-label{display:block; margin-bottom:10px; color:var(--muted)}
input[type="file"]{display:block; margin-bottom:14px}
.form-actions{display:flex; gap:10px}
.hint{width:320px; background:rgba(255,255,255,0.02); padding:14px; border-radius:8px; border:1px solid rgba(255,255,255,0.03); color:var(--muted)}
.file-name{margin-top:8px; color:var(--muted); font-size:13px}

/* result */
.result{margin-top:18px}
.success{background:linear-gradient(90deg, rgba(21,40,12,0.5), rgba(10,20,8,0.4)); padding:18px; border-radius:10px; border-left:4px solid #2ecc71}
.failure{background:linear-gradient(90deg, rgba(40,12,12,0.5), rgba(20,8,8,0.4)); padding:18px; border-radius:10px; border-left:4px solid #e74c3c}
.flag{background:#08110a; color: #b9d5a6; padding:10px; border-radius:6px; display:inline-block; font-family:monospace}
.report{background:#071015; padding:12px; border-radius:6px; color:var(--muted); font-family:monospace; max-height:280px; overflow:auto}

/* footer */
.site-footer{padding:22px 0; border-top:1px solid rgba(255,255,255,0.03); margin-top:40px; color:var(--muted); font-size:13px}
.small{font-size:12px; color:var(--muted)}

/* responsive */
@media (max-width:920px){
  .hero{grid-template-columns:1fr; text-align:center}
  .lore-body{grid-template-columns:1fr}
  .upload-panel{flex-direction:column}
  .hint{width:100%}
}