/* Les pages fixes du site (parents.html, 404.html) : le papier du carnet,
   l'encre verte, les polices du jeu. Aucune image de fond, aucun script. */
@font-face { font-family: "Zen Maru Gothic"; font-weight: 500; font-display: swap; src: url(assets/polices/zen-maru-500.woff2) format("woff2"); }
@font-face { font-family: "Zen Maru Gothic"; font-weight: 700; font-display: swap; src: url(assets/polices/zen-maru-700.woff2) format("woff2"); }
@font-face { font-family: "Zen Maru Gothic"; font-weight: 900; font-display: swap; src: url(assets/polices/zen-maru-900.woff2) format("woff2"); }
@font-face { font-family: "Dela Gothic One"; font-weight: 400; font-display: swap; src: url(assets/polices/dela-gothic.woff2) format("woff2"); }
:root { --papier: #F7F3EB; --carte: #FFFDF7; --encre: #273F3A; --second: #59685F; --vert: #38634F; --sauge: #E0E9D5; --peche: #EFAF99; --bord: #D6D6C8; --framboise: #A44253; }
* { box-sizing: border-box; }
html { background: var(--papier); }
body { margin: 0; color: var(--encre); background: var(--papier); font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.6; }
main { max-width: 700px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 16px 64px; }
h1 { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: clamp(34px, 8vw, 52px); line-height: 1.1; margin: 18px 0 6px; }
.kana { font-weight: 900; color: var(--framboise); font-size: 22px; margin: 0 0 22px; }
h2 { font-weight: 900; font-size: 22px; line-height: 1.3; margin: 40px 0 10px; }
p, li { margin: 0 0 12px; }
ul { padding-left: 22px; margin: 0 0 12px; }
strong { font-weight: 900; }
a { color: var(--vert); font-weight: 900; text-underline-offset: 3px; }
a:focus-visible, .jouer:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; }
.apercu { display: block; width: 100%; height: auto; border-radius: 18px; border: 3px solid var(--encre); margin: 8px 0 8px; }
.encart { background: var(--carte); border: 2px solid var(--bord); border-radius: 18px; padding: 18px 20px; margin: 16px 0; }
.encart.sauge { background: var(--sauge); border-color: #c9d6bc; }
.encart h2:first-child { margin-top: 0; }
.jouer { display: inline-block; margin: 18px 0 6px; padding: 14px 26px; min-height: 48px; border-radius: 16px; background: var(--peche); color: var(--encre); text-decoration: none; font-weight: 900; font-size: 19px; box-shadow: 0 4px 0 #c98c76; }
.jouer:active { transform: translateY(2px); box-shadow: 0 2px 0 #c98c76; }
.pied { margin-top: 48px; font-size: 15px; color: var(--second); }
@media (prefers-reduced-motion: reduce) { .jouer:active { transform: none; } }