/* Feuille commune aux pages d'assistance et de confidentialité de NihonKotoba. */

:root {
  --bg: #ffffff; --fg: #1c1c1e; --muted: #6b6b70;
  --rule: #e3e3e8; --accent: #34a853; --card: #f6f6f8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101014; --fg: #ececf0; --muted: #98989f;
    --rule: #2a2a32; --accent: #4ec26f; --card: #18181e;
  }
}

* { box-sizing: border-box; }

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

main { max-width: 44rem; margin: 0 auto; }

/* --- Barre de langue ------------------------------------------------------
 * Les seize langues de l'app sont dans la même page, et lang.js en choisit une.
 * Sans JavaScript, c'est l'anglais, complet : une politique de confidentialité
 * à moitié invisible parce qu'un script n'a pas tourné serait le pire des
 * défauts pour ce document, et seize versions bout à bout ne valent guère
 * mieux. Aucune règle ne masque tout : une langue inconnue n'en masque aucune.
 */
.langbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.25rem 0 .5rem;
}
/* Un sélecteur sans script ne sélectionnerait rien. */
html:not([data-active-lang]) .langbar { display: none; }

.langpick { position: relative; display: inline-flex; align-items: center; color: var(--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; }

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; }

/* --- É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; }

h1 { font-size: 1.9rem; line-height: 1.2; margin: 1rem 0 .3rem; letter-spacing: -.02em; }
h2 {
  font-size: 1.25rem; margin: 3rem 0 .75rem; letter-spacing: -.01em;
  padding-top: 1.75rem; border-top: 1px solid var(--rule);
}
h2:first-of-type { border-top: none; padding-top: 0; margin-top: 2.5rem; }
h3 { font-size: 1.02rem; margin: 2rem 0 .4rem; }
p { margin: 0 0 1rem; }
a { color: var(--accent); }
ul { margin: 0 0 1rem; padding-inline-start: 1.25rem; }
li { margin-bottom: .35rem; }

.date { color: var(--muted); font-size: .9rem; margin-bottom: 2rem; }
.tagline { color: var(--muted); margin-bottom: 2rem; }

.lede, .contact {
  background: var(--card);
  /* Le filet du côté où la ligne commence : à droite en arabe. */
  border-inline-start: 3px solid var(--accent);
  padding: 1rem 1.15rem;
  border-start-end-radius: 8px; border-end-end-radius: 8px;
  margin: 0 0 2rem;
}
.lede p, .contact p { margin: 0; }
.lede p + p, .contact p + p { margin-top: .75rem; }

/* Le japonais dans le texte : une famille qui a les kana et les kanji. */
.ja {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: 1.08em;
}

footer {
  margin-top: 4rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted); font-size: .85rem;
}