/* Page de présentation de NihonKotoba.
 *
 * Les couleurs sont celles de l'app : les cinq niveaux JLPT (vert N5, bleu N4,
 * orange N3, rouge N2, violet N1), l'encre du tracé et le vert des boutons.
 * Aucune police distante, aucun CDN, aucune mesure d'audience — une page qui
 * dit « l'app ne collecte rien » et charge un traceur se contredit elle-même.
 */

:root {
  --bg: #ffffff; --fg: #17171a; --muted: #62626a;
  --rule: #e6e6ec; --card: #f7f7f9;
  --accent: #34a853;          /* le vert des actions dans l'app */
  --deep: #14141a;            /* bandes sombres */
  --on-deep: #f4f4f6; --on-deep-muted: #a8a8b2;
  --n5: #34a853; --n4: #2f7de1; --n3: #ef8a17; --n2: #e0453a; --n1: #8b5cf6;
  --ink: #1c1c1e;             /* l'encre d'un tracé */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0d11; --fg: #ececf0; --muted: #9b9ba3;
    --rule: #26262e; --card: #16161c;
    --accent: #4ec26f; --deep: #08080b;
    --ink: #ececf0;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }
.wrap-narrow { max-width: 44rem; margin: 0 auto; padding: 0 1.5rem; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); }

/* --- Langues --------------------------------------------------------------
 * Les seize langues de l'app sont dans la page, et lang.js en choisit une. Sans
 * JavaScript, c'est l'anglais, complet, et le sélecteur reste caché : il ne
 * sélectionnerait rien. Aucune règle ne masque tout.
 */
html:not([data-active-lang]) [data-lang]:not([data-lang="en"]),
html[data-active-lang="fr"] [data-lang]:not([data-lang="fr"]),
html[data-active-lang="en"] [data-lang]:not([data-lang="en"]),
html[data-active-lang="es"] [data-lang]:not([data-lang="es"]),
html[data-active-lang="pt"] [data-lang]:not([data-lang="pt"]),
html[data-active-lang="de"] [data-lang]:not([data-lang="de"]),
html[data-active-lang="nl"] [data-lang]:not([data-lang="nl"]),
html[data-active-lang="ru"] [data-lang]:not([data-lang="ru"]),
html[data-active-lang="hu"] [data-lang]:not([data-lang="hu"]),
html[data-active-lang="sl"] [data-lang]:not([data-lang="sl"]),
html[data-active-lang="sv"] [data-lang]:not([data-lang="sv"]),
html[data-active-lang="ro"] [data-lang]:not([data-lang="ro"]),
html[data-active-lang="zh"] [data-lang]:not([data-lang="zh"]),
html[data-active-lang="uk"] [data-lang]:not([data-lang="uk"]),
html[data-active-lang="ar"] [data-lang]:not([data-lang="ar"]),
html[data-active-lang="el"] [data-lang]:not([data-lang="el"]),
html[data-active-lang="ja"] [data-lang]:not([data-lang="ja"]) { display: none; }

/* --- Barre de langue : un menu, seize boutons ne tiendraient pas ---------- */
.langbar {
  position: absolute; top: 0; inset-inline-end: 0;
  display: flex; padding: 1rem 1.25rem; z-index: 2;
}
html:not([data-active-lang]) .langbar { display: none; }
.langpick { position: relative; display: inline-flex; align-items: center; color: var(--on-deep-muted); }
.langpick svg {
  position: absolute;
  inset-inline-start: .6rem;
  width: 1rem; height: 1rem;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  pointer-events: none;
}
/* Le chevron : deux bords d'un carré tourné, symétrique en arabe. */
.langpick::after {
  content: "";
  position: absolute;
  inset-inline-end: .75rem;
  top: 50%;
  width: .38rem; height: .38rem;
  margin-top: -.3rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}
