/* 基本情報 Étude — « cahier d’écolier japonais »
   papier 和紙, encre 墨, vermillon 朱, tampons 判子, ensō, tickets, 原稿用紙. */
:root {
  --paper: #f3ecdc;          /* fond */
  --sheet: #fbf7ee;          /* feuilles */
  --ink: #1d1b19;            /* 墨 */
  --ink-2: #4a4540;
  --muted: #857c70;
  --line: #d8cdb7;
  --rule: #c9bba0;
  --shu: #c8381f;            /* 朱 vermillon */
  --shu-soft: #f4d9cf;
  --ai: #24366b;             /* 藍 indigo */
  --ai-soft: #dfe3ee;
  --matcha: #5d7a3a;
  --matcha-soft: #e2e8d2;
  --kin: #b08a2e;            /* or */
  --lv0: #ddd2bd; --lv1: #d9a441; --lv2: #5a7fb0; --lv3: #4e7a3a;
  --h1: #eadfc6; --h2: #dbb98a; --h3: #c9774e; --h4: #a8341f;
  --press: 4px 4px 0 var(--ink);
  --press-sm: 2px 2px 0 var(--ink);
  --stub: #24366b; --shadow-c: var(--ink);
  --hand: "Klee One", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --jp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ui: "Zen Kaku Gothic New", "Hiragino Sans", -apple-system, "Segoe UI", sans-serif;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='%2324366b' stroke-width='.8' opacity='.5'%3E%3Cpath d='M0 20a20 20 0 0 1 40 0M6 20a14 14 0 0 1 28 0M12 20a8 8 0 0 1 16 0M-20 10a20 20 0 0 1 40 0M-14 10a14 14 0 0 1 28 0M-8 10a8 8 0 0 1 16 0M20 10a20 20 0 0 1 40 0M26 10a14 14 0 0 1 28 0M32 10a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17150f; --sheet: #211e17; --ink: #ece4d2; --ink-2: #c9bfab; --muted: #8f8676;
    --line: #3a352b; --rule: #4a4334; --shu: #e2573a; --shu-soft: #3d1f17; --ai: #9db0e6; --ai-soft: #222a40;
    --matcha: #9cbf6e; --matcha-soft: #263020; --kin: #d6b25a;
    --lv0: #3a352b; --lv1: #c08e33; --lv2: #5d86bd; --lv3: #6a9b4d;
    --h1: #2b271e; --h2: #5b4630; --h3: #8e4d32; --h4: #d24a2e;
    --press: 4px 4px 0 #000; --press-sm: 2px 2px 0 #000; --stub: #2a3a6e; --shadow-c: #000;
  }
}
:root[data-theme="dark"] {
  --paper: #17150f; --sheet: #211e17; --ink: #ece4d2; --ink-2: #c9bfab; --muted: #8f8676;
  --line: #3a352b; --rule: #4a4334; --shu: #e2573a; --shu-soft: #3d1f17; --ai: #9db0e6; --ai-soft: #222a40;
  --matcha: #9cbf6e; --matcha-soft: #263020; --kin: #d6b25a;
  --lv0: #3a352b; --lv1: #c08e33; --lv2: #5d86bd; --lv3: #6a9b4d;
  --h1: #2b271e; --h2: #5b4630; --h3: #8e4d32; --h4: #d24a2e;
  --press: 4px 4px 0 #000; --press-sm: 2px 2px 0 #000; --stub: #2a3a6e; --shadow-c: #000;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font: 15px/1.65 var(--ui);
  background: var(--noise), var(--paper);
  min-height: 100vh;
}
body::after { /* vagues 青海波 dans le coin */
  content: ""; position: fixed; right: 0; bottom: 0; width: 46vw; height: 34vh; pointer-events: none; z-index: -1;
  background: var(--seigaiha); opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse at 100% 100%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse at 100% 100%, #000 10%, transparent 70%);
}
.jp { font-family: var(--jp); }
.hand { font-family: var(--hand); font-weight: 600; }
button { font: inherit; color: inherit; cursor: pointer; }
h1 { font: 700 1.75rem/1.3 var(--jp); margin: .2em 0 .7em; letter-spacing: .01em; }
h1 .jp, h1 small { font-weight: 500; }
h1 small, h2 small { font: 400 .5em var(--ui); color: var(--muted); margin-left: .6em; letter-spacing: .04em; }
h2 { font-size: 1.3rem; margin: 0 0 .5em; }
h2 small { display: block; margin: 2px 0 0; font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; }
h3 { font-size: 1rem; margin: 0 0 .7em; }
h4 { font: 700 .72rem var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--shu); margin: 0 0 .4em; }
code { background: var(--ai-soft); padding: 1px 5px; font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.good { color: var(--matcha); }
.bad { color: var(--shu); }
.center { text-align: center; justify-content: center; }
mark { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--shu) 28%, transparent) 55%); color: inherit; font-weight: 700; padding: 0 1px; }
kbd { font: 600 10px var(--ui); border: 1px solid currentColor; padding: 0 4px; margin-left: 8px; opacity: .55; border-radius: 2px; }
::selection { background: var(--shu); color: var(--sheet); }

