/* Pages légales (mentions légales, confidentialité) : une colonne de texte sur fond blanc, avec les
   polices du site. Les polices sont réduites aux caractères du site : outils/polices.py lit aussi ces pages. */
@font-face { font-family: "Mochiy Pop One"; src: url("assets/fonts/mochiy-pop-one.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Zen Maru Gothic"; src: url("assets/fonts/zen-maru-gothic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Zen Maru Gothic"; src: url("assets/fonts/zen-maru-gothic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #2b2a4c;
  --soft: rgba(43, 42, 76, 0.62);
  --line: rgba(43, 42, 76, 0.14);
  --shu: #e9553f;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: #fff; }
body {
  margin: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 28px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 56px) max(16px, env(safe-area-inset-left, 0px));
  color: var(--ink);
  background: #fff;
  font: 500 1rem/1.65 "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.page { max-width: 40rem; margin: 0 auto; }
.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.6rem;
}
.brand {
  font: 400 1.5rem/1 "Mochiy Pop One", "Zen Maru Gothic", system-ui, sans-serif;
  color: var(--ink);
  text-decoration: none;
  text-shadow: 0.05em 0.06em 0 var(--shu);
}
.back { font-weight: 700; font-size: 0.875rem; }
h1 { margin: 0 0 0.3rem; font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.2rem); line-height: 1.2; font-weight: 700; }
.updated { margin: 0 0 2.2rem; font-size: 0.875rem; color: var(--soft); }
h2 { margin: 2.2rem 0 0.6rem; font-size: 1.125rem; line-height: 1.3; font-weight: 700; }
p, ul, dl { margin: 0 0 1rem; }
ul { padding-left: 1.2rem; }
li { margin-bottom: 0.5rem; }
li::marker { color: var(--shu); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; }
dt { color: var(--soft); }
dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  dl { grid-template-columns: 1fr; gap: 0; }
  dd { margin-bottom: 0.6rem; }
}
a { color: inherit; text-decoration-color: var(--shu); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a:hover { color: var(--shu); }
a:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; border-radius: 3px; }
.foot { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--soft); }