.langpick select {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: .85rem;
  line-height: 1.2;
  padding-block: .45rem;
  padding-inline: 2rem 1.85rem;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.langpick select:hover { border-color: var(--muted); }
.langpick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* La liste déroulante est dessinée par le système ; sur fond sombre, Chrome
 * y reprendrait la couleur claire du texte sur son fond blanc. */
.langpick option { color: #1c1c1e; background-color: #fff; }
/* Dans le héros sombre. */
.hero .langpick select {
  font-size: .82rem; padding-block: .4rem;
  color: var(--on-deep);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}
.hero .langpick select:hover { border-color: rgba(255, 255, 255, .45); }
.hero .langpick select:focus-visible { outline-color: var(--n5); }

/* --- Écritures ------------------------------------------------------------
 * L'approche serrée des titres est faite pour le latin : elle disjoint les
 * lettres liées de l'arabe et tasse les idéogrammes. Pas d'italique non plus là
 * où il n'existe pas : le navigateur le fabriquerait en penchant les glyphes.
 */
:is(h1, h2, h3, .eyebrow):is(:lang(ar), :lang(zh), :lang(ja)) { letter-spacing: normal; }
em:is(:lang(ar), :lang(zh), :lang(ja)) { font-style: normal; font-weight: 600; }

/* --- Héros ---------------------------------------------------------------
 * Le caractère 書 « écrire » en fond, avec ses dix traits dans l'ordre exact
 * de KanjiVG — la même géométrie que celle contre laquelle l'app corrige.
 * `overflow: clip` et non `hidden` : `hidden` reste défilable par programme et
 * le premier clic sur le sélecteur de langue décalait tout le bloc.
 */
.hero {
  position: relative;
  background: linear-gradient(160deg, #1b2a20 0%, #14141a 55%, #101018 100%);
  color: var(--on-deep);
  padding-block: clamp(3.5rem, 9vw, 6rem);
  overflow: clip;
}
.hero-kanji {
  position: absolute;
  inset-inline-end: -6%; top: 50%; transform: translateY(-50%);   /* à l'opposé du texte, en arabe aussi */
  width: min(46vw, 30rem); height: auto;
  opacity: .16;
  pointer-events: none;
}
.hero-kanji path {
  fill: none; stroke: #7fe0a0; stroke-width: 3.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Sur un téléphone, le texte occupe toute la largeur et passerait sur le
   filigrane : on le descend sous le texte et on l'atténue encore. */
@media (max-width: 720px) {
  .hero-kanji { top: auto; bottom: -8%; inset-inline-end: -14%; transform: none; width: 62vw; opacity: .10; }
}
.hero-inner { position: relative; max-width: 40rem; }
.eyebrow {
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--n5); margin: 0 0 .9rem;
}
.hero h1 {
  font-size: clamp(2rem, 5.4vw, 3.1rem); line-height: 1.12;
  letter-spacing: -.025em; margin: 0 0 1.1rem;
}
.hero-lede { font-size: 1.14rem; color: var(--on-deep-muted); margin: 0 0 1.5rem; }
.hero-lede strong { color: var(--on-deep); font-weight: 600; }
.hero-meta { font-size: .9rem; color: var(--on-deep-muted); margin: 0; }

/* --- Chiffres ------------------------------------------------------------ */
.stats {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.stats div { min-width: 6rem; }
.stats b {
  display: block; font-size: 1.5rem; font-weight: 650;
  letter-spacing: -.02em; color: var(--on-deep);
}
.stats span { font-size: .82rem; color: var(--on-deep-muted); }

/* --- Sections ------------------------------------------------------------ */
.section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.feature { padding-block: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--rule); }
.feature:first-of-type { border-top: none; }
.feature h2 {
  font-size: clamp(1.35rem, 3vw, 1.75rem); line-height: 1.22;
  letter-spacing: -.02em; margin: 0 0 .85rem;
}
.feature p { margin: 0 0 1rem; }
.feature p:last-child { margin-bottom: 0; }
.feature .note { color: var(--muted); font-size: .95rem; }

/* Le filet coloré sous un titre : les cinq niveaux, dans l'ordre de l'app. */
.levels {
  display: flex; height: 4px; width: 8.5rem;
  border-radius: 2px; overflow: hidden; margin-bottom: 1.1rem;
}
.levels i { flex: 1; }
.levels i:nth-child(1) { background: var(--n5); }
.levels i:nth-child(2) { background: var(--n4); }
.levels i:nth-child(3) { background: var(--n3); }
.levels i:nth-child(4) { background: var(--n2); }
.levels i:nth-child(5) { background: var(--n1); }

/* --- La correction d'un trait, montrée plutôt que décrite ---------------- */
.correction {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 14px; padding: 1.25rem; margin: 1.5rem 0 0;
}
.correction svg { width: 132px; height: 132px; flex: none; }
.correction .verdicts { flex: 1 1 15rem; min-width: 0; align-self: center; }
.verdict {
  display: flex; align-items: baseline; gap: .55rem;
  font-size: .95rem; margin-bottom: .55rem;
}
.verdict:last-child { margin-bottom: 0; }
.verdict b {
  flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 600; color: #fff;
}
.verdict.ok b { background: var(--n5); }
.verdict.warn b { background: var(--n3); }
.verdict.bad b { background: var(--n2); }

/* --- Bande sombre : ce que l'app n'est pas ------------------------------- */
.band {
  background: var(--deep); color: var(--on-deep);
  padding-block: clamp(2.5rem, 6vw, 3.75rem);
}
.band h2 { font-size: clamp(1.3rem, 3vw, 1.65rem); margin: 0 0 1rem; letter-spacing: -.02em; }
.band p { color: var(--on-deep-muted); margin: 0 0 1rem; }
.band p:last-child { margin-bottom: 0; }
.band strong { color: var(--on-deep); }

/* --- Listes de langues --------------------------------------------------- */
.langs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.langs li {
  font-size: .88rem; padding: .35rem .7rem;
  border: 1px solid var(--rule); border-radius: 999px; color: var(--muted);
}

/* --- Sources ------------------------------------------------------------- */
.sources { font-size: .92rem; color: var(--muted); }
.sources li { margin-bottom: .3rem; }

footer {
  border-top: 1px solid var(--rule);
  padding-block: 2rem 3rem;
  color: var(--muted); font-size: .85rem;
}
footer a { margin-inline-end: 1rem; }