/* ───────── En-tête ───────── */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 22px; padding: 10px 28px;
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 2px solid var(--ink); }
.brand { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.hanko { width: 40px; height: 40px; display: grid; place-items: center; text-align: center; background: var(--shu); color: var(--sheet);
  font: 700 12px/1.05 var(--jp); border-radius: 4px; transform: rotate(-4deg); box-shadow: inset 0 0 0 2px var(--shu), inset 0 0 0 3.5px var(--sheet); filter: url(#brush); }
.brand-t { font: 700 1.05rem var(--jp); display: flex; align-items: baseline; gap: 6px; }
.brand-t b { font: 700 .7rem var(--ui); color: var(--sheet); background: var(--ink); padding: 1px 6px; letter-spacing: .08em; }
.top nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.tab { position: relative; background: none; border: 0; padding: 6px 12px 8px; display: flex; flex-direction: column; align-items: center; line-height: 1.15; color: var(--ink-2); }
.tab .jp { font-size: 1.1rem; font-weight: 700; }
.tab .tfr { font-size: .64rem; color: var(--muted); letter-spacing: .06em; }
.tab:hover .jp { color: var(--shu); }
.tab.on { color: var(--ink); }
.tab.on::after { /* trait de pinceau */
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 5px; background: var(--shu);
  border-radius: 40% 60% 70% 30% / 60% 40% 60% 40%; transform: rotate(-1.5deg); filter: url(#brush); }
button.save { border: 1.5px solid var(--ink); background: var(--sheet); padding: 5px 12px; font-size: .78rem; font-weight: 700; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--press-sm); }
button.save.ok { color: var(--matcha); } button.save.err { color: var(--shu); }
button.save.warn { background: var(--shu); color: var(--sheet); border-color: var(--shu); box-shadow: 2px 2px 0 var(--ink); }
button.save:active { transform: translate(2px, 2px); box-shadow: none; }

main { max-width: 1040px; margin: 0 auto; padding: 32px 28px 100px; }
main.run { max-width: 780px; }
.loading { padding: 60px; text-align: center; font-family: var(--hand); }

/* ───────── Feuilles, boutons ───────── */
.card, .sheet { position: relative; background: var(--sheet); border: 1.5px solid var(--ink); padding: 22px 24px; margin-bottom: 22px; box-shadow: var(--press); }
.btn { color: var(--ink); background: var(--sheet); border: 1.5px solid var(--ink); padding: 9px 18px; font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--press-sm); transition: transform .08s, box-shadow .08s; }
.btn:hover { background: var(--paper); }
.btn:active { transform: translate(2px, 2px); box-shadow: none; }
.btn.primary { background: var(--ink); color: var(--sheet); box-shadow: 3px 3px 0 var(--shu); }
.btn.primary:hover { background: var(--shu); box-shadow: 3px 3px 0 var(--ink); }
.btn.primary:active { box-shadow: none; }
.btn.big { padding: 12px 26px; font: 700 1.1rem var(--hand); margin-top: 10px; }
.btn.big span { font: 500 .7rem var(--ui); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.btn.sm { padding: 3px 10px; font-size: .82rem; }
.link { background: none; border: 0; color: var(--ai); padding: 4px 0; font-weight: 700; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: color-mix(in srgb, var(--ai) 40%, transparent); text-underline-offset: 4px; }
.icon-btn { background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 50%; width: 38px; height: 38px; font-size: 15px; flex: none; box-shadow: var(--press-sm); }
.icon-btn.sm { width: 30px; height: 30px; font-size: 12px; }
.icon-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.row.end { justify-content: flex-end; }
.pill { display: inline-flex; align-items: center; gap: 4px; font: 700 .7rem var(--ui); letter-spacing: .06em; padding: 2px 8px; border: 1.5px solid currentColor; color: var(--ai); white-space: nowrap; }
.pill.good { color: var(--matcha); } .pill.bad { color: var(--shu); }
.pill.lv1 { color: var(--lv1); } .pill.lv2 { color: var(--lv2); } .pill.lv3 { color: var(--lv3); }
.tag { font: 700 .7rem var(--jp); color: var(--sheet); background: var(--shu); padding: 0 5px; margin: 0 6px 0 12px; }
.tag:first-child { margin-left: 0; }

/* Tampons 判子 */
.stamp { --r: -6deg; display: inline-grid; place-items: center; min-width: 2.3em; height: 2.3em; padding: 0 .45em; color: var(--shu);
  font: 700 .95rem/1 var(--jp); border: 2.5px solid currentColor; border-radius: 50%; transform: rotate(var(--r));
  box-shadow: inset 0 0 0 1.5px var(--sheet), inset 0 0 0 3px currentColor; opacity: .9; filter: url(#brush); white-space: nowrap; }
.stamp.ok { color: var(--matcha); }
.stamp.grey { color: var(--muted); }
.stamp.big { position: absolute; right: 24px; top: 18px; font-size: 2rem; width: 2.4em; height: 2.4em; }

/* Champs */
.field { margin: 18px 0; }
.field > label { display: block; font: 700 .78rem var(--ui); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; color: var(--ink-2); }
.seg { display: inline-flex; border: 1.5px solid var(--ink); background: var(--sheet); box-shadow: var(--press-sm); }
.seg.wrap { flex-wrap: wrap; }
.seg button, .seg .seg-date { border: 0; background: none; padding: 7px 14px; border-right: 1.5px solid var(--ink); font-size: .88rem; font-weight: 500; }
.seg button:last-child, .seg .seg-date:last-child { border-right: 0; }
.seg button:hover { background: var(--paper); }
.seg button.on, .seg .seg-date.on { background: var(--ink); color: var(--sheet); }
.seg-date { display: inline-flex; gap: 6px; align-items: center; }
.seg-date input { font: inherit; border: 1px solid var(--line); padding: 2px 4px; background: var(--sheet); color: var(--ink); }
input[type=number] { width: 64px; font: inherit; padding: 4px 6px; border: 1.5px solid var(--ink); background: var(--sheet); color: var(--ink); }
label.num { display: inline-flex; gap: 6px; align-items: center; font-size: .9rem; }
textarea, #search { width: 100%; font: 15px/2 var(--hand); padding: 8px 12px; border: 1.5px solid var(--ink); color: var(--ink);
  background: repeating-linear-gradient(transparent 0 29px, var(--rule) 29px 30px), var(--sheet); background-attachment: local; }
#search { font-family: var(--ui); line-height: 1.6; background: var(--sheet); box-shadow: var(--press-sm); }
input[type=range] { width: 240px; accent-color: var(--shu); }

/* ───────── Accueil ───────── */
.hero { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: stretch; margin-bottom: 30px; }
/* 日めくり : calendrier à arracher */
.himekuri { position: relative; background: var(--sheet); border: 1.5px solid var(--ink); text-align: center;
  box-shadow: 5px 5px 0 -1px var(--sheet), 5px 5px 0 .5px var(--ink), 9px 9px 0 .5px var(--shadow-c); /* pages empilées */
  padding: 26px 12px 14px; display: flex; flex-direction: column; align-items: center; transform: rotate(-1.2deg); }
.himekuri::before { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: -1.5px; height: 16px; background: var(--ink); }
.hm-rings { position: absolute; top: 4px; display: flex; gap: 70px; }
.hm-rings i { width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.hm-top { display: flex; justify-content: space-between; width: 100%; font: 700 .7rem var(--ui); letter-spacing: .08em; color: var(--muted); }
.hm-month { font: 700 1.3rem var(--jp); margin-top: 4px; }
.hm-month small { font-size: .7em; }
.hm-day { font: 700 5.6rem/1 var(--jp); letter-spacing: -.04em; color: var(--ink); margin: 2px 0 2px; }
.hm-wd { font: 700 1rem var(--hand); color: var(--sheet); background: var(--shu); padding: 0 12px; }
.hm-foot { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--rule); width: 100%; font: 600 .82rem var(--hand); }
.hm-foot b { font: 700 1.5rem var(--jp); color: var(--shu); margin: 0 3px; }

.sheet.lesson { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; padding: 26px 30px 26px 54px; margin: 0; overflow: hidden; }
.sheet-side { position: absolute; left: 0; top: 0; bottom: 0; width: 30px; background: var(--ink); color: var(--sheet); writing-mode: vertical-rl;
  font: 700 .82rem var(--jp); letter-spacing: .4em; display: flex; align-items: center; justify-content: center; }
.sheet.lesson.done .sheet-side { background: var(--matcha); }
.enso { position: relative; width: 150px; height: 150px; }
.enso svg { width: 100%; height: 100%; overflow: visible; }
.enso circle { fill: none; stroke-linecap: round; }
.enso-ghost { stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 2 4; }
.enso-ink { stroke: var(--ink); stroke-width: 7; filter: url(#brush); animation: draw 1.1s cubic-bezier(.6, 0, .2, 1) both; }
.enso-ink.thin { stroke-width: 2.2; opacity: .5; }
@keyframes draw { from { stroke-dashoffset: 280; } to { stroke-dashoffset: 0; } }
.enso-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.enso-in b { font: 700 2.6rem var(--jp); letter-spacing: -.03em; }
.enso-in span { font: 600 .9rem var(--hand); color: var(--shu); margin-top: 4px; }
.lesson-body h2 { font-size: 1.6rem; margin-bottom: 10px; }
.timetable { list-style: none; margin: 0 0 6px; padding: 0; border-top: 1.5px solid var(--ink); }
.timetable li { display: grid; grid-template-columns: 82px 1fr auto auto; gap: 12px; align-items: baseline; padding: 7px 2px; border-bottom: 1px solid var(--rule); }
.timetable li.off { opacity: .4; }
.tt-jp { font: 700 1rem var(--hand); }
.tt-fr { font-size: .78rem; color: var(--muted); letter-spacing: .04em; }
.tt-per { display: flex; gap: 6px; }
.tt-per i { font: 500 .72rem var(--ui); font-style: normal; color: var(--ink-2); border: 1px solid var(--rule); padding: 0 5px; }
.tt-per i::first-letter { font-family: var(--jp); font-weight: 700; color: var(--shu); }
.timetable b { font: 700 1.35rem var(--jp); min-width: 2.2ch; text-align: right; }

.alert { display: flex; gap: 18px; border-color: var(--shu); box-shadow: 4px 4px 0 var(--shu); }
.alert p { margin: .4em 0; }
.alert-mark { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--shu); color: var(--sheet); font: 700 1.6rem var(--jp); transform: rotate(45deg); margin: 6px; }
.alert-mark::first-line { }

/* Tickets 切符 */
.tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 30px; }
.ticket { position: relative; display: grid; grid-template-columns: 58px 1fr; text-align: left; padding: 0; border: 0; background: none;
  filter: drop-shadow(4px 4px 0 var(--shadow-c)); transition: transform .15s; }
.ticket:hover { transform: translateY(-3px) rotate(-.6deg); }
.ticket > span { background: var(--sheet); border: 1.5px solid var(--ink); }
.ticket::before, .ticket::after { /* encoches du ticket */
  content: ""; position: absolute; left: 49px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); z-index: 2; }
.ticket::before { top: -10px; clip-path: inset(50% 0 0 0); }
.ticket::after { bottom: -10px; clip-path: inset(0 0 50% 0); }
.t-stub { position: relative; border-right: 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 0 12px;
  background: var(--stub) !important; color: #f3ecdc; }
.t-stub::after { content: ""; position: absolute; right: -1px; top: 12px; bottom: 12px; border-right: 2px dashed color-mix(in srgb, #f3ecdc 60%, transparent); }
.t-kanji { font: 600 2.1rem/1 var(--hand); }
.t-v .t-kanji { color: #c4e09a; } .t-k .t-kanji { color: #ffb4a0; } .t-g .t-kanji { color: #c9d4ff; }
.t-no { writing-mode: vertical-rl; font: 700 .62rem var(--ui); letter-spacing: .18em; opacity: .75; }
.t-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 14px 18px; position: relative; overflow: hidden; border-left: 0 !important; }
.t-head { display: flex; align-items: baseline; gap: 8px; }
.t-jp { font-size: 1.45rem; font-weight: 700; }
.t-fr { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.t-n b { font: 700 1.8rem var(--jp); }
.t-n small { color: var(--muted); margin-left: 4px; }
.t-meta { font-size: .78rem; color: var(--ink-2); }
.t-status { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.t-status .stamp { font-size: .78rem; }
.st-fr { font-size: .74rem; font-weight: 700; color: var(--ink-2); }

.lvbar { display: flex; height: 9px; background: repeating-linear-gradient(90deg, var(--lv0) 0 6px, transparent 6px 8px); border: 1px solid var(--ink); }
.lvbar span { display: block; height: 100%; }
.lv1 { background: var(--lv1); } .lv2 { background: var(--lv2); } .lv3 { background: var(--lv3); } .lv0 { background: var(--lv0); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border: 1px solid var(--ink); vertical-align: -1px; }

/* がんばりカード : carte de tampons */
.stampcard { background: var(--sheet); border: 1.5px solid var(--ink); box-shadow: var(--press); padding: 18px 22px 22px; position: relative;
  background-image: linear-gradient(90deg, transparent 0 8px, var(--shu) 8px 9.5px, transparent 9.5px); }
.sc-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding-left: 10px; }
.sc-head h3 { font-size: 1.35rem; margin: 0; }
.sc-streak { margin-left: auto; font: 600 .9rem var(--hand); }
.sc-streak b { font: 700 1.6rem var(--jp); color: var(--shu); margin-right: 3px; }
.sc-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1.5px solid var(--ink); margin-left: 10px; }
.sc-cell { display: flex; flex-direction: column; align-items: center; padding: 6px 2px 8px; border-right: 1px solid var(--ink); }
.sc-cell:last-child { border-right: 0; }
.sc-cell.today { background: color-mix(in srgb, var(--kin) 14%, transparent); }
.sc-wd { font: 700 1rem var(--jp); border-bottom: 1px solid var(--rule); width: 100%; text-align: center; padding-bottom: 4px; }
.sc-wd small { font: 500 .66rem var(--ui); color: var(--muted); margin-left: 4px; }
.sc-slot { height: 64px; display: grid; place-items: center; }
.sc-slot .stamp { font-size: 1.45rem; }
.sc-slot .stamp.grey { font-size: .95rem; }
.sc-min { font-size: .7rem; color: var(--muted); min-height: 1em; }

/* ───────── Modules ───────── */
.mod-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.mod-head > div:first-child { flex: 1; min-width: 260px; }
.mod-head h1 .jp { font-size: 2.2rem; margin-right: 6px; }
.filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
h3.cat { margin: 28px 0 10px; font: 700 1.05rem var(--jp); display: flex; align-items: center; gap: 10px; }
h3.cat::before { content: ""; width: 14px; height: 14px; background: var(--shu); transform: rotate(45deg); }
.glist, .vlist { display: grid; gap: 0; border-top: 1.5px solid var(--ink); }
.gitem, .vrow { display: grid; gap: 12px; align-items: center; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 9px 10px; }
.gitem { grid-template-columns: 14px 34px minmax(150px, 270px) 1fr; }
.vrow { grid-template-columns: 14px minmax(90px, 160px) minmax(100px, 180px) 1fr; }
.gitem:hover, .vrow:hover { background: var(--sheet); }
.gitem .jp { font-size: 1.08rem; font-weight: 700; }
.gitem .num { font: 700 .78rem var(--jp); color: var(--shu); }
.dot { width: 11px; height: 11px; display: inline-block; border: 1.5px solid var(--ink); border-radius: 50%; }
.vrow .w { font: 700 1.12rem var(--jp); } .vrow .r { color: var(--ink-2); font-family: var(--jp); } .vrow .mm { color: var(--muted); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 0; border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); }
.ktile { aspect-ratio: 1; font: 600 1.7rem var(--hand); border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--sheet); position: relative;
  background-image: linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line));
  background-size: 1px 100%, 100% 1px; background-position: center; background-repeat: no-repeat; }
.ktile::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--lv0); }
.ktile.lv1::after { background: var(--lv1); } .ktile.lv2::after { background: var(--lv2); } .ktile.lv3::after { background: var(--lv3); }
.ktile.lv0, .ktile.lv1, .ktile.lv2, .ktile.lv3 { background-color: var(--sheet); }
.ktile:hover { background-color: var(--shu-soft); }
.pager { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 20px; color: var(--muted); }
.item-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.stat-line { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; font-size: .86rem; color: var(--ink-2); }

/* Leçon de grammaire */
.glesson { position: relative; background: var(--sheet); border: 1.5px solid var(--ink); padding: 26px 28px 22px 52px; box-shadow: var(--press); }
.glesson::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 1.5px; background: var(--shu); }
.ex .glesson { box-shadow: none; border: 0; padding: 0 0 0 26px; background: none; }
.ex .glesson::before { left: 4px; }
.g-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .82rem; }
.g-pattern { font: 600 2.4rem/1.25 var(--hand); margin: 12px 0 2px; color: var(--shu); }
.g-sens { font: 700 1.18rem var(--jp); margin: 6px 0 16px; }
.g-box { border-top: 1px dashed var(--rule); padding: 14px 0 6px; }
.g-box p { margin: 0 0 6px; }
.g-box.warn { border: 1.5px solid var(--kin); background: color-mix(in srgb, var(--kin) 8%, transparent); padding: 12px 14px; margin: 12px 0 4px; }
.g-box.warn h4 { color: var(--kin); }
.exline { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; }
.exline .jp { font-size: 1.16rem; }
.fr-trad { color: var(--muted); font-size: .88rem; }

