: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 : texte aéré, encadrés, illustrations */
:root { --fs:17px; --m-hggsp:#1f4e79; --m-francais:#8a2f4b; --m-maths:#0f6b63; --m-histgeo:#94540f; --m-sciences:#3b7428; }
@media (prefers-color-scheme: dark) {
  :root { --m-hggsp:#7fb2e5; --m-francais:#e58fab; --m-maths:#5fcfc2; --m-histgeo:#e8a860; --m-sciences:#8fd172; }
}
#readprog { position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--on-accent); opacity:.8; transition:width .1s; }
#offline { background:var(--warn); color:#fff; font-size:14px; text-align:center; padding:6px 12px; }
.fiche { color:var(--ink); }
.fiche-hero { display:flex; gap:18px; align-items:center; padding:20px; margin-bottom:14px; border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(135deg, color-mix(in srgb, var(--mat) 16%, var(--card)), var(--card) 70%); }
.hero-txt { flex:1; min-width:0; }
.kicker { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mat); }
.fiche-hero h2 { margin:4px 0 6px; font-size:23px; line-height:1.25; text-wrap:balance; }
.hero-sub { margin:0 0 8px; color:var(--muted); }
.hero-meta { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:14px; color:var(--muted); }
.taille { display:inline-flex; gap:4px; }
.taille button { font:inherit; font-size:14px; font-weight:700; padding:3px 10px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.hero-ill { flex:0 0 132px; }
.hero-ill svg { display:block; width:100%; height:auto; }
@media (max-width: 520px) { .fiche-hero { padding:16px; gap:12px; } .hero-ill { flex-basis:84px; align-self:flex-start; } .fiche-hero h2 { font-size:20px; } }
.i-a { fill:var(--mat); } .i-s { fill:color-mix(in srgb, var(--mat) 18%, var(--card)); } .i-w { fill:var(--card); }
.i-l { stroke:var(--mat); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.i-a-l { stroke:var(--mat); stroke-width:4; stroke-linecap:round; fill:none; }
.problem { background:color-mix(in srgb, var(--mat) 9%, var(--card)); border-left:5px solid var(--mat); padding:14px 18px; border-radius:12px;
  font-size:calc(var(--fs) + 1px); line-height:1.6; font-style:italic; margin-bottom:14px; }
.problem .lab, .encadre .lab { display:block; font-style:normal; font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--mat); margin-bottom:4px; }
.toc { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.toc button { display:flex; align-items:center; gap:8px; max-width:100%; padding:7px 12px 7px 7px; border-radius:20px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.toc button:hover { border-color:var(--mat); }
.toc .num { width:24px; height:24px; font-size:12px; }
.num { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; flex-shrink:0; background:var(--mat); color:var(--card); font-weight:700; font-size:15px; }
.fsec { padding:22px 22px 8px; margin-bottom:16px; scroll-margin-top:120px; }
.fsec-h { display:flex; gap:12px; align-items:center; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.fsec h3 { margin:0; font-size:20px; line-height:1.3; color:var(--ink); text-wrap:balance; }
.fsec p, .fsec dd, .fsec li { font-size:var(--fs); }
.fsec p { margin:0 0 1.15em; line-height:1.8; max-width:68ch; hyphens:auto; overflow-wrap:break-word; }
.fsec strong { color:var(--mat); }
@media (max-width: 520px) { .fsec { padding:18px 16px 4px; } }
.encadre { --c:var(--mat); margin:0 0 1.15em; padding:14px 16px 2px; border-radius:12px; border-left:4px solid var(--c);
  background:color-mix(in srgb, var(--c) 8%, var(--card)); }
.encadre .lab { color:var(--c); }
.encadre p { margin-bottom:.8em; line-height:1.7; }
.encadre.exemple { --c:var(--ok); } .encadre.piege { --c:var(--ko); } .encadre.astuce { --c:var(--warn); }
sub, sup { font-size:.72em; line-height:0; }
.fig { margin:0 0 1.15em; } .fig img { display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line); background:var(--soft); }
.fig figcaption { font-size:14px; color:var(--muted); margin-top:6px; } .fig .credit { font-size:12px; opacity:.8; }
dl.notions { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); margin:0 0 16px; }
.notion { background:color-mix(in srgb, var(--mat) 7%, var(--card)); border:1px solid color-mix(in srgb, var(--mat) 20%, var(--line)); border-radius:12px; padding:12px 14px; }
.notion dt { font-weight:700; color:var(--mat); margin-bottom:4px; }
.notion dd { margin:0; line-height:1.6; font-size:calc(var(--fs) - 1px); }
svg.frise { display:block; width:100%; height:auto; margin:0 0 18px; }
.f-bar { fill:color-mix(in srgb, var(--mat) 18%, var(--card)); } .f-dot { fill:var(--mat); stroke:var(--card); stroke-width:2.5; }
.f-tick { stroke:var(--muted); stroke-width:1; opacity:.5; }
.f-end { font:700 24px system-ui, sans-serif; fill:var(--mat); } .f-small { font:19px system-ui, sans-serif; fill:var(--muted); text-anchor:middle; }
ol.timeline { list-style:none; margin:0 0 12px; padding:0 0 0 26px; position:relative; }
ol.timeline::before { content:""; position:absolute; left:8px; top:8px; bottom:12px; width:2px; background:color-mix(in srgb, var(--mat) 35%, var(--line)); }
ol.timeline li { position:relative; padding:0 0 16px; line-height:1.6; }
ol.timeline li::before { content:""; position:absolute; left:-24px; top:6px; width:14px; height:14px; border-radius:50%; background:var(--card); border:3px solid var(--mat); box-sizing:border-box; }
ol.timeline b { display:block; color:var(--mat); font-size:15px; }
ul.personnes, ul.sujets { list-style:none; margin:0 0 12px; padding:0; }
ul.personnes li { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); line-height:1.6; }
ul.personnes li:last-child, ul.sujets li:last-child { border-bottom:0; }
.avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; flex-shrink:0; font-weight:700; text-transform:uppercase;
  background:color-mix(in srgb, var(--mat) 16%, var(--card)); color:var(--mat); }
ul.sujets li { position:relative; padding:10px 0 10px 26px; border-bottom:1px solid var(--line); line-height:1.6; }
ul.sujets li::before { content:"›"; position:absolute; left:6px; top:7px; font-size:20px; font-weight:700; color:var(--mat); }
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; }

/* 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; }
  .fiche-hero { background:none; border:0; padding:0; } .hero-ill, #offline { display:none; }
  .fsec { break-inside:auto; padding:0; } .fsec-h, .encadre, .notion, ol.timeline li { break-inside:avoid; }
  .fsec p { max-width:none; }
}
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); }

/* Bulles de définition */
.gl { border-bottom:1.5px dotted var(--accent); cursor:help; }
.gl:focus { outline:2px solid var(--accent); outline-offset:1px; border-radius:2px; }
.gl-tip { position:fixed; z-index:20; padding:10px 12px; border-radius:10px; background:var(--ink); color:var(--bg);
  font-size:14px; line-height:1.45; box-shadow:0 6px 20px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .12s; }
.gl-tip.show { opacity:1; }
@media print { .gl { border:0; } .gl-tip { display:none; } }