/* 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)}
.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%}
}

/* --- Miroir ancien --- */
.mirror-section{
  padding: 28px 0;
  text-align: center;
}
.mirror-section h2{
  font-family: 'Merriweather', serif;
  color: var(--accent);
  margin: 0 0 6px;
}
.mirror-section .lead{
  color: var(--muted);
  margin-bottom: 18px;
}

.mirror-wrap {
	position: relative;
	width: min(680px, 90%);
	margin: 0 auto 10px;
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mirror-face {
	position: absolute;
	top: 51%;
	left: 50%;
	transform: translate(-50%, -50%); /* centre parfaitement */
	width: 50%;        
	height: 50%;       /* ajustable sans perdre le centrage */
	object-fit: cover;
	border-radius: 10px;
	z-index: 1;         /* visage sous le cadre */
	filter: brightness(1.05) contrast(0.95);
}

.mirror-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	z-index: 2; /* le cadre est au-dessus du visage */
	filter: drop-shadow(0 18px 40px rgba(0,0,0,0.45));
}

.mirror-section .caption{
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
}

.mirror-link{
  text-align:center;
  margin-top:24px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.04);
  color:var(--muted);
}
.mirror-link p{
  margin-bottom:8px;
  font-size:14px;
  color:var(--muted);
}
.mirror-link a.btn-ghost{
  border-color:rgba(255,255,255,0.06);
  color:var(--accent);
}

.result-image {
	text-align: center;
	margin: 1.5em auto;
}

.result-image img.resized-preview {
	width: 240px;
	height: 240px;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
	border: 2px solid rgba(212, 175, 55, 0.6);
}
.result-image h4 {
	font-size: 1rem;
	color: var(--gold, #d4af37);
	margin-bottom: 0.5em;
}