/* ───────── Session / exercices ───────── */
.run-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.run-title { font: 700 1.15rem var(--hand); }
.timer { font: 700 1.1rem var(--jp); color: var(--shu); font-variant-numeric: tabular-nums; }
.progress { height: 10px; border: 1.5px solid var(--ink); background: var(--sheet); margin: 10px 0 18px; position: relative; }
.progress span { display: block; height: 100%; background: var(--shu); transition: width .35s; }
.progress.ruler { background: repeating-linear-gradient(90deg, transparent 0 9px, var(--rule) 9px 10px), var(--sheet); }
.ex { padding: 24px 28px 26px 58px; overflow: hidden; }
.ex::before { /* marge rouge du cahier */
  content: ""; position: absolute; left: 36px; top: 0; bottom: 0; width: 1.5px; background: var(--shu); opacity: .7; }
.ex-tag { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; font-size: .82rem; }
.pill.mod-v { color: var(--matcha); } .pill.mod-k { color: var(--shu); } .pill.mod-g { color: var(--ai); }
.pill.stage-fix { background: var(--shu); color: var(--sheet); border-color: var(--shu); }
.pill.stage-test { color: var(--kin); }
.pill.stage-learn { background: var(--matcha); color: var(--sheet); border-color: var(--matcha); }
.q-help { color: var(--ink-2); font: 600 .92rem var(--hand); margin: 0 0 12px; }
.big-jp { font: 700 2.8rem var(--jp); text-align: center; margin: 14px 0 22px; letter-spacing: .05em; }
.big-jp u { text-decoration: none; background: linear-gradient(transparent 70%, color-mix(in srgb, var(--shu) 35%, transparent) 70%); }
.big-kanji { font: 600 6rem/1.1 var(--hand); text-align: center; margin: 4px auto 16px; width: 1.5em; height: 1.5em; display: grid; place-items: center;
  background: linear-gradient(var(--shu-soft), var(--shu-soft)) center / 100% 1px no-repeat, linear-gradient(var(--shu-soft), var(--shu-soft)) center / 1px 100% no-repeat, var(--sheet);
  border: 1.5px solid var(--shu); }
