:root {
  --fond: #f7f6fb; --encre: #24222e; --doux: #5d5a6b;
  --accent: #6c3fd1; --trait: #e4e0ef; --carte: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14131a; --encre: #ecebf2; --doux: #a8a5b8;
    --accent: #b49cf5; --trait: #2e2b3a; --carte: #1e1c27;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 16px 72px;
  background: var(--fond); color: var(--encre);
  font: 17px/1.65 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
[dir="rtl"] body, body[dir="rtl"] {
  font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", Arial, sans-serif;
}
main { max-width: 720px; margin: 0 auto; }
header {
  padding: 48px 0 28px; margin-bottom: 28px;
  border-bottom: 2px solid var(--trait);
}
h1 { margin: 0 0 8px; font-size: 1.9rem; line-height: 1.2; }
h2 {
  margin: 40px 0 10px; font-size: 1.18rem;
  color: var(--accent); line-height: 1.3;
}
.maj { margin: 0; color: var(--doux); font-size: .92rem; }
.chapo { font-size: 1.05rem; color: var(--doux); }
ul { padding-inline-start: 22px; }
li { margin: 6px 0; }
a { color: var(--accent); }
.encadre {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: 14px; padding: 16px 20px; margin: 24px 0;
}
.encadre p { margin: 0; }
.langues { margin: 0 0 8px; font-size: .92rem; color: var(--doux); }
footer {
  margin-top: 48px; padding-top: 20px;
  border-top: 2px solid var(--trait); color: var(--doux); font-size: .9rem;
}

/* Language picker (index.html) */
body.accueil {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.accueil main { max-width: 480px; width: 100%; text-align: center; }
.accueil p { color: var(--doux); margin: 0 0 28px; }
a.lien {
  display: block; padding: 16px 20px; margin: 10px 0;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 14px;
  color: var(--accent); text-decoration: none; font-weight: 600;
}
a.lien:hover { border-color: var(--accent); }