/* Palette de l'app : ambre du mode Ramadan sur l'encre des ecrans sombres.
   Le site reprend les memes valeurs que lib/theme.dart et les captures du
   Store, pour qu'un visiteur venu de la fiche Play reconnaisse l'app. */
:root {
  --ground: #FAF9F7;
  --surface: #FFFFFF;
  --ink: #17181E;
  --muted: #6B6A66;
  --border: #E4E1DB;
  --accent: #C47F00;
  --accent-strong: #F59F00;
  --accent-wash: #FDF4E1;
  --ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ar: 'Noto Sans Arabic', var(--ui);
  --max: 760px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #121318;
    --surface: #1A1B22;
    --ink: #ECEAE4;
    --muted: #9A978F;
    --border: #2B2D37;
    --accent: #F5A623;
    --accent-strong: #F59F00;
    --accent-wash: #241C10;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

html[dir="rtl"] body { font-family: var(--ar); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

.nav {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav .wrap { display: flex; align-items: center; gap: 18px; height: 62px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; color: var(--ink); text-decoration: none; font-size: 17px;
}
.logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent-strong); color: #16171D;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.nav .liens { margin-inline-start: auto; display: flex; gap: 16px; align-items: center; }
.nav a.lien { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.nav a.lien:hover { color: var(--ink); }
.langues { display: flex; gap: 6px; }
.langues a {
  font-size: 12px; font-weight: 700; text-decoration: none; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
}
.langues a[aria-current="true"] { color: var(--accent); border-color: var(--accent); }

main { padding: 48px 0 72px; }
h1 { font-size: 34px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: 19px; margin: 34px 0 8px; letter-spacing: -0.01em; }
p, li { color: var(--ink); }
.muted { color: var(--muted); }
a { color: var(--accent); }
ul { padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; }
code { background: var(--accent-wash); padding: 1px 6px; border-radius: 5px; font-size: 14px; }

.maj { font-size: 14px; color: var(--muted); margin-top: 4px; }

.hero { padding: 56px 0 8px; }
.hero h1 { font-size: 42px; }
.hero p.chapo { font-size: 19px; color: var(--muted); max-width: 52ch; }
.points { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 34px 0; }
.point { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.point h3 { margin: 0 0 6px; font-size: 16px; }
.point p { margin: 0; color: var(--muted); font-size: 15px; }

footer { border-top: 1px solid var(--border); padding: 26px 0 50px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
footer a { color: var(--muted); }

.marque-pied { font-weight: 800; color: var(--ink); }
.copyright { margin: 10px 0 0; font-size: 13px; }