.big-fr { font: 700 1.35rem var(--jp); text-align: center; margin: 18px 0 22px; }
/* 原稿用紙 sous les phrases */
.sentence { font: 500 1.3rem/2.2 var(--jp); margin: 8px 0 20px; padding: 6px 10px;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(2.2rem - 1px), color-mix(in srgb, var(--shu) 22%, transparent) calc(2.2rem - 1px) 2.2rem),
                    repeating-linear-gradient(transparent 0 calc(2.86rem - 1px), color-mix(in srgb, var(--shu) 30%, transparent) calc(2.86rem - 1px) 2.86rem);
  border: 1px solid color-mix(in srgb, var(--shu) 40%, transparent); }
.sentence.small { font-size: 1.05rem; margin: 8px 0; background: none; border: 0; padding: 0; line-height: 1.9; }
.blank { display: inline-block; min-width: 4.4em; color: var(--shu); text-align: center; font-weight: 700; border-bottom: 2.5px solid var(--shu); line-height: 1.3; }
/* Feuille de réponses マークシート */
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--ink); }
.opts.big .opt { font-size: 2.1rem; justify-content: center; }
.opt { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
  background: var(--sheet); font-size: 1.05rem; min-height: 58px; }
.opt:nth-child(2n) { border-right: 0; }
.opt:nth-last-child(-n+2) { border-bottom: 0; }
.bubble { flex: none; width: 30px; height: 30px; display: grid; place-items: center; font: 500 1.15rem var(--jp); color: var(--muted); border-radius: 50%; transition: background .1s; }
.opt:hover:not(:disabled) .bubble { background: var(--ink); color: var(--sheet); }
.opt:hover:not(:disabled) { background: var(--paper); }
.opt.ko .bubble { background: var(--ink); color: var(--sheet); }
.opt.ok { background: color-mix(in srgb, var(--shu) 6%, var(--sheet)); }
.opt.dim { color: var(--muted); }
.opt:disabled { cursor: default; }
.opt-t { position: relative; z-index: 1; }
.mark { position: absolute; pointer-events: none; z-index: 2; fill: none; stroke: var(--shu); stroke-linecap: round; stroke-linejoin: round; filter: url(#brush); }
.mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ink .55s .05s cubic-bezier(.5, 0, .2, 1) forwards; }
.hanamaru { left: 4px; top: 50%; width: 66px; height: 66px; margin-top: -33px; stroke-width: 4.5; }
.hanamaru .petal { stroke-width: 3; animation-delay: .45s; }
.batsu { right: 14px; top: 50%; width: 50px; height: 50px; margin-top: -25px; stroke-width: 7; }
@keyframes ink { to { stroke-dashoffset: 0; } }
.fb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 18px 0 8px; padding: 6px 0; border-bottom: 1.5px solid currentColor; }
.fb-jp { font: 700 1.8rem var(--hand); white-space: nowrap; }
.fb.ok { color: var(--shu); }
.fb.ko { color: var(--ink); }
.fb.ko .fb-jp { color: var(--muted); }
.ans-card { position: relative; text-align: center; padding: 16px; margin: 14px 0; border: 1px dashed var(--rule); background: color-mix(in srgb, var(--paper) 50%, var(--sheet)); }
.ans-card.left { text-align: left; }
.ans-card .icon-btn { position: absolute; top: 12px; right: 12px; }
.ans-word { font: 700 2rem var(--jp); } .ans-kanji { font: 600 3.2rem/1.2 var(--hand); }
.ans-read { font: 500 1.15rem var(--jp); color: var(--ink-2); }
.ans-mean { margin-top: 6px; }
.ans-pattern { font: 600 1.6rem var(--hand); color: var(--shu); }
.ans-form { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.mini-words { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 10px; font-size: 1.05rem; }
.mini-words small { display: block; font-size: .7rem; color: var(--muted); font-family: var(--ui); }
.grades { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid var(--ink); }
.grades button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 0; border-right: 1px solid var(--rule); background: var(--sheet); font-weight: 700; font-size: .86rem; }
.grades button:last-child { border-right: 0; }
.grades button .jp { font-size: 1.6rem; line-height: 1; }
.grades button:hover { background: var(--paper); }
.grades .g0 .jp { color: var(--shu); } .grades .g1 .jp { color: var(--kin); } .grades .g2 .jp { color: var(--ai); } .grades .g3 .jp { color: var(--matcha); }
.sentence.order { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.slot { min-width: 76px; padding: 2px 10px; border: 0; border-bottom: 2px solid var(--ink); background: var(--sheet); font: 600 1.1rem var(--jp); line-height: 1.8; }
.slot.star { border-bottom-color: var(--shu); color: var(--shu); }
.slot.ok { background: var(--matcha-soft); } .slot.ko { background: var(--shu-soft); }
.pieces { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 14px 0; }
.piece { padding: 10px 16px; border: 1.5px solid var(--ink); background: var(--sheet); font-size: 1.1rem; font-weight: 600; box-shadow: var(--press-sm); }
.piece:nth-child(odd) { transform: rotate(-1.2deg); } .piece:nth-child(even) { transform: rotate(1deg); }
.piece:hover:not(:disabled) { background: var(--paper); }
.piece:disabled { opacity: .25; box-shadow: none; }
.learn-head { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.learn-head .big-jp, .learn-head .big-kanji { margin: 4px 0; }
.learn .ans-read, .learn-read { text-align: center; font-size: 1.2rem; }
.learn-mean { text-align: center; font-size: 1.12rem; margin: 12px 0 18px; }
.learn-sub { border-top: 1px dashed var(--rule); padding-top: 12px; }
.kline, .wline { display: grid; grid-template-columns: 50px 1fr auto; gap: 12px; align-items: center; padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 50%, transparent); }
.wline { grid-template-columns: minmax(80px, 130px) minmax(80px, 140px) 1fr auto; }
.kchar { font: 600 1.7rem var(--hand); }
.finish { text-align: center; }
.score { font: 700 3.6rem var(--jp); color: var(--shu); margin: 0; }
.score small { display: block; font: 500 1rem var(--ui); color: var(--muted); }
.errs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.weak { display: flex; justify-content: space-between; gap: 10px; align-items: center; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 7px 4px; }
.weak:hover { background: var(--paper); }
.errs .weak { width: auto; border: 1.5px solid var(--ink); padding: 4px 10px; box-shadow: var(--press-sm); background: var(--sheet); }

/* ───────── Progression ───────── */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); border: 1.5px solid var(--ink); background: var(--sheet); box-shadow: var(--press); margin-bottom: 24px; }
.kpi { padding: 14px 10px; text-align: center; border-right: 1px solid var(--rule); }
.kpi:last-child { border-right: 0; }
.kpi b { display: block; font: 700 1.7rem var(--jp); color: var(--shu); }
.kpi span { font-size: .74rem; color: var(--muted); letter-spacing: .04em; }
table.plan { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: .9rem; }
table.plan th, table.plan td { padding: 8px 10px; border-bottom: 1px solid var(--rule); text-align: right; }
table.plan th:first-child { text-align: left; font-weight: 500; }
table.plan thead th { font-size: .68rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1.5px solid var(--ink); }
table.plan td { font: 700 1rem var(--jp); }
.bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; height: 140px; align-items: end; border-bottom: 1.5px solid var(--ink); }
.bars .b { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bars .b span { width: 70%; background: var(--shu); min-height: 2px; }
.bars .b i { font-style: normal; font-size: .68rem; color: var(--muted); }
.heat { display: grid; grid-template-rows: repeat(7, 14px); grid-auto-flow: column; grid-auto-columns: 14px; gap: 3px; overflow-x: auto; }
.heat i, .heat-legend i { width: 14px; height: 14px; display: inline-block; }
.h0 { background: var(--paper); outline: 1px solid var(--line); } .h1 { background: var(--h1); } .h2 { background: var(--h2); } .h3 { background: var(--h3); } .h4 { background: var(--h4); }
.heat-legend { display: flex; gap: 3px; align-items: center; font-size: .74rem; color: var(--muted); margin-top: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 22px; }
.grid3 .card { margin: 0; }
.preview { border: 1.5px dashed var(--ink); padding: 14px 18px; margin: 18px 0; background: var(--paper); }
.onboard p { max-width: 62ch; }
.onboard h1 { font-family: var(--hand); font-size: 2.2rem; }
.danger { border-color: var(--shu); box-shadow: 4px 4px 0 var(--shu); }
.danger h3 { color: var(--shu); }

/* Compte */
.acct { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--shu); color: var(--sheet); display: grid; place-items: center; font: 700 1.4rem var(--jp); filter: url(#brush); }
.login { max-width: 580px; }
.auth-btns { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin: 20px 0; }
.g-btn { min-height: 44px; }
.btn.auth { width: 280px; justify-content: center; padding: 10px 16px; }
.btn.auth.apple { background: #000; color: #fff; border-color: #000; }
.btn.auth.ms { background: #fff; color: #5e5e5e; border-color: #8c8c8c; }
.ms-logo { display: inline-grid; grid-template-columns: 8px 8px; gap: 2px; margin-right: 6px; }
.ms-logo i { width: 8px; height: 8px; display: block; }
.ms-logo i:nth-child(1) { background: #f25022; } .ms-logo i:nth-child(2) { background: #7fba00; }
.ms-logo i:nth-child(3) { background: #00a4ef; } .ms-logo i:nth-child(4) { background: #ffb900; }
#auth-msg:empty { display: none; }

@media (prefers-reduced-motion: reduce) { .enso-ink, .mark path { animation: none; stroke-dashoffset: 0; } .ticket:hover { transform: none; } }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .himekuri { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 14px; transform: none; padding-top: 24px; }
  .hm-top { order: -1; }
  .hm-day { font-size: 3.6rem; }
  .hm-foot { flex-basis: 100%; }
  .tickets { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .top { flex-wrap: wrap; padding: 8px 16px; gap: 10px; }
  .top nav { order: 3; flex: 1 0 100%; justify-content: space-between; }
  .brand { margin-right: auto; }
  .tab .tfr { display: none; }
  .tab { flex: 1; padding: 4px 2px 8px; }
  .tab .jp { white-space: nowrap; font-size: 1rem; }
  main { padding: 20px 16px 70px; }
  .sheet.lesson { grid-template-columns: 1fr; justify-items: center; padding: 22px 18px 22px 44px; }
  .enso { width: 120px; height: 120px; }
  .lesson-body { width: 100%; }
  .timetable li { grid-template-columns: 70px 1fr auto; }
  .tt-per { display: none; }
  .grid3 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi { border-bottom: 1px solid var(--rule); }
  .opts { grid-template-columns: 1fr; }
  .opt { border-right: 0 !important; border-bottom: 1px solid var(--rule) !important; }
  .opt:last-child { border-bottom: 0 !important; }
  .gitem { grid-template-columns: 12px 26px 1fr; }
  .gitem .muted { grid-column: 3; }
  .vrow { grid-template-columns: 12px 1fr 1fr; }
  .vrow .mm { grid-column: 2 / 4; }
  .grades { grid-template-columns: 1fr 1fr; }
  .big-jp { font-size: 2.1rem; }
  table.plan th, table.plan td { padding: 6px 4px; }
  .ex { padding: 18px 16px 20px 38px; }
  .ex::before { left: 22px; }
  .sc-slot { height: 48px; }
  .sc-wd small { display: none; }
}
.ex-aside { text-align: right; margin-top: -8px; }
.ex-aside button { background: none; border: 0; padding: 4px 0; font-size: .74rem; color: var(--muted); opacity: .75; }
.ex-aside button:hover { color: var(--shu); opacity: 1; text-decoration: underline; }

/* Sélecteur de langue */
.lang { display: inline-flex; border: 1.5px solid var(--ink); background: var(--sheet); box-shadow: var(--press-sm); flex: none; }
.lang button { border: 0; background: none; padding: 4px 9px; font: 700 .72rem var(--ui); letter-spacing: .08em; color: var(--muted); }
.lang button.on { background: var(--ink); color: var(--sheet); }
@media (max-width: 760px) { .lang { order: 2; } }

/* Double journée */
.stamp.gold { color: var(--kin); }
.dose { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; }
.dose-l { font: 700 .72rem var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dose .seg button .jp { color: var(--kin); font-weight: 700; }
.dose .seg button.on .jp { color: inherit; }
.badge-x2 { display: inline-block; font: 700 .8rem var(--ui); color: var(--sheet); background: var(--kin); padding: 1px 7px; transform: rotate(-4deg); vertical-align: middle; }

/* 擬似言語 — le programme du 科目B */
.prog {
    margin: 0;
    padding: 12px 14px;
    overflow-x: auto;
    border-radius: 6px;
    background: #1f1b16;
    color: #f0e6d8;
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre;
    tab-size: 2;
}
.prog.zu { background: #2b241c; color: #e8dcc8; line-height: 1.45; }
.prog.zu + .prog { margin-top: 10px; }
.q-enonce { margin: 12px 0 0; font-weight: 600; }
.ans-card.b .prog { font-size: 12px; }
.trace { width: 100%; border-collapse: collapse; font-size: 13px; }
.trace th, .trace td { border: 1px solid #c9bda9; padding: 4px 10px; text-align: center; }
.trace th { background: #efe7d9; font-weight: 600; }
.piege { margin-top: 10px; font-size: 13px; }
.sous-cat { margin: 18px 0 8px; font: 700 .72rem var(--ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--shu); display: flex; align-items: center; gap: 8px; }
.sous-cat::before { content: ""; width: 7px; height: 7px; background: var(--shu); transform: rotate(45deg); flex: none; }

/* ── Premier écran : le choix de la langue ──
   Dessiné comme une estampe de l’ère Meiji : double filet vermillon autour de
   la planche, et 題簽 — le cartouche de titre vertical — en bordure gauche. */
.langpick { max-width: 560px; margin: 0 auto; padding: 48px 16px 64px; }
.lp-tete { display: grid; place-items: center; margin: 0 auto 10px; padding: 10px 26px; width: fit-content;
  background: color-mix(in srgb, var(--kin) 16%, var(--sheet));
  border: 2px solid var(--shu); box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 3.5px var(--shu); }
.lp-titre { margin: 0; font-size: 1.7rem; letter-spacing: .2em; text-indent: .2em; }
.lp-sub { margin: 0 0 28px; text-align: center; font-size: .8rem; letter-spacing: .06em; color: var(--muted); }
.lp-list { display: flex; flex-direction: column; gap: 16px; }

.lp-card {
    position: relative; display: flex; align-items: stretch; gap: 0; width: 100%;
    padding: 0; text-align: left; cursor: pointer; overflow: hidden;
    background: var(--sheet); color: var(--ink);
    border: 1.5px solid var(--ink); box-shadow: var(--press);
    transition: transform .14s, box-shadow .14s;
}
.lp-card::after {   /* le filet intérieur de la planche */
    content: ""; position: absolute; inset: 5px; border: 1px solid var(--shu);
    opacity: .5; pointer-events: none;
}
.lp-card:hover, .lp-card:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.lp-card:hover::after, .lp-card:focus-visible::after { opacity: .9; }
.lp-card:active { transform: translate(2px, 2px); box-shadow: var(--press-sm); }
.lp-card.on { background: color-mix(in srgb, var(--kin) 10%, var(--sheet)); }

/* 題簽 : le cartouche de titre, collé au bord comme sur les estampes */
.lp-daisen {
    flex: none; width: 46px; margin: 12px 16px 12px 12px;
    display: grid; place-items: center;
    font: 700 1.6rem var(--jp); color: var(--shu);
    background: color-mix(in srgb, var(--kin) 20%, var(--sheet));
    border: 2px solid var(--shu);
    box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 3px var(--shu);
}
.lp-texte { display: block; min-width: 0; padding: 16px 20px 16px 0; align-self: center; }
.lp-nom { display: block; font-size: 1.25rem; font-weight: 700; margin-bottom: 3px; }
.lp-note { display: block; font-size: .82rem; line-height: 1.65; color: var(--ink-2); }
.lp-card .hanamaru { left: auto; right: 12px; top: 50%; width: 52px; height: 52px; margin-top: -26px; opacity: .9; }
.lp-card.on .lp-texte { padding-right: 70px; }
.lp-pied { margin: 28px 0 0; text-align: center; font-size: .72rem; line-height: 1.9; color: var(--muted); }
.lang-rappel { margin: 0 0 14px; }
@media (max-width: 480px) {
    .langpick { padding: 28px 14px 48px; }
    .lp-titre { font-size: 1.35rem; }
    .lp-daisen { width: 38px; margin: 10px 12px 10px 9px; font-size: 1.3rem; }
    .lp-texte { padding: 13px 15px 13px 0; }
    .lp-nom { font-size: 1.1rem; }
    .lp-card .hanamaru { width: 42px; height: 42px; margin-top: -21px; right: 8px; }
    .lp-card.on .lp-texte { padding-right: 54px; }
}


/* ═══ Couche « estampe » ═══════════════════════════════════════════════
   Reprise des conventions du 錦絵 : double filet autour de la planche,
   題簽 encadrés pour les intertitres, et ぼかし — le dégradé de ciel. */

/* ぼかし : le lavis gradué en haut de la page, comme le ciel des estampes */
body::before {
    content: ""; position: fixed; inset: 0 0 auto 0; height: 42vh; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--ai) 11%, transparent) 0%,
        color-mix(in srgb, var(--ai) 4%, transparent) 45%,
        transparent 100%);
}

/* Double filet : trait d’encre à l’extérieur, filet vermillon à l’intérieur */
.card::after, .sheet::after, .glesson::after, .stampcard::after {
    content: ""; position: absolute; inset: 5px; border: 1px solid var(--shu);
    opacity: .45; pointer-events: none;
}
/* Le ticket garde ses encoches : son filet se pose sur le corps, pas sur la planche */
.t-body::after {
    content: ""; position: absolute; inset: 4px; border: 1px solid var(--shu);
    opacity: .28; pointer-events: none;
}
.sheet.lesson::after { inset: 5px 5px 5px 36px; }
.glesson::after { inset: 5px 5px 5px 28px; }

/* 題簽 : les intertitres d’une fiche passent dans un cartouche */
.g-box > h4 {
    display: inline-block; margin: 0 0 .7em; padding: 3px 11px;
    color: var(--shu); background: color-mix(in srgb, var(--kin) 15%, var(--sheet));
    border: 1.5px solid var(--shu); box-shadow: inset 0 0 0 1.5px var(--sheet);
}
.g-box.warn > h4 { color: var(--kin); border-color: var(--kin); }

/* Les titres de page reçoivent le filet vermillon des cartouches */
main h1:not(.lp-titre) { position: relative; padding-bottom: .3em; }
main h1:not(.lp-titre)::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 2.2em; height: 3px; background: var(--shu);
}

/* ═══ Le ticket, poussé plus loin ═══════════════════════════════════════
   硬券 : le carton des guichets, et 改札鋏 — le coup de pince du contrôleur. */

/* Le carton est un peu plus chaud que les feuilles */
.ticket .t-body { background: color-mix(in srgb, var(--kin) 5%, var(--sheet)) !important; }

/* Un module terminé est poinçonné, comme un billet contrôlé */
/* .t-body masque ce qui dépasse : le poinçon se pose donc sur la face du billet */
.ticket.t-fini .t-body::before {
    content: ""; position: absolute; right: 14px; top: 10px; width: 17px; height: 15px;
    background: var(--paper); border: 1.5px solid var(--ink);
    clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
    z-index: 2; opacity: .85;
}
.ticket.t-fini { filter: drop-shadow(4px 4px 0 var(--matcha)); }

/* Le numéro de série, à la façon des billets Edmondson */
.t-no { font-variant-numeric: tabular-nums; }
.liens-legaux { text-align: center; margin: 26px 0 0; }
.liens-legaux a { color: var(--muted); }

/* ═══ すやり霞 ═══════════════════════════════════════════════════════════
   Les bandes de brume des estampes. Aplats de couleur cernés d’un trait,
   comme la planche de contour du 錦絵 : c’est le cerne qui fait l’estampe,
   pas la couleur. Elles respirent lentement — un va-et-vient de quelques
   pixels, pas une boucle, pour qu’aucune couture n’apparaisse. */
:root {
    --kasumi-1: #2f4a8c;       /* 藍 */
    --kasumi-2: #c08b2f;       /* 黄土 */
    --kasumi-3: #8c5a3c;       /* 代赭 */
    --kasumi-trait: #1d1b19;
    --kasumi-op: .46;
    --kasumi-cerne: .45;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --kasumi-1: #6d86cc; --kasumi-2: #c9a24f; --kasumi-3: #b0765a;
        --kasumi-trait: #ece4d2; --kasumi-op: .40; --kasumi-cerne: .34;
    }
}
:root[data-theme="dark"] {
    --kasumi-1: #6d86cc; --kasumi-2: #c9a24f; --kasumi-3: #b0765a;
    --kasumi-trait: #ece4d2; --kasumi-op: .40; --kasumi-cerne: .34;
}
.kasumi {
    position: fixed; left: 0; right: 0; bottom: 0; height: 50vh; z-index: -1;
    pointer-events: none; overflow: hidden; opacity: var(--kasumi-op);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%);
            mask-image: linear-gradient(to bottom, transparent, #000 28%);
}
.kasumi svg { width: 100%; height: 100%; display: block; }
.kasumi .k rect {
    stroke: var(--kasumi-trait); stroke-width: 1.4; stroke-opacity: var(--kasumi-cerne);
}
.kasumi .k rect:nth-child(3n+1) { fill: var(--kasumi-1); }
.kasumi .k rect:nth-child(3n+2) { fill: var(--kasumi-2); }
.kasumi .k rect:nth-child(3n)   { fill: var(--kasumi-3); }
.kasumi .k-a { animation: derive 71s ease-in-out infinite; }
.kasumi .k-b { animation: derive 97s ease-in-out infinite reverse; }
.kasumi .k-c { animation: derive 59s ease-in-out infinite; }
@keyframes derive {
    from { transform: translateX(-14px); }
    50%  { transform: translateX(14px); }
    to   { transform: translateX(-14px); }
}
@media (prefers-reduced-motion: reduce) { .kasumi .k { animation: none; } }
@media (max-width: 600px) { .kasumi { height: 38vh; } }

/* ═══ Portrait du compte ═══════════════════════════════════════════════ */
.ava {
    width: 22px; height: 22px; flex: none; border-radius: 50%;
    object-fit: cover; border: 1.5px solid currentColor; background: var(--sheet);
}
/* Sans photo : un 判子 à l’initiale, dans l’esprit des tampons du site */
.ava-han {
    display: inline-grid; place-items: center;
    font: 700 .72rem var(--jp); color: var(--shu); border-color: var(--shu);
    box-shadow: inset 0 0 0 1.5px var(--sheet), inset 0 0 0 2.5px var(--shu);
}
.save { display: inline-flex; align-items: center; gap: 7px; }
.save-nom { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-alerte { color: var(--shu); font-weight: 700; }
.compte-tete { display: flex; align-items: flex-start; gap: 14px; }
.ava-gd { width: 48px; height: 48px; }
.ava-gd.ava-han { font-size: 1.4rem; }
@media (max-width: 700px) { .save-nom { display: none; } }