:root {
  --bg:#f6f4ef; --card:#fff; --ink:#1d2430; --muted:#5f6b7a; --accent:#1f4e79; --on-accent:#fff;
  --ok:#1e7d4f; --warn:#a76400; --ko:#b3362f; --line:#e3ded3; --soft:#eef3f8;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#14181f; --card:#1e242e; --ink:#e8ecf1; --muted:#9aa6b4; --accent:#7fb2e5; --on-accent:#10161e;
    --ok:#4cc38a; --warn:#e3a33c; --ko:#ef6b62; --line:#2d3542; --soft:#232c39; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
header { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px; padding:12px 16px;
  padding-top:calc(12px + env(safe-area-inset-top)); background:var(--accent); color:var(--on-accent); }
header h1 { flex:1; font-size:18px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#back { background:none; border:0; color:inherit; font-size:30px; line-height:1; padding:0 8px 4px 0; cursor:pointer; }
#logout { background:transparent; color:inherit; border:1px solid currentColor; border-radius:8px; padding:4px 10px; font:inherit; font-size:13px; cursor:pointer; opacity:.85; }
main { max-width:760px; margin:0 auto; padding:16px 16px 48px; }
main.wide { max-width:1180px; }
a { color:var(--accent); }
h2 { font-size:19px; margin:24px 0 10px; }
.card { display:block; width:100%; text-align:left; background:var(--card); color:inherit; border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; margin-bottom:12px; font:inherit; }
button.card { cursor:pointer; }
button.card:hover { border-color:var(--accent); }
.card h3 { font-size:17px; margin:0 0 2px; }
.muted { color:var(--muted); font-size:14px; }
.bar { height:7px; background:var(--line); border-radius:4px; margin-top:8px; overflow:hidden; }
.bar span { display:block; height:100%; background:var(--ok); border-radius:4px; }
.chip { display:inline-block; font-size:12px; font-weight:600; padding:2px 9px; border-radius:20px; white-space:nowrap; }
.chip.a_faire { background:color-mix(in srgb, var(--ko) 15%, transparent); color:var(--ko); }
.chip.en_cours { background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn); }
.chip.maitrise { background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok); }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.between { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.grid2 { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width: 900px) { .grid2 { grid-template-columns:1.4fr 1fr; } }
.stat { font-size:28px; font-weight:700; color:var(--accent); line-height:1.2; }

/* Onglets du thème */
.tabs { display:flex; gap:6px; margin-bottom:14px; position:sticky; top:56px; background:var(--bg); padding:6px 0; z-index:4; }
.tabs button { flex:1; padding:10px 4px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; font-size:15px; cursor:pointer; }
.tabs button.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }

/* Fiche */
.fiche h3 { font-size:17px; color:var(--accent); margin:22px 0 6px; }
.fiche h3:first-child { margin-top:4px; }
.fiche p { margin:0 0 10px; hyphens:auto; }
@media (min-width: 700px) { .fiche p { text-align:justify; } }
.problem { background:var(--soft); border-left:4px solid var(--accent); padding:10px 14px; border-radius:8px; font-style:italic; margin-bottom:14px; }
dl.notions { margin:0; }
dl.notions dt { font-weight:700; margin-top:8px; }
dl.notions dd { margin:0 0 0 0; color:var(--ink); }
ul.plain { list-style:none; padding:0; margin:0; }
ul.plain li { padding:7px 0; border-bottom:1px solid var(--line); }
ul.plain li:last-child { border-bottom:0; }
.dates li { display:flex; gap:12px; }
.dates b { min-width:100px; color:var(--accent); flex-shrink:0; }

/* QCM */
.choice { display:block; width:100%; text-align:left; padding:12px 14px; margin:8px 0; border-radius:10px; border:1.5px solid var(--line);
  background:var(--card); color:var(--ink); font:inherit; cursor:pointer; }
.choice:hover:not(:disabled) { border-color:var(--accent); }
.choice.ok { border-color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, var(--card)); }
.choice.ko { border-color:var(--ko); background:color-mix(in srgb, var(--ko) 14%, var(--card)); }
.choice:disabled { cursor:default; }
.expl { margin:10px 0; padding:10px 12px; border-left:4px solid var(--accent); background:var(--soft); border-radius:6px; }
.score { font-size:46px; font-weight:700; color:var(--accent); text-align:center; margin:6px 0; }
.btn { display:inline-block; padding:11px 18px; border-radius:10px; border:0; background:var(--accent); color:var(--on-accent);
  font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
.btn.alt { background:var(--card); color:var(--ink); border:1px solid var(--line); }
.btn.small { padding:6px 12px; font-size:14px; }
.flash { min-height:190px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; font-size:20px; cursor:pointer; user-select:none; }
.flash small { font-size:13px; color:var(--muted); margin-top:12px; }

/* Formulaires */
input, select { font:inherit; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); width:100%; }
label { display:block; font-size:14px; color:var(--muted); margin:10px 0 4px; }
.login { max-width:380px; margin:8vh auto 0; }
.error { color:var(--ko); font-size:14px; min-height:20px; margin-top:8px; }

/* Tableau parent */
.table { width:100%; border-collapse:collapse; font-size:15px; }
.table th { text-align:left; font-size:13px; color:var(--muted); font-weight:600; padding:8px 6px; border-bottom:1px solid var(--line); }
.table td { padding:10px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table tr:last-child td { border-bottom:0; }
.table a { color:inherit; }
@media (max-width: 700px) {
  .table thead { display:none; }
  .table, .table tbody, .table tr, .table td { display:block; width:100%; }
  .table tr { padding:10px 0; border-bottom:1px solid var(--line); }
  .table td { border:0; padding:2px 0; }
  .table td[data-l]::before { content:attr(data-l) " : "; color:var(--muted); font-size:13px; }
}
.cal { display:grid; grid-template-columns:repeat(14, 1fr); gap:4px; margin-top:8px; max-width:420px; }
.cal span { aspect-ratio:1; border-radius:4px; background:var(--line); }
.cal span.on { background:var(--ok); }
.obj { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--line); }
.obj:last-child { border-bottom:0; }
.obj input[type=checkbox] { width:20px; height:20px; margin-top:3px; flex-shrink:0; accent-color:var(--ok); }
.obj .done { text-decoration:line-through; color:var(--muted); }
.late { color:var(--ko); font-weight:600; }
.x { background:none; border:0; color:var(--muted); font-size:20px; cursor:pointer; margin-left:auto; }

@media print {
  header, .tabs, .noprint, #back, #logout { display:none !important; }
  body { background:#fff; color:#000; font-size:11pt; }
  main { max-width:none; padding:0; }
  .card { border:0; padding:0; }
}
details.subj summary { list-style:none; cursor:pointer; }
details.subj summary::-webkit-details-marker { display:none; }
details.subj[open] summary { margin-bottom:8px; }
ol.answers { margin:8px 0; padding-left:22px; }
ol.answers li { padding:2px 0; }
.good { color:var(--ok); font-weight:600; }
.chip.neutre { background:var(--line); color:var(--muted); }

/* Karuta */
.karuta-top { display:flex; justify-content:space-between; align-items:center; }
.karuta-score { font-size:28px; font-weight:800; color:var(--accent); }
.yomifuda { position:sticky; top:56px; z-index:3; min-height:96px; margin:8px 0 14px; padding:14px 16px; border-radius:12px;
  background:#fbf6ea; color:#2a1d10; border:2px solid #b5322a; font-family:Georgia,"Times New Roman",serif; font-size:19px; line-height:1.45;
  box-shadow:0 4px 14px rgba(0,0,0,.15); }
.karuta-table { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
@media (min-width: 640px) { .karuta-table { grid-template-columns:repeat(4, 1fr); } }
.torifuda { aspect-ratio:3/4; max-height:190px; width:100%; display:flex; align-items:center; justify-content:center; padding:10px;
  border-radius:10px; border:2px solid #7a5a2b; background:linear-gradient(#fffaf0, #f3e6c8); color:#2a1d10; cursor:pointer;
  font:700 17px/1.25 Georgia,"Times New Roman",serif; box-shadow:0 3px 0 #7a5a2b; transition:transform .25s, opacity .35s; }
.torifuda span { overflow-wrap:anywhere; }
.torifuda:active { transform:translateY(2px); box-shadow:0 1px 0 #7a5a2b; }
.torifuda.pris { opacity:0; transform:scale(.6) rotate(-12deg); pointer-events:none; }
.torifuda.shake { animation:shake .35s; border-color:var(--ko); }
@keyframes shake { 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
.absente { width:100%; margin-top:14px; }
.karuta-fx { position:fixed; left:50%; top:45%; transform:translate(-50%,-50%) scale(.8); font-size:34px; font-weight:800; opacity:0;
  pointer-events:none; transition:opacity .2s, transform .2s; z-index:10; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.karuta-fx.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.karuta-fx.ok { color:var(--ok); } .karuta-fx.ko { color:var(--ko); }