:root{
  --bg:#0e1117; --bg-soft:#131826; --surface:#161b2e; --surface-2:#1b2240;
  --text:#e9edf5; --text-muted:#a8b1c6;
  --brand:#073407; --brand-2:#21891e; --border:#24304f;
  --radius:14px; --shadow:0 10px 35px rgba(0,0,0,.35);
}
html,body{height:100%} *{box-sizing:border-box}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 700px at 110% 10%, rgba(96,165,250,.14), transparent 60%),
    var(--bg);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1100px;margin:0 auto;padding:28px 18px}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Carte d’intro et articles */
.intro .header-intro, .main-content article{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

/* CENTRAGE + titres/texte */
.header-intro{
  text-align:center;
  margin-top:20px;
}
.header-intro h1{
  /* taille/marges explicites -> plus d’avertissement MDN */
  font-size:2rem;
  font-weight:bold;
  margin:0 0 10px;
}
.header-intro p{
  font-size:1.1rem;
  color:#ccc;
  margin:0;
}