/* Bûche Study — feuille de style (v4, même direction artistique que la page d'accueil).
   Le bureau de l'élève : papier blanc légèrement bleuté, cartes blanches, brun du bois pour la marque et les
   boutons, vert feuille seulement pour la réussite, une couleur par matière, surligneur jaune pour l'essentiel.
   Titres : Archivo (la police du logo et de la page d’accueil) · texte et cours : Atkinson Hyperlegible Next · code : IBM Plex Mono. */
:root {
  --bg: #F7F9FC;
  --surface: #FFFFFF;
  --surface-2: #EEF2F8;
  --surface-3: #E3E8F1;
  --line: #E3E6EE;
  --line-2: #CDD3DF;
  --border-input: #7D8597;    /* P0-03 : bordure des champs, 3:1 minimum sur tous les fonds clairs */
  --teinte-texte: 65%;        /* P0-03 : part de la couleur de matière dans un texte (le reste : --ink) */
  --ink: #1E1A17;
  --ink-2: #48423D;
  --muted: #6B645E;
  --accent: #7A4B22;
  --accent-hover: #5E3815;
  --accent-ink: #FFFFFF;
  --accent-soft: #F5ECE2;
  --bark: #7A4B22;
  --bark-soft: #F5ECE2;
  --wood: #E8C18E;
  --leaf: #4E9F2F;
  --leaf-soft: #E7F4DF;
  --fluo: #FBEF5A;
  --rouge: #D7263D;
  --amber: #9C5F04;          /* P0-03 : était #B86E00 (3,6:1 sur --amber-soft) */
  --amber-soft: #FFF0DB;
  --sun: #F2B320;
  --sky: #3B5BDB;
  --sky-soft: #E7ECFD;
  --berry: #C2255C;
  --berry-soft: #FBE6EE;
  --plum: #7048E8;
  --plum-soft: #EEE9FD;
  --good: #377A1E;           /* P0-03 : était #3B8A1F (3,8:1 sur --good-soft) */
  --good-soft: #E7F4DF;
  --bad: #C8253A;            /* P0-03 : était #D7263D (4,2:1 sur --bad-soft) */
  --bad-soft: #FCE6E9;
  --warn: #A35E00;
  --warn-soft: #FFF0DB;
  --info: #3B5BDB;
  --info-soft: #E7ECFD;
  --focus: #3B5BDB;
  --hero: #FFFFFF;
  --hero-ink: #1E1A17;
  --shadow: 0 1px 2px rgba(30, 26, 23, .04);
  --shadow-lg: 0 1px 2px rgba(30, 26, 23, .06), 0 12px 32px -14px rgba(30, 26, 23, .22);
  --r: 14px;
  --r-sm: 9px;
  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-ui: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-read: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --top-h: 62px;
  --maxw: 1200px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15130F; --surface: #1D1A15; --surface-2: #25211A; --surface-3: #2F2A21; --line: #332D24; --line-2: #463E32; --border-input: #7A6F5E; --teinte-texte: 60%;
    --ink: #F3EEE7; --ink-2: #D2CABE; --muted: #A2998C;
    --accent: #E0A86E; --accent-hover: #EAB985; --accent-ink: #1E1206; --accent-soft: #33261A;
    --bark: #E0A86E; --bark-soft: #33261A; --wood: #C9A06C; --leaf: #7CC45A; --leaf-soft: #1E2E18; --fluo: #E8DC4A; --rouge: #F07D8C;
    --amber: #F0B44C; --amber-soft: #392B14; --sun: #F5C34A; --sky: #93A8F2; --sky-soft: #1C2340; --berry: #F38BB0; --berry-soft: #3A1D29; --plum: #B9A3F6; --plum-soft: #28213B;
    --good: #7CC45A; --good-soft: #1E2E18; --bad: #F48A7B; --bad-soft: #3B1E1A; --warn: #EBB363; --warn-soft: #37291A; --info: #93A8F2; --info-soft: #1C2340; --focus: #93A8F2;
    --hero: #1D1A15; --hero-ink: #F3EEE7;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 12px 34px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15130F; --surface: #1D1A15; --surface-2: #25211A; --surface-3: #2F2A21; --line: #332D24; --line-2: #463E32; --border-input: #7A6F5E; --teinte-texte: 60%;
  --ink: #F3EEE7; --ink-2: #D2CABE; --muted: #A2998C;
  --accent: #E0A86E; --accent-hover: #EAB985; --accent-ink: #1E1206; --accent-soft: #33261A;
  --bark: #E0A86E; --bark-soft: #33261A; --wood: #C9A06C; --leaf: #7CC45A; --leaf-soft: #1E2E18; --fluo: #E8DC4A; --rouge: #F07D8C;
  --amber: #F0B44C; --amber-soft: #392B14; --sun: #F5C34A; --sky: #93A8F2; --sky-soft: #1C2340; --berry: #F38BB0; --berry-soft: #3A1D29; --plum: #B9A3F6; --plum-soft: #28213B;
  --good: #7CC45A; --good-soft: #1E2E18; --bad: #F48A7B; --bad-soft: #3B1E1A; --warn: #EBB363; --warn-soft: #37291A; --info: #93A8F2; --info-soft: #1C2340; --focus: #93A8F2;
  --hero: #1D1A15; --hero-ink: #F3EEE7;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 12px 34px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--accent); text-underline-offset: 2px; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .45em; text-wrap: balance; color: var(--ink); }
h1 { font: 800 1.9rem/1.15 var(--f-display); font-stretch: 105%; letter-spacing: -.015em; }
h2 { font: 800 1.22rem/1.25 var(--f-display); font-stretch: 105%; letter-spacing: -.01em; }
h3 { font-size: 1.02rem; font-weight: 600; }
h4 { font-size: .95rem; font-weight: 600; margin-top: .9em; }
p { margin: 0 0 .65em; }
code, .mono { font-family: var(--f-mono); font-size: .88em; }
code { background: var(--surface-2); padding: .08em .35em; border-radius: 4px; }
pre { background: var(--surface-2); border: 1px solid var(--line); padding: 12px 14px; border-radius: var(--r-sm); overflow-x: auto; font-size: .9rem; }
pre code { background: none; padding: 0; }
blockquote { margin: .6em 0; padding: .2em 0 .2em 1em; border-left: 3px solid var(--line-2); color: var(--ink-2); }
ul, ol { padding-left: 1.35em; margin: .35em 0 .8em; }
li { margin: .15em 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.4em 0; }
details > summary { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--muted); } .small { font-size: .86rem; } .tiny { font-size: .78rem; } .right { margin-left: auto; } .center { text-align: center; }
.hidden { display: none !important; }
.good-text { color: var(--good); } .bad-text { color: var(--bad); }
.ic { flex: none; vertical-align: -3px; }
.katex { font-size: 1.06em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }

/* ---------- Structure ---------- */
#topbar { position: sticky; top: 0; z-index: 30; height: var(--top-h); display: flex; align-items: center; gap: 20px; padding: 0 max(24px, env(safe-area-inset-right, 0px)) 0 max(36px, calc(env(safe-area-inset-left, 0px) + 20px)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; margin-right: 8px; font-weight: 600; font-size: 1.05rem; color: var(--ink); text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; }
.brand-mark svg { width: 34px; height: 34px; }
.brand-name { font: 800 1.3rem/1 "Archivo", var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.brand-2 { font: inherit; letter-spacing: inherit; color: var(--bark); }
#nav { display: flex; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .93rem; white-space: nowrap; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.nav-item .badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-size: .72rem; display: grid; place-items: center; }
.top-right { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: .86rem; color: var(--ink-2); white-space: nowrap; }
.pill.streak .ic { color: var(--amber); }
.pill.streak.off .ic { color: var(--muted); }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); cursor: pointer; text-decoration: none; }
.icon-btn:hover { color: var(--ink); border-color: var(--line-2); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3); color: var(--ink); display: grid; place-items: center; font-weight: 600; text-decoration: none; border: 1px solid var(--line-2); }
.menu { position: absolute; right: 16px; top: calc(var(--top-h) - 6px); z-index: 40; min-width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 6px; color: var(--ink); text-decoration: none; font: inherit; cursor: pointer; text-align: left; }
.menu a:hover, .menu button:hover { background: var(--surface-2); }
.menu .menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
#main { max-width: var(--maxw); margin: 0 auto; padding: 28px 24px 96px; }
#view { outline: none; min-height: 60vh; }
#tabbar { display: none; }

/* ---------- Boutons, champs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 7px 15px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 500 .92rem/1.2 var(--f-ui); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { border-color: var(--ink-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.good { background: var(--good-soft); border-color: transparent; color: var(--good); }
.btn.bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.btn.small { min-height: 30px; padding: 4px 10px; font-size: .85rem; }
.btn.big { min-height: 46px; padding: 10px 20px; font-size: 1rem; }
.btn.icon { padding: 0; width: 34px; }
.btn.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.input { width: 100%; min-height: 38px; padding: 8px 11px; border: 1px solid var(--border-input); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
.input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
textarea.input { resize: vertical; line-height: 1.5; }
select.input { width: auto; max-width: 100%; padding-right: 28px; }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 5px; font-weight: 500; font-size: .9rem; color: var(--ink-2); }
.form.inline { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.row2 > *, .row3 > *, .form > * { min-width: 0; }
.form label { grid-template-columns: minmax(0, 1fr); }
select.input { max-width: 100%; text-overflow: ellipsis; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.chk { display: inline-flex !important; grid-template-columns: none !important; align-items: center; gap: 7px !important; padding: 6px 11px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); font-weight: 400 !important; color: var(--ink) !important; cursor: pointer; }
.chk:has(input:checked) { border-color: color-mix(in srgb, var(--bark) 55%, var(--line-2)); background: var(--bark-soft); }
.chk input { accent-color: var(--bark); margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.toolbar .input:not(select) { width: auto; flex: 1 1 200px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: none; padding: 7px 13px; font: 500 .88rem var(--f-ui); color: var(--ink-2); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }

/* ---------- Pages, cartes ---------- */
.page-head { margin: 0 0 22px; }
.page-head h1 { margin-bottom: .2em; }
.page-head p { color: var(--muted); max-width: 70ch; margin: 0; }
.eyebrow { font-size: .76rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.crumb { font-size: .86rem; color: var(--muted); margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card-title { font-size: .95rem; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.card-title .right { font-weight: 400; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.grid > .card { margin: 0; }
.cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.section-title { font-size: .8rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 26px 0 10px; display: flex; align-items: center; gap: 10px; }
.section-title::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font-size: .78rem; font-weight: 500; white-space: nowrap; }
.tag.ok { background: var(--good-soft); color: var(--good); }
.tag.accent { background: var(--accent-soft); color: var(--accent); }
.tag.amber { background: var(--amber-soft); color: var(--amber); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.empty .ic { color: var(--line-2); margin-bottom: 8px; }
.empty h2 { color: var(--ink); }
.alert { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 11px 14px; border-radius: 8px; margin: 10px 0; background: var(--info-soft); color: var(--ink); font-size: .92rem; }
.alert > .ic { margin-top: 2px; color: var(--info); }
.alert.warn { background: var(--warn-soft); } .alert.warn > .ic { color: var(--warn); }
.alert.good { background: var(--good-soft); } .alert.good > .ic { color: var(--good); }
.alert.bad { background: var(--bad-soft); } .alert.bad > .ic { color: var(--bad); }
.alert .btn { margin-left: auto; }
.bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s; }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.stat { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.stat-v { font: 600 1.45rem/1.15 var(--f-ui); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat-l { font-size: .82rem; color: var(--muted); }
.subj-badge { width: 30px; height: 30px; border-radius: 7px; display: inline-grid; place-items: center; color: #fff; font: 600 .78rem/1 var(--f-ui); letter-spacing: .02em; flex: none; }
.subj-badge.lg { width: 42px; height: 42px; font-size: .95rem; border-radius: 9px; }
.subj-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring .ring-v { position: absolute; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ring-track { stroke: var(--surface-3); }
.rank { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; padding: 1px 7px; border-radius: 5px; border: 1px solid currentColor; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 18px; overflow-x: auto; }
.tab { padding: 9px 14px; border: 0; border-bottom: 2px solid transparent; background: none; font: 500 .92rem var(--f-ui); color: var(--muted); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.list { display: grid; }
.list-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.list-row:last-child { border-bottom: 0; }
a.list-row:hover { background: var(--surface-2); }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .title { font-weight: 500; }
.tbl-wrap, .table-wrap { overflow-x: auto; }
.tbl, .md-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th, .tbl td, .md-table th, .md-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl th, .md-table th { font-weight: 600; color: var(--ink-2); background: var(--surface-2); }

/* ---------- Accueil ---------- */
.home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.home-head h1 { margin: 0; }
.countdown { text-align: right; }
.countdown .n { font: 600 2rem/1 var(--f-read); }
.continue { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 24px 26px; border-radius: 18px; background-color: var(--hero); background-image: repeating-radial-gradient(circle at 100% 50%, transparent 0 18px, rgba(255,255,255,.055) 18px 20px); color: var(--hero-ink); text-decoration: none; margin-bottom: 14px; }
.continue:hover { background-color: color-mix(in srgb, var(--hero) 88%, var(--accent)); }
.continue > * { position: relative; }
.continue .c-ic { width: 52px; height: 52px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 12%, transparent); display: grid; place-items: center; }
.continue .c-kicker { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; opacity: .7; }
.continue .c-title { font: 600 1.25rem/1.3 var(--f-ui); margin: 2px 0; }
.continue .c-sub { opacity: .75; font-size: .9rem; }
.continue .c-go { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--sun); color: #2A1E05; font-weight: 700; }
.continue .c-title { font-family: var(--f-display); }
.alts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 8px; }
.alt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.alt:hover { border-color: var(--line-2); }
.alt .grow { min-width: 0; flex: 1; }
.alt .t { font-weight: 500; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alt .s { font-size: .8rem; color: var(--muted); }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day { border: 1px solid var(--line); border-radius: 8px; padding: 8px 6px; text-align: center; background: var(--surface); }
.day .d { font-size: .74rem; color: var(--muted); text-transform: capitalize; }
.day .n { font-weight: 600; font-variant-numeric: tabular-nums; }
.day .dot { width: 8px; height: 8px; border-radius: 50%; margin: 6px auto 0; background: var(--surface-3); }
.day.active .dot { background: var(--amber); }
.day.today { border-color: var(--ink); }
.subj-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.subj-tile { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.subj-tile:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.subj-tile .grow { min-width: 0; flex: 1; }
.subj-tile .name { font-weight: 600; }
.subj-tile .meta { font-size: .8rem; color: var(--muted); }
.quest { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.quest:last-child { border: 0; }
.quest .box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; color: var(--accent-ink); }
.quest.done .box { background: var(--accent); border-color: var(--accent); }
.quest.done .lbl { color: var(--muted); text-decoration: line-through; }
.quest .xp { margin-left: auto; font-size: .78rem; color: var(--amber); white-space: nowrap; }

/* ---------- Matières et chapitres ---------- */
.subject-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.subject-head h1 { margin: 0; }
.chapters { display: grid; gap: 10px; }
.chapter-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.chapter-row:hover { border-color: var(--line-2); }
.chapter-row .num { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: .82rem; font-weight: 600; color: var(--muted); }
.chapter-row.complete .num { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chapter-row .name { font-weight: 500; }
.chapter-row .meta { font-size: .8rem; color: var(--muted); }
.chapter-row.locked { opacity: .65; }
.step-dots { display: flex; gap: 4px; }
.step-dot { width: 22px; height: 6px; border-radius: 3px; background: var(--surface-3); position: relative; overflow: hidden; }
.step-dot > span { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.step-dot.done { background: var(--accent); }

/* Stepper de chapitre */
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 4px 0 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.step { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: var(--ink-2); text-decoration: none; border-right: 1px solid var(--line); position: relative; min-width: 0; }
.step:last-child { border-right: 0; }
.step:hover { background: var(--surface-2); }
.step .s-n { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-weight: 600; font-size: .85rem; flex: none; }
.step .s-l { font-weight: 600; font-size: .92rem; color: var(--ink); }
.step .s-m { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step .s-txt { min-width: 0; }
.step.done .s-n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.step.on { background: var(--accent-soft); }
.step.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); }
.step-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- Lecteur de cours ---------- */
.reader { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 34px; align-items: start; }
.toc { position: sticky; top: calc(var(--top-h) + 18px); font-size: .86rem; max-height: calc(100vh - var(--top-h) - 40px); overflow-y: auto; }
.toc .toc-t { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.toc a { display: block; padding: 5px 10px; border-left: 2px solid var(--line); color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.toc a.l2 { padding-left: 22px; font-size: .82rem; }
.toc a:hover { color: var(--ink); border-left-color: var(--line-2); }
.toc a.on { color: var(--ink); border-left-color: var(--accent); font-weight: 500; }
.toc-actions { display: grid; gap: 6px; margin-top: 16px; }
.toc-actions .btn { justify-content: flex-start; }
.course { font: 16.5px/1.65 var(--f-read); color: var(--ink); max-width: 72ch; }
.course h2 { font: 800 1.45rem/1.3 var(--f-display); font-stretch: 105%; letter-spacing: -.01em; margin: 1.8em 0 .5em; padding-top: .2em; scroll-margin-top: calc(var(--top-h) + 16px); }
.course h2:first-child { margin-top: 0; }
.course h3 { font: 700 1.15rem/1.35 var(--f-display); margin: 1.5em 0 .4em; scroll-margin-top: calc(var(--top-h) + 16px); }
.course h4 { font: 600 1rem/1.4 var(--f-ui); margin: 1.2em 0 .3em; }
.course p { margin: 0 0 .9em; }
.course ul, .course ol { margin-bottom: 1em; }
.course .md-table { font-family: var(--f-ui); font-size: .9rem; margin: .4em 0 1.2em; }
.course-intro { font-size: 1.05rem; color: var(--ink-2); }
.course-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -6px 0 22px; font: .84rem var(--f-ui); color: var(--muted); }
.course-end { margin-top: 30px; padding: 18px 20px; border: 1px dashed var(--line-2); border-radius: 12px; font-family: var(--f-ui); }
.callout { margin: 1.1em 0 1.3em; border: 1px solid var(--line); border-left: 4px solid var(--c, var(--line-2)); border-radius: 8px; background: var(--surface); padding: 12px 16px 4px; font-size: .96em; break-inside: avoid; }
.callout-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 4px; font-family: var(--f-ui); }
.callout-kind { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ck, var(--c, var(--muted))); }
.callout-title { font-weight: 600; font-size: .98rem; color: var(--ink); }
.callout-body > :last-child { margin-bottom: .6em; }
.callout-definition { --c: #2F5DA8; background: color-mix(in srgb, #2F5DA8 5%, var(--surface)); }
.callout-theoreme, .callout-propriete, .callout-loi { --c: #6A4C9C; background: color-mix(in srgb, #6A4C9C 5%, var(--surface)); }
.callout-formule { --c: #1F6F5C; background: color-mix(in srgb, #1F6F5C 5%, var(--surface)); }
.callout-methode { --c: #A86A12; background: color-mix(in srgb, #A86A12 6%, var(--surface)); }
.callout-exemple { --c: #5E6A71; }
.callout-attention { --c: #B42318; background: color-mix(in srgb, #B42318 5%, var(--surface)); }
.callout-retenir { --c: #1C1F24; background: var(--surface-2); }
.callout-demo, .callout-remarque { --c: #8A8F96; }
:root[data-theme="dark"] .callout-retenir { --c: #ECEAE4; }
/* P0-03 : texte des libellés d'encadrés à 4,5:1 (clair : méthode et remarque ; sombre : mêlé à --ink pour s'éclaircir) */
.callout-methode { --ck: color-mix(in srgb, #A86A12 85%, var(--ink)); }
.callout-demo, .callout-remarque { --ck: color-mix(in srgb, #8A8F96 70%, var(--ink)); }
:root[data-theme="dark"] .callout-definition, :root[data-theme="dark"] .callout-theoreme, :root[data-theme="dark"] .callout-propriete, :root[data-theme="dark"] .callout-loi, :root[data-theme="dark"] .callout-formule { --ck: color-mix(in srgb, var(--c) 65%, var(--ink)); }
:root[data-theme="dark"] .callout-methode { --ck: color-mix(in srgb, var(--c) 80%, var(--ink)); }
:root[data-theme="dark"] .callout-exemple { --ck: color-mix(in srgb, var(--c) 70%, var(--ink)); }
:root[data-theme="dark"] .callout-attention { --ck: color-mix(in srgb, var(--c) 60%, var(--ink)); }
:root[data-theme="dark"] .callout-demo, :root[data-theme="dark"] .callout-remarque { --ck: var(--c); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .callout-definition, :root:not([data-theme="light"]) .callout-theoreme, :root:not([data-theme="light"]) .callout-propriete, :root:not([data-theme="light"]) .callout-loi, :root:not([data-theme="light"]) .callout-formule { --ck: color-mix(in srgb, var(--c) 65%, var(--ink)); }
  :root:not([data-theme="light"]) .callout-methode { --ck: color-mix(in srgb, var(--c) 80%, var(--ink)); }
  :root:not([data-theme="light"]) .callout-exemple { --ck: color-mix(in srgb, var(--c) 70%, var(--ink)); }
  :root:not([data-theme="light"]) .callout-attention { --ck: color-mix(in srgb, var(--c) 60%, var(--ink)); }
  :root:not([data-theme="light"]) .callout-demo, :root:not([data-theme="light"]) .callout-remarque { --ck: var(--c); }
}
/* feuilles imprimées (fond blanc quel que soit le thème) : couleurs d'origine */
.pdf-sheet .callout-kind, .fr-sheet .callout-kind { color: var(--c, var(--muted)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .callout-retenir { --c: #ECEAE4; } }
.explain-btn { opacity: 0; transition: opacity .15s; margin-left: 6px; font-family: var(--f-ui); vertical-align: middle; }
.course h2:hover .explain-btn, .course h3:hover .explain-btn, .explain-btn:focus { opacity: 1; }
.sel-pop { position: absolute; z-index: 35; display: flex; gap: 4px; padding: 4px; background: var(--ink); border-radius: 8px; box-shadow: var(--shadow-lg); }
.sel-pop button { border: 0; background: none; color: var(--bg); font: 500 .84rem var(--f-ui); padding: 6px 9px; border-radius: 6px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.sel-pop button:hover { background: color-mix(in srgb, var(--bg) 18%, transparent); }
.ai-panel { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: var(--surface); }
.outline { counter-reset: o; list-style: none; padding: 0; }
.outline li { counter-increment: o; padding: 8px 0 8px 34px; position: relative; border-bottom: 1px solid var(--line); }
.outline li::before { content: counter(o); position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: .78rem; font-weight: 600; color: var(--muted); }
.gen-progress { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Cartes à retenir */
.flashdeck { max-width: 720px; }
.recall-list { display: grid; gap: 8px; }
.recall-item { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); display: flex; gap: 10px; align-items: center; }
.recall-item .grow { flex: 1; min-width: 0; }

/* ---------- Questions ---------- */
.session { max-width: 820px; }
.session-prog { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.session-prog .bar { flex: 1; }
.qcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow); }
.qhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; font-size: .84rem; }
.qtext { font: 16.5px/1.65 var(--f-read); margin-bottom: 14px; }
.qintro { padding: 12px 14px; background: var(--surface-2); border-radius: 8px; margin-bottom: 12px; font-size: .95rem; }
.diff { letter-spacing: 2px; color: var(--amber); font-size: .75rem; }
.answer { display: grid; gap: 8px; margin-bottom: 12px; }
.opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; background: var(--surface); }
.opt:hover { border-color: var(--ink-2); }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.opt input { margin-top: 4px; accent-color: var(--accent); }
.opt.good { border-color: var(--good); background: var(--good-soft); }
.opt.bad { border-color: var(--bad); background: var(--bad-soft); }
.preview { min-height: 1.4em; padding: 2px 2px; }
.conf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.conf-btn.on { background: var(--ink) !important; color: var(--bg) !important; }
.hints { display: grid; gap: 6px; margin-bottom: 10px; }
.hint { padding: 9px 12px; border-radius: 8px; background: var(--amber-soft); font-size: .93rem; border-left: 3px solid var(--amber); }
.hint.lvl4 { background: var(--surface-2); border-left-color: var(--ink-2); }
.qactions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qactions .btn.primary { margin-left: auto; }
.feedback:empty { display: none; }
.feedback { margin-top: 14px; }
.verdict { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--surface-2); }
.verdict.good { background: var(--good-soft); }
.verdict.bad { background: var(--bad-soft); }
.verdict-title { font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.reveal { padding: 14px 16px; border-radius: 8px; background: var(--surface-2); margin-bottom: 10px; font: 16px/1.65 var(--f-read); }
.selfgrade { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.selfgrade > span { margin-right: auto; font-weight: 500; }
.diag { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .88rem; }
.solution { margin-top: 10px; }
.solution summary { font-weight: 500; color: var(--ink-2); }
.solution > div { padding: 10px 2px 0; }
.rubric .opt { padding: 7px 10px; }
.xpline { font-size: .84rem; color: var(--amber); margin-top: 6px; }
.sticky-bottom { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; }
.qcm-rows { display: grid; gap: 8px; }
.qcm-row { display: flex; gap: 8px; align-items: center; }

/* ---------- Examens ---------- */
.exam-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.exam-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
.exam-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.exam-card .ic-wrap { width: 40px; height: 40px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; margin-bottom: 4px; }
.exam-card h3 { margin: 0; }
.exam-card p { color: var(--muted); font-size: .88rem; margin: 0; }
.exam-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.exam-bar { position: sticky; top: var(--top-h); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 0 18px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 12px; box-shadow: var(--shadow); }
.exam-bar .muted, .exam-bar .small { color: var(--ink-2); }
.exam-bar .btn.primary { margin-left: auto; }
.timer { font: 600 1rem var(--f-mono); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
.timer.big { font-size: 1.35rem; }
.timer.warn { color: #F2857A; }
.qnav { display: flex; flex-wrap: wrap; gap: 4px; }
.qnav a { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; font-size: .78rem; font-weight: 600; text-decoration: none; color: var(--ink-2); border: 1px solid var(--line-2); background: var(--surface); }
.qnav a.answered { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 600px) { .exam-bar { gap: 8px; padding: 8px 10px; } .qnav a { width: 26px; height: 26px; } .exam-bar .btn.primary { padding: 8px 14px; } }
.qnav a.good { background: var(--good); border-color: var(--good); color: #fff; }
.qnav a.bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.copy { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 26px 30px; margin-bottom: 18px; box-shadow: var(--shadow); }
.copy-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 18px; }
.copy-head h2 { font: 600 1.35rem var(--f-read); margin: 0; }
@media (max-width: 600px) { .copy-head > div:last-child { text-align: left !important; } }   /* sur téléphone, durée et barème passent sous le titre : alignés à gauche */
.exam-section { margin-bottom: 26px; }
.exam-section > h2 { font: 600 1.15rem var(--f-read); display: flex; gap: 10px; align-items: baseline; }
.exam-section .qcard { box-shadow: none; border-style: solid; scroll-margin-top: calc(var(--top-h) + 70px); }
.result-hero { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.grade-big { font: 600 3.2rem/1 var(--f-read); font-variant-numeric: tabular-nums; }
.grade-big small { font-size: 1.2rem; color: var(--muted); }
.part-bars { display: grid; gap: 6px; margin-top: 8px; }
.part-bar { display: grid; grid-template-columns: 70px 1fr 64px; gap: 10px; align-items: center; font-size: .85rem; }
.boss-intro { text-align: center; padding: 30px 20px; }

/* ---------- Planning ---------- */
.plan-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.timeline { position: relative; height: 54px; margin: 6px 0 22px; }
.timeline .tl-track { position: absolute; left: 0; right: 0; top: 20px; height: 10px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.timeline .tl-done { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.timeline .tl-final { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(45deg, var(--amber-soft), var(--amber-soft) 4px, transparent 4px, transparent 8px); }
.timeline .tl-now { position: absolute; top: 12px; width: 2px; height: 26px; background: var(--ink); }
.timeline .tl-lbl { position: absolute; top: 38px; font-size: .74rem; color: var(--muted); transform: translateX(-50%); white-space: nowrap; }
.timeline .tl-lbl.start { transform: none; } .timeline .tl-lbl.end { transform: translateX(-100%); }
.timeline .tl-now-lbl { position: absolute; top: -4px; font-size: .74rem; font-weight: 600; transform: translateX(-50%); white-space: nowrap; }
.gantt-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.gantt { display: grid; min-width: max-content; font-size: .8rem; }
.gantt .g-head { position: sticky; top: 0; background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: center; color: var(--muted); font-weight: 500; white-space: nowrap; }
.gantt .g-head.cur { background: var(--ink); color: var(--bg); }
.gantt .g-label { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 10px; display: flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.gantt .g-cell { border-bottom: 1px solid var(--line); border-right: 1px dashed var(--line); padding: 4px 3px; display: flex; flex-direction: column; gap: 3px; min-height: 42px; }
.gantt .g-cell.cur { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.gantt .g-cell.final { background: color-mix(in srgb, var(--amber) 7%, transparent); }
.chip { display: block; padding: 3px 6px; border-radius: 5px; font-size: .74rem; line-height: 1.25; color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.chip.done { opacity: .45; text-decoration: line-through; }
.chip.late { outline: 2px solid var(--bad); outline-offset: -2px; }
.chip.ghost { background: var(--surface-2) !important; color: var(--ink-2); border: 1px dashed var(--line-2); }
.chip.boss { background: var(--ink) !important; color: var(--bg); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8rem; color: var(--muted); margin: 10px 2px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.wd { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px; min-height: 150px; display: flex; flex-direction: column; gap: 6px; }
.wd.today { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.wd.past { opacity: .6; }
.wd-h { display: flex; justify-content: space-between; align-items: baseline; font-size: .8rem; color: var(--muted); text-transform: capitalize; }
.wd-h strong { font-size: 1.05rem; color: var(--ink); }
.task { display: flex; gap: 6px; align-items: flex-start; padding: 6px 7px; border-radius: 6px; font-size: .8rem; line-height: 1.3; background: var(--surface-2); color: var(--ink); text-decoration: none; border-left: 3px solid var(--c, var(--line-2)); }
.task.done { opacity: .55; text-decoration: line-through; }
.task .min { margin-left: auto; color: var(--muted); white-space: nowrap; }

/* ---------- Progression ---------- */
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px); gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.heat i { width: 12px; height: 12px; border-radius: 3px; background: var(--surface-3); display: block; }
.heat i.l1 { background: color-mix(in srgb, var(--accent) 30%, var(--surface-3)); }
.heat i.l2 { background: color-mix(in srgb, var(--accent) 55%, var(--surface-3)); }
.heat i.l3 { background: color-mix(in srgb, var(--accent) 80%, var(--surface-3)); }
.heat i.l4 { background: var(--accent); }
.chart { width: 100%; height: auto; display: block; }
.chart-lbl { font-size: 11px; fill: var(--muted); }
.chart-val { font-size: 11px; fill: var(--ink-2); }
.chart-axis { stroke: var(--line-2); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ach { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ach.locked { opacity: .5; }
.ach-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--amber-soft); color: var(--amber); flex: none; }
.ach.locked .ach-ic { background: var(--surface-2); color: var(--muted); }
.rank-card { display: flex; gap: 12px; align-items: center; }
.rank-big { font-size: 1.2rem; font-weight: 600; }
.err-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.tree-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 10px; display: flex; justify-content: center; background-image: radial-gradient(color-mix(in srgb, var(--line) 80%, transparent) 1px, transparent 1px); background-size: 18px 18px; }
.tree-wrap svg { display: block; max-width: none; }
.tree-node { cursor: pointer; }
.tree-node .tn-box { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; transition: transform .12s; }
.tree-node:hover .tn-box, .tree-node:focus .tn-box { stroke: var(--sc); stroke-width: 2.5; }
.tree-node:focus { outline: none; }
.tree-node .tn-name { fill: var(--ink); font: 600 13.5px var(--f-ui); }
.tree-node .tn-num { fill: var(--muted); font: 700 10.5px var(--f-ui); letter-spacing: .05em; }
.tree-node .tn-bar { fill: var(--surface-3); }
.tree-node .tn-fill { fill: var(--sc); }
.tree-node .tn-ic { color: var(--muted); }
.tree-node.n-progress .tn-box { stroke: var(--sc); stroke-width: 2.5; fill: color-mix(in srgb, var(--sc) 8%, var(--surface)); }
.tree-node.n-mastered .tn-box { fill: var(--sc); stroke: var(--sc); }
.tree-node.n-mastered .tn-name, .tree-node.n-mastered .tn-num { fill: #fff; }
.tree-node.n-mastered .tn-ic { color: #fff; }
.tree-node.n-mastered .tn-bar { fill: rgba(255,255,255,.35); } .tree-node.n-mastered .tn-fill { fill: #fff; }
.tree-node.n-locked .tn-box { fill: var(--surface-2); stroke-dasharray: 5 4; }
.tree-node.n-locked .tn-name { fill: var(--muted); }
.tree-edge { stroke: var(--line-2); stroke-width: 2; fill: none; }
.tree-edge.order { stroke-dasharray: 5 5; }
.tree-edge.lit { stroke-width: 3; }
.tree-arrow { fill: var(--line-2); }
.tree-subjects { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tree-subj { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .88rem; }
.tree-subj .subj-badge { width: 26px; height: 26px; border-radius: 50%; font-size: .7rem; }
.tree-subj.on { border-color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, var(--surface)); }
.tree-subj .ts-count { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.tree-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.tl-item { display: flex; gap: 10px; align-items: flex-start; }
.tl-swatch { flex: none; width: 34px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line-2); background: var(--surface); display: grid; place-items: center; color: #fff; }
.tl-swatch.n-mastered { background: var(--sc); border-color: var(--sc); }
.tl-swatch.n-progress { border: 2.5px solid var(--sc); background: color-mix(in srgb, var(--sc) 8%, var(--surface)); }
.tl-swatch.n-locked { background: var(--surface-2); border-style: dashed; }

/* ---------- Anglais, éditeur ---------- */
.vocab { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.vocab:last-child { border-bottom: 0; }
.vocab-side { display: flex; align-items: center; gap: 6px; flex: none; }
.vocab-list { max-height: 520px; overflow-y: auto; margin-top: 10px; }
.opts { display: grid; gap: 8px; margin: 10px 0; }
.opts .opt { text-align: left; font: inherit; color: inherit; width: 100%; }
.opts .opt:disabled { cursor: default; }
.reading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.reading .reading-text { padding: 18px 22px; }
.reading-text { position: sticky; top: 76px; max-height: calc(100vh - 100px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; }
.reading-text h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 0; }
.choice { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.choice:hover { border-color: var(--accent); transform: translateY(-1px); }
.choice > span:last-child { display: grid; gap: 4px; }
.choice-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
details.card > summary { cursor: pointer; }
.writing textarea { min-height: 260px; font: 16px/1.6 var(--f-read); }
.prompt { padding: 12px 14px; background: var(--surface-2); border-radius: 8px; margin-bottom: 10px; }
.repeat-text { font: 1.15rem/1.6 var(--f-read); padding: 14px; background: var(--surface-2); border-radius: 8px; }
.lesson { font: 16.5px/1.7 var(--f-read); max-width: 72ch; }
.reading-text { font: 17px/1.75 var(--f-read); max-width: 70ch; padding: 4px 0 10px; }
.editor-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.editor-split textarea { min-height: 520px; font: 14px/1.6 var(--f-mono); }
.editor-split .course { font-size: 15.5px; max-height: 620px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; background: var(--surface); }
.md-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.md-toolbar .btn { min-height: 28px; padding: 3px 8px; font-size: .8rem; }
.rich-preview { padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 8px; min-height: 44px; }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.type-box { display: grid; gap: 10px; }
.import-card { max-width: 860px; }
.ai-card { border-left: 4px solid var(--accent); }

/* ---------- Coach ---------- */
#coach-toggle { position: fixed; right: 22px; bottom: 22px; z-index: 45; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 23px; border: 0; background: var(--ink); color: var(--bg); font: 600 .95rem var(--f-ui); cursor: pointer; box-shadow: var(--shadow-lg); white-space: nowrap; }
#coach-toggle:hover { background: color-mix(in srgb, var(--ink) 88%, var(--accent)); }
body.coach-open #coach-toggle { display: none; }
#coach { position: fixed; right: 16px; bottom: 16px; top: calc(var(--top-h) + 12px); z-index: 50; width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; transition: transform .2s, opacity .2s; }
#coach.closed { transform: translateY(16px); opacity: 0; pointer-events: none; visibility: hidden; }
.coach-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.coach-head strong { font-size: 1rem; }
#coach-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 92%; padding: 10px 13px; border-radius: 12px; font-size: .93rem; line-height: 1.55; }
.msg p:last-child { margin-bottom: 0; }
.msg h3, .msg h4, .msg h5 { font-size: .95rem; margin: .6em 0 .3em; }
.msg.coach { background: var(--surface-2); border-top-left-radius: 4px; align-self: flex-start; }
.msg.user { background: var(--ink); color: var(--bg); border-top-right-radius: 4px; align-self: flex-end; }
.msg.user a { color: inherit; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg-actions .btn.ghost { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); max-width: 100%; white-space: normal; text-align: left; }
.msg-actions .btn.ghost:hover { border-color: var(--accent); }
.typing { display: flex; gap: 4px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
#coach-chips { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; border-top: 1px solid var(--line); }
.chip-btn, .chip-q { flex: none; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); border-radius: 15px; padding: 5px 11px; font: .8rem var(--f-ui); cursor: pointer; white-space: nowrap; }
.chip-btn:hover, .chip-q:hover { border-color: var(--ink-2); color: var(--ink); }
#coach-form { display: flex; gap: 8px; padding: 10px 12px 12px; }
#coach-form textarea { flex: 1; min-height: 42px; max-height: 140px; }

/* ---------- Modale, toasts ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 100; background: rgba(20, 22, 25, .45); display: grid; place-items: center; padding: 16px; }
.modal { width: min(620px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
/* P0-02 : la fenêtre reçoit le focus à l’ouverture (lecture du titre) ; pas de contour sur la boîte entière, les boutons gardent le leur */
.modal:focus { outline: none; }
.modal.wide { width: min(860px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 1.05rem; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }
#toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { padding: 10px 16px; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: .9rem; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: all .25s; max-width: min(520px, 90vw); }
.toast.show { opacity: 1; transform: none; }
.toast.good { border-left: 4px solid var(--good); }
.toast.warn { border-left: 4px solid var(--amber); }
.toast.bad { border-left: 4px solid var(--bad); }
.toast.gold { border-left: 4px solid var(--amber); }
.confetti { position: fixed; top: -12px; width: 8px; height: 12px; z-index: 130; border-radius: 2px; animation: fall 1.9s ease-in forwards; pointer-events: none; }
@keyframes fall { to { transform: translateY(105vh) rotate(540deg); opacity: .4; } }

/* Onboarding */
.ob-steps { display: flex; gap: 6px; margin-bottom: 16px; }
.ob-steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); }
.ob-steps i.on { background: var(--bark); }
.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.level-opt { text-align: left; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); }
.level-opt strong { display: block; }
.level-opt span { font-size: .8rem; color: var(--muted); }
.level-opt.on { border-color: var(--bark); background: var(--bark-soft); box-shadow: inset 0 0 0 1px var(--bark); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .reader { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--surface); }
  .toc nav { display: none; }
  .toc.open nav { display: block; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .nav-item span.lbl-long { display: none; }
}
@media (max-width: 860px) {
  #nav, .pill.exam { display: none; }
  #topbar { padding: 0 max(14px, env(safe-area-inset-right, 0px)) 0 max(20px, calc(env(safe-area-inset-left, 0px) + 14px)); gap: 10px; }
  #main { padding: 18px 16px 110px; }
  #tabbar { display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  #tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: .68rem; color: var(--muted); text-decoration: none; border-radius: 8px; }
  #tabbar a.active { color: var(--accent); font-weight: 600; }
  #tabbar a.active svg { background: var(--accent-soft); border-radius: 10px; padding: 2px 10px; box-sizing: content-box; }
  #coach-toggle { bottom: 76px; right: 14px; height: 42px; padding: 0 14px; }
  #coach { top: calc(env(safe-area-inset-top, 0px) + 8px); bottom: calc(68px + env(safe-area-inset-bottom, 0px)); right: 6px; left: 6px; width: auto; z-index: 60; }
  body.coach-open { overflow: hidden; }
  #coach-log { overscroll-behavior: contain; }
  #coach-chips { flex-wrap: wrap; overflow: visible; }
  .stepper { grid-template-columns: repeat(4, 1fr); }
  .step { flex-direction: column; text-align: center; gap: 4px; padding: 10px 4px; }
  .step .s-m { display: none; }
  .step .s-l { font-size: .78rem; }
  .row2, .row3 { grid-template-columns: minmax(0, 1fr); }
  .continue { grid-template-columns: 1fr; padding: 18px; }
  .continue .c-ic { display: none; }
  .week-days { grid-template-columns: 1fr; }
  .wd { min-height: 0; }
  .reading { grid-template-columns: 1fr; }
  .reading-text { position: static; max-height: none; }
  .editor-split { grid-template-columns: 1fr; }
  .result-hero { grid-template-columns: 1fr; }
  .copy { padding: 18px 16px; }
  .course { font-size: 16.5px; }
  h1 { font-size: 1.5rem; }
  .countdown { text-align: left; }
  .chapter-row { grid-template-columns: 30px minmax(0, 1fr); }
  .chapter-row .step-dots { grid-column: 2; }
}
@media (max-width: 420px) {
  .brand-name { display: none; }
  .qcard { padding: 16px 14px; }
  .card { padding: 16px 14px; }
}

/* ---------- Impression (cours en PDF via l'impression du navigateur) ---------- */
@media print {
  #topbar, #tabbar, #coach, #coach-toggle, .toc, .stepper, .step-foot, .no-print, .crumb, .explain-btn, #toasts { display: none !important; }
  body { background: #fff; color: #000; }
  #main { max-width: none; padding: 0; }
  .reader { display: block; }
  .course { max-width: none; font-size: 11.5pt; }
  .callout { box-shadow: none; }
}

/* ---------- Feuille PDF (toujours claire) ---------- */
.modal-foot:empty { display: none; }
.pdf-sheet { --bg: #fff; --surface: #fff; --surface-2: #F3F2EE; --surface-3: #E9E6DE; --line: #DDD9CF; --line-2: #C9C4B8; --ink: #15171A; --ink-2: #3D434B; --muted: #666B72; --accent: #1F6F5C; --amber: #A86A12;
  width: 182mm; background: #fff; color: #15171A; font-family: var(--f-read); padding: 0; }
.pdf-sheet .pdf-head { display: flex; justify-content: space-between; font: 600 9pt var(--f-ui); color: #666B72; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid #DDD9CF; padding-bottom: 6px; margin-bottom: 14px; }
.pdf-sheet h1 { font: 600 22pt/1.2 var(--f-read); margin: 0 0 14px; color: #15171A; }
.pdf-sheet .course { max-width: none; font-size: 11pt; line-height: 1.55; color: #15171A; }
.pdf-sheet .course h2 { font-size: 15pt; margin-top: 18px; }
.pdf-sheet .course h3 { font-size: 12.5pt; }
.pdf-sheet .callout { background: #fff; }
.pdf-sheet .callout-retenir { --c: #15171A; background: #F3F2EE; }


/* ======================================================================
   v3 : composants ajoutés
   ====================================================================== */
.subj-tile { background: color-mix(in srgb, var(--sc, var(--accent)) 7%, var(--surface)); border-color: color-mix(in srgb, var(--sc, var(--accent)) 22%, var(--line)); padding: 16px; border-radius: 14px; transition: transform .15s, box-shadow .15s; }
.subj-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--sc, var(--line-2)); }
.chapter-row { border-radius: 12px; }
.chapter-row.complete { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.card { border-radius: var(--r); }
.stat { border-radius: 12px; }
.stat-v { font-family: var(--f-display); }
.page-head h1 { font-size: 2.05rem; }
.ob-label { font-size: .86rem; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.ob-search { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); }
.ob-results { margin-top: 8px; }
.chk.add { border-style: dashed; color: var(--ink-2) !important; }
.chk.add:hover { border-color: var(--accent); color: var(--accent) !important; }
.ob-exams { padding: 10px 14px; border-radius: 10px; background: var(--surface-2); }
.ob-exams p { margin: 4px 0; }
.level-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }

/* Éditeur de cours en blocs */
.editor-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.ed-preview { position: sticky; top: calc(var(--top-h) + 12px); }
.ed-preview .course { max-height: calc(100vh - var(--top-h) - 70px); }
.ed-hint { margin: 0 0 8px; }
.ed-raw { min-height: 560px; }
.ed-actions { position: sticky; bottom: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(6px); padding: 12px 0; border-top: 1px solid var(--line); }
.blk-list { display: grid; gap: 0; }
.blk { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 10px 12px 12px; display: grid; gap: 8px; box-shadow: var(--shadow); }
.blk-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; }
.blk-label { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.blk-tools { margin-left: auto; display: flex; gap: 2px; }
.blk-tools .btn { min-height: 28px; width: 28px; }
.blk-h1 { background: var(--bark-soft); border-color: color-mix(in srgb, var(--bark) 30%, var(--line)); }
.blk-h1 .blk-label { color: var(--bark); }
.blk-h1 .blk-title-in { font: 700 1.15rem var(--f-display); }
.blk-h2 .blk-title-in { font: 600 1rem var(--f-display); }
.blk-box { --k: var(--line-2); background: color-mix(in srgb, var(--k) 6%, var(--surface)); border-color: color-mix(in srgb, var(--k) 35%, var(--line)); }
.blk-box.k-definition { --k: var(--sky); } .blk-box.k-theoreme, .blk-box.k-propriete, .blk-box.k-loi { --k: var(--plum); }
.blk-box.k-formule { --k: var(--accent); } .blk-box.k-methode { --k: var(--amber); } .blk-box.k-attention { --k: var(--bad); }
.blk-box.k-retenir { --k: var(--bark); } .blk-box.k-exemple, .blk-box.k-remarque, .blk-box.k-demo { --k: var(--muted); }
.blk-kind { width: auto; min-height: 30px; padding: 3px 26px 3px 10px; font-weight: 700; color: var(--k); border-color: color-mix(in srgb, var(--k) 45%, var(--line)); background: var(--surface); }
.blk-box-title { font-weight: 600; }
.blk-card-tag { background: color-mix(in srgb, var(--k) 12%, var(--surface)); color: var(--ink-2); }
.blk-field { display: grid; gap: 4px; }
.blk-mini { display: flex; flex-wrap: wrap; gap: 2px; }
.blk-mini .btn { min-height: 26px; padding: 2px 8px; font-size: .78rem; }
.blk-text { resize: vertical; min-height: 64px; overflow: hidden; font: 15px/1.6 var(--f-ui); }
.blk-view { padding: 8px 12px; border: 1px solid transparent; border-radius: 9px; font: 16px/1.6 var(--f-read); cursor: text; min-height: 40px; }
.blk-view:hover, .blk-view:focus-visible { border-color: var(--line-2); background: var(--surface); }
.blk-view > :last-child { margin-bottom: 0; }
.blk-edit { display: none; gap: 4px; }
.blk-field.editing .blk-view { display: none; }
.blk-field.editing .blk-edit { display: grid; }
.blk-mini-hint { font-size: .74rem; color: var(--muted); align-self: center; margin-left: 6px; }
.blk-math-show { display: block; width: 100%; min-height: 60px; padding: 12px; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; overflow-x: auto; font: inherit; }
.blk-math-show:hover { border-color: var(--accent); }
.blk-table-wrap { overflow-x: auto; }
.blk-table { display: grid; gap: 4px; }
.blk-table .input { min-height: 34px; padding: 5px 8px; }
.blk-table .input.th { font-weight: 600; background: var(--surface-2); }
.blk-adder { display: flex; justify-content: center; padding: 4px 0; }
.blk-add { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed transparent; background: none; color: var(--muted); font: 500 .8rem var(--f-ui); padding: 3px 12px; border-radius: 999px; cursor: pointer; opacity: .55; transition: opacity .15s; }
.blk-add:hover, .blk-add:focus-visible { opacity: 1; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.blk-list > .blk-adder:last-child .blk-add, .blk-empty + .blk-adder .blk-add { opacity: 1; border-color: var(--line-2); }
.blk-adder.open { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; margin: 6px 0; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); }
.blk-adder.open > .btn { align-self: flex-end; }
.blk-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.blk-pick { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 .85rem var(--f-ui); cursor: pointer; }
.blk-pick:hover { border-color: var(--accent); }
.blk-pick .blk-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--k, var(--muted)); }
.blk-pick.k-definition { --k: var(--sky); } .blk-pick.k-theoreme, .blk-pick.k-propriete { --k: var(--plum); } .blk-pick.k-formule { --k: var(--accent); }
.blk-pick.k-methode { --k: var(--amber); } .blk-pick.k-attention { --k: var(--bad); } .blk-pick.k-retenir { --k: var(--bark); }
.blk-empty { padding: 18px; border: 1px dashed var(--line-2); border-radius: 12px; text-align: center; }
.blk-empty .blk-palette { justify-content: center; }

/* Aide aux formules */
.fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-bottom: 8px; }
.fp-grid.fp-sym { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.fp-btn { min-height: 42px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 4px; overflow: hidden; }
.fp-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.fp-btn { font-size: 1.15rem; }
.fp-btn .katex { font-size: 1em; }
.fp-preview { min-height: 70px; padding: 12px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; overflow-x: auto; }

/* Formulaire de question */
.q-head { display: flex; align-items: center; gap: 10px; }
.qcm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.qcm-row.ok { border-color: var(--good); background: var(--good-soft); }
.qcm-ok { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72rem; color: var(--muted); cursor: pointer; padding-top: 6px; }
.qcm-ok input { width: 18px; height: 18px; accent-color: var(--good); }
.qcm-txt { display: grid; gap: 6px; }
.qcm-why { display: none; font-size: .85rem; }
.type-box.show-adv .qcm-why { display: block; }
details.adv > summary { display: flex; gap: 8px; align-items: baseline; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; }
.swatch.on { box-shadow: 0 0 0 2px var(--ink); }
.swatch-custom { position: relative; overflow: hidden; display: inline-block; background: conic-gradient(#DC2626, #E0B21E, #2E9E6A, #0EA5E9, #4F46E5, #C026D3, #DC2626); }
.swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* Relecture IA */
.review-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.grade-mini { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; flex: none; font-family: var(--f-display); }
.grade-mini strong { font-size: 1.7rem; line-height: 1; }
.grade-mini span { font-size: .8rem; opacity: .8; margin-top: -10px; }
.grade-mini.good { background: var(--good-soft); color: var(--good); } .grade-mini.mid { background: var(--amber-soft); color: var(--amber); } .grade-mini.low { background: var(--bad-soft); color: var(--bad); }
.review-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; display: grid; gap: 8px; }
.diff-old, .diff-new { padding: 8px 12px; border-radius: 8px; font-size: .92rem; }
.diff-old { background: var(--bad-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.diff-new { background: var(--good-soft); }
.diff-old > :last-child, .diff-new > :last-child { margin-bottom: 0; }
.toast-act { margin-left: 12px; border: 0; background: none; color: var(--sun); font: 700 .88rem var(--f-ui); cursor: pointer; pointer-events: auto; }
.tag.sky { background: var(--sky-soft); color: var(--sky); } .tag.berry { background: var(--berry-soft); color: var(--berry); } .tag.plum { background: var(--plum-soft); color: var(--plum); }

@media (max-width: 860px) {
  .ed-preview { position: static; }
  .ed-preview .course { max-height: 420px; }
  .page-head h1 { font-size: 1.6rem; }
}

/* Note en grand */
.grade-hero { --gc: var(--accent); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: 26px 28px; margin-bottom: 20px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--gc) 30%, var(--line)); background: color-mix(in srgb, var(--gc) 8%, var(--surface)); box-shadow: var(--shadow); }
.grade-hero.t-gold { --gc: var(--sun); } .grade-hero.t-good { --gc: var(--accent); } .grade-hero.t-fine { --gc: var(--sky); }
.grade-hero.t-mid { --gc: var(--amber); } .grade-hero.t-low { --gc: var(--berry); } .grade-hero.t-bad { --gc: var(--bad); }
.gh-dial { position: relative; width: 188px; height: 188px; max-width: 100%; }
.gh-rings { display: block; max-width: 100%; height: auto; }
.gh-track { stroke: color-mix(in srgb, var(--gc) 14%, var(--surface-3)); }
.gh-arc { stroke: var(--gc); transition: stroke-dashoffset .9s cubic-bezier(.2, .8, .2, 1); }
.gh-val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--f-display); }
.gh-num { font-size: 3.4rem; font-weight: 800; line-height: .95; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.gh-val span { font-size: 1rem; color: var(--muted); font-weight: 600; }
.gh-mention { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--gc); color: #fff; font: 800 .8rem var(--f-display); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.grade-hero.t-gold .gh-mention { color: #2A1E05; }
.gh-body h2 { font-size: 1.5rem; margin-bottom: .2em; }
.gh-xp { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; padding: 6px 14px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font: 800 1.05rem var(--f-display); }
.grade-hero.done .gh-xp { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (max-width: 640px) { .grade-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 22px 18px; } .grade-hero .row-btns { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .gh-arc { transition: none; } .grade-hero.done .gh-xp { animation: none; } }

/* Planning v3 */
.plan-summary { gap: 12px; }
.stat.tint-sky { background: var(--sky-soft); border-color: transparent; } .stat.tint-sky .stat-v { color: var(--sky); }
.stat.tint-plum { background: var(--plum-soft); border-color: transparent; } .stat.tint-plum .stat-v { color: var(--plum); }
.stat.tint-leaf { background: var(--accent-soft); border-color: transparent; } .stat.tint-leaf .stat-v { color: var(--accent); }
.stat.tint-berry { background: var(--berry-soft); border-color: transparent; } .stat.tint-berry .stat-v { color: var(--berry); }
.tl-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 6px; }
.tl-big { font: 800 2rem/1.1 var(--f-display); letter-spacing: -.02em; }
.tl-big span { font: 500 .95rem var(--f-ui); color: var(--muted); letter-spacing: 0; }
.timeline { height: 64px; }
.timeline .tl-track { top: 22px; height: 16px; border-radius: 8px; }
.timeline .tl-done { background: repeating-linear-gradient(135deg, var(--accent), var(--accent) 10px, color-mix(in srgb, var(--accent) 82%, #fff) 10px, color-mix(in srgb, var(--accent) 82%, #fff) 20px); }
.timeline .tl-now { top: 14px; height: 32px; width: 3px; border-radius: 2px; }
.timeline .tl-lbl { top: 46px; }
.tl-weeks { display: flex; gap: 3px; height: 54px; align-items: stretch; margin: 2px 0 6px; }
.tl-week { flex: 1 1 0; min-width: 4px; border-radius: 5px; background: color-mix(in srgb, var(--wc) 16%, var(--surface-2)); display: flex; align-items: flex-end; overflow: hidden; }
.tl-week > span { display: block; width: 100%; background: var(--wc); opacity: .85; border-radius: 4px 4px 0 0; }
.tl-week.cur { outline: 2px solid var(--ink); outline-offset: 1px; }
.tl-week:hover > span { opacity: 1; }
.week-days { gap: 10px; }
.wd { padding: 12px; min-height: 210px; gap: 7px; border-radius: 14px; }
.wd.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.wd.today .wd-h strong { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0 9px; }
.wd-h strong { font: 800 1.2rem var(--f-display); }
.task { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 8px; align-items: start; padding: 8px 9px; border-radius: 10px; border-left: 0; background: color-mix(in srgb, var(--c) 13%, var(--surface)); font-size: .82rem; }
.task:hover { background: color-mix(in srgb, var(--c) 22%, var(--surface)); }
.task-dot { grid-row: span 2; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--c); display: grid; place-items: center; color: #fff; }
.task.done .task-dot { background: var(--c); }
.task-l { font-weight: 600; }
.task .min { margin: 0; font-size: .74rem; }
.task.done { opacity: .6; text-decoration: none; }
.task.done .task-l { text-decoration: line-through; }
.wd-rest { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: .85rem; font-weight: 600; margin: auto 0; justify-content: center; }
.wd-foot { margin-top: auto; display: grid; gap: 4px; font-size: .74rem; color: var(--muted); }
.wd-load { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.wd-load > span { display: block; height: 100%; background: var(--accent); }
.gantt .g-cell { min-height: 52px; padding: 6px 4px; gap: 4px; }
.gantt .g-head.cur { background: var(--accent); color: var(--accent-ink); }
.chip { padding: 5px 8px; border-radius: 7px; font-size: .76rem; font-weight: 600; max-width: 170px; }
@media (max-width: 860px) { .tl-weeks { height: 40px; gap: 2px; } .tl-big { font-size: 1.6rem; } }

/* Retours et classement */
.fb-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.fb-kind { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); font: 600 .9rem var(--f-ui); cursor: pointer; text-align: left; }
.fb-kind:hover { border-color: var(--accent); }
.fb-kind.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.fb-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-retour { display: grid; gap: 4px; min-width: 0; }
.fb-text { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.adm-item .fb-text { display: block; }
.adm-item .fb-retour { margin-top: 4px; }
.fb-lieu { display: flex; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 6px 0 16px; }
.pod { display: grid; justify-items: center; gap: 6px; padding: 18px 10px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-align: center; min-width: 0; }
.pod.p1 { order: 2; padding-top: 28px; background: color-mix(in srgb, var(--sun) 16%, var(--surface)); border-color: color-mix(in srgb, var(--sun) 50%, var(--line)); }
.pod.p2 { order: 1; background: color-mix(in srgb, var(--sky) 8%, var(--surface)); }
.pod.p3 { order: 3; background: color-mix(in srgb, var(--bark) 9%, var(--surface)); }
.pod.me { box-shadow: inset 0 0 0 2px var(--accent); }
.pod-medal { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 .95rem var(--f-display); background: var(--surface-3); color: var(--ink); }
.pod.p1 .pod-medal { background: var(--sun); color: #2A1E05; } .pod.p2 .pod-medal { background: #C9D2DC; color: #1D2A36; } .pod.p3 .pod-medal { background: #D9A36F; color: #2E1B0A; }
.pod-av, .lb-av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 800 1.2rem var(--f-display); }
.pod-name { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-xp { font: 800 1.1rem var(--f-display); color: var(--amber); }
.lb { padding: 6px 10px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.lb-row:last-child { border-bottom: 0; }
.lb-row.me { background: var(--accent-soft); border-radius: 10px; }
.lb-rank { width: 26px; text-align: center; font: 800 1rem var(--f-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-av { width: 34px; height: 34px; font-size: .95rem; flex: none; }
.lb-name { font-weight: 600; }
.lb-xp { font-family: var(--f-display); font-variant-numeric: tabular-nums; }
.ann-btns { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 860px) { .ann-row { flex-wrap: wrap; } .ann-row .grow { flex-basis: calc(100% - 60px); } .ann-btns { width: 100%; justify-content: flex-end; } }

/* Écrans moyens : le menu passe en icônes pour garder le bloc J-… / série / compte en haut à droite */
@media (min-width: 861px) and (max-width: 1180px) { #nav .nav-item > span:not(.badge) { display: none; } #nav .nav-item { padding-inline: 11px; } #topbar { gap: 14px; } }

/* Planning : poids des matières */
.pw-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pw-row { display: grid; grid-template-columns: minmax(150px, 1fr) auto 92px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--sc) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--sc) 22%, var(--line)); }
.pw-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pw-name .task-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sc); flex-shrink: 0; }
.pw-seg { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.pw-opt { border: 0; background: none; padding: 6px 10px; border-radius: 8px; font: inherit; font-size: .85rem; color: var(--ink-2); cursor: pointer; }
.pw-opt.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.pw-row:has(.pw-opt:first-child.on) { opacity: .6; }
.pw-h { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: .9rem; }
.pw-how summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.pw-how ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
@media (max-width: 640px) { .pw-row { grid-template-columns: 1fr auto; } .pw-seg { grid-column: 1 / -1; order: 3; } .pw-opt { flex: 1; padding: 6px 6px; } }

/* Planning : glisser-déposer */
.task.drag { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.task.dragging { opacity: .35; }
.task-ghost { position: fixed; z-index: 200; pointer-events: none; cursor: grabbing; box-shadow: 0 10px 28px rgba(0,0,0,.22); transform: rotate(-1.5deg); }
.wd.drop-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.drop-mark { height: 4px; border-radius: 2px; background: var(--accent); margin: -2px 0; }

/* Accueil v4 : tableau de bord qui tient sur un écran */
.view-home .home-head { margin-bottom: 14px; }
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.dash > * { min-width: 0; margin: 0; }
.dash-hero { grid-column: span 8; display: flex; flex-direction: column; gap: 10px; }
.dash-hero .continue { margin: 0; flex: 1; }
.dash-hero .alts { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-fire { grid-column: span 4; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.dash-today { grid-column: span 5; }
.dash-quests { grid-column: span 3; display: flex; flex-direction: column; }
.dash-subjects { grid-column: span 4; }
.dash-today, .dash-quests, .dash-subjects { height: clamp(240px, calc(100vh - var(--top-h) - 420px), 380px); display: flex; flex-direction: column; overflow: hidden; }
.dash-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.dash-h h3 { margin: 0; font: 700 1.02rem var(--f-display); }
.dash-scroll { overflow-y: auto; min-height: 0; flex: 1; margin: 0 -6px; padding: 0 6px; }
.dash-scroll .list-row { padding: 9px 2px; }
.dash-subj { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.dash-subj:last-child { border-bottom: 0; }
.dash-subj .name { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-subj:hover .name { color: var(--accent); }
.dash-quests .quest { font-size: .88rem; }
.fire-top { display: flex; align-items: center; gap: 14px; }
.fire-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fire-n { font: 800 1.6rem/1 var(--f-display); color: var(--bark); }
.dash-fire .week-strip .day { padding: 6px 0; }
.dash-fire .week-strip .d { font-size: .72rem; }
.hearth { width: 116px; height: 94px; flex: none; overflow: visible; }
.hearth .h-shadow { fill: color-mix(in srgb, var(--ink) 10%, transparent); }
.hearth .h-log { fill: #8B5A2B; }
.hearth .h-cut { fill: #E8C18E; }
.hearth .h-ring { fill: none; stroke: #B8844C; stroke-width: 1.2; }
.hearth .h-embers circle { fill: #C9763A; opacity: .55; }
.hearth .h-flames { transform-box: view-box; }
.hearth .h-f1 { fill: #F2A33A; transform-origin: 0 0; animation: flick 1.6s ease-in-out infinite; }
.hearth .h-f2 { fill: #F7C843; transform-origin: 0 0; animation: flick 1.2s ease-in-out infinite reverse; }
.hearth .h-f3 { fill: #FFF1B8; transform-origin: 0 0; animation: flick .9s ease-in-out infinite; }
.hearth .h-spark { fill: #F7C843; opacity: 0; animation: spark 2.6s ease-out infinite; }
@keyframes flick { 0%,100% { transform: scale(1, 1) skewX(0deg); } 30% { transform: scale(.94, 1.06) skewX(-3deg); } 60% { transform: scale(1.04, .96) skewX(2deg); } }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -46px); } }
@media (prefers-reduced-motion: reduce) { .hearth * { animation: none !important; } }
@media (max-width: 1100px) {
  .dash-hero, .dash-fire { grid-column: span 12; }
  .dash-today { grid-column: span 7; } .dash-quests { grid-column: span 5; } .dash-subjects { grid-column: span 12; height: auto; }
}
@media (max-width: 760px) {
  .dash > * { grid-column: span 12 !important; }
  .dash-today, .dash-quests, .dash-subjects { height: auto; }
  .dash-hero .alts { grid-template-columns: minmax(0, 1fr); }
}
.dash-subj .grow { flex: 1; min-width: 0; }

/* Confiance demandée au moment de valider */
.conf-ask { margin-top: 14px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--sun) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--sun) 45%, var(--line)); animation: pop .18s ease-out; }
.conf-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.conf-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.conf-ask .conf-btn { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.conf-ask .conf-btn small { display: block; color: var(--muted); font-size: .78rem; }
.conf-ask .conf-btn:hover, .conf-ask .conf-btn:focus-visible { border-color: var(--accent); }
.conf-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: none; color: #fff; }
.c-sur .conf-ic { background: var(--good, #2E8540); } .c-hesitant .conf-ic { background: var(--amber); } .c-hasard .conf-ic { background: var(--muted); }
@keyframes pop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 560px) { .conf-opts { grid-template-columns: minmax(0, 1fr); } }

/* Mode focus (cartes et exercices en plein écran) */
.focus { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; }
.focus-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 10px max(18px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); background: var(--surface); }
.focus-top strong { font: 700 1rem var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus-scroll { flex: 1; overflow-y: auto; padding: 24px max(16px, env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.focus-body { max-width: 980px; margin: 0 auto; }
.focus-body .qcard { padding: 26px 30px; }
.focus-body .qcard .qtext, .focus-body .qcard > .rich { font-size: 1.12rem; }
.focus-body .opt { padding: 14px 16px; font-size: 1.02rem; }
body.focus-on { overflow: hidden; }
body.focus-on #coach-toggle { z-index: 70; } body.focus-on #coach { z-index: 75; } body.focus-on #tabbar { display: none; }
@media (max-width: 600px) { .focus-body .qcard { padding: 16px; } }

/* Progression : prévision des révisions, à la hauteur des cartes voisines */
.view-progression .grid > .card, .view-stats .grid > .card { display: flex; flex-direction: column; }
.fc-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.fc-n { font: 800 1.8rem/1 var(--f-display); color: var(--accent); }
.fc { flex: 1; min-height: 150px; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; }
.fc-col { height: 100%; display: grid; grid-template-rows: auto 1fr auto; align-items: end; justify-items: center; gap: 3px; }
.fc-bar { width: 100%; max-width: 22px; border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--accent) 70%, var(--surface)); align-self: end; }
.fc-col.today .fc-bar { background: var(--sun); }
.fc-v { font-size: .7rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fc-l { font-size: .68rem; color: var(--muted); }
[hidden] { display: none !important; }

/* Rédactions IA en tâche de fond */
#jobs { position: fixed; left: max(18px, env(safe-area-inset-left, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-lg); font-size: .88rem; max-width: calc(100vw - 140px); }
#jobs span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#jobs .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) { #jobs { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }

/* Schémas des cours */
.diagram { margin: 18px 0; padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); overflow-x: auto; text-align: center; }
.diagram svg { max-width: 100%; height: auto; }
.diagram .diagram-src { text-align: left; font-size: .8rem; color: var(--muted); margin: 0; white-space: pre-wrap; }
.diagram.bad::before { content: "Schéma illisible :"; display: block; font-size: .8rem; color: var(--muted); text-align: left; }

/* Aide rapide */
.help-list { display: grid; gap: 12px; }
.help-row { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.help-row p { margin: 2px 0 0; }
.help-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--bark-soft); color: var(--bark); }

/* À faire (accueil) */
.todo-add { display: flex; gap: 6px; margin-top: 10px; }
.todo-add .input { flex: 1; min-width: 0; }
.todo-row .btn.icon.sm { opacity: .55; }
.todo-row:hover .btn.icon.sm { opacity: 1; }
.ob-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 520px) { .ob-row { grid-template-columns: 1fr; } }

/* Réviser : bascule Matières / Carte du programme */
.seg-toggle { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); }
.seg-toggle a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 7px; font: 600 .9rem var(--f-ui); color: var(--ink-2); text-decoration: none; }
.seg-toggle a.on { background: var(--bark-soft); color: var(--bark); }

/* Carte du programme */
.program-map { display: grid; gap: 14px; }
.pm-sum { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; font-size: .95rem; }
.pm-sum strong { font: 800 1.5rem/1 var(--f-display); }
.pm-legend { display: flex; flex-wrap: wrap; gap: 16px; }
.pm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pm-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; --sc: var(--accent); }
.pm-row { display: grid; grid-template-columns: 230px 1fr; gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pm-head { display: flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; min-width: 0; }
.pm-head .name { font-weight: 600; line-height: 1.25; }
.pm-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; min-width: 0; }
.pm-cell { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-size: .8rem; line-height: 1.2; transition: transform .12s; }
.pm-cell:hover { transform: translateY(-1px); border-color: var(--sc); }
.pm-n { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: .75rem; background: var(--surface-3); color: var(--ink-2); }
.pm-name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pm-cell.lv0, .pm-sw.lv0 { background: var(--surface-2); }
.pm-cell.lv1 { background: color-mix(in srgb, var(--sc) 10%, var(--surface)); }
.pm-cell.lv2, .pm-sw.lv2 { background: color-mix(in srgb, var(--sc) 22%, var(--surface)); }
.pm-cell.lv3 { background: color-mix(in srgb, var(--sc) 34%, var(--surface)); }
.pm-cell.lv4, .pm-sw.lv4 { background: var(--sc); border-color: var(--sc); color: #fff; }
.pm-cell.lv1 .pm-n, .pm-cell.lv2 .pm-n, .pm-cell.lv3 .pm-n { background: var(--sc); color: #fff; }
.pm-cell.lv4 .pm-n { background: rgba(255,255,255,.25); color: #fff; }
.pm-cell.due::after, .pm-sw.due::after { content: ""; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.pm-sw.due { position: relative; }
@media (max-width: 760px) { .pm-row { grid-template-columns: 1fr; } .pm-cells { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }

/* Planning v5 : phases, jours travaillés, heures par matière */
.tl-week.ph-revision { --wc: var(--sky); }
.tl-week.ph-blanc { --wc: var(--plum); }
.tl-week.ph-final { --wc: var(--sun); }
.tl-week.ph-exam { --wc: var(--berry); }
.ph-sw.ph-revision { background: var(--sky); } .ph-sw.ph-blanc { background: var(--plum); } .ph-sw.ph-final { background: var(--sun); } .ph-sw.ph-exam { background: var(--berry); }
.day-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.day-pick { min-width: 52px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font: 600 .88rem var(--f-ui); cursor: pointer; }
.day-pick.on { background: var(--bark-soft); border-color: var(--bark); color: var(--bark); }
.pw-hours { display: flex; align-items: center; gap: 6px; }
.pw-num { width: 76px; text-align: center; }
.wd-h { position: relative; }
.wd-toggle { margin-left: auto; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); border-radius: 6px; font: 500 .72rem var(--f-ui); padding: 2px 7px; cursor: pointer; opacity: .75; }
.wd-toggle:hover { opacity: 1; color: var(--ink); border-color: var(--ink-2); }
.wd.off { background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 6px, transparent 6px, transparent 12px); }
.chip.movable { cursor: pointer; }
.chip.movable:hover { outline: 2px solid var(--ink); outline-offset: 1px; }
.chip svg { margin-left: 4px; vertical-align: -1px; }
.wd-h { gap: 6px; align-items: center; } .wd-h strong { margin-right: auto; }
.wd > .wd-toggle { align-self: center; margin: 8px auto 0; }
.wd.off > .wd-toggle { opacity: 1; border-color: var(--bark); color: var(--bark); }

/* Examens : cartes cliquables, sujets de mon examen */
.exam-card { cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.exam-card:hover { transform: translateY(-2px); border-color: var(--bark); box-shadow: var(--shadow-lg); }
.exam-card .ic-wrap { background: var(--bark-soft); color: var(--bark); }
.exam-go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font: 600 .88rem var(--f-ui); color: var(--bark); }
.exam-card:hover .exam-go svg { transform: translateX(3px); }
.exam-go svg { transition: transform .12s; }
.my-exam { margin-bottom: 18px; }
.my-exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 10px 0; }
.my-exam-cell { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.my-exam-cell .name { font-weight: 600; }

/* ---------- Arbre global (v5) ---------- */
.tree-subj.global { border-color: color-mix(in srgb, var(--bark) 40%, var(--line)); }
.gt-head-t { fill: #fff; font: 700 12.5px var(--f-ui); letter-spacing: .02em; }
.tree-node .tn-name.gt-name { font: 600 11.5px var(--f-ui); }
.gt-goal rect { fill: color-mix(in srgb, var(--bark) 72%, #1a0f05); filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--bark) 35%, transparent)); }
.gt-goal-t { fill: #fff; font: 700 13.5px var(--f-ui); }
.gt-goal-s { fill: rgba(255,255,255,.85); font: 500 11px var(--f-ui); }
.tree-edge.cross { stroke: var(--muted); opacity: .45; stroke-width: 1.5; }
.my-exam-cell { flex-wrap: wrap; } .my-exam-cell .grow { min-width: 0; } .my-exam-cell > .btn { margin-left: auto; }
.my-exam-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.diagram .node rect, .diagram .cluster rect { rx: 9px; ry: 9px; }
.diagram .cluster-label, .diagram .cluster text { font-weight: 600; }
.diagram .edgeLabel { font-size: 14px; }

/* ---------- Couleur au choix (Réglages) : forêt par défaut, bois, ardoise ---------- */
:root[data-accent="foret"] { --accent: #2C783B; --accent-hover: #256E35; --accent-ink: #FFFFFF; --accent-soft: #E0F1DF; --focus: #2C783B; --bg: #F5F7F1; --surface-2: #EEF2E8; --surface-3: #E1E7D9; --line: #DFE5D6; --line-2: #C5CDB9; }
@media (prefers-color-scheme: dark) { :root[data-accent="foret"]:not([data-theme="light"]) { --accent: #6CC470; --accent-hover: #86D389; --accent-ink: #0C1A0E; --accent-soft: #1C301D; --focus: #6CC470; --bg: #12160F; --surface: #1A1F16; --surface-2: #21271C; --surface-3: #2B3224; --line: #2E3528; --line-2: #3F4836; } }
:root[data-theme="dark"][data-accent="foret"] { --accent: #6CC470; --accent-hover: #86D389; --accent-ink: #0C1A0E; --accent-soft: #1C301D; --focus: #6CC470; --bg: #12160F; --surface: #1A1F16; --surface-2: #21271C; --surface-3: #2B3224; --line: #2E3528; --line-2: #3F4836; }
:root[data-accent="ardoise"] { --accent: #2F5F8A; --accent-hover: #264E72; --accent-ink: #FFFFFF; --accent-soft: #E2EBF4; --focus: #2F5F8A; --hero: #1F3A55; --hero-ink: #EEF4FA; --bg: #F4F6F8; --surface-2: #ECF0F4; --surface-3: #DEE4EB; --line: #DCE2E9; --line-2: #C3CCD6; }
@media (prefers-color-scheme: dark) { :root[data-accent="ardoise"]:not([data-theme="light"]) { --accent: #7FB0E0; --accent-hover: #9AC2EA; --accent-ink: #0A1622; --accent-soft: #1A2633; --focus: #7FB0E0; --hero: #1B2C3E; --hero-ink: #EAF2FA; --bg: #101418; --surface-2: #1E242A; --surface-3: #283038; --line: #2B333B; --line-2: #3C4650; --surface: #171C21; } }
:root[data-theme="dark"][data-accent="ardoise"] { --accent: #7FB0E0; --accent-hover: #9AC2EA; --accent-ink: #0A1622; --accent-soft: #1A2633; --focus: #7FB0E0; --hero: #1B2C3E; --hero-ink: #EAF2FA; --bg: #101418; --surface-2: #1E242A; --surface-3: #283038; --line: #2B333B; --line-2: #3C4650; --surface: #171C21; }
.dash-today, .dash-quests, .dash-subjects { height: clamp(240px, calc(100vh - var(--top-h) - 335px), 720px); }
@media (min-width: 900px) { #main:has(.view-home) { padding-bottom: 22px; } }

/* ---------- Atlas d'anatomie 3D ---------- */
.anat-regions, .anat-layers { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.anat-layers { margin-top: 0; gap: 6px 16px; }
.anat-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .86rem var(--f-ui); cursor: pointer; }
.anat-chip:hover { border-color: var(--accent); }
.anat-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.anat-layer { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; cursor: pointer; }
.anat-layer i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.15); }
.anat-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
.anat-stage { position: relative; height: min(62vh, 600px); min-height: 360px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 50% 40%, var(--surface) 0%, var(--surface-2) 100%); touch-action: none; }
.anat-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.anat-canvas:active { cursor: grabbing; }
.anat-loading { position: absolute; inset: 0; display: grid; place-items: center; }
.anat-side { min-width: 0; }
.anat-info { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.anat-info h3 { margin: 0; font: 700 1.2rem var(--f-display); }
.anat-list { display: flex; flex-direction: column; max-height: calc(min(68vh, 640px) - 130px); overflow-y: auto; margin: 0 -6px; }
.anat-item { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 .9rem var(--f-ui); text-align: left; cursor: pointer; }
.anat-item:hover { background: var(--surface-2); }
.anat-item i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.anat-opts { display: grid; gap: 8px; }
.anat-opts .btn { justify-content: flex-start; text-align: left; }
.anat-credit { margin-top: 10px; }
@media (max-width: 860px) { .anat-wrap { grid-template-columns: minmax(0, 1fr); } .anat-stage { height: 56vh; } .anat-list { max-height: 320px; } }
.pdf-holder { position: fixed; left: -20000px; top: 0; background: #fff; }
.pdf-sheet .pdf-break { display: block; margin: 0; padding: 0; }
.pdf-sheet .course p, .pdf-sheet .course li { text-wrap: wrap; }
.pdf-sheet .diagram { background: #fff; border-color: #DDD9CF; }
.pdf-sheet .course > *:first-child { margin-top: 0; }
.pdf-sheet, .pdf-sheet * { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; box-shadow: none !important; }
/* html2canvas place alors chaque lettre à sa vraie position (sinon des mots se chevauchent) */
.pdf-sheet .course p, .pdf-sheet .course li, .pdf-sheet .course td, .pdf-sheet .course th { letter-spacing: 0.01px; }
/* Progression : widgets rangés sans trous (2 larges puis 3 égaux, même hauteur par rangée) */
.prog-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin-bottom: 18px; }
.prog-grid > .card { margin: 0; grid-column: span 2; display: flex; flex-direction: column; }
.prog-grid > .card:nth-child(-n+2) { grid-column: span 3; }
@media (max-width: 860px) { .prog-grid { grid-template-columns: minmax(0, 1fr); } .prog-grid > .card, .prog-grid > .card:nth-child(-n+2) { grid-column: auto; } }
.tree-edge.gt-bus { stroke: var(--line-2); stroke-width: 2.5; }
.chip.movable { cursor: grab; touch-action: none; user-select: none; }
.chip .grip { opacity: .6; margin-right: 4px; font-size: .7em; letter-spacing: -1px; }
.chip.dragging { opacity: .35; }
.g-cell.drop-on { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); outline: 2px dashed var(--accent); outline-offset: -3px; }
/* Avancement de la lecture d'un cours */
.read-progress { position: absolute; left: 0; right: 0; top: 100%; height: 4px; z-index: 39; background: color-mix(in srgb, var(--line) 60%, transparent); pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 0 3px 3px 0; transition: width .12s linear; }
.toc-progress { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; }
.toc-progress-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.toc-progress-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .12s linear; }
@media print { .read-progress { display: none; } }
/* Mise en avant de l'atlas 3D */
.atlas-promo { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; align-items: center; margin: 0 0 20px; padding: 16px 22px 16px 16px; border-radius: 18px; text-decoration: none; color: var(--hero-ink); background: var(--hero); overflow: hidden; position: relative; }
.atlas-promo:hover { filter: brightness(1.05); }
.atlas-pic { background: #FAFAF8; border-radius: 12px; height: 170px; display: grid; place-items: center; overflow: hidden; position: relative; }
.atlas-pic img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); max-width: none; object-fit: contain; }
.atlas-txt h2 { margin: 2px 0 6px; color: var(--hero-ink); font-size: 1.5rem; }
.atlas-txt p { margin: 0 0 12px; opacity: .88; max-width: 60ch; }
.atlas-txt .c-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; opacity: .75; }
.atlas-txt .btn.primary { background: var(--sun); color: #2A1E05; border-color: transparent; }
.alt.atlas-alt img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; background: #FAFAF8; flex: none; }
@media (max-width: 600px) { .atlas-promo { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px; } .atlas-pic { height: 120px; } .atlas-txt h2 { font-size: 1.2rem; } .atlas-txt p { display: none; } }

/* ---------- Comptes et offres ---------- */
.auth-card { max-width: 520px; }
.auth-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); margin: 6px 0 14px; }
.auth-tab { flex: 1; border: 0; background: transparent; padding: 9px 10px; border-radius: 9px; font: inherit; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.auth-tab.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--ink-3); font-size: .85rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-btn { width: 100%; justify-content: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); font-weight: 600; }
.google-btn:hover { background: var(--surface-2); }
/* écran de connexion : une carte centrée, sans menu ni coach autour */
body.auth-mode #nav, body.auth-mode .top-right, body.auth-mode #tabbar, body.auth-mode #coach-toggle, body.auth-mode #coach { display: none !important; }
.auth-screen { display: flex; justify-content: center; padding: 8px 0 40px; }
.auth-box { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px 22px; box-shadow: var(--shadow); }
.auth-logo { width: 46px; height: 40px; margin: 0 auto 10px; }
.auth-logo svg { width: 100%; height: 100%; }
.auth-title { font: 800 1.5rem/1.2 var(--f-display); text-align: center; margin: 0 0 4px; }
.auth-sub { text-align: center; color: var(--ink-2); margin: 0 0 20px; font-size: .95rem; }
.auth-box .form { gap: 12px; }
.auth-main { width: 100%; justify-content: center; margin-top: 4px; }
.auth-row { display: flex; justify-content: space-between; align-items: baseline; }
.form .auth-pw { display: grid; gap: 5px; } .auth-pw .auth-row label { display: inline; font-weight: 500; font-size: .9rem; color: var(--ink-2); }
.auth-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .auth-two > label { align-content: start; }   /* le pseudo reste aligné quand son message apparaît */
.auth-swap { text-align: center; margin: 18px 0 0; font-size: .92rem; color: var(--ink-2); }
.auth-note { text-align: center; margin: 8px 0 0; }
.auth-back { max-width: 400px; margin: 0 auto 8px; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 420px) { .auth-two { grid-template-columns: 1fr; } .auth-box { padding: 22px 18px 18px; border-radius: 14px; } }
.name-field { display: grid; align-content: start; gap: 4px; }
.name-note.good { color: var(--good, #2E8540); } .name-note.bad { color: var(--bad, #C2410C); }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.row-inline { display: flex; gap: 8px; align-items: flex-start; } .row-inline > .name-field { flex: 1; min-width: 0; }
.acct-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.plan-pill { padding: 4px 10px; border-radius: 999px; background: var(--accent-soft, var(--surface-2)); color: var(--accent); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.big-num { font: 800 2rem/1.1 var(--f-display); margin: 4px 0; }
.quota-list { display: grid; gap: 12px; }
.quota-top { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; margin-bottom: 4px; }
.quota-top .quota-n { white-space: nowrap; flex: none; }
.quota-more summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .9rem; margin: 6px 0 10px; }
.quota-row .bar { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.quota-row .bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.table-wrap { overflow-x: auto; }
.plans-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 520px; }
.plans-table th, .plans-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.plans-table th:first-child, .plans-table td:first-child { text-align: left; }
.plans-table .cur { background: var(--surface-2); }
.plans-table .ok { color: var(--accent); font-weight: 800; }
.lock-box ul { margin: 4px 0 0; padding-left: 18px; }
.lock-box .still { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.upsell { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--accent); }
.atlas-locked { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; align-items: center; }
.atlas-locked img { width: 140px; height: 180px; object-fit: contain; background: #FAFAF8; border-radius: 12px; }
@media (max-width: 600px) { .atlas-locked { grid-template-columns: 1fr; } }

/* Créer : importer son cours en 3 étapes */
.imp-step { display: grid; gap: 12px; }
.imp-step.off { opacity: .55; }
.imp-step-h { display: flex; align-items: center; gap: 10px; }
.imp-step-h h3 { margin: 0; font: 700 1.05rem var(--f-display); }
.imp-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 800 .9rem var(--f-display); flex: none; }
.imp-step.off .imp-n { background: var(--surface-3); color: var(--muted); }
.drop-zone { display: grid; justify-items: center; gap: 6px; width: 100%; padding: 36px 16px; border: 2px dashed var(--line-2); border-radius: var(--r); background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; text-align: center; }
.drop-zone:hover, .drop-zone.over { border-color: var(--accent); background: var(--accent-soft); }
.drop-zone strong { font: 700 1.15rem var(--f-display); }
.drop-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--accent); }
.drop-zone .btn { pointer-events: none; margin-top: 6px; }
.paste-box summary { cursor: pointer; color: var(--muted); }
.paste-box[open] { display: grid; gap: 8px; }
.file-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.found { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.found .subj-badge { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #fff; font: 800 .95rem var(--f-display); flex: none; }
.found > div { flex: 1 1 180px; min-width: 0; }
.change summary { cursor: pointer; color: var(--muted); }
.change[open] { display: grid; gap: 8px; }
.read-out { white-space: pre-wrap; max-height: 260px; overflow: auto; margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font: 13px/1.5 var(--f-mono); }

/* Choisir une offre */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.offer { display: grid; gap: 6px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.offer.wanted { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.offer-name { font: 800 1.1rem var(--f-display); }
.offer-price { font: 800 1.6rem/1.1 var(--f-display); }
.offer-eco { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--good) 16%, var(--surface)); color: var(--good); font-size: .78rem; font-weight: 700; }
.offer .btn, .offer .tag { justify-self: start; margin-top: 6px; }
.pill .pill-txt { font-weight: 500; color: var(--muted); }
.pill .pill-txt { display: none; }

/* Corriger le cours sur place, et le compléter avec l'IA */
.course-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 22px; }
.edit-reader { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.edit-banner { position: sticky; top: calc(var(--top-h) + 8px); z-index: 5; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 16px; margin-bottom: 18px; background: var(--accent-soft); border: 1px solid var(--line); border-radius: 12px; font-family: var(--f-ui); }
.edit-banner .grow { flex: 1 1 260px; min-width: 0; }
.course.editing .eblock { position: relative; padding: 6px 34px 6px 10px; margin: 0 -10px 4px; border-radius: 8px; border: 1px dashed transparent; cursor: pointer; }
.course.editing .eblock > :last-child { margin-bottom: 0; }
.course.editing .eblock:hover, .course.editing .eblock:focus-visible { border-color: var(--line-2, var(--line)); background: var(--surface-2, var(--surface)); outline: none; }
.eblock-pen { position: absolute; top: 8px; right: 8px; color: var(--muted); opacity: 0; transition: opacity .15s; }
.eblock:hover .eblock-pen, .eblock:focus-visible .eblock-pen { opacity: 1; }
@media (hover: none) { .eblock-pen { opacity: .6; } }
.eblock.hidden-edit { display: none; }
.eblock-edit { display: grid; gap: 8px; padding: 12px; margin: 0 -10px 10px; border: 1px solid var(--accent); border-radius: 10px; background: var(--surface); font-family: var(--f-ui); }
.eblock-edit textarea { width: 100%; font-size: .9rem; line-height: 1.5; resize: vertical; }
.eblock-preview { padding: 8px 12px; border-radius: 8px; background: var(--surface-2, var(--surface)); border: 1px solid var(--line); max-height: 320px; overflow: auto; }
.eblock-preview > :last-child { margin-bottom: 0; }
.edit-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 .82rem var(--f-ui); padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.ask-chip:hover { border-color: var(--accent); color: var(--accent); }
.sel-pop { flex-wrap: wrap; max-width: calc(100vw - 16px); }


/* ---------- Direction artistique de la page d'accueil (2026-10-21) ---------- */
body { background: linear-gradient(180deg, var(--surface) 0, var(--bg) 360px) no-repeat, var(--bg); }
#topbar { background: color-mix(in srgb, var(--surface) 92%, transparent); }
.brand-2 { color: var(--bark); }
.nav-item { font-weight: 600; border-radius: 999px; padding: 7px 14px; }
.nav-item.active { color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.pill, .icon-btn { border-radius: 999px; }
.btn { border-radius: 999px; font: 600 .92rem/1.2 var(--f-ui); border-color: var(--line); padding: 7px 16px; }
.btn:hover { border-color: var(--accent); color: var(--accent-hover); }
.btn.primary { font-family: var(--f-display); font-weight: 750; letter-spacing: .005em; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn.primary:hover { color: var(--accent-ink); transform: translateY(-1px); }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { background: var(--accent-soft); color: var(--accent-hover); border-color: transparent; }
.btn.icon { border-radius: 999px; }
.btn.good:hover, .btn.bad:hover { border-color: transparent; }
.btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.eyebrow, .section-title { font-family: var(--f-display); font-weight: 700; letter-spacing: .08em; color: var(--bark); }
.card { box-shadow: var(--shadow); }
.card-title { font-family: var(--f-display); font-weight: 750; font-size: 1rem; }
.tag { border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.alert { border-radius: 12px; }
mark { background: linear-gradient(100deg, transparent 2%, var(--fluo) 4%, var(--fluo) 96%, transparent 98%); color: var(--ink); padding: 0 .12em; border-radius: 4px; }
/* « Continuer » : carte blanche, dégradé doux vers le bois, bouton brun (plus de grand bloc vert foncé) */
.continue { background-color: var(--surface); background-image: linear-gradient(110deg, var(--surface) 35%, color-mix(in srgb, var(--wood) 26%, var(--surface)) 100%); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow-lg); }
.continue:hover { background-color: var(--surface); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.continue .c-ic { background: var(--accent-soft); color: var(--accent); }
.continue .c-kicker { font-family: var(--f-display); font-weight: 700; color: var(--bark); opacity: 1; letter-spacing: .08em; }
.continue .c-title { font-weight: 800; font-stretch: 105%; }
.continue .c-sub { color: var(--muted); opacity: 1; }
.continue .c-go { background: var(--accent); color: var(--accent-ink); font-family: var(--f-display); font-weight: 750; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.atlas-promo { background: linear-gradient(110deg, var(--surface) 30%, var(--berry-soft) 100%); border: 1px solid var(--line); color: var(--ink); }
.atlas-txt h2 { color: var(--ink); }
.alt { border-radius: 14px; }
/* Chiffres clés : carte blanche, couleur seulement sur le chiffre et un petit trait (comme les cartes de la page d'accueil) */
.stat { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.stat[class*="tint-"]::before { content: ""; position: absolute; top: -1px; left: 16px; width: 28px; height: 4px; border-radius: 0 0 4px 4px; background: currentColor; }
.stat.tint-sky, .stat.tint-plum, .stat.tint-leaf, .stat.tint-berry { background: var(--surface); border-color: var(--line); }
.stat.tint-sky { color: var(--sky); } .stat.tint-plum { color: var(--plum); } .stat.tint-leaf { color: var(--accent); } .stat.tint-berry { color: var(--berry); }
.stat[class*="tint-"] .stat-l { color: var(--muted); }
/* Matières : carte blanche, trait de couleur en haut */
.subj-tiles { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.subj-tile { position: relative; background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.subj-tile::before { content: ""; position: absolute; top: -1px; left: 18px; width: 30px; height: 4px; border-radius: 0 0 4px 4px; background: var(--sc, var(--accent)); }
.subj-tile .name { font-family: var(--f-display); font-weight: 750; }
.plans-table .ok, span.ok { color: var(--good); }
/* Repères : retour, pour bien démarrer, accueil plus calme */
.back-crumb a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--accent); }
.home-sub { margin: 4px 0 0; font-size: .95rem; }
.start-guide { margin-bottom: 14px; }
.start-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.start-steps li a { display: flex; gap: 10px; align-items: flex-start; height: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; background: var(--surface); flex-wrap: wrap; }
.start-steps li a:hover { border-color: var(--accent); }
.start-steps .grow { display: grid; gap: 2px; min-width: 0; flex: 1 1 150px; }
.start-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 .85rem var(--f-display); background: var(--surface-2); color: var(--ink-2); }
.start-steps li.done a { opacity: .7; }
.start-steps li.done .start-n { background: var(--good-soft); color: var(--good); }
.start-steps li.done strong { text-decoration: line-through; }
.start-steps li.next a { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.start-steps li.next .start-n { background: var(--accent); color: var(--accent-ink); }
.start-go { display: inline-flex; align-items: center; gap: 4px; font: 700 .85rem var(--f-display); color: var(--accent); margin-left: 36px; }
.fire-quests { border-top: 1px solid var(--line); padding-top: 8px; font-size: .9rem; }
.fire-quests summary { cursor: pointer; font-weight: 600; }
.fire-quests .quest { margin-top: 6px; }
.dash-today { grid-column: span 7; }
.dash-subjects { grid-column: span 5; }
.dash-today, .dash-subjects { height: clamp(240px, calc(100vh - var(--top-h) - 420px), 380px); }
@media (max-width: 760px) { .dash-today, .dash-subjects { height: auto; } .start-go { margin-left: 36px; } }

/* Examens : fiche de l'examen repliée */
.exam-mine { padding: 0; }
.exam-info + .exam-info { border-top: 1px solid var(--line); }
.exam-info summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.exam-info summary::-webkit-details-marker { display: none; }
.exam-info summary > .small { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.exam-info[open] summary > .small { text-decoration: none; }
.exam-info-body { padding: 0 18px 16px 48px; max-width: 72ch; }
.exam-info-body h4 { margin: 10px 0 4px; font-size: .9rem; }
.exam-facts { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-2, var(--ink)); font-size: .93rem; line-height: 1.45; }
@media (max-width: 560px) { .exam-info summary { flex-wrap: wrap; } .exam-info-body { padding-left: 18px; } }
.exam-info summary > .grow { flex: 1; min-width: 0; }
/* Premiers pas en une ligne (la carte « Continuer » porte l'action) */
.start-guide { padding-block: 14px; }
.start-guide .dash-h { margin-bottom: 6px; }
.start-steps { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.start-steps li a { align-items: center; padding: 9px 12px; flex-wrap: nowrap; }
.start-steps .grow { flex: 1 1 auto; }
.start-steps strong { font-size: .92rem; font-weight: 600; }
.start-go { display: none; }
.dash-today, .dash-subjects { height: auto; min-height: 0; }
.dash-today .dash-scroll, .dash-subjects .dash-scroll { max-height: 380px; }
@media (max-width: 760px) { .start-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .start-steps li a { padding: 8px 10px; } .start-steps strong { font-size: .84rem; } .start-n { width: 22px; height: 22px; } }
/* Barème des réponses rédigées */
.rubric label.opt { display: flex; align-items: center; gap: 10px; }
.rubric label.opt .grow { flex: 1; min-width: 0; }
.rubric .tag { flex: none; }
.ai-verdict { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: .92rem; }

/* ---------- Emploi du temps : cours, révisions, pauses ---------- */
.edt-start { text-align: center; padding-block: 28px; }
.edt-start .row-btns { justify-content: center; }
.edt-bar { flex-wrap: wrap; gap: 8px; align-items: center; }
.edt-bar .grow { flex: 1; }
.edt-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 4px 0 12px; }
.edt-days button { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font: 600 .8rem var(--f-ui); color: var(--ink-2); cursor: pointer; }
.edt-days button small { font: 700 1rem var(--f-display); color: var(--ink); }
.edt-days button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.edt-days button.on small { color: var(--accent-ink); }
.edt-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 10px 14px; }
.edt-grid { min-width: calc(48px + var(--n) * 96px); }
.edt-head { display: grid; grid-template-columns: 48px repeat(var(--n), minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.edt-head > div { text-align: center; font-size: .8rem; color: var(--muted); padding: 4px 0; border-radius: 8px; }
.edt-head > div strong { color: var(--ink); font: 700 .95rem var(--f-display); }
.edt-head > div.today { background: var(--accent-soft); color: var(--accent); }
.edt-body { display: grid; grid-template-columns: 48px repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.edt-axis { position: relative; }
.edt-axis span { position: absolute; right: 6px; transform: translateY(-50%); font-size: .78rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.edt-col { position: relative; border-radius: 10px; background: var(--surface-2); }
.edt-col.today { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface-2)); }
.edt-col.off { background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--surface) 8px 16px); }
.edt-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.edt-offlbl { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font-size: .75rem; color: var(--muted); }
.edt-b { position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: 4px 7px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; text-decoration: none; font-size: .76rem; line-height: 1.25; box-sizing: border-box; }
.edt-b .edt-t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.edt-b.tiny .edt-t { -webkit-line-clamp: 1; font-size: .7rem; }
.edt-b .edt-h { font-size: .68rem; opacity: .85; }
.edt-b.k-cours { background: color-mix(in srgb, var(--c) 16%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--ink); }
.edt-b.k-rev { background: var(--c); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.edt-b.k-rev:hover { filter: brightness(1.08); }
.edt-b.k-pause { background: transparent; border: 1.5px dashed var(--line-2); color: var(--muted); align-items: center; justify-content: center; font-size: .68rem; }
.edt-b.k-pause .edt-t { font-weight: 500; }
.edt-b.k-perso { background: repeating-linear-gradient(135deg, var(--surface-3) 0 6px, var(--surface-2) 6px 12px); color: var(--ink-2); border: 1px solid var(--line-2); }
.edt-legend { margin-top: 10px; flex-wrap: wrap; }
.edt-legend .sw { display: inline-block; width: 16px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.edt-legend .sw.k-cours { background: var(--accent-soft); border: 1.5px solid var(--accent); }
.edt-legend .sw.k-rev { background: var(--accent); }
.edt-legend .sw.k-pause { border: 1.5px dashed var(--line-2); }
.edt-legend .sw.k-perso { background: repeating-linear-gradient(135deg, var(--surface-3) 0 3px, var(--surface-2) 3px 6px); border: 1px solid var(--line-2); }
.edt-how { margin: 0 0 6px; padding-left: 18px; display: grid; gap: 6px; }
.edt-edit { display: grid; gap: 10px; max-height: 55vh; overflow-y: auto; padding-right: 4px; }
.edt-eh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.edt-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.edt-row input[type=time] { width: 104px; }
.edt-row .grow { flex: 1 1 140px; min-width: 0; }
.edt-prefs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.edt-prefs .row-inline input { width: 90px; }
.day-picks { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Visite guidée ---------- */
.tour { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 6px 4px 2px; }
.tour-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.tour h4 { margin: 0; font: 800 1.3rem/1.2 var(--f-display); }
.tour p { margin: 0; color: var(--ink-2); max-width: 40ch; }
.tour-dots { display: flex; gap: 6px; }
.tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.tour-dots i.on { background: var(--accent); width: 22px; border-radius: 4px; }
.tour-hl { z-index: 120;
}
#coach-toggle.tour-hl { box-shadow: 0 0 0 3px var(--accent), 0 0 0 9px color-mix(in srgb, var(--accent) 35%, transparent); animation: tourpulse 1.4s ease-in-out infinite; }
@keyframes tourpulse { 50% { transform: scale(1.06); } }
.tour-hl:not(#coach-toggle) { position: relative; background: var(--surface) !important; }
.tour-hl { box-shadow: 0 0 0 3px var(--accent), 0 0 0 8px color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 999px; }
body.touring #topbar, body.touring #tabbar { z-index: 110; }
.edt-b.k-pause { padding: 0; }
.edt-prefs input[type=time], .edt-row input[type=time] { width: 124px; }

/* ---------- Mes contrôles ---------- */
.ctrl-card .list-row { gap: 12px; }
.ctrl-item .title { font-weight: 700; }
.ctrl-j { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.ctrl-j.soon { background: var(--accent); color: #fff; }
.ctrl-empty { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ctrl-empty p { margin: 4px 0 0; }
.ctrl-past { margin-top: 10px; }
.ctrl-past summary { cursor: pointer; color: var(--muted); font-size: .9rem; padding: 4px 0; }
.ctrl-head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.ctrl-head h1 { margin: 0; }
.ctrl-head p { margin: 2px 0 0; }
.ctrl-head .ctrl-j { font-size: 1rem; padding: 6px 14px; }
.ctrl-plan { display: flex; flex-direction: column; gap: 14px; }
.ctrl-day.past { opacity: .6; }
.ctrl-dh { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.ctrl-day.today .ctrl-dh strong { color: var(--accent); }
.ctrl-task a.grow { color: inherit; text-decoration: none; }
.ctrl-task a.grow:hover .title { text-decoration: underline; }
.ctrl-note { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.ctrl-note .input { width: 90px; }
.ctrl-note p { flex-basis: 100%; margin: 0; }
.ctrl-row { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 10px; }
.ctrl-chs { max-height: 260px; overflow: auto; }
.ctrl-sub { color: var(--accent); font-weight: 600; }
.ctrl-hero .c-kicker { text-transform: none; }
.plan-final { margin-top: 18px; }
.plan-final summary { cursor: pointer; font-weight: 700; }
.edt-b.is-ctrl { box-shadow: inset 4px 0 0 rgba(255,255,255,.75), 0 1px 3px rgba(0,0,0,.15); padding-left: 10px; }
@media (max-width: 640px) { .ctrl-row { grid-template-columns: 1fr; } }
.edt-b .edt-t { flex-shrink: 0; }
.edt-b .edt-h { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Emploi du temps : couleurs plus franches (thème clair), glisser-déposer */
.edt-b.k-cours { background: color-mix(in srgb, var(--c) 24%, var(--surface)); border: 0; box-shadow: inset 4px 0 0 var(--c); color: color-mix(in srgb, var(--c) 62%, var(--ink)); padding-left: 10px; }
.edt-b.k-cours .edt-h { color: var(--ink-2); opacity: 1; }
.edt-b.k-rev { box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .35); cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.edt-b.k-rev.dragging { z-index: 20; cursor: grabbing; opacity: .92; box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }
.edt-b.k-rev.moved { outline: 2px solid color-mix(in srgb, var(--c) 40%, #fff); outline-offset: 1px; }
.edt-rs { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; cursor: ns-resize; }
.edt-rs::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px; background: rgba(255, 255, 255, .7); }
.edt-col.drop { box-shadow: inset 0 0 0 2px var(--accent); }
.edt-col { background: var(--surface); border: 1px solid var(--line); }
.edt-col.today { background: var(--surface); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }

/* Tâches de la semaine : un jour par ligne, plus aéré */
.week-days { grid-template-columns: 1fr; gap: 10px; }
.wd { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-height: 0; padding: 16px 18px; }
.wd-h { flex: 0 0 150px; flex-direction: column; align-items: flex-start; gap: 0; }
.wd-h strong { margin: 0; }
.wd .task { flex: 0 1 280px; padding: 11px 13px; font-size: .9rem; }
.wd-rest { flex: 1 1 auto; justify-content: flex-start; margin: 0; }
.wd-foot { flex: 0 0 130px; margin-left: auto; }
.wd > .wd-toggle { margin: 0; align-self: center; }
@media (max-width: 700px) { .wd-h { flex-basis: 100%; flex-direction: row; gap: 8px; align-items: baseline; } .wd .task { flex-basis: 100%; } .wd-foot { flex-basis: 100%; } }

/* Coach : messages mis en forme, grande fenêtre */
.msg { line-height: 1.6; }
.msg.coach { max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 12px 15px; }
.msg-who { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font: 700 .74rem var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.msg-av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.msg-body > * { margin: 0 0 .55em; }
.msg-body > *:last-child { margin-bottom: 0; }
.msg-body ul, .msg-body ol { padding-left: 1.25em; }
.msg-body li { margin: .2em 0; }
.msg-body li::marker { color: var(--accent); font-weight: 700; }
.msg-body strong { background: none; font-weight: 700; }
.msg-body h3, .msg-body h4 { font: 800 1rem var(--f-display); margin: .8em 0 .3em; }
.msg-body .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.msg.user .msg-body strong { background: none; }
#coach.big { top: 5vh; bottom: 5vh; left: 50%; right: auto; width: min(860px, calc(100vw - 32px)); transform: translateX(-50%); z-index: 120; border-radius: 20px; }
#coach.big #coach-log { padding: 22px 28px; gap: 14px; }
#coach.big .msg { font-size: 1.02rem; }
#coach.big .msg.user { max-width: 75%; }
body.coach-big #coach.big { z-index: 120; }
body.coach-big::before { content: ""; position: fixed; inset: 0; z-index: 115; background: rgba(20, 16, 12, .45); }
.flash-answer { margin-top: 4px; }
.reveal-k { font: 700 .74rem var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }

/* ---------- Espace admin ---------- */
.adm-demo { padding: 10px 14px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: .9rem; margin: 0 0 14px; }
.adm-body { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.adm-bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 8px; }
.adm-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.adm-bar-v { width: 100%; max-width: 38px; border-radius: 4px 4px 0 0; background: var(--accent); }
.adm-bar:hover .adm-bar-v { opacity: .75; }
.adm-bar-k { font-size: .7rem; color: var(--muted); height: 1em; white-space: nowrap; }
.adm-table-wrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.adm-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: .8rem; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-table td .tag { margin-left: 6px; }
.adm-table select.input { width: auto; }
.adm-q { width: 84px; padding: 4px 8px; }
.adm-code { margin: 10px 0; word-break: break-all; }
.adm-list { display: flex; flex-direction: column; }
.adm-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.adm-item p { margin: 4px 0 0; }
.adm-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adm-body .card .toolbar { margin-bottom: 10px; }
.adm-tabs { overflow-x: auto; max-width: 100%; }
.adm-tabs .seg { width: max-content; }
.adm-tabs .seg button { white-space: nowrap; }

/* ================================================================
   Mise en forme de la landing sur tout l'outil (v38, 21/10/2026)
   Mêmes écrans, même thème brun : titres Archivo très gras avec surligneur,
   cartes blanches arrondies, cartes de révision sur papier Seyès, stylo rouge.
   ================================================================ */
:root {
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --hl: #FBEF5A;
  --glow: #FDF6EC;
  --seyes: #DCE2F4;
  --seyes-strong: #BCC6EC;
  --marge: #D7263D;
  --r: 18px;
  --shadow: 0 1px 2px rgba(30, 26, 23, .05), 0 10px 28px -18px rgba(30, 26, 23, .22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hl: rgba(232, 220, 74, .38); --glow: #1D1A15; --seyes: rgba(255, 255, 255, .04); --seyes-strong: rgba(147, 168, 242, .12); --marge: rgba(240, 125, 140, .55); }
}
:root[data-theme="dark"] { --hl: rgba(232, 220, 74, .38); --glow: #1D1A15; --seyes: rgba(255, 255, 255, .04); --seyes-strong: rgba(147, 168, 242, .12); --marge: rgba(240, 125, 140, .55); }

body { background: linear-gradient(180deg, var(--glow) 0, var(--bg) 300px) no-repeat, var(--bg); }
mark { background: linear-gradient(100deg, transparent 2%, var(--hl) 4%, var(--hl) 96%, transparent 98%); color: inherit; }

/* Titres */
h1, h2, h3 { text-wrap: balance; }
.page-head h1, .home-head h1 { font-size: clamp(2rem, 1.55rem + 1.6vw, 2.75rem); font-weight: 850; font-stretch: 105%; line-height: 1.05; letter-spacing: -.02em; }
.page-head h1 mark, .home-head h1 mark { padding: 0 .1em; border-radius: 4px; }
.page-head p { font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); }
.eyebrow, .section-title { font-size: .78rem; letter-spacing: .09em; }
.card-title { font-size: 1.12rem; font-weight: 800; letter-spacing: -.005em; }
h2 { font-weight: 800; }

/* Menu : le surligneur marque la page ouverte */
.nav-item { font-family: var(--f-display); font-weight: 650; color: var(--ink); }
.nav-item:hover { background: none; color: var(--accent); }
.nav-item.active { background: linear-gradient(transparent 52%, var(--hl) 52%, var(--hl) 80%, transparent 80%) center / calc(100% - 20px) 100% no-repeat; color: var(--ink); }
.nav-item.active .ic { color: var(--accent); }
@media (max-width: 860px) {
  #tabbar a { font-family: var(--f-display); font-weight: 650; }
  #tabbar a.active { color: var(--ink); }
  #tabbar a.active svg { background: var(--hl); color: var(--ink); border-radius: 999px; padding: 3px 12px; }
}
#exam-pill { background: var(--bad-soft); border-color: transparent; color: var(--bad); font-family: var(--f-display); font-weight: 700; }
#exam-pill .pill-txt { color: inherit; opacity: .8; }

/* Boutons et champs */
.btn { font-family: var(--f-display); font-weight: 700; }
.btn.primary { padding-inline: 20px; }
.btn:not(.small):not(.icon) { min-height: 42px; }
.input { border-radius: 12px; border-width: 1.5px; }
textarea.input { line-height: 1.55; }
.seg { border-radius: 999px; padding: 3px; }
.seg button { font-family: var(--f-display); font-weight: 650; border-radius: 999px; }
.tab { font-family: var(--f-display); font-weight: 650; }

/* Cartes */
.card, .qcard, .stat, .subj-tile { border-radius: var(--r); }
.card { padding: 20px 22px; }
.stat-v { font-weight: 850; font-stretch: 105%; }
.bar { background: var(--surface-2); }

/* Cartes de révision : papier Seyès, marge rouge, question en gros */
.qcard.t-flash, .qcard.t-qcm, .qcard.t-num, .qcard.t-formula {
  position: relative;
  background-color: var(--surface);
  background-image:
    linear-gradient(90deg, transparent 46px, var(--marge) 46px, var(--marge) 48px, transparent 48px),
    linear-gradient(var(--seyes-strong) 1px, transparent 1px),
    linear-gradient(var(--seyes) 1px, transparent 1px);
  background-size: 100% 100%, 100% 32px, 100% 8px;
  padding: 24px 28px 24px 70px;
  box-shadow: var(--shadow-lg);
}
.qcard.t-flash .qtext { font: 800 clamp(1.3rem, 1.1rem + .8vw, 1.75rem)/1.25 var(--f-display); letter-spacing: -.01em; }
.qcard.t-qcm .qtext, .qcard.t-num .qtext, .qcard.t-formula .qtext { font-size: 1.12rem; font-weight: 500; }
.qcard .flash-answer { background: color-mix(in srgb, var(--surface) 88%, transparent); }
.qcard .reveal { background: color-mix(in srgb, var(--surface-2) 92%, transparent); border-left: 3px solid var(--accent); border-radius: 4px 12px 12px 4px; }
@media (max-width: 560px) {
  .qcard.t-flash, .qcard.t-qcm, .qcard.t-num, .qcard.t-formula { padding: 18px 16px 18px 40px; background-image: linear-gradient(90deg, transparent 24px, var(--marge) 24px, var(--marge) 26px, transparent 26px), linear-gradient(var(--seyes-strong) 1px, transparent 1px), linear-gradient(var(--seyes) 1px, transparent 1px); }
}

/* Stylo rouge : comptes à rebours des contrôles */
.ctrl-j { font: 700 .88rem/1.2 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--ink); background: var(--surface-2); padding: 5px 11px; border-radius: 999px; display: inline-block; white-space: nowrap; }
.ctrl-j.soon { background: color-mix(in srgb, var(--rouge) 18%, var(--surface)); color: var(--rouge); }

/* Cartes en 2 gestes (A, C) */
kbd.key { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .4em; margin-left: 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); font: 600 .72rem/1 var(--f-ui); opacity: .75; }
@media (hover: none) { kbd.key { display: none; } }
.rate-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.rate-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; position: relative; }
.rate-btn:hover, .rate-btn:focus-visible { border-color: currentColor; }
.rate-btn .rate-l { font: 750 1rem/1.2 var(--f-display); }
.rate-btn .rate-i { font-size: .78rem; color: var(--muted); }
.rate-btn .key { position: absolute; top: 6px; right: 6px; margin: 0; }
.rate-btn.r-bad { color: var(--bad); } .rate-btn.r-hard { color: var(--warn); } .rate-btn.r-good { color: var(--good); } .rate-btn.r-easy { color: var(--sky); }
.rate-btn.r-bad { background: color-mix(in srgb, var(--bad-soft) 55%, var(--surface)); }
.rate-btn.r-good { background: color-mix(in srgb, var(--good-soft) 55%, var(--surface)); }
.rate-tip { margin: 8px 0 0; display: none; }
@media (hover: none) { .rate-tip { display: block; } }
@media (max-width: 480px) { .rate-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qcard { transition: transform .12s ease-out, box-shadow .12s; }
.qcard.sw-ok { box-shadow: 0 0 0 3px var(--good); } .qcard.sw-ko { box-shadow: 0 0 0 3px var(--bad); }
.qcard.rated { opacity: .6; transition: opacity .18s; }
/* Série en direct (E) et fin de séance (D) */
.session-prog { position: relative; }
.sess-run { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 2px 10px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font: 700 .82rem var(--f-display); white-space: nowrap; }
.sess-run.pop { animation: runpop .35s ease-out; }
@keyframes runpop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sess-run.pop { animation: none; } }
.sess-end { display: grid; gap: 12px; text-align: left; }
.sess-end-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.sess-missed summary { cursor: pointer; font-weight: 700; }
.sess-missed ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: .92rem; }
/* Un seul bouton pour réviser (B) */
.home-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.review-now .rn-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent-ink); color: var(--accent); display: inline-grid; place-items: center; font-size: .78rem; }
.review-opts { margin: 0 0 14px; }
.review-opts summary { cursor: pointer; font: 650 .92rem var(--f-display); color: var(--accent); width: max-content; max-width: 100%; }
.review-opts .toolbar { margin-top: 10px; }
/* Jeux : Relier (F) et Légender (K) */
.game-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 16px; }
.game-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.game-link:hover { border-color: var(--accent); }
.game-link .ic { color: var(--accent); flex: none; }
.game-link span { display: grid; }
.game-link strong { font: 750 1rem var(--f-display); }
.game-link small { color: var(--muted); }
.game-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 1rem; }
.game-bar .timer { font: 750 1.2rem var(--f-display); margin-right: 12px; }
.match-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.match-col { display: grid; gap: 10px; align-content: start; }
.match-tile { min-height: 64px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-size: .95rem; text-align: left; cursor: pointer; box-shadow: var(--shadow); transition: transform .1s, border-color .1s, opacity .25s; }
.match-tile:hover { border-color: var(--accent); }
.match-tile.sel { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.match-tile.ok { border-color: var(--good); background: var(--good-soft); opacity: .45; cursor: default; }
.match-tile.ko { border-color: var(--bad); background: var(--bad-soft); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .match-tile.ko { animation: none; } }
.game-end { text-align: center; display: grid; gap: 10px; justify-items: center; }
.game-time { font: 850 3rem/1 var(--f-display); font-stretch: 105%; color: var(--accent); }
.leg-fig { overflow-x: auto; }
.leg-list { display: grid; gap: 8px; margin-bottom: 12px; }
.leg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; border: 1px solid transparent; }
.leg-row .input { width: auto; max-width: 100%; flex: 1 1 220px; }
.leg-n { font: 800 1.3rem var(--f-display); color: var(--accent); width: 1.6em; text-align: center; }
.leg-row.ok { border-color: var(--good); background: var(--good-soft); }
.leg-row.ko { border-color: var(--bad); background: var(--bad-soft); }
.leg-fix { flex-basis: 100%; padding-left: 2.6em; color: var(--ink-2); }

/* ---------- Offres (grille du 21/10/2026) : fenêtre de limite, page des offres ---------- */
.modal.modal-sm { width: min(440px, 100%); }
.lock-box .upsell { order: -1; }
.lock-count { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.lock-count strong { font: 800 1.5rem var(--f-ui, inherit); }
.lock-count .bar i, .lock-count .bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.offer { position: relative; }
.offer-badge { position: absolute; top: -11px; left: 14px; padding: 2px 10px; border-radius: 99px; background: linear-gradient(var(--hl, var(--accent)), var(--hl, var(--accent))), var(--surface); color: var(--ink); font-size: .74rem; font-weight: 700; }
.plans-table th.reco, .plans-table td.reco { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.plans-table th.reco.cur, .plans-table td.reco.cur { background: var(--surface-2); }
.reco-tag { color: var(--accent); font-weight: 700; }
.qcard.qlock { display: grid; gap: 8px; padding: 18px; }

/* Emploi du temps en paysage : un jour par ligne, les heures de gauche à droite */
.edt-hint { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; text-align: left; padding-block: 16px; }
.edt-hint p { margin: 2px 0 0; }
.ls-wrap { padding: 8px 10px 10px; }
.ls-grid { display: grid; gap: 4px; width: max-content; min-width: 100%; }
.ls-row { display: grid; grid-template-columns: 74px auto; gap: 6px; align-items: stretch; }
.ls-day { position: sticky; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 4px 8px; border-radius: 10px; background: var(--surface); font-size: .78rem; color: var(--muted); }
.ls-day strong { font: 700 1.05rem var(--f-display); color: var(--ink); }
.ls-day .linkish { align-self: flex-start; font-size: .7rem; }
.ls-row.today .ls-day { background: var(--accent-soft); color: var(--accent); }
.ls-headrow .ls-day { background: transparent; }
.ls-scale { position: relative; height: 18px; }
.ls-scale span { position: absolute; top: 0; transform: translateX(-50%); font-size: .7rem; color: var(--muted); }
.ls-track { position: relative; border-radius: 10px; background: var(--surface-2); }
.ls-row.today .ls-track { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface-2)); }
.ls-row.off .ls-track { background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--surface) 8px 16px); }
.ls-track.drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
.ls-line { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.ls-offlbl { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--muted); }
.ls-b { position: absolute; border-radius: 8px; padding: 4px 8px; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 1px; text-decoration: none; font-size: .76rem; line-height: 1.2; touch-action: pan-x pan-y; user-select: none; }
.ls-b .ls-t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.ls-b .ls-h { font-size: .68rem; opacity: .85; white-space: nowrap; }
.ls-b.narrow { padding: 4px 5px; }
.ls-b.k-cours { background: color-mix(in srgb, var(--c) 16%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--ink); }
.ls-b.k-rev { background: var(--c); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); cursor: grab; }
.ls-b.k-rev:hover { filter: brightness(1.08); }
.ls-b.k-rev.done { opacity: .55; }
.ls-b.k-rev.done .ls-t { text-decoration: line-through; }
.ls-b.k-pause { background: transparent; border: 1.5px dashed var(--line-2); padding: 0; }
.ls-b.k-perso { background: repeating-linear-gradient(135deg, var(--surface-3) 0 6px, var(--surface-2) 6px 12px); color: var(--ink-2); border: 1px solid var(--line-2); }
.ls-b.is-ctrl { box-shadow: inset 4px 0 0 rgba(255,255,255,.75), 0 1px 3px rgba(0,0,0,.15); padding-left: 10px; }
.ls-b.dragging, .ls-chip.dragging { z-index: 20; cursor: grabbing; opacity: .92; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.ls-b.dragging[data-tip]::after { content: attr(data-tip); position: absolute; right: 4px; top: 2px; font-size: .66rem; background: rgba(0,0,0,.35); padding: 1px 5px; border-radius: 6px; }
.ls-rs { position: absolute; right: 0; top: 0; bottom: 0; width: 9px; cursor: ew-resize; }
.ls-rs::after { content: ""; position: absolute; right: 3px; top: 30%; bottom: 30%; border-right: 2px solid rgba(255, 255, 255, .7); border-radius: 2px; }
.ls-tray { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--surface); }
.ls-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.ls-chip { position: relative; padding: 6px 10px; border-radius: 8px; background: var(--c); color: #fff; font-size: .76rem; font-weight: 700; cursor: grab; touch-action: pan-x pan-y; user-select: none; }

/* Offre Gratuit : compteur des nouveaux cours */
.free-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 18px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--line); }
.free-bar .grow { min-width: 0; flex: 1 1 220px; }
.free-bar .fb-count { display: flex; align-items: baseline; gap: 1px; flex: none; }
.free-bar .fb-count strong { font: 800 30px/1 var(--font-head, inherit); color: var(--accent); }
.free-bar .fb-count span { font-weight: 700; color: var(--muted, inherit); }
.free-bar .fb-t { font-weight: 700; }
.free-bar .fb-s { font-size: 13px; opacity: .8; margin-top: 2px; }
.free-bar.out .fb-count strong { color: var(--bad, #c0392b); }
.ch-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; opacity: .7; white-space: nowrap; }
.fb-btn { width: auto; padding: 0 12px; gap: 6px; display: inline-flex; align-items: center; text-decoration: none; color: inherit; font-weight: 700; font-size: 13.5px; }
.fb-btn { padding: 0; width: 38px; justify-content: center; } .fb-btn .fb-btn-t { display: none; }
.adm-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
a.adm-f { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); text-decoration: none; color: inherit; font-size: 13.5px; font-weight: 600; }
a.adm-f.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.voice-row { display: flex; justify-content: flex-end; margin: -4px 0 12px; }
.voice-pick { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.voice-pick select { max-width: 260px; padding-block: 4px; }
.add-ch { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.add-ch .input { flex: 1 1 240px; min-width: 0; }
@media (min-width: 1181px) and (max-width: 1439px) { #topbar { gap: 12px; } #nav .nav-item { padding-inline: 10px; } }
.ann-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 16px; }
.ann-links a { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.cc-dates h4 { margin-top: 14px; }
.so-list { padding: 4px 16px; }
.so-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }
.so-row:first-child { border-top: 0; }
.so-row .grow { min-width: 0; flex: 1 1 220px; }
.so-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Dessins explicatifs (```figure) */
.figure-svg { margin: 1.4em 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow-x: auto; text-align: center; --fg1: var(--accent); --fg2: #2F7FD0; --fg3: #C0392B; --fg4: #2E8B57; }
:root[data-theme="dark"] .figure-svg { --fg2: #7FB0E0; --fg3: #F08070; --fg4: #7CCB88; }
.figure-svg svg.fg { max-width: 100%; height: auto; font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif; color: var(--ink); }
.figure-svg figcaption { margin-top: 8px; font-size: .85rem; color: var(--muted); font-weight: 600; }
.fg .fg-t { fill: currentColor; font-size: 14px; font-weight: 600; }
.fg .fg-small { font-size: 11.5px; font-weight: 500; opacity: .85; }
.fg .fg-sub, .fg .fg-sup { font-size: .72em; }
.fg .fg-axis, .fg .fg-tick { stroke: currentColor; stroke-width: 1.4; fill: none; opacity: .75; }
.fg .fg-axhead { fill: currentColor; opacity: .75; }
.fg .fg-curve { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fg .fg-line, .fg .fg-vec, .fg .fg-ray, .fg .fg-lens, .fg .fg-mirror, .fg .fg-wire { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fg .fg-vec { stroke-width: 2.6; }
.fg .fg-thin { stroke-width: 1.3; }
.fg .fg-dash { stroke-dasharray: 5 5; stroke-width: 1.4; }
.fg .fg-dashdot { stroke-dasharray: 10 4 2 4; stroke-width: 1.2; opacity: .7; }
.fg .fg-lens { stroke-width: 2.6; }
.fg .fg-cap { stroke-width: 3; }
.fg .fg-comp { fill: var(--surface); stroke: currentColor; stroke-width: 2; }
.fg .fg-box { fill: color-mix(in srgb, currentColor 6%, transparent); stroke: currentColor; stroke-width: 1.6; }
.fg .fg-mass { fill: var(--fgc, var(--accent)); stroke: none; }
.fg .fg-onfill { fill: var(--accent-ink, #fff); }
.fg .fg-dot { fill: currentColor; }
.fg .fg-head { fill: currentColor; }
.fg .fg-c1 { color: var(--fg1); } .fg .fg-c2 { color: var(--fg2); } .fg .fg-c3 { color: var(--fg3); } .fg .fg-c4 { color: var(--fg4); }
.fg .fg-curve.fg-c1, .fg .fg-curve.fg-c2, .fg .fg-curve.fg-c3, .fg .fg-curve.fg-c4 { stroke: currentColor; }
.fg text.fg-c1, .fg text.fg-c2, .fg text.fg-c3, .fg text.fg-c4 { fill: currentColor; }
.fg .fg-mass.fg-c2 { fill: var(--fg2); } .fg .fg-mass.fg-c3 { fill: var(--fg3); } .fg .fg-mass.fg-c4 { fill: var(--fg4); }

/* Bouton « Retour test » bien visible */
.fb-btn { background: #C62828 !important; color: #fff !important; border-color: #C62828 !important; }
.fb-btn:hover { background: #A61F1F !important; }
.fg .fg-arr { font-size: .62em; font-weight: 700; }
.dash-hero .alts.one { grid-template-columns: minmax(0, 1fr); }
.ch-err td a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.ch-err strong.bad { color: var(--bad); }
.ch-acc { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.edt-total { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; font-size: .9rem; }
.edt-done { display: block; font-size: .68rem; color: var(--good, #2e7d32); font-weight: 600; }
.edt-head > div .linkish { display: block; margin: 2px auto 0; font-size: .7rem; }
.edt-b .edt-t { -webkit-line-clamp: var(--lc, 2); white-space: normal; overflow-wrap: anywhere; }
.ls-b .ls-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: var(--lc, 2); -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.15; }
.ls-b .ls-t svg { vertical-align: -2px; margin-right: 3px; }
.ls-b.dragging[data-tip]::after { top: auto; bottom: 2px; }
.edt-week .edt-grid { min-width: calc(48px + 7 * 110px); }
.q-report { margin-left: auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.q-report:hover { background: var(--surface-2); color: var(--bad); }
.qhead .right ~ .q-report { margin-left: 6px; }
/* Chiffres clés dans les couleurs bûche */
.stat.tint-sky, .stat.tint-sky .stat-v { color: var(--accent); }
.stat.tint-plum, .stat.tint-plum .stat-v { color: color-mix(in srgb, var(--accent) 55%, var(--ink)); }
/* Programme du jour : avancement, tout fait, événements qui arrivent */
.dash-today .dash-h .day-count { margin-left: auto; font: 700 .85rem var(--f-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-today .dash-h .day-count.ok { display: inline-flex; align-items: center; gap: 4px; color: var(--good); }
.day-bar { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 2px 0 8px; flex-shrink: 0; }
.day-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }
.dash-today.all-done { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--good) 30%, transparent), var(--shadow); }
.dash-today.all-done .day-bar i { background: var(--good); }
.ev-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; flex-shrink: 0; }
.ev { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: .78rem; text-decoration: none; }
.ev .ev-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16ch; }
.ev strong { color: var(--accent); }
.ev.soon { background: color-mix(in srgb, var(--bad) 18%, var(--surface)); }
.ev.soon strong, .ev.soon svg { color: var(--bad); }
/* Changer de semaine : la page « bascule » */
.flip-next, .flip-prev { transform-origin: center; animation: edt-flip-next .42s cubic-bezier(.2, .7, .2, 1) both; }
.flip-prev { animation-name: edt-flip-prev; }
@keyframes edt-flip-next { from { opacity: 0; transform: perspective(1400px) translateX(60px) rotateY(-14deg); } to { opacity: 1; transform: none; } }
@keyframes edt-flip-prev { from { opacity: 0; transform: perspective(1400px) translateX(-60px) rotateY(14deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .flip-next, .flip-prev { animation: none; } }
.tl-week.sel { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.edt-bar { scroll-margin-top: calc(var(--top-h, 64px) + 12px); }
.step-foot > * { max-width: 100%; min-width: 0; } .step-foot .btn { white-space: normal; text-align: center; }
.adm-h { font-size: 1.15rem; margin: 10px 0 0; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.adm-grid > * { min-width: 0; }
.nav-lock { display: inline-flex; opacity: .7; margin-left: 2px; }
#tabbar a { position: relative; }
#tabbar a .nav-lock { position: absolute; top: 1px; left: calc(50% + 7px); margin: 0; opacity: 1; padding: 2px; border-radius: 99px; background: var(--bg); color: var(--muted); }
#tabbar a .nav-lock { font-style: normal; line-height: 0; }
#tabbar a.active .nav-lock svg, #tabbar a .nav-lock svg { background: none; padding: 0; border-radius: 0; }
/* Bilan de la semaine (IA) */
#bilan .rich :is(h3, h4, h5) { font-size: 1.02rem; font-weight: 700; margin: 14px 0 4px; }
#bilan .rich :is(p, ul) { margin: 4px 0; }
#bilan .rich > :first-child { margin-top: 0; }
.bilan-old { margin-top: 12px; }
.bilan-old summary { cursor: pointer; }
.bilan-item { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
/* Cours en direct */
.live-bar { align-items: center; }
.live-txt { min-height: 260px; font-size: 1rem; line-height: 1.55; }
.live-interim { min-height: 1.4em; margin: 4px 0 0; font-style: italic; }
.btn.live-on { background: var(--bad, #C0392B); border-color: transparent; }
/* Colle : outils de réponse */
.oral-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oral-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.oral-preview { border: 1px dashed var(--line-2, var(--line)); border-radius: 10px; padding: 8px 12px; margin-top: 6px; overflow-x: auto; }
.btn.icon.on { background: var(--accent-soft); color: var(--accent); }
/* Refonte « Aujourd'hui » (maquette Claude Design) */
.btn.primary { box-shadow: 0 3px 0 var(--accent-hover); }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--accent-hover); }
.btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-hover); }
.continue:not(.ctrl-hero) { background-color: var(--surface); background-image: linear-gradient(90deg, transparent 46px, var(--marge) 46px, var(--marge) 48px, transparent 48px), repeating-linear-gradient(180deg, transparent 0, transparent 31px, var(--seyes) 31px, var(--seyes) 32px); padding-left: 66px; min-height: 180px; }
.continue .c-title { font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.15; font-weight: 850; }
.continue .c-go { box-shadow: 0 3px 0 var(--accent-hover); }
.dash-fire .week-strip { gap: 6px; }
.dash-fire .week-strip .day { border: 0; border-radius: 10px; padding: 6px 0; background: var(--surface-2); }
.dash-fire .week-strip .day .d { font: 700 .75rem var(--f-display); color: var(--muted); }
.dash-fire .week-strip .day .dot { display: none; }
.dash-fire .week-strip .day.active { background: var(--amber-soft); }
.dash-fire .week-strip .day.active .d { color: var(--warn); }
.dash-fire .week-strip .day.today { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink); }
.dash-fire .week-strip .day.today .d { color: var(--ink); }
.dash-today .dash-scroll { display: flex; flex-direction: column; gap: 8px; }
.dash-today .list-row { border: 0; border-radius: 14px; padding: 12px 14px; background: var(--bg); }
.dash-today .list-row:hover { background: var(--surface-2); }
.dash-today .quest .box { width: 20px; height: 20px; border-radius: 6px; }
.dash-subj .ring .ring-v { font: 800 .72rem var(--f-display); }
.start-steps li.done a { opacity: 1; background: var(--good-soft); border-color: transparent; color: var(--good); }
.start-steps li.done .start-n { background: var(--good); color: var(--surface); }
.start-steps li.next a { border: 2px solid var(--accent); background: var(--surface); }
.start-steps li:not(.done):not(.next) a { color: var(--ink-2); }
.start-steps li:not(.done):not(.next) .start-n { background: var(--surface-2); }
@media (max-width: 760px) { .continue:not(.ctrl-hero) { padding-left: 58px; background-image: linear-gradient(90deg, transparent 38px, var(--marge) 38px, var(--marge) 40px, transparent 40px), repeating-linear-gradient(180deg, transparent 0, transparent 31px, var(--seyes) 31px, var(--seyes) 32px); min-height: 0; } }
.continue:not(.ctrl-hero) .c-ic { display: none; }
.continue:not(.ctrl-hero) { grid-template-columns: 1fr auto; }
@media (max-width: 760px) { .continue:not(.ctrl-hero) { grid-template-columns: 1fr; } .continue:not(.ctrl-hero) .c-go { justify-self: start; } }
.plan-after { margin-top: 28px; }
/* iPhone/iPad : un champ sous 16 px fait zoomer la page quand on tape dedans. */
@media (pointer: coarse) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .input { font-size: 16px !important; } }
.timeline .tl-lbl.end { max-width: 22%; overflow: hidden; text-overflow: ellipsis; }
.ctrl-empty { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .ctrl-empty > .grow { flex: 1 1 260px; min-width: 0; } .ctrl-empty > .btn { margin-left: auto; }
@media (max-width: 760px) { .timeline .tl-lbl.end .tl-ex { display: none; } .timeline .tl-lbl.end { max-width: none; } }
.timeline .tl-now-lbl.at-start { transform: translateX(-6px); } .timeline .tl-now-lbl.at-end { transform: translateX(calc(-100% + 6px)); }
/* Questionnaire testeur */
.qb { max-width: 680px; display: flex; flex-direction: column; gap: 14px; }
.qb-top { display: flex; align-items: center; gap: 12px; }
.qb-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.qb-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.qb-q { margin: 0; font: 800 1.35rem/1.25 var(--f-display); text-wrap: balance; }
.qb-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.qb-opt { padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.qb-opt.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.qb-scale { display: flex; gap: 6px; flex-wrap: wrap; }
.qb-n { flex: 1 1 36px; min-width: 36px; height: 44px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font: 700 1rem var(--f-display); cursor: pointer; }
.qb-n.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.qb-ends { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-top: 4px; }
.qb-sub { font-weight: 600; margin-bottom: 6px; }
.qb-scale-wrap + .qb-scale-wrap { margin-top: 12px; }
.qb-eur-row { display: flex; align-items: center; gap: 8px; font: 800 1.3rem var(--f-display); }
.qb-eur { max-width: 140px; font: 800 1.3rem var(--f-display); }
.qb-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.qb-link { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.qb-link:hover { border-color: var(--accent); }
.las-card { display: flex; flex-direction: column; gap: 12px; }
.las-card h3 { margin: 0; }
.las-row { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; }
.las-row label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 600; }
.good-txt { color: var(--good); font-weight: 600; }

/* Fiche de révision d'une page (A4, deux colonnes) */
a.btn.disabled { opacity: .5; pointer-events: none; }
.fr-chs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; margin: 10px 0 16px; }
.fr-what { margin: 0 0 16px; padding-left: 1.2em; color: var(--ink-2); }
.fr-wait { display: flex; align-items: center; gap: 12px; }
.fr-wait p { margin: 0; }
.fr-actions { align-items: center; margin-bottom: 14px; }
.fr-view { position: relative; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 1px var(--line), 0 8px 28px rgba(0,0,0,.10); background: #fff; max-width: 744px; }
.fr-scale { transform-origin: 0 0; width: 744px; padding: 28px; box-sizing: border-box; }

/* Masquer un chapitre */
.chapter-row { position: relative; }
.chapter-row .ch-hide { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s; }
.chapter-row:hover .ch-hide, .chapter-row .ch-hide:focus-visible { opacity: .8; }
.chapter-row .ch-hide:hover { background: var(--surface-2); color: var(--ink); opacity: 1; }
@media (hover: none) { .chapter-row .ch-hide { opacity: .55; } }
.ch-hidden { margin-top: 18px; }
.ch-hidden summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.ch-hidden .list { margin-top: 10px; }

/* Fiche de révision : feuille (couleurs pleines, html2canvas ne lit pas color-mix) */
.fr-sheet { --fr-fs: 10pt; background: #fff; padding: 0; color: #1D2024; font-family: var(--f-ui); }
.fr-sheet .fr-band { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 14px 18px 13px; border-radius: 12px; background: var(--fr-c); color: #fff; margin-bottom: 12px; }
.fr-sheet .fr-kicker { font: 700 7.5pt var(--f-ui); letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 3px; }
.fr-sheet h1.fr-title { font: 800 18pt/1.15 var(--f-display); color: #fff; margin: 0; }
.fr-sheet .fr-band-r { text-align: right; font: 600 7.5pt var(--f-ui); opacity: .9; white-space: nowrap; }
.fr-sheet .fr-brand { font: 800 10pt var(--f-display); opacity: 1; margin-bottom: 2px; }
.fr-sheet .fr-brand { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.fr-sheet .fr-logo { display: inline-flex; background: #fff; border-radius: 5px; padding: 2px 3px; }
.fr-sheet .fr-logo svg { width: 24px; height: auto; display: block; }
.fr-sheet .fr-map { text-align: center; margin: 0 0 12px; padding: 6px; border-radius: 12px; background: #FBFAF7; border: 1px solid #ECE8DF; }
.fr-sheet .fr-map figure, .fr-sheet .fr-col figure { margin: 2px 0; padding: 2px; border: 0; background: none; overflow: visible; min-height: 0; }
.fr-sheet .figure-svg figcaption { margin-top: 2px; font-size: .9em; }
.fr-sheet .fr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
.fr-sheet .course { max-width: none; font-size: var(--fr-fs); line-height: 1.42; color: #1D2024; min-width: 0; font-family: var(--f-ui); }
.fr-sheet .fr-sec { padding: 9px 11px 7px; margin: 0 0 10px; border: 1px solid var(--fr-c2); border-radius: 10px; background: #fff; }
.fr-sheet .fr-sec h2, .fr-sheet .fr-key h2 { display: flex; align-items: center; gap: 7px; font: 800 1.12em/1.2 var(--f-display); color: var(--fr-ink); margin: 0 0 5px; padding: 0; background: none; border: 0; }
.fr-sheet .fr-n { flex: none; width: 1.55em; height: 1.55em; border-radius: 50%; display: inline-grid; place-items: center; background: var(--fr-c); color: #fff; font-size: .78em; font-weight: 800; }
.fr-sheet .fr-trap { border-color: #F1C9C3; background: #FFF7F5; }
.fr-sheet .fr-trap h2 { color: #9B2C1F; }
.fr-sheet .fr-trap .fr-n { background: #C0392B; }
.fr-sheet .fr-trap li::before { background: #C0392B; }
.fr-sheet .course h3 { font-size: 1em; margin: 6px 0 2px; color: var(--fr-ink); }
.fr-sheet .course p { margin: 3px 0; }
.fr-sheet .course ul { list-style: none; padding: 0; margin: 3px 0; }
.fr-sheet .course ul > li { position: relative; padding-left: 13px; margin: 2px 0; }
.fr-sheet .course ul > li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: var(--fr-c); }
.fr-sheet .course ol { list-style: none; padding: 0; margin: 3px 0; counter-reset: fr; }
.fr-sheet .course ol > li { position: relative; padding-left: 17px; counter-increment: fr; }
.fr-sheet .course ol > li::before { content: counter(fr) "."; position: absolute; left: 0; font-weight: 700; color: var(--c, var(--fr-c)); }
.fr-sheet .course li { margin: 2px 0; }
.fr-sheet .course strong { color: var(--fr-ink); }
.fr-sheet .callout { margin: 6px 0; padding: 6px 9px 5px; border: 0; border-left: 3px solid var(--c, var(--fr-c)); border-radius: 6px; background: var(--fr-c1); font-size: 1em; }
.fr-sheet .callout-formule { --c: #1F6F5C; background: #EAF4F0; }
.fr-sheet .callout-methode { --c: #A86A12; background: #FBF3E5; }
.fr-sheet .callout-attention { --c: #B42318; background: #FDEEEC; }
.fr-sheet .callout-definition { --c: #2F5DA8; background: #EDF2FA; }
.fr-sheet .callout-theoreme, .fr-sheet .callout-propriete, .fr-sheet .callout-loi { --c: #6A4C9C; background: #F2EEF8; }
.fr-sheet .callout > * { margin-top: 2px; margin-bottom: 2px; }
.fr-sheet .callout-head { margin-bottom: 2px; gap: 6px; }
.fr-sheet .callout-kind { font-size: .7em; }
.fr-sheet .callout-title { font-size: 1em; font-weight: 700; }
.fr-sheet .course table { width: 100%; border-collapse: collapse; font-size: .92em; margin: 4px 0; }
.fr-sheet .course th { background: var(--fr-c1); color: var(--fr-ink); text-align: left; }
.fr-sheet .course th, .fr-sheet .course td { padding: 3px 6px; border-bottom: 1px solid #E6E2D8; }
.fr-sheet .katex-display { margin: 3px 0; }
.fr-sheet .fr-keywrap { margin: 0; }
.fr-sheet .fr-key { padding: 9px 13px 8px; border-radius: 10px; background: var(--fr-c1); border-left: 5px solid var(--fr-c); }
.fr-sheet .fr-key ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 16px; }
.fr-sheet .fr-foot { margin-top: 8px; font: 7pt var(--f-ui); color: #8A8F96; text-align: center; }
.avis-stars .qb-n { flex: 0 0 48px; }
.avis-note { color: #C98A12; font-size: 1.15rem; letter-spacing: .1em; }
.avis-adm p { margin: 8px 0 4px; }

/* Refonte « Mes matières » (même style qu'Aujourd'hui) */
.subj-tiles { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
a.subj-tile { gap: 14px; padding: 18px 18px 18px 16px; border: 0; border-radius: 18px; background: color-mix(in srgb, var(--sc, var(--accent)) 10%, var(--surface)); box-shadow: 0 3px 0 color-mix(in srgb, var(--sc, var(--accent)) 30%, var(--line)); transition: transform .15s, box-shadow .15s, background .15s; }
a.subj-tile::before { display: none; }
a.subj-tile:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--sc, var(--accent)) 15%, var(--surface)); box-shadow: 0 5px 0 color-mix(in srgb, var(--sc, var(--accent)) 45%, var(--line)); border-color: transparent; }
a.subj-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--sc, var(--accent)) 45%, var(--line)); }
a.subj-tile .subj-badge { width: 48px; height: 48px; border-radius: 14px; font: 800 1rem/1 var(--f-display); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
a.subj-tile .name { font: 800 1.08rem/1.2 var(--f-display); text-wrap: balance; }
a.subj-tile .meta { margin-top: 3px; font-size: .8rem; color: var(--ink-2); }
a.subj-tile .ring .ring-track { stroke: color-mix(in srgb, var(--sc, var(--accent)) 18%, var(--surface)); }
a.subj-tile .ring .ring-v { font: 800 .72rem var(--f-display); }
.seg-toggle { border: 0; border-radius: 12px; background: var(--surface-2); }
.seg-toggle a { border-radius: 9px; }
.seg-toggle a.on { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.subj-tiles + .row-btns { margin-top: 22px; gap: 8px; }
.subj-tiles + .row-btns .btn.ghost { border-radius: 12px; background: var(--surface-2); border-color: transparent; }
.subj-tiles + .row-btns .btn.ghost:hover { background: var(--surface-3, var(--line)); }
@media (max-width: 760px) { a.subj-tile { padding: 14px; } a.subj-tile .subj-badge { width: 42px; height: 42px; } }

/* Lecture en grand : taille du texte, plein écran, schémas agrandis */
@media screen { .reader .course { font-size: calc(16.5px * var(--cs, 1)); } }
.read-ctl { display: inline-flex; gap: 4px; align-items: center; padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--line); }
.read-pct { min-width: 3.2em; text-align: center; font: 600 .78rem var(--f-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.read-ctl .btn.ghost { min-width: 34px; justify-content: center; font: 800 .82rem var(--f-display); padding-inline: 8px; }
.read-ctl .read-a2 { font-size: .98rem; }
.reader .course figure.diagram.done, .reader .course figure.figure-svg, .reader .course img { cursor: zoom-in; }
body.read-big { overflow: hidden; }
body.read-big #topbar, body.read-big #tabbar, body.read-big #coach-toggle { visibility: hidden; }
body.read-big .reader { position: fixed; inset: 0; z-index: 60; display: block; overflow-y: auto; background: var(--bg); padding: calc(56px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 60px max(16px, env(safe-area-inset-left, 0px)); }
body.read-big .reader .toc { display: none; }
body.read-big .reader .course { max-width: 78ch; margin: 0 auto; }
body.read-big .read-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 62; }
.read-exit { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); z-index: 63; box-shadow: var(--shadow); }
.modal.zoom { width: min(1200px, 100%); }
.modal.zoom .modal-body { padding: 12px; }
.zoom-box figure, .zoom-box img { margin: 0; border: 0; padding: 8px; max-width: 100%; width: 100%; overflow: auto; }
.zoom-box img { object-fit: contain; max-height: calc(100vh - 120px); }

/* Refonte page chapitre (même style qu'Aujourd'hui et Mes matières) */
.stepper { gap: 8px; border: 0; border-radius: 0; background: none; overflow: visible; }
.step { border: 0; border-radius: 14px; background: var(--surface-2); padding: 12px 14px; transition: background .15s, transform .15s; }
.step:hover { background: color-mix(in srgb, var(--sc, var(--accent)) 10%, var(--surface-2)); }
.step .s-n { border: 0; background: var(--surface); font: 800 .85rem var(--f-display); color: var(--ink-2); }
.step .s-l { font: 750 .95rem var(--f-display); }
.step.on { background: color-mix(in srgb, var(--sc, var(--accent)) 12%, var(--surface)); box-shadow: inset 0 0 0 2px var(--sc, var(--accent)), 0 3px 0 color-mix(in srgb, var(--sc, var(--accent)) 35%, var(--line)); }
.step.on::after { display: none; }
.step.on .s-n { background: var(--sc, var(--accent)); color: #fff; }
.step.done:not(.on) { background: var(--good-soft); }
.step.done .s-n { background: var(--good); color: var(--surface); }
.step.done:not(.on) .s-m { color: var(--good); }
.toc-actions .btn, .toc-actions .btn.ghost { border: 0; border-radius: 12px; background: var(--surface-2); }
.toc-actions .btn:hover { background: color-mix(in srgb, var(--sc, var(--accent)) 10%, var(--surface-2)); }
.ch-body .card, .ch-body details.card, .ch-body .alt, .ch-body .game-link { border: 0; border-radius: 18px; box-shadow: 0 3px 0 var(--line); }
.course-tools .btn:not(.ghost) { border: 0; border-radius: 12px; background: var(--surface-2); }
.step-foot { border-top: 0; padding-top: 6px; }
.step-foot .btn.ghost, .step-foot .btn:not(.primary) { border: 0; border-radius: 12px; background: var(--surface-2); }
@media (max-width: 760px) { .stepper { gap: 6px; } .step { padding: 10px 4px; } }

/* Page chapitre : moins de marges perdues sur grand écran, version téléphone resserrée */
@media (min-width: 1081px) {
  #main:has(.ch-body) { max-width: 1480px; padding-inline: 32px; }
  .ch-body .reader { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
  .ch-body .reader .course { max-width: none; }
}
@media screen and (min-width: 1400px) { .ch-body .reader .course { font-size: calc(17.5px * var(--cs, 1)); } }
@media (max-width: 1080px) {
  .ch-body .toc { padding: 12px 14px; border: 0; border-radius: 16px; background: var(--surface-2); }
  .ch-body .toc .toc-t { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .ch-body .toc .toc-t::after { content: "▾"; font-size: .9rem; transition: transform .15s; }
  .ch-body .toc.open .toc-t::after { transform: rotate(180deg); }
  .ch-body .toc:not(.open) .toc-actions { display: flex; gap: 6px; overflow-x: auto; margin: 10px -14px 0; padding: 0 14px 2px; scrollbar-width: none; }
  .ch-body .toc:not(.open) .toc-actions::-webkit-scrollbar { display: none; }
  .ch-body .toc .toc-actions .btn { flex: none; white-space: nowrap; background: var(--surface); }
  .ch-body .reader { gap: 6px; }
  .ch-body .course-meta { margin: 8px 0 10px; }
  .ch-body .course-tools { margin: 0 0 14px; gap: 6px; }
}
@media (max-width: 600px) {
  .stepper { margin-bottom: 14px; }
  .step .s-n { width: 26px; height: 26px; }
  .ch-body .read-ctl { border-right: 0; padding-right: 0; }
  .ch-body .course h2 { font-size: 1.25rem; margin-top: 1.4em; }
  .ch-body .callout { margin: .9em 0 1em; padding: 10px 12px 2px; border-radius: 10px; }
  .ch-body .callout-title { flex-basis: 100%; }
  .ch-body .figure-svg, .ch-body figure.diagram { padding: 8px; margin-inline: 0; }
  .page-head h1 { font-size: 1.85rem; }
}

/* Refonte Planning (même style qu'Aujourd'hui, Mes matières, chapitre) */
@media (min-width: 1081px) { #main:has(.plan-main), #main:has(.edt-bar) { max-width: 1480px; padding-inline: 32px; } }
#main:has(.edt-bar) .tabs { display: inline-flex; gap: 4px; padding: 4px; border: 0; border-radius: 12px; background: var(--surface-2); margin-bottom: 18px; }
#main:has(.edt-bar) .tab { margin: 0; border: 0; border-radius: 9px; padding: 7px 14px; color: var(--ink-2); }
#main:has(.edt-bar) .tab.on { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.edt-hint { border: 0; border-radius: 18px; background: var(--accent-soft); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 30%, var(--line)); }
.edt-wrap { border: 0; border-radius: 18px; box-shadow: 0 3px 0 var(--line); }
.edt-bar > .btn.icon { border: 0; background: var(--surface-2); border-radius: 12px; }
.edt-bar > .btn.ghost { border: 0; border-radius: 12px; background: var(--surface-2); }
.edt-days button { border: 0; background: var(--surface-2); }
.edt-days button.on { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.edt-days button.on small { color: var(--ink); }
.plan-summary .stat { border: 0; box-shadow: 0 3px 0 color-mix(in srgb, currentColor 30%, var(--line)); }
.plan-summary .stat::before { display: none; }
.plan-summary .stat.tint-sky { background: var(--sky-soft); } .plan-summary .stat.tint-plum { background: var(--plum-soft); }
.plan-summary .stat.tint-leaf { background: var(--accent-soft); } .plan-summary .stat.tint-berry { background: var(--berry-soft); }
.plan-summary .stat-l { color: var(--ink-2); }
.plan-after .card, .plan-main .card { border: 0; border-radius: 18px; box-shadow: 0 3px 0 var(--line); }
.edt-total { display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media (max-width: 600px) {
  .edt-hint { text-align: left; padding: 16px; }
  .edt-hint .row-btns { justify-content: flex-start; }
  .edt-bar { gap: 6px; }
  .edt-bar > strong { flex: 1; text-align: center; }
  .edt-bar > .seg { order: 5; flex: 1 1 100%; display: flex; }
  .edt-bar > .seg button { flex: 1; }
  .edt-bar > .grow { display: none; }
  .edt-bar > .btn.ghost { order: 6; flex: 1; justify-content: center; }
  .edt-legend > .muted { flex-basis: 100%; }
  #main:has(.edt-bar) .tabs { display: flex; } #main:has(.edt-bar) .tab { flex: 1; justify-content: center; padding-inline: 8px; }
  .plan-summary { gap: 8px; }
}
@media (max-width: 600px) {
  .edt-hint { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; text-align: left; }
  .edt-hint p { display: none; }
  .edt-hint .row-btns { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; }
  .edt-hint .row-btns .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 7px 8px; font-size: .8rem; line-height: 1.2; white-space: normal; text-align: center; }
}
/* Heures vides resserrées dans l'emploi du temps */
.edt-line.cmp { background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--line) 45%, transparent) 5px 6px); }
.edt-axis span.cmp { display: none; }
/* Cours sur téléphone : titre plus lisible, cours affiché plus haut */
@media (max-width: 600px) {
  #view:has(> .ch-body) > .crumb { display: none; }
  #view:has(> .ch-body) > .page-head { margin-bottom: 12px; }
  #view:has(> .ch-body) > .page-head .eyebrow { font-size: .7rem; margin-bottom: 4px; color: var(--sc-ink, var(--bark)); }
  #view:has(> .ch-body) > .page-head h1 { font-size: 1.65rem; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
  #view:has(> .ch-body) .stepper { margin-bottom: 10px; }
  #view:has(> .ch-body) .step { padding: 7px 2px; gap: 2px; }
  #view:has(> .ch-body) .step .s-n { width: 22px; height: 22px; font-size: .72rem; }
  #view:has(> .ch-body) .step .s-l { font-size: .74rem; }
  .ch-body .toc { padding: 8px 12px; }
  .ch-body .toc .toc-t { margin: 0; }
  .ch-body .toc:not(.open) .toc-progress, .ch-body .toc:not(.open) .toc-actions { display: none; }
  .ch-body .toc.open .toc-progress { margin-top: 8px; }
  .ch-body .course-meta { margin: 8px 0 6px; font-size: .78rem; }
  .ch-body .course-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 4px; padding: 0 16px 2px; }
  .ch-body .course-tools::-webkit-scrollbar { display: none; }
  .ch-body .course-tools .btn { flex: none; white-space: nowrap; }
  .ch-body .course > h2:first-of-type { margin-top: .8em; }
}

/* Refonte page d'une matière */
@media (min-width: 1081px) { #main:has(> #view > .chapters) { max-width: 1480px; padding-inline: 32px; } }
.chapters { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 10px 14px; }
a.chapter-row { border: 0; border-radius: 16px; background: color-mix(in srgb, var(--sc, var(--accent)) 6%, var(--surface)); box-shadow: 0 3px 0 color-mix(in srgb, var(--sc, var(--accent)) 22%, var(--line)); padding: 14px 16px; transition: transform .15s, box-shadow .15s, background .15s; }
a.chapter-row:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--sc, var(--accent)) 11%, var(--surface)); box-shadow: 0 5px 0 color-mix(in srgb, var(--sc, var(--accent)) 38%, var(--line)); border-color: transparent; }
a.chapter-row .num { border: 0; background: var(--surface); font: 800 .85rem var(--f-display); color: color-mix(in srgb, var(--sc, var(--ink-2)) var(--teinte-texte), var(--ink)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sc, var(--accent)) 35%, transparent); }
a.chapter-row.complete { background: var(--good-soft); box-shadow: 0 3px 0 color-mix(in srgb, var(--good) 35%, var(--line)); }
a.chapter-row.complete .num { background: var(--good); color: var(--surface); box-shadow: none; }
a.chapter-row .name { font: 700 1rem/1.25 var(--f-display); }
a.chapter-row .meta { color: var(--ink-2); margin-top: 2px; }
.chapters .step-dot { background: color-mix(in srgb, var(--sc, var(--accent)) 18%, var(--surface-3)); }
.chapters .step-dot.done, .chapters .step-dot > span { background: var(--sc, var(--accent)); }
.subject-head ~ .toolbar .btn.ghost { border: 0; border-radius: 12px; background: var(--surface-2); }
.ann-links { padding: 10px 14px; border-radius: 12px; background: var(--surface-2); }
@media (max-width: 600px) {
  #view:has(> .chapters) > .crumb { display: none; }
  .subject-head { gap: 10px; margin-bottom: 12px; }
  .subject-head h1 { font-size: 1.6rem; }
  .subject-head ~ .toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 0 16px 2px; }
  .subject-head ~ .toolbar::-webkit-scrollbar { display: none; }
  .subject-head ~ .toolbar .btn { flex: none; white-space: nowrap; }
  a.chapter-row { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 12px; padding: 12px 14px; }
  a.chapter-row .num { width: 28px; height: 28px; }
}

/* Refonte Contrôles et examens */
@media (min-width: 1081px) { #main:has(.exam-cards), #main:has(.ctrl-plan) { max-width: 1480px; padding-inline: 32px; } }
.ctrl-card, .ctrl-plan, .ctrl-note { border: 0; border-radius: 18px; box-shadow: 0 3px 0 var(--line); }
.ctrl-card .list { display: flex; flex-direction: column; gap: 8px; border: 0; }
.ctrl-card .list-row { border: 0; border-radius: 14px; padding: 12px 14px; background: var(--bg); }
.ctrl-card .list-row:hover { background: var(--surface-2); }
.ctrl-card .card-head .btn, .ctrl-card .btn.ghost { border: 0; border-radius: 12px; background: var(--surface-2); }
.exam-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.exam-card { border: 0; border-radius: 18px; background: color-mix(in srgb, var(--bark) 7%, var(--surface)); box-shadow: 0 3px 0 color-mix(in srgb, var(--bark) 25%, var(--line)); }
.exam-card:hover { border-color: transparent; background: color-mix(in srgb, var(--bark) 11%, var(--surface)); box-shadow: 0 5px 0 color-mix(in srgb, var(--bark) 38%, var(--line)); }
.exam-card .ic-wrap { width: 42px; height: 42px; border-radius: 12px; background: var(--bark); color: var(--surface); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.exam-card h3 { font: 800 1.05rem/1.2 var(--f-display); }
.exam-card p { color: var(--ink-2); }
.ctrl-plan { gap: 18px; }
.ctrl-dh { border-bottom: 0; padding: 0 2px 4px; }
.ctrl-dh strong { font: 800 .98rem var(--f-display); }
.ctrl-day .list { display: flex; flex-direction: column; gap: 6px; border: 0; }
.ctrl-day .list-row { border: 0; border-radius: 12px; padding: 11px 14px; background: var(--bg); }
.ctrl-day.today { padding: 12px; margin: -4px; border-radius: 16px; background: var(--accent-soft); }
.ctrl-day.today .list-row { background: var(--surface); }
.ctrl-day .box { width: 20px; height: 20px; border-radius: 6px; }
@media (max-width: 600px) {
  #view:has(.ctrl-plan) > .crumb { display: none; }
  .ctrl-head { gap: 10px; }
  .ctrl-head h1 { font-size: 1.55rem; }
  .exam-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .exam-card { padding: 14px; gap: 4px; }
  .exam-card p { display: none; }
  .exam-card h3 { font-size: .95rem; }
  .exam-card .ic-wrap { width: 36px; height: 36px; }
  .ctrl-card { padding: 14px; }
  .ctrl-day .list-row { padding: 10px 12px; }
}

/* Onglets en pastilles partout (comme le Planning) + refonte « Ajouter un cours » */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; width: fit-content; max-width: 100%; border: 0; border-radius: 12px; background: var(--surface-2); margin-bottom: 18px; overflow: visible; }
.tab { margin: 0; border: 0; border-radius: 9px; padding: 7px 13px; color: var(--ink-2); }
.tab:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.tab.on { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); border-bottom-color: transparent; }
.imp-step { border: 0; border-radius: 18px; box-shadow: 0 3px 0 var(--line); }
.imp-step.off { box-shadow: none; background: var(--surface-2); }
.imp-step .drop-zone { border-radius: 16px; }
@media (max-width: 600px) {
  .tabs { width: auto; }
  .tab { flex: 1 1 auto; justify-content: center; padding: 7px 10px; font-size: .84rem; }
  .imp-step { padding: 14px; }
  .imp-step.off { padding: 10px 14px; }
  .imp-step.off p { display: none; }
  .imp-step.off .imp-step-h { margin: 0; }
  .imp-step .drop-zone { padding-block: 18px; }
}

/* ===== Préparation d'un contrôle : en-tête plein + frise des jours ===== */
.ctrl-top { --sc: var(--accent); background: var(--sc); color: #fff; border-radius: 22px; padding: 22px 24px 18px; margin: 4px 0 22px; box-shadow: 0 4px 0 color-mix(in srgb, var(--sc) 55%, #000); display: flex; flex-direction: column; gap: 14px; }
.ctrl-top.past { background: color-mix(in srgb, var(--sc) 55%, var(--surface-2)); }
.ctrl-top .ctrl-head { margin: 0; gap: 16px; }
.ctrl-top .subj-badge { background: rgba(255,255,255,.22) !important; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.ctrl-top h1 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.1; text-wrap: balance; }
.ctrl-top .muted { color: rgba(255,255,255,.88); }
.ctrl-top p.muted::first-letter { text-transform: uppercase; }
.ctrl-top .ctrl-j { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); padding: 6px 4px; }
.ctrl-top .ctrl-j.soon { border-color: #fff; border-width: 3px; padding: 10px 16px; }
.ctrl-prog { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.ctrl-prog strong { color: #fff; margin-right: 2px; }
.ctrl-prog .muted { color: rgba(255,255,255,.85); }
.ctrl-prog .linkish { color: #fff; text-decoration: underline; }
.ctrl-chip { display: inline-block; max-width: 100%; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.ctrl-chip:hover { background: rgba(255,255,255,.3); }
.section-title .ctrl-bar { flex: 1 1 120px; max-width: 320px; margin-left: auto; }
.section-title .ctrl-bar .bar { height: 10px; border-radius: 99px; }
.section-title:has(.ctrl-bar) > .muted { order: 3; font-weight: 700; color: var(--ink); }
.ctrl-plan { --sc: var(--accent); position: relative; padding: 22px 22px 22px 52px; gap: 22px; }
.ctrl-plan::before { content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 3px; border-radius: 3px; background: color-mix(in srgb, var(--sc) 30%, var(--line)); }
.ctrl-day { position: relative; }
.ctrl-day::before { content: ""; position: absolute; left: -32px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--sc) 45%, var(--line)); }
.ctrl-day.all-done::before { background: var(--good); box-shadow: none; }
.ctrl-day.today { margin: -6px -10px; padding: 12px 10px 10px; background: color-mix(in srgb, var(--sc) 10%, var(--surface)); box-shadow: inset 0 0 0 2px var(--sc); }
.ctrl-day.today::before { left: -22px; top: 13px; width: 18px; height: 18px; background: var(--sc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sc) 25%, transparent); }
.ctrl-day.today .ctrl-dh strong { color: color-mix(in srgb, var(--sc) var(--teinte-texte), var(--ink)); font-size: 1.15rem; }
.ctrl-day.past:not(.today) { opacity: .55; }
.ctrl-day .box { width: 24px; height: 24px; border-radius: 8px; }
.ctrl-day .quest.done .box { background: var(--good); border-color: var(--good); color: #fff; }
.ctrl-dh .tiny { font-weight: 700; color: color-mix(in srgb, var(--sc) var(--teinte-texte), var(--ink)); }
@media (max-width: 600px) {
  .ctrl-top { padding: 16px 16px 14px; border-radius: 18px; margin-bottom: 18px; gap: 12px; }
  .ctrl-top .ctrl-head { gap: 10px; }
  .ctrl-top .subj-badge { display: none; }
  .ctrl-top h1 { font-size: 1.5rem; }
  .ctrl-chip { padding: 5px 10px; font-size: .82rem; }
  .ctrl-plan { padding: 16px 12px 16px 38px; gap: 18px; }
  .ctrl-plan::before { left: 18px; }
  .ctrl-day::before { left: -26px; }
  .ctrl-day.today { margin: -4px -6px; padding: 10px 6px 8px; }
  .ctrl-day.today::before { left: -22px; }
  .section-title .ctrl-bar { flex-basis: 100%; max-width: none; order: 4; }
}
.section-title:has(.ctrl-bar) { flex-wrap: wrap; }
.section-title:has(.ctrl-bar)::after { display: none; }
.ctrl-top .ctrl-head { width: 100%; }
.ctrl-top .ctrl-j { background: none; margin-left: auto; }
.ctrl-top .ctrl-j:not(.soon) { padding: 4px 6px 4px 12px; }

/* ===== Séance de cartes : colonne centrée, carte plus présente, boutons pleins ===== */
#main:has(> #view > .session) { max-width: 940px; }
#view > .session { max-width: none; }
.session-prog { gap: 14px; margin-bottom: 18px; }
.session-prog .bar { height: 12px; border-radius: 99px; background: var(--surface-2); }
.session-prog .bar span { border-radius: 99px; }
.session-prog > .small { font: 800 .95rem var(--f-display); color: var(--ink); }
.session .qcard { border: 0; border-radius: 20px; box-shadow: 0 4px 0 var(--line), 0 10px 30px -18px rgba(0,0,0,.25); }
.session .qcard.t-flash .qtext { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); margin: 18px 0 22px; }
.session .qcard .qactions .btn.primary { padding: 14px 26px; font-size: 1.05rem; border-radius: 14px; }
.qcard .opt { border: 0; border-radius: 14px; padding: 13px 15px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2), 0 2px 0 var(--line); }
.qcard .opt:hover { box-shadow: inset 0 0 0 2px var(--accent), 0 2px 0 var(--line); }
.qcard .opt:has(input:checked), .qcard .opt.on, .qcard .opt.sel { box-shadow: inset 0 0 0 2px var(--accent), 0 2px 0 color-mix(in srgb, var(--accent) 40%, var(--line)); }
.qcard .opt.good { background: var(--good-soft); box-shadow: inset 0 0 0 2px var(--good); }
.qcard .opt.bad { background: var(--bad-soft); box-shadow: inset 0 0 0 2px var(--bad); }
.rate-row { gap: 10px; margin-top: 10px; }
.rate-btn { border: 0; padding: 14px 8px 12px; border-radius: 16px; box-shadow: 0 3px 0 color-mix(in srgb, currentColor 35%, var(--line)); transition: transform .08s, box-shadow .08s; }
.rate-btn:hover, .rate-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 0 color-mix(in srgb, currentColor 45%, var(--line)); }
.rate-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, currentColor 35%, var(--line)); }
.rate-btn .rate-l { font-size: 1.1rem; }
.rate-btn.r-bad { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.rate-btn.r-hard { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.rate-btn.r-good { background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.rate-btn.r-easy { background: color-mix(in srgb, var(--sky) 12%, var(--surface)); }
.review-opts > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; background: var(--surface-2); font-weight: 700; font-size: .88rem; cursor: pointer; }
.review-opts > summary::-webkit-details-marker { display: none; }
.review-opts[open] > summary { box-shadow: inset 0 0 0 2px var(--ink); background: var(--surface); }
.review-opts .toolbar { margin-top: 12px; }
@media (max-width: 600px) {
  #view:has(> .session) > .crumb { display: none; }
  #view:has(> .session) > .page-head p, #view:has(> .session) > .page p { display: none; }
  #view:has(> .session) .page-head h1, #view:has(> .session) > .page h1 { font-size: 1.6rem; }
  .session .qcard.t-flash .qtext { margin: 10px 0 16px; }
  .session .qcard .qactions { flex-wrap: wrap; }
  .session .qcard .qactions .btn.primary { flex: 1 1 100%; justify-content: center; order: -1; }
  .rate-btn { padding: 12px 6px 10px; }
}
.conf-ask .conf-btn { border: 0; box-shadow: inset 0 0 0 1.5px var(--line-2), 0 2px 0 var(--line); }
.conf-ask .conf-btn:hover, .conf-ask .conf-btn:focus-visible { box-shadow: inset 0 0 0 2px var(--accent), 0 2px 0 var(--line); }
@media (max-width: 600px) {
  .conf-ask { padding: 10px; margin-top: 10px; }
  .conf-q { margin-bottom: 8px; font-size: .9rem; }
  .conf-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .conf-ask .conf-btn { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; text-align: center; font-size: .85rem; }
  .conf-ask .conf-btn small { display: none; }
  .conf-ic { width: 24px; height: 24px; font-size: .8rem; }
}
@media (min-width: 1081px) {
  #main:has(> #view > .session) { max-width: 1180px; padding-inline: 32px; }
  .session .qcard.t-flash, .session .qcard.t-qcm, .session .qcard.t-num, .session .qcard.t-formula { padding: 32px 40px 30px 92px; background-image: linear-gradient(90deg, transparent 60px, var(--marge) 60px, var(--marge) 62px, transparent 62px), linear-gradient(var(--seyes-strong) 1px, transparent 1px), linear-gradient(var(--seyes) 1px, transparent 1px); }
  .session .qcard.t-flash .qtext { font-size: 2.3rem; margin: 26px 0 30px; }
  .session .qcard.t-qcm .qtext, .session .qcard.t-num .qtext, .session .qcard.t-formula .qtext { font-size: 1.4rem; }
  .session .qcard .opt { padding: 16px 18px; font-size: 1.12rem; }
  .session .qcard .reveal, .session .qcard .solution { font-size: 1.12rem; }
  .session .qcard .flash-answer { font-size: 1.08rem; min-height: 110px; }
  .session .rate-btn { padding: 18px 8px 16px; }
  .session .rate-btn .rate-l { font-size: 1.25rem; }
}
@media (max-width: 600px) {
  .conf-ask { padding: 8px; border-radius: 12px; }
  .conf-q { margin-bottom: 6px; font-size: .8rem; }
  .conf-q .conf-help { padding: 2px; }
  .conf-ask .conf-btn { flex-direction: row; gap: 5px; padding: 6px 4px; font-size: .78rem; border-radius: 10px; }
  .conf-ic { width: 18px; height: 18px; font-size: .65rem; }
  .conf-ic svg { width: 11px; height: 11px; }
}
@media (max-width: 600px) { .conf-ask .conf-btn { white-space: nowrap; padding: 6px 2px; gap: 4px; font-size: .76rem; } .conf-ask .conf-btn > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } }
/* Séance de cartes : fiche bristol (ligne rouge en tête, lignes bleues fines) au lieu du cahier Seyès */
.session .qcard.t-flash, .session .qcard.t-qcm, .session .qcard.t-num, .session .qcard.t-formula {
  background-image: linear-gradient(to bottom, transparent 58px, color-mix(in srgb, var(--bad) 60%, transparent) 58px, color-mix(in srgb, var(--bad) 60%, transparent) 60px, transparent 60px), repeating-linear-gradient(to bottom, transparent 0 29px, color-mix(in srgb, var(--sky) 20%, transparent) 29px 30px);
  background-size: 100% 100%, 100% 100%; padding: 20px 22px 22px;
}
@media (min-width: 1081px) {
  .session .qcard.t-flash, .session .qcard.t-qcm, .session .qcard.t-num, .session .qcard.t-formula { padding: 22px 44px 32px; background-image: linear-gradient(to bottom, transparent 62px, color-mix(in srgb, var(--bad) 60%, transparent) 62px, color-mix(in srgb, var(--bad) 60%, transparent) 64px, transparent 64px), repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb, var(--sky) 20%, transparent) 31px 32px); }
}
@media (max-width: 600px) { .session .qcard.t-flash, .session .qcard.t-qcm, .session .qcard.t-num, .session .qcard.t-formula { padding: 16px 14px 18px; } }
/* la ligne rouge suit l'en-tête de la carte, même quand il passe sur deux lignes */
.session .qcard { --qpx: 22px; }
@media (min-width: 1081px) { .session .qcard { --qpx: 44px; } }
@media (max-width: 600px) { .session .qcard { --qpx: 14px; } }
.session .qcard.t-flash, .session .qcard.t-qcm, .session .qcard.t-num, .session .qcard.t-formula { background-image: repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb, var(--sky) 20%, transparent) 31px 32px) !important; padding-inline: var(--qpx); }
.session .qcard .qhead { margin-inline: calc(-1 * var(--qpx)); padding: 0 var(--qpx) 10px; border-bottom: 2px solid color-mix(in srgb, var(--bad) 60%, transparent); margin-bottom: 14px; }
.session .qcard .qhead { background: var(--surface); position: relative; }

/* ===== Ma progression ===== */
@media (min-width: 1081px) { #main:has(> #view > .prog-grid) { max-width: 1480px; padding-inline: 32px; } }
#view:has(> .prog-grid) > .card, .prog-grid > .card { border: 0; border-radius: 20px; box-shadow: 0 3px 0 var(--line); }
#view:has(> .prog-grid) .card-title { font: 800 1.15rem var(--f-display); }
#view:has(> .prog-grid) > .stats-row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0 18px; }
#view:has(> .prog-grid) > .stats-row .stat { border: 0; border-radius: 18px; padding: 16px 18px; box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 30%, var(--line)); background: color-mix(in srgb, var(--c) 10%, var(--surface)); }
#view:has(> .prog-grid) > .stats-row .stat-v { font: 800 1.9rem/1.1 var(--f-display); color: color-mix(in srgb, var(--c) 75%, var(--ink)); }
#view:has(> .prog-grid) > .stats-row .stat:nth-child(1) { --c: var(--accent); }
#view:has(> .prog-grid) > .stats-row .stat:nth-child(2) { --c: var(--rouge, var(--bad)); }
#view:has(> .prog-grid) > .stats-row .stat:nth-child(3) { --c: var(--sky); }
#view:has(> .prog-grid) > .stats-row .stat:nth-child(4) { --c: var(--good); }
#view:has(> .prog-grid) > .stats-row .stat:nth-child(5) { --c: var(--warn); }
.sp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-bottom: 10px; }
a.sp-tile { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 18px; text-decoration: none; color: var(--ink); background: color-mix(in srgb, var(--sc) 8%, var(--surface)); box-shadow: 0 3px 0 color-mix(in srgb, var(--sc) 30%, var(--line)); transition: transform .1s; }
a.sp-tile:hover { transform: translateY(-2px); }
.sp-top { display: flex; align-items: center; gap: 10px; }
.sp-name { font: 800 1.1rem var(--f-display); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-prog { display: flex; align-items: center; gap: 12px; }
.sp-pct { font: 800 1.6rem/1 var(--f-display); color: color-mix(in srgb, var(--sc) 80%, var(--ink)); min-width: 3.2ch; }
.sp-prog .bar { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--sc) 15%, var(--surface-2)); }
.sp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sp-kpis > span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: var(--surface); min-width: 0; }
.sp-kpis b { font: 800 1.05rem var(--f-display); }
.sp-kpis small { color: var(--muted); font-size: .72rem; line-height: 1.25; }
#view:has(> .prog-grid) .ch-err { border: 0; }
#view:has(> .prog-grid) .ch-err thead th { background: var(--surface-2); border: 0; }
#view:has(> .prog-grid) .ch-err thead th:first-child { border-radius: 10px 0 0 10px; } #view:has(> .prog-grid) .ch-err thead th:last-child { border-radius: 0 10px 10px 0; }
#view:has(> .prog-grid) .ch-err td { border-color: color-mix(in srgb, var(--line) 60%, transparent); }
.prog-grid .heat i { border-radius: 4px; }
@media (min-width: 1081px) { .prog-grid .heat { grid-template-rows: repeat(7, 16px); } .prog-grid .heat i { width: 16px; height: 16px; } }
@media (max-width: 600px) {
  #view:has(> .prog-grid) > .tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  #view:has(> .prog-grid) > .tabs .tab { flex: none; }
  #view:has(> .prog-grid) > .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #view:has(> .prog-grid) > .stats-row .stat { padding: 12px 14px; border-radius: 14px; }
  #view:has(> .prog-grid) > .stats-row .stat-v { font-size: 1.45rem; }
  #view:has(> .prog-grid) > .stats-row .stat:last-child { grid-column: 1 / -1; }
  #view:has(> .prog-grid) > .card, .prog-grid > .card { padding: 16px 14px; border-radius: 16px; }
  #view:has(> .prog-grid) .ch-err th:nth-child(4), #view:has(> .prog-grid) .ch-err td:nth-child(4) { display: none; }
  #view:has(> .prog-grid) .ch-err td { font-size: .85rem; padding-inline: 6px; }
}
.sp-prog .grow { flex: 1; min-width: 0; }
.sp-prog .bar { background: color-mix(in srgb, var(--sc) 18%, var(--surface)); }
@media (min-width: 1081px) { .prog-grid .heat { grid-auto-columns: minmax(16px, 1fr); } .prog-grid .heat i { width: auto; } }
@media (max-width: 600px) { .sp-kpis small { font-size: .68rem; } .sp-kpis > span { padding: 7px 8px; } }
@media (max-width: 600px) {
  #view:has(> .prog-grid) > .stats-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #view:has(> .prog-grid) > .stats-row .stat { grid-column: span 2; padding: 10px 10px; }
  #view:has(> .prog-grid) > .stats-row .stat:nth-child(n+4) { grid-column: span 3; }
  #view:has(> .prog-grid) > .stats-row .stat-v { font-size: 1.25rem; }
  #view:has(> .prog-grid) > .stats-row .stat-l { font-size: .72rem; }
  #view:has(> .prog-grid) > .stats-row .stat .tiny { display: none; }
}
@media (max-width: 600px) {
  #view:has(> .prog-grid) > .stats-row { gap: 6px; margin: 10px 0 14px; }
  #view:has(> .prog-grid) > .stats-row .stat { padding: 7px 9px; border-radius: 12px; box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 30%, var(--line)); }
  #view:has(> .prog-grid) > .stats-row .stat-v { font-size: 1.05rem; }
  #view:has(> .prog-grid) > .stats-row .stat-l { font-size: .68rem; line-height: 1.2; }
  .sp-tiles { gap: 8px; }
  a.sp-tile { gap: 6px; padding: 10px 12px; border-radius: 14px; box-shadow: 0 2px 0 color-mix(in srgb, var(--sc) 30%, var(--line)); }
  a.sp-tile .subj-badge { width: 26px; height: 26px; font-size: .7rem; }
  .sp-name { font-size: .95rem; }
  .sp-pct { font-size: 1.1rem; }
  .sp-prog .bar { height: 7px; }
  .sp-kpis { gap: 5px; }
  .sp-kpis > span { padding: 4px 7px; border-radius: 9px; }
  .sp-kpis b { font-size: .85rem; }
  .sp-kpis small { font-size: .62rem; }
}
.edt-row.clash { padding: 4px; margin-inline: -4px; border-radius: 10px; background: var(--bad-soft); box-shadow: inset 0 0 0 1.5px var(--bad); }
@media (max-width: 600px) { .edt-bar > .btn.small.ghost { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .76rem; padding-inline: 6px; gap: 4px; } .edt-bar > .btn.small.ghost.edt-pdf { flex: 0 0 auto; } }
/* les lignes de la fiche bristol ne passent jamais sous le texte : chaque bloc de texte a un fond plein */
.session .qcard .qtext, .session .qcard .qintro, .session .qcard .qactions, .session .qcard .hints, .session .qcard .hint, .session .qcard .feedback, .session .qcard .verdict, .session .qcard .xpline, .session .qcard .answer > p, .session .qcard .answer > .small, .session .qcard .answer > div:not(.opts):not(.conf-ask), .session .qcard .rate-tip, .session .qcard p { background: var(--surface); }
.session .qcard .opts { background: var(--surface); }
/* les blocs couvrent aussi les marges de la carte : les lignes ne se voient qu'entre deux blocs, sur toute la largeur */
.session .qcard > *:not(.qhead):not(.conf-ask):not(.reveal), .session .qcard .answer > *:not(.conf-ask):not(.reveal), .session .qcard .opts > * { box-shadow: calc(-1 * var(--qpx)) 0 0 var(--surface), var(--qpx) 0 0 var(--surface); }
.session .qcard .opts > .opt { box-shadow: inset 0 0 0 1.5px var(--line-2), 0 2px 0 var(--line); }
.edt-b.tiny { padding-block: 2px; justify-content: center; } .edt-b.tiny .edt-t { line-height: 1.2; }

/* Questionnaire testeur : précision « Autre », mise en avant dans le menu */
.qb-prec { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.qb-prec .input { flex: 1; min-width: 0; }
.avatar { position: relative; }
.avatar.dot::after { content: ""; position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--bad); border: 2px solid var(--bg); }
.menu .menu-q { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; padding: 10px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); text-decoration: none; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.menu .menu-q:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.menu .menu-q > svg { color: var(--accent); flex: none; }
.menu .menu-q .grow { display: flex; flex-direction: column; line-height: 1.25; }
.menu .menu-q .small { color: var(--muted); }
.menu-q-tag { flex: none; font: 700 .72rem var(--f-display); padding: 3px 8px; border-radius: 99px; background: var(--bad); color: #fff; }

/* Admin : actions importantes en rouge, aide des codes */
.btn.risk { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.risk:hover { background: color-mix(in srgb, var(--bad) 85%, #000); border-color: transparent; }
.btn.risk:disabled { opacity: .45; }
.adm-how { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 4px; }
.adm-f { display: flex; flex-direction: column; gap: 3px; }
.adm-f.grow { flex: 1 1 200px; min-width: 0; }
.adm-mail { margin-top: 10px; }
.adm-pre { white-space: pre-wrap; font: inherit; font-size: .9rem; background: var(--surface-2); padding: 10px 12px; border-radius: 10px; margin: 8px 0; }
.adm-newcode { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); }
.adm-newcode p { margin: 0 0 6px; overflow-wrap: anywhere; }

/* Pictogrammes des matières dans les pastilles */
.subj-badge.ic svg { width: 60%; height: 60%; stroke-width: 2; }

/* Bilan de la semaine en graphiques */
.wk { display: grid; gap: 18px; margin-bottom: 14px; }
.wk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wk-kpi { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--c) 12%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 30%, transparent); flex-wrap: wrap; min-width: 0; }
.wk-kpi > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wk-kpi strong { font: 800 1.35rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.wk-kpi > div > span { font-size: .8rem; color: var(--muted); }
.wk-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; flex: none; }
.wk-d { font: 700 .74rem var(--f-ui); padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.wk-d.up { background: var(--good-soft); color: var(--good); }
.wk-d.down { background: var(--bad-soft); color: var(--bad); }
.wk-d.flat { background: var(--surface-2); color: var(--muted); }
.wk-dots { display: flex; gap: 4px; width: 100%; }
.wk-dots i { flex: 1; height: 7px; border-radius: 99px; background: var(--surface-3); }
.wk-dots i.on { background: var(--sun); }
.wk-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; }
.wk-ttl { font-weight: 700; font-size: .85rem; color: var(--ink-2); margin-bottom: 8px; }
.wk-cols { height: 170px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.wk-col { height: 100%; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 4px; padding-top: 18px; }
.wk-bw { position: relative; align-self: end; width: 100%; max-width: 46px; display: flex; }
.wk-bw > .wk-v { position: absolute; bottom: calc(100% + 3px); left: 0; right: 0; text-align: center; }
.wk-stack { width: 100%; height: 100%; display: flex; flex-direction: column-reverse; border-radius: 7px 7px 3px 3px; overflow: hidden; background: var(--surface-3); }
.wk-stack i { display: block; min-height: 3px; }
.wk-v { font: 700 .75rem var(--f-ui); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wk-l { font-size: .74rem; color: var(--muted); }
.wk-col.today .wk-l { color: var(--accent); font-weight: 700; }
.wk-donut { display: grid; justify-items: center; gap: 6px; text-align: center; }
.wk-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 2px; }
.wk-bar i { display: block; min-width: 4px; }
.wk-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; margin-top: 10px; }
a.wk-leg { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; padding: 4px; border-radius: 8px; min-width: 0; }
a.wk-leg:hover { background: var(--surface-2); }
a.wk-leg .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.wk-leg .subj-badge { width: 26px; height: 26px; border-radius: 7px; }
.wk-acc { font: 700 .74rem var(--f-ui); padding: 2px 7px; border-radius: 99px; }
.wk-acc.good { background: var(--good-soft); color: var(--good); }
.wk-acc.mid { background: var(--warn-soft); color: var(--warn); }
.wk-acc.low { background: var(--bad-soft); color: var(--bad); }
.wk-card .bilan { border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 760px) { .wk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .wk-kpi { padding: 9px; gap: 8px; } .wk-kpi strong { font-size: 1.1rem; } .wk-ic { width: 28px; height: 28px; }
  .wk-main { grid-template-columns: 1fr; } .wk-donut { display: none; } .wk-cols { height: 130px; gap: 5px; }
}

/* Page matière : les parties de chaque cours */
.ch-parts { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.ch-parts > span { font-size: .74rem; line-height: 1.3; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--sc, var(--accent)) 10%, var(--surface)); color: var(--ink-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc, var(--accent)) 22%, transparent); }
.ch-parts > span.more { background: none; box-shadow: none; color: var(--muted); }
@media (max-width: 600px) { .ch-parts > span:nth-child(n+4):not(.more) { display: none; } }

/* Arbre de compétences version jeu : mondes et chemin de niveaux */
.wd-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--sun) 14%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sun) 35%, transparent); margin-bottom: 14px; }
.wd-star { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; background: var(--sun); color: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--sun) 60%, #000); flex: none; }
.wd-head .grow { flex: 1 1 240px; min-width: 0; }
.wd-head strong { font: 800 1.2rem var(--f-display); }
.wd-bar { flex: 1 1 100%; height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.wd-bar i { display: block; height: 100%; background: var(--sun); border-radius: inherit; }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
a.wd-card { display: grid; gap: 10px; padding: 14px; border-radius: 18px; text-decoration: none; color: var(--ink); background: color-mix(in srgb, var(--sc) 10%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sc) 35%, transparent), 0 4px 0 color-mix(in srgb, var(--sc) 30%, transparent); transition: transform .12s; }
a.wd-card:hover { transform: translateY(-2px); }
a.wd-card.won { background: color-mix(in srgb, var(--sc) 22%, var(--surface)); }
.wd-top { display: flex; justify-content: space-between; align-items: center; }
.wd-n { font: 800 .72rem var(--f-display); text-transform: uppercase; letter-spacing: .08em; color: color-mix(in srgb, var(--sc) var(--teinte-texte), var(--ink)); }
.wd-crown { color: var(--sun); }
.wd-mid { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wd-mid strong { font: 800 1.05rem var(--f-display); display: block; }
.wd-mid .small { color: var(--muted); }
.wd-path { display: flex; gap: 4px; flex-wrap: wrap; }
.wd-path i { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sc) 30%, transparent); }
.wd-path i.half { background: color-mix(in srgb, var(--sc) 40%, var(--surface)); }
.wd-path i.done { background: var(--sc); box-shadow: none; }
.wd-path i.cur { box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 4.5px var(--sc); }
.wd-foot { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .88rem; }
.wd-foot > span:first-child { color: var(--warn); }
.wd-go { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 99px; background: var(--sc); color: #fff; }
.wd-tree summary { cursor: pointer; }
.wd-tree-in { overflow-x: auto; margin-top: 12px; }

.lv-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--sc) 12%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sc) 30%, transparent); }
.lv-head strong { font: 800 1.1rem var(--f-display); display: block; }
.lv-head .small { color: var(--muted); }
.lv-score { text-align: center; line-height: 1.1; }
.lv-score b { display: block; font: 800 1.35rem var(--f-display); color: var(--warn); }
.lv-score span { font-size: .75rem; color: var(--muted); }
.lv-wrap { display: flex; justify-content: center; margin-top: 8px; overflow: hidden; }
.lv-map { position: relative; max-width: 100%; }
.lv-svg { position: absolute; inset: 0; }
.lv-road { fill: none; stroke: var(--line-2); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 2 16; }
.lv-road-done { fill: none; stroke-width: 10; stroke-linecap: round; opacity: .85; }
.lv-node { position: absolute; width: 74px; height: 74px; margin: -37px 0 0 -37px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; z-index: 2; }
.lv-disc { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font: 800 1.3rem var(--f-display); background: var(--surface); color: color-mix(in srgb, var(--sc) var(--teinte-texte), var(--ink)); box-shadow: inset 0 0 0 3px var(--sc), 0 5px 0 color-mix(in srgb, var(--sc) 45%, #000); transition: transform .12s; position: relative; z-index: 1; }
.lv-node:hover .lv-disc { transform: translateY(-2px); }
.lv-node:active .lv-disc { transform: translateY(3px); box-shadow: inset 0 0 0 3px var(--sc), 0 2px 0 color-mix(in srgb, var(--sc) 45%, #000); }
.lv-node.n-mastered .lv-disc { background: var(--sc); color: #fff; box-shadow: 0 5px 0 color-mix(in srgb, var(--sc) 55%, #000); }
.lv-node.n-locked { cursor: default; }
.lv-node.n-locked .lv-disc { background: var(--surface-3); color: var(--muted); box-shadow: 0 5px 0 var(--line-2); }
.lv-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--sc) calc(var(--p) * 1%), transparent 0); -webkit-mask: radial-gradient(circle, transparent 33px, #000 34px); mask: radial-gradient(circle, transparent 33px, #000 34px); opacity: .9; }
.lv-node.cur .lv-disc { animation: lv-pulse 1.6s ease-in-out infinite; }
@keyframes lv-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
@media (prefers-reduced-motion: reduce) { .lv-node.cur .lv-disc { animation: none; } }
.lv-stars { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; font-size: 15px; line-height: 1; z-index: 2; }
.lv-stars i { font-style: normal; color: var(--surface-3); -webkit-text-stroke: 1px var(--line-2); }
.lv-stars i.on { color: var(--sun); -webkit-text-stroke: 1px color-mix(in srgb, var(--sun) 60%, #000); }
.lv-label { position: absolute; transform: translate(46px, -50%); display: flex; flex-direction: column; line-height: 1.2; pointer-events: none; z-index: 1; }
.lv-label.left { transform: translate(calc(-100% - 46px), -50%); text-align: right; }
.lv-k { font: 800 .68rem var(--f-display); text-transform: uppercase; letter-spacing: .07em; color: color-mix(in srgb, var(--sc) var(--teinte-texte), var(--ink)); }
.lv-t { font-weight: 600; font-size: .86rem; background: color-mix(in srgb, var(--surface) 85%, transparent); border-radius: 6px; }
.lv-label.dim { opacity: .55; }
.lv-play { position: absolute; transform: translate(-50%, -78px); display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 99px; background: var(--sc); color: #fff; font: 800 .82rem var(--f-display); text-decoration: none; z-index: 3; box-shadow: 0 3px 0 color-mix(in srgb, var(--sc) 55%, #000); white-space: nowrap; }
.lv-play::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--sc); }
.lv-chest { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; font: 700 .68rem var(--f-ui); color: var(--muted); }
.lv-chest svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.lv-chest.open { color: var(--warn); }
.lv-chest.open svg { background: color-mix(in srgb, var(--sun) 25%, var(--surface)); color: var(--warn); box-shadow: inset 0 0 0 1.5px var(--sun); }
.lv-goal { position: absolute; transform: translate(-50%, -10px); display: grid; justify-items: center; gap: 2px; text-align: center; color: var(--muted); }
.lv-goal svg { width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line-2); }
.lv-goal strong { color: var(--ink); font: 800 .9rem var(--f-display); }
.lv-goal span { font-size: .75rem; }
.lv-goal.won svg { background: var(--sun); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--sun) 55%, #000); }
@media (max-width: 600px) {
  .lv-node { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .lv-disc { width: 50px; height: 50px; font-size: 1.1rem; }
  .lv-ring { -webkit-mask: radial-gradient(circle, transparent 27px, #000 28px); mask: radial-gradient(circle, transparent 27px, #000 28px); }
  .lv-label { transform: translate(38px, -50%); } .lv-label.left { transform: translate(calc(-100% - 38px), -50%); }
  .lv-t { font-size: .78rem; }
  .lv-head { padding: 10px 12px; }
}

/* Emploi du temps : aujourd'hui = en-tête marqué « auj. » et contour léger, sans fond jaune */
.edt-head > div.today { background: var(--accent); color: var(--accent-ink); border-radius: 8px; }
.adm-codeform { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.adm-codeform .input, .adm-codeform select { height: 40px; }
@media (max-width: 600px) {
  .wk-kpi { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wk-kpi > div { flex: none; }
  .wk-kpi strong { white-space: nowrap; }
}

/* Emploi du temps : couleurs plus douces (cours en pastel clair, révisions en pastel plus soutenu, texte foncé) */
.edt-b.k-cours { background: color-mix(in srgb, var(--c) 15%, var(--surface)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--c) 75%, var(--surface)); color: color-mix(in srgb, var(--c) 45%, var(--ink)); }
.edt-b.k-rev { background: color-mix(in srgb, var(--c) 30%, var(--surface)); color: color-mix(in srgb, var(--c) 50%, var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent), 0 2px 5px -3px rgba(0, 0, 0, .3); }
.edt-b.k-rev .edt-h { opacity: 1; }   /* P0-03 : était .8 (3,4 à 4,3:1) */
.edt-b.k-rev:hover { filter: none; background: color-mix(in srgb, var(--c) 38%, var(--surface)); }
.edt-b.is-ctrl { box-shadow: inset 4px 0 0 var(--c), inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }

/* Progression : tuiles du haut plus colorées */
#view:has(> .prog-grid) > .stats-row .stat { background: color-mix(in srgb, var(--c) 22%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 40%, transparent), 0 3px 0 color-mix(in srgb, var(--c) 45%, var(--line)); }
#view:has(> .prog-grid) > .stats-row .stat-v { color: color-mix(in srgb, var(--c) 85%, var(--ink)); }
#view:has(> .prog-grid) > .stats-row .stat-l { color: color-mix(in srgb, var(--c) 35%, var(--ink)); font-weight: 600; }
.offres-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; }
.offres-note svg { flex: none; margin-top: 2px; }
/* arbre : étoiles sous la bulle, sur une pastille ; bouton Jouer au-dessus sans toucher l'en-tête */
.lv-stars { bottom: -27px; padding: 2px 6px; border-radius: 99px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.lv-play { transform: translate(-50%, -84px); }
.lv-chest { z-index: 1; padding: 4px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 85%, transparent); }
.lv-wrap { padding-bottom: 70px; }
@media (max-width: 600px) { .lv-stars { bottom: -25px; font-size: 13px; } .lv-play { transform: translate(-50%, -76px); } }
.edt-head > div.today { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 40%, transparent); }
/* bouton « Fiche de révision » des cours, bien visible */
.btn.fr-cta { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.btn.fr-cta:hover { filter: brightness(1.06); }
.course-tools .btn.fr-cta:not(.ghost), .toc-actions .btn.fr-cta { background: var(--accent); color: var(--accent-ink); }

/* Schémas des cours : couleur de la matière, cases douces et arrondies, flèches discrètes */
.diagram { --dg: var(--sc, var(--accent)); background: var(--surface); border: 1px solid var(--line); padding: 20px 16px; }
.diagram svg .node rect, .diagram svg .node polygon, .diagram svg .node circle, .diagram svg .node path.basic, .diagram svg .node .label-container {
  fill: color-mix(in srgb, var(--dg) 13%, var(--surface)) !important; stroke: color-mix(in srgb, var(--dg) 60%, var(--surface)) !important; stroke-width: 1.4px !important; }
.diagram svg .node rect { rx: 14px; ry: 14px; }
.diagram svg .node .nodeLabel, .diagram svg .node text, .diagram svg .node span { color: var(--ink) !important; fill: var(--ink) !important; }
.diagram svg .flowchart-link, .diagram svg .edgePath .path, .diagram svg path.relation { stroke: color-mix(in srgb, var(--ink) 38%, var(--surface)) !important; stroke-width: 1.6px !important; }
.diagram svg marker path, .diagram svg .arrowheadPath, .diagram svg .arrowMarkerPath { fill: color-mix(in srgb, var(--ink) 45%, var(--surface)) !important; stroke: none !important; }
.diagram svg .edgeLabel, .diagram svg .edgeLabel rect, .diagram svg .edgeLabel p { background: var(--surface) !important; fill: var(--surface) !important; color: var(--muted) !important; font-size: 13px; font-weight: 500; }
.diagram svg .cluster rect { fill: color-mix(in srgb, var(--dg) 5%, var(--surface)) !important; stroke: color-mix(in srgb, var(--dg) 30%, var(--surface)) !important; stroke-dasharray: 4 4; }
.pdf-sheet .diagram { --surface: #fff; --ink: #1E1A17; --muted: #6B645E; }
.voice-wrap { display: grid; gap: 6px; }
.voice-tip summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.voice-tip ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-2); }
.adm-relire { display: grid; gap: 10px; }
.adm-relire h4 { margin: 6px 0 0; }
.adm-relire label { display: grid; gap: 4px; }
.adm-people { display: grid; gap: 6px; max-height: 240px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 10px; }
.adm-people .chk { display: flex; align-items: center; gap: 8px; }
.adm-apercu { white-space: pre-wrap; padding: 12px; border-radius: 10px; background: var(--surface-2); margin-top: 6px; }

/* PDF : le thème sombre de l'appli ne doit pas éclaircir le titre « À retenir » sur la feuille blanche */
.pdf-sheet .callout-retenir, .fr-sheet .callout-retenir { --c: #15171A !important; }
.offres-change { display: flex; gap: 8px; align-items: flex-start; background: color-mix(in srgb, var(--amber, #A86A12) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--amber, #A86A12) 35%, var(--line)); border-radius: 10px; padding: 10px 12px; font-size: .92rem; margin: 0 0 14px; }
.offres-change svg { flex: none; margin-top: 2px; }

/* Retour test : montrer l'endroit sur la page */
body.fb-picking, body.fb-picking * { cursor: crosshair !important; }
.fb-hover { outline: 2px dashed #D9480F !important; outline-offset: 2px; }
.fb-picked { outline: 3px solid #D9480F !important; outline-offset: 3px; border-radius: 4px; }
.fb-pickbar { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; gap: 10px; align-items: center; background: #2B2622; color: #fff; padding: 8px 10px 8px 14px; border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,.25); font-weight: 600; font-size: .92rem; max-width: calc(100vw - 24px); }
.fb-pickbar .btn { cursor: pointer !important; }
.fb-spot:empty { display: none; }
.fb-spot { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; background: color-mix(in srgb, #D9480F 8%, var(--surface)); border: 1px solid color-mix(in srgb, #D9480F 35%, var(--line)); border-radius: 10px; padding: 8px 10px; font-size: .9rem; }
.fb-spot span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }

/* Cours vérifiés par la communauté */
.course-meta .commu-badges { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.commu-badges:empty { display: none; }
.tag.commu-ok { background: color-mix(in srgb, var(--good, #2E8540) 14%, transparent); color: var(--good, #2E8540); border-color: color-mix(in srgb, var(--good, #2E8540) 35%, transparent); font-weight: 600; }
.tag.commu-tag { background: color-mix(in srgb, var(--accent, #2F6FD6) 10%, transparent); }
.commu-card { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line, #ddd); border-radius: 12px; background: var(--surface); font-size: 15px; }
.commu-card h3 { margin: 0 0 2px; font-size: 1.05em; }
.commu-card h4 { margin: 14px 0 6px; font-size: .95em; }
.commu-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.commu-head .grow, .commu-prop-row .grow, .adm-prop .grow { flex: 1 1 240px; min-width: 0; }
.commu-props { border-top: 1px solid var(--line, #ddd); margin-top: 12px; }
.commu-prop-row, .adm-prop { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line, #ddd); }
.commu-prop-row:last-child, .adm-prop:last-child { border-bottom: 0; }
.commu-prop label { display: grid; gap: 6px; margin-bottom: 10px; }
.commu-diff { display: grid; gap: 8px; margin-top: 8px; }
.commu-diff .course { font-size: 14px; margin: 0; padding: 0; max-width: none; }
.cd-add, .cd-del { border-left: 4px solid; border-radius: 6px; padding: 6px 10px; }
.cd-add { border-color: var(--good, #2E8540); background: color-mix(in srgb, var(--good, #2E8540) 9%, transparent); }
.cd-del { border-color: var(--bad, #C0392B); background: color-mix(in srgb, var(--bad, #C0392B) 8%, transparent); }
.cd-del .course { text-decoration: line-through; opacity: .75; }
.cd-k { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cd-gap { font-size: 12px; color: var(--muted, #777); text-align: center; }

/* Mode concentration : juste les cours et le planning */
.zen-btn { width: auto; padding: 0 12px; gap: 6px; display: inline-flex; align-items: center; font-weight: 700; font-size: 13.5px; color: var(--good); }
.zen-btn[hidden] { display: none !important; }
body.zen #streak-pill, body.zen #coach-toggle, body.zen #coach, body.zen .dash-fire, body.zen .dash-hero .alts,
body.zen .nav-item .badge, body.zen #tabbar .badge, body.zen .start-guide { display: none !important; }
body.zen .dash-hero { grid-column: span 12; }
@media (max-width: 700px) { .zen-btn .fb-btn-t { display: none; } .zen-btn { padding: 0; width: 38px; justify-content: center; } }

/* Aide aux formules : onglets et formules toutes prêtes */
.fp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.fp-tab { border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.fp-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.fp-pane { max-height: 300px; overflow-y: auto; }
.fp-readys { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.fp-ready { display: grid; gap: 4px; text-align: left; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--ink); padding: 8px 10px; cursor: pointer; font: inherit; min-width: 0; }
.fp-ready:hover { border-color: var(--accent); background: var(--accent-soft); }
.fp-ready-n { font-size: 12px; color: var(--muted); font-weight: 600; }
.fp-ready-f { overflow-x: auto; overflow-y: hidden; font-size: 1.05rem; }

/* « ? » à côté du titre : aide de la page */
.page-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-help { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font: 700 14px/1 var(--f-display, inherit); cursor: pointer; display: inline-grid; place-items: center; flex: none; }
.page-help:hover { color: var(--accent); border-color: var(--accent); }

/* Mode concentration, suite : minuteur, accueil, lecture épurée */
.zen-btn .zen-t { font-variant-numeric: tabular-nums; }
.zen-btn.zen-run { background: color-mix(in srgb, var(--good) 16%, transparent); border-color: var(--good); }
.zen-btn.zen-rest { color: var(--accent); border-color: var(--accent); }
@media (max-width: 700px) { .zen-btn { width: auto !important; padding: 0 10px !important; } .zen-btn .zen-t { font-size: 12.5px; } }
.zen-home { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.zen-home .grow { flex: 1 1 220px; min-width: 0; }
.zen-garde { text-align: center; display: grid; justify-items: center; gap: 8px; padding-block: 36px; color: var(--good); }
.zen-garde h2, .zen-garde p { color: var(--ink); margin: 0; }
.zen-panel { display: grid; gap: 10px; }
.zen-panel label { display: grid; gap: 6px; }
body.zen .fb-btn, body.zen .commu-card, body.zen .course-tools > :not(.read-ctl), body.zen .toc-actions .btn.ghost,
body.zen .course-meta .tiny, body.zen .commu-badges { display: none !important; }

/* Mode concentration : sans distractions (compte à rebours, pastilles, chiffres, décorations, animations) */
body.zen #exam-pill, body.zen #theme-toggle, body.zen .avatar.dot::after, body.zen .review-now .rn-n, body.zen .dash-subjects .ring,
body.zen .read-progress, body.zen .home-head .eyebrow, body.zen .confetti, body.zen #coach-chips { display: none !important; }
body.zen h1 mark { background: none !important; color: inherit !important; padding: 0 !important; }
body.zen .continue { box-shadow: none; }
body.zen *, body.zen *::before, body.zen *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }

/* Guide pas à pas (aide « ? » et visite guidée) : projecteur sur l'élément + bulle d'explication */
.guide { position: fixed; inset: 0; z-index: 300; }
.guide-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 3px var(--accent), 0 0 0 200vmax rgba(10, 8, 6, .62); pointer-events: none; transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.guide.sans-cible { background: rgba(10, 8, 6, .62); }
.guide.sans-cible .guide-spot { display: none; }
.guide-bulle { position: fixed; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 16px; padding: 16px 16px 12px; box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .5); display: grid; gap: 10px; }
.guide-head { display: flex; gap: 12px; align-items: flex-start; }
.guide-head .grow { flex: 1; min-width: 0; }
.guide-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.guide-k { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.guide-bulle h4 { margin: 2px 0 0; font: 800 1.12rem/1.25 var(--f-display, inherit); text-wrap: balance; }
.guide-bulle p { margin: 0; color: var(--ink-2); line-height: 1.5; font-size: 14.5px; }
.guide-bulle .tour-dots { justify-content: flex-start; }
.guide-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.guide-foot .grow { flex: 1; }
.guide-lien { background: none; border: 0; padding: 4px 0; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .guide-spot { transition: none; } }
.fp-float { position: fixed; z-index: 250; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--accent); background: var(--surface); color: var(--accent); font: 700 12.5px/1.4 inherit; cursor: pointer; box-shadow: 0 4px 12px -6px rgba(0,0,0,.4); }
.fp-float[hidden] { display: none; }
.fp-float:hover { background: var(--accent-soft); }

/* v113 : une question tient sur un seul écran (téléphone et ordinateur).
   La carte prend la hauteur restante ; si une question est très longue, seule la carte défile
   et le bouton Valider / Suivant reste toujours visible en bas. */
.focus-scroll:has(.qcard) { padding-top: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; }
.focus-body:has(.qcard) { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.focus-body:has(.qcard) > .session-prog { margin-bottom: 10px; flex: none; }
.focus-body:has(.qcard) > div:has(> .qcard) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.focus-body .qcard { position: relative; flex: 0 1 auto; max-height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 0; }
.focus-body .qcard > .qactions, .focus-body .qcard .feedback > .qactions { position: sticky; bottom: -30px; z-index: 2; margin-inline: -8px; padding: 12px 8px 4px; background: linear-gradient(to bottom, transparent, var(--surface) 14px); }
.focus-body .qcard .qtext { margin-top: 6px; margin-bottom: 12px; }
.focus-body .qcard .conf-ask { margin-top: 10px; padding: 10px 12px; }
.focus-body .qcard .conf-q { margin-bottom: 8px; }
.focus-body .qcard .conf-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.focus-body .qcard .conf-btn { padding: 9px 10px; }
.focus-body .qcard.qdone .answer .opt:not(.good):not(.bad) { opacity: .55; }
@media (min-width: 1081px) {
  .focus-body .session .qcard.t-flash, .focus-body .qcard.t-flash, .focus-body .qcard.t-qcm, .focus-body .qcard.t-num, .focus-body .qcard.t-formula { padding-top: 24px; padding-bottom: 22px; }
}
@media (max-width: 600px) {
  .focus-top { padding-top: calc(6px + env(safe-area-inset-top, 0px)); padding-bottom: 6px; }
  .focus-scroll:has(.qcard) { padding-top: 10px; padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
  .focus-body .qcard { padding: 14px 14px 14px 36px; }
  .focus-body .qcard > .qactions, .focus-body .qcard .feedback > .qactions { bottom: -14px; }
  .focus-body .qcard .qtext, .focus-body .qcard.t-qcm .qtext { font-size: 1.02rem; margin-bottom: 10px; }
  .focus-body .qcard.t-flash .qtext { font-size: 1.3rem; }
  .focus-body .opt, .focus-body .qcard .opt { padding: 10px 12px; font-size: .96rem; }
  .focus-body .qcard .conf-btn { flex-direction: column; justify-content: center; gap: 2px; padding: 7px 4px; text-align: center; font-size: .82rem; }
  .focus-body .qcard .conf-btn small { display: none; }
}
@media (max-height: 760px) and (min-width: 601px) {
  .focus-body .qcard .opt { padding: 10px 14px; }
}
/* mode concentration : la page Planning ne montre que l'emploi du temps, sur un seul écran */
.edt-zen .page-head { margin-bottom: 10px; }
.edt-zen .page-head h1 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.edt-zen .edt-bar { margin-bottom: 10px; }
.edt-zen .edt-legend { margin-top: 6px; }
.edt-zen .edt-legend > .muted { display: none; }
@media (max-width: 600px) {
  .edt-zen .page-head { display: none; }
  .edt-zen .edt-bar { flex-wrap: nowrap; overflow-x: auto; }
  .edt-zen .edt-bar .btn.small.ghost { display: none; }
  .edt-zen .edt-days button { padding-block: 4px; }
}
@media (min-width: 601px) { #main:has(> #view.edt-zen), #main:has(.edt-zen) { padding-bottom: 18px; } }
@media (max-width: 600px) { #main:has(.edt-zen) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
.edt-zen .edt-bar strong { white-space: nowrap; }
.cours-suivi { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: .82rem; color: var(--muted); font-weight: 600; }
.cours-suivi:empty { display: none; }
.cours-suivi > span { display: inline-flex; align-items: center; gap: 4px; }
.cours-suivi svg { color: var(--accent); }
.fr-improve { display: grid; gap: 12px; }
.fr-improve label { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; }
.fr-improve textarea.mono { font-size: .8rem; margin-top: 8px; width: 100%; }
.fr-lib h3 { margin: 0 0 4px; }
.fr-lib-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.fr-lib-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fr-lib-list a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.toc-actions a.btn { display: flex; align-items: center; line-height: 1.2; }
.focus-top .grow { flex: 1; } .focus-top .page-help { flex: none; }
/* v118 — interfaces épurées */
.dash > .dash-today, .dash > .dash-subjects { align-self: start; }
@media (max-width: 760px) {
  .start-guide .start-steps { grid-template-columns: 1fr; }
  .start-guide .start-steps li.done { display: none; }
  #coach-toggle { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; }
  #coach-toggle span { display: none; }
}
/* v119 — Réglages : même style que les autres écrans */
@media (min-width: 1081px) { #main:has(.set-grid) { max-width: 1480px; padding-inline: 32px; } }
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.set-grid > .card { margin: 0; border: 0; border-radius: 20px; box-shadow: 0 3px 0 var(--line); }
.set-grid > .card .card-title { font: 800 1.15rem var(--f-display); }
.set-grid > .set-profile { grid-column: 1 / -1; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 30%, var(--line)); }
.set-profile .list-row { border: 0; padding: 0; gap: 16px; align-items: center; }
.set-profile .avatar { width: 58px; height: 58px; font: 800 1.5rem var(--f-display); background: var(--accent); color: #fff; border: 0; }
.set-profile .list-row strong { font: 800 1.35rem var(--f-display); }
.set-profile .input { background: var(--surface); }
.set-profile .form { margin-top: 18px !important; padding-top: 16px; border-top: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--line)); }
.set-profile .form { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; }
.set-profile .form .row-btns { margin: 0; }
.set-grid > .ai-card { border-left: 0; }
.set-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 12px; background: var(--surface-2); width: fit-content; max-width: 100%; }
.set-pill { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 9px; padding: 7px 13px; background: transparent; color: var(--ink-2); font: 600 .9rem var(--f-ui); cursor: pointer; }
.set-pill:hover { color: var(--ink); }
.set-pill.on { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.set-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.set-grid label.set-switch { display: flex !important; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--surface-2); gap: 12px !important; line-height: 1.35; }
.set-grid label.set-switch:has(input:checked) { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.set-switch input { appearance: none; -webkit-appearance: none; flex: none; width: 40px; height: 23px; border-radius: 99px; background: var(--line-2); position: relative; cursor: pointer; transition: background .15s; }
.set-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.set-switch input:checked { background: var(--accent); }
.set-switch input:checked::after { transform: translateX(17px); }
.set-switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) {
  .set-grid { grid-template-columns: 1fr; gap: 12px; }
  .set-profile .form { grid-template-columns: 1fr; }
  .set-profile .avatar { width: 46px; height: 46px; font-size: 1.2rem; }
  .set-profile .list-row strong { font-size: 1.15rem; }
  .set-profile .list-row .btn span { display: none; }
}
@media (max-width: 600px) {
  .set-grid > .card { padding: 16px; }
  .set-profile .form .row2 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .set-profile .form .row2 label { font-size: .85rem; }
}
.set-field { display: grid; gap: 5px; font-weight: 500; font-size: .9rem; color: var(--ink-2); align-content: start; }
@media (min-width: 901px) { .set-grid > .set-rev { grid-row: span 3; } }
@media (max-width: 600px) {
  .set-profile .list-row { align-items: flex-start; gap: 12px; }
  .set-profile .list-row > .btn { font-size: 0; gap: 0; width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; background: var(--surface); }
  .set-profile .form .row2 { align-items: end; }
}
/* v120 — Progression épurée */
.wk-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: .84rem; color: var(--ink-2); }
.wk-key span { display: inline-flex; align-items: center; gap: 6px; }
.wk-key i { width: 10px; height: 10px; border-radius: 3px; }
@media (max-width: 600px) {
  #view:has(> .prog-grid) .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .wk-cols { height: 130px; }
}
.sp-prog .grow { display: grid; gap: 4px; }
.sp-cap { font-size: .74rem; color: var(--muted); line-height: 1.1; }
/* v122 — Progression : design */
.prog-hero { display: grid; grid-template-columns: minmax(260px, 1fr) 2.4fr; gap: 18px; align-items: center; margin: 14px 0 18px; padding: 20px 22px; border-radius: 22px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 28%, var(--line)); }
.ph-level { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ph-ring { position: relative; display: grid; place-items: center; flex: none; }
.ph-ring .ring-v { display: none; }
.ph-num { position: absolute; font: 800 1.7rem/1 var(--f-display); color: var(--accent); }
.ph-lv { display: flex; flex-direction: column; min-width: 0; }
.ph-k { font: 700 .72rem var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }
.ph-lv strong { font: 800 1.9rem/1.15 var(--f-display); color: var(--ink); }
.ph-sub { font-size: .85rem; color: var(--ink-2); }
#view .prog-hero .ph-stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ph-stat { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface); min-width: 0; }
.ph-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface)); }
.ph-stat > div { display: flex; flex-direction: column; min-width: 0; }
.ph-stat strong { font: 800 1.35rem/1.1 var(--f-display); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ph-stat span:not(.ph-ic) { font-size: .8rem; color: var(--muted); line-height: 1.25; }
/* bilan de la semaine : tuiles sans contour, barres fines et arrondies */
#view .wk-kpi { box-shadow: none; background: color-mix(in srgb, var(--c) 9%, var(--surface)); }
.wk-bw { max-width: 34px; }
.wk-stack { border-radius: 9px 9px 4px 4px; }
.wk-cols { height: 150px; }
/* tuiles matière : chiffres en ligne, séparés par un trait */
.sp-kpis { gap: 0; background: var(--surface); border-radius: 14px; padding: 4px 0; }
.sp-kpis > span { background: transparent; border-radius: 0; padding: 8px 12px; }
.sp-kpis > span + span { border-left: 1px solid color-mix(in srgb, var(--sc) 18%, var(--line)); }
@media (max-width: 1080px) { .prog-hero { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .prog-hero { padding: 16px; gap: 14px; border-radius: 18px; }
  #view .prog-hero .ph-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ph-stat { padding: 10px; gap: 9px; border-radius: 13px; }
  .ph-ic { width: 32px; height: 32px; border-radius: 10px; }
  .ph-stat strong { font-size: 1.1rem; }
  .ph-lv strong { font-size: 1.5rem; }
}
/* v125 — Progression : fonds neutres, couleur douce sur les icônes, le graphique et les barres des matières */
#view:has(> .prog-hero) .prog-hero { background: var(--surface); box-shadow: 0 3px 0 var(--line); }
#view:has(> .prog-hero) .ph-stat, #view:has(> .prog-hero) .wk-kpi { background: var(--surface-2); }
#view:has(> .prog-hero) .ph-ic, #view:has(> .prog-hero) .wk-ic { background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: var(--c); }
#view:has(> .prog-hero) .wk-stack i { opacity: .85; }
#view:has(> .prog-hero) a.sp-tile { background: var(--surface-2); box-shadow: 0 3px 0 var(--line); }
#view:has(> .prog-hero) .sp-pct { color: var(--ink); }
#view:has(> .prog-hero) .sp-prog .bar { background: var(--surface-3); }
#view:has(> .prog-hero) .sp-kpis > span + span { border-left-color: var(--line); }
#view:has(> .prog-hero) .rank { color: var(--muted) !important; }
#view:has(> .prog-hero) .heat i.l1 { background: color-mix(in srgb, var(--good) 25%, var(--surface-3)); }
#view:has(> .prog-hero) .heat i.l2 { background: color-mix(in srgb, var(--good) 50%, var(--surface-3)); }
#view:has(> .prog-hero) .heat i.l3 { background: color-mix(in srgb, var(--good) 75%, var(--surface-3)); }
#view:has(> .prog-hero) .heat i.l4 { background: var(--good); }

/* v126–127 — Niveau noté par l'élève (curseur sur 20) et objectif */
.nv-pick { --nc: var(--line); --p: 50%; display: flex; align-items: center; gap: 10px; min-width: 0; }
.nv-range { -webkit-appearance: none; appearance: none; width: 200px; max-width: 100%; height: 8px; border-radius: 99px; margin: 0; cursor: pointer;
  background: linear-gradient(to right, var(--nc) 0 var(--p), var(--surface-3, var(--line)) var(--p) 100%); }
.nv-pick.unset .nv-range { background: var(--surface-3, var(--line)); }
.nv-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 3px solid var(--nc); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.nv-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--nc); }
.nv-pick.unset .nv-range::-webkit-slider-thumb { border-color: var(--muted); }
.nv-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.nv-val { font-size: .85rem; color: var(--ink); font-weight: 600; white-space: nowrap; min-width: 9.5em; }
.nv-pick.unset .nv-val { color: var(--muted); font-weight: 400; }
.nv-clr { border: 0; background: none; padding: 0; color: var(--muted); font-size: .8rem; text-decoration: underline; cursor: pointer; }
.nv-line { display: flex; align-items: center; gap: 8px 28px; flex-wrap: wrap; margin: 4px 0 14px; }
.nv-cell { display: grid; gap: 2px; min-width: 0; }
.nv-lab { font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.nv-pair { display: flex; gap: 8px 28px; flex-wrap: wrap; }
.nv-k { font-weight: 600; font-size: .92rem; min-width: 0; }
.nv-chip { --nc: var(--muted); display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 99px; font-weight: 600; font-size: .72rem; line-height: 1.5; vertical-align: middle; color: var(--nc); background: color-mix(in srgb, var(--nc) 14%, var(--surface)); }
.nv-ch { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; }
.nv-ch .nv-line { margin: 0; gap: 6px 16px; }
.nv-notions, .nv-tip { margin: 8px 0 0; font-size: .85rem; color: var(--muted); }
.nv-pre { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: .88rem; color: var(--ink); }
.nv-pre svg { color: var(--warn); flex: none; }
.nv-list { display: grid; gap: 4px; }
.nv-help { margin: 0 0 8px; color: var(--muted); font-size: .9rem; max-width: 70ch; }
.nv-item { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }
.nv-name { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); text-decoration: none; min-width: 0; }
@media (min-width: 761px) {
  .nv-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .nv-pair { display: grid; grid-template-columns: repeat(2, auto); }
}
@media (max-width: 760px) {
  .nv-pick, .nv-cell, .nv-pair { width: 100%; }
  .nv-range { flex: 1; width: auto; }
  .nv-val { min-width: 0; }
  .nv-pair { flex-direction: column; gap: 10px; }
  .nv-item { flex-direction: column; align-items: stretch; }
}

/* v127 — repère « Bêta · en développement » à côté du logo */
.beta-tag { display: inline-flex; align-items: center; flex: none; margin-left: 10px; padding: 3px 10px; border-radius: 99px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); text-decoration: none; white-space: nowrap; }
.beta-tag:hover { background: color-mix(in srgb, var(--warn) 22%, var(--surface)); }
@media (max-width: 1520px) { .beta-more { display: none; } }
@media (max-width: 760px) { .beta-tag { margin-left: 6px; padding: 2px 8px; } }

/* v128 — Première configuration : une question par écran, grands choix, barre de progression */
.ob-screen { position: fixed; inset: 0; z-index: 900; background: var(--bg); display: flex; flex-direction: column; overflow-y: auto; padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px)); }
.ob-top { display: flex; align-items: center; gap: 14px; width: min(640px, 100%); margin: 0 auto; padding: 18px 0 8px; position: sticky; top: 0; background: var(--bg); z-index: 1; }
.ob-back { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; color: var(--muted); cursor: pointer; }
button.ob-back:hover { background: var(--surface-2); color: var(--ink); }
.ob-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.ob-bar i { display: block; height: 100%; border-radius: 99px; background: var(--good); transition: width .35s ease; }
.ob-body { flex: 1; width: min(640px, 100%); margin: 0 auto; padding: 24px 0 16px; }
.ob-main { display: grid; gap: 16px; animation: obIn .25s ease; }
@keyframes obIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ob-main { animation: none; } .ob-bar i { transition: none; } }
.ob-q { font: 700 clamp(1.5rem, 4vw, 2rem)/1.15 var(--f-display); margin: 0; text-wrap: balance; color: var(--ink); }
.ob-sub { margin: -8px 0 0; color: var(--muted); }
.ob-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ob-tiles.ob-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ob-tile { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; min-height: 64px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: transform .08s, border-color .12s, background .12s; }
.ob-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ob-tile:active { transform: translateY(2px); border-bottom-width: 2px; margin-top: 2px; }
.ob-tile.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.ob-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--accent); }
.ob-tile.on .ob-ic { background: var(--accent); color: #fff; }
.ob-tx { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ob-tx strong { font-size: 1rem; }
.ob-tx span { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.ob-tick { width: 22px; height: 22px; flex: none; border-radius: 6px; border: 2px solid var(--line-2, var(--line)); display: grid; place-items: center; }
.ob-tile.on .ob-tick { background: var(--accent); border-color: var(--accent); color: #fff; }
.ob-small .ob-tile { min-height: 54px; padding: 12px 14px; }
.ob-name .input { font-size: 1.2rem; padding: 14px 16px; border-radius: 12px; }
.ob-name { display: grid; gap: 6px; }
.ob-more summary { cursor: pointer; color: var(--muted); font-size: .88rem; }
.ob-more[open] summary { margin-bottom: 10px; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { --sc: var(--accent); display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; }
.ob-chip.on { border-color: var(--sc); background: color-mix(in srgb, var(--sc) 10%, var(--surface)); }
.ob-chip svg { color: var(--muted); }
.ob-chip.on svg { color: var(--sc); }
.ob-dot { --sc: var(--accent); width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--sc); display: inline-block; }
.ob-results .ob-chip { border-style: dashed; font-weight: 500; }
.ob-field { display: grid; gap: 8px; }
.ob-flab { font-weight: 600; font-size: .92rem; }
.ob-field .input[type=date] { max-width: 240px; }
.ob-hint { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--good); }
.ob-lv2 { display: grid; gap: 6px; font-weight: 600; }
.ob-niv { display: grid; gap: 4px; }
.ob-nv { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.ob-nvn { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ob-foot { position: sticky; bottom: 0; width: min(640px, 100%); margin: 0 auto; padding: 14px 0 20px; display: flex; gap: 10px; justify-content: flex-end; background: linear-gradient(to top, var(--bg) 75%, transparent); }
.ob-next { min-width: 200px; justify-content: center; font-size: 1rem; padding: 13px 22px; }
@media (max-width: 600px) {
  .ob-tiles, .ob-tiles.ob-3 { grid-template-columns: 1fr; }
  .ob-body { padding-top: 12px; }
  .ob-foot .btn { flex: 1; min-width: 0; }
}

/* v130 — difficulté mesurée par les élèves */
.diff-w { margin-left: .35em; font-size: .72rem; color: var(--muted); letter-spacing: .02em; }
.diff-avis { margin-top: .5rem; font-size: .78rem; }
.diff-avis .linkish { color: var(--muted); }
.diff-avis .linkish:hover { color: var(--accent); }
.ob-pseudo { margin-top: 1.1rem; }
.ob-pseudo .ob-sub { margin: 0 0 .4rem; }

/* ---------- Espace admin v132 : menu latéral, en-tête, tuiles, tableaux ---------- */
body.adm-mode #coach-toggle { display: none; }
.adm-page { max-width: 1240px; }
.adm-page > .page-head { display: none; }
.adm-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.adm-main { min-width: 0; }
.adm-nav { position: sticky; top: calc(var(--top-h, 62px) + 16px); display: flex; flex-direction: column; gap: 18px; padding: 14px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.adm-nav-h { margin: 0 0 4px; padding: 0 10px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.adm-nav-g { display: flex; flex-direction: column; gap: 2px; }
.adm-nav-a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .92rem; }
.adm-nav-a svg { color: var(--muted); flex: none; }
.adm-nav-a span:first-of-type { flex: 1; min-width: 0; }
.adm-nav-a:hover { background: var(--surface-2); color: var(--ink); }
.adm-nav-a.on { background: var(--accent-soft); color: var(--accent); }
.adm-nav-a.on svg { color: var(--accent); }
.adm-nav-n { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--ink-2); font-size: .75rem; text-align: center; font-variant-numeric: tabular-nums; }
.adm-nav-a.on .adm-nav-n { background: var(--accent); color: var(--accent-ink, #fff); }
.adm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 18px; }
.adm-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.adm-title { margin: 0; font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.15; letter-spacing: -.02em; }
.adm-lockchip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-size: .84rem; color: var(--ink-2); }
.adm-lockchip > span { display: inline-flex; align-items: center; gap: 6px; }
.adm-lockchip button { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 5px 11px; border: 0; border-radius: 99px; background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.adm-lockchip button:hover { background: var(--surface-3); }
.adm-demo { display: flex; align-items: center; gap: 8px; }
.adm-body { margin-top: 0; }
.adm-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.adm-tile { position: relative; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); min-width: 0; }
.adm-tile-ic { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.adm-tile-v { font: 700 1.6rem/1.1 var(--f-display, inherit); letter-spacing: -.02em; font-variant-numeric: tabular-nums; padding-right: 38px; white-space: nowrap; }
.adm-tile-l { margin-top: 4px; font-size: .86rem; color: var(--ink-2); }
.adm-tile-h { margin-top: 8px; display: inline-block; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); font-size: .75rem; color: var(--muted); }
.adm-page .card { border-radius: 14px; }
.adm-page .card-title { font-size: 1rem; }
.adm-bars { height: 140px; gap: 4px; background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 25%; background-position: 0 8px; }
.adm-bar-v { max-width: 26px; border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--accent) 75%, transparent); }
.adm-bar:hover .adm-bar-v { opacity: 1; background: var(--accent); }
.adm-table th { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; background: var(--surface-2); border-bottom: 0; }
.adm-table th:first-child { border-radius: 8px 0 0 8px; } .adm-table th:last-child { border-radius: 0 8px 8px 0; }
.adm-table td { padding: 10px; }
.adm-table tbody tr:hover td { background: var(--surface-2); }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-page .toolbar .input[type=search] { flex: 1 1 220px; min-width: 0; }
.adm-gate { max-width: 560px; margin: 8px auto 0; }
.adm-gate .card { border-radius: 16px; padding: 22px; }
@media (max-width: 900px) {
  .adm-shell { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .adm-nav { position: static; flex-direction: row; gap: 4px; overflow-x: auto; padding: 6px; border-radius: 12px; }
  .adm-nav-g { flex-direction: row; gap: 4px; }
  .adm-nav-h { display: none; }
  .adm-nav-a { white-space: nowrap; padding: 7px 10px; }
}
/* boutons d'action importante : rouges mais discrets (contour), pleins seulement au survol */
.adm-page .btn.risk { background: transparent; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.adm-page .btn.risk:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.adm-page .toolbar .input[type=number], .adm-page .row-inline .input[type=number] { flex: 0 0 96px; width: 96px; }
.adm-body > .card, .adm-body > details.card { margin: 0; }
.adm-page .card-title { margin-bottom: 6px; }
/* chapitres pas encore réécrits */
.chapter-row.attente { opacity: .55; cursor: default; }
.chapter-row.attente:hover { background: transparent; transform: none; }
.attente-tag { background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.attente-card { padding: 32px 22px; display: grid; justify-items: center; gap: 8px; }
.attente-card svg { color: var(--muted); }

/* Barre du haut épurée (v137) : logo, menu, compte à rebours, retour test, profil. Série, thème et aide passent ailleurs. */
#topbar #streak-pill, #topbar #theme-toggle, #topbar #help-btn { display: none !important; }
#exam-pill { background: var(--surface-2); color: var(--ink-2); }
.fb-btn { background: transparent !important; color: var(--ink-2) !important; border: 1px solid var(--line-2) !important; }
.fb-btn:hover { background: var(--surface-2) !important; }
@media (min-width: 860px) { .fb-btn { width: auto; padding: 0 12px; } .fb-btn .fb-btn-t { display: inline; } }
.menu { max-height: calc(100vh - var(--top-h) - 16px); overflow-y: auto; }
.menu-sep { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
/* Titres sobres (v137) : plus de surligneur jaune sur les titres de page */
.page-head h1 mark, .home-head h1 mark, h1 mark { background: none; color: inherit; padding: 0; }
.page-head h1, .home-head h1 { letter-spacing: -.02em; }
.page-help { opacity: .55; } .page-help:hover { opacity: 1; }
/* Accueil épuré (v137) : la carte Continuer prend toute la largeur, la série revient en petite pastille en haut */
.dash-hero { grid-column: span 12; }
#topbar #streak-pill { display: inline-flex !important; }
#topbar #streak-pill .pill-txt { display: none; }
.dash-h h3 { white-space: nowrap; }
.dash-h .day-count { white-space: nowrap; }
.dash > .card { margin-bottom: 0; }
/* Page matière épurée (v137) */
.nv-fold { margin: 4px 0 10px; }
.nv-fold > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink-2); list-style: none; padding: 4px 0; }
.nv-fold > summary::-webkit-details-marker { display: none; }
.nv-fold[open] > summary { margin-bottom: 6px; }
.more-menu { position: relative; display: inline-block; }
.more-menu > summary { list-style: none; cursor: pointer; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 230px; display: grid; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); }
.more-list .btn { justify-content: flex-start; width: 100%; border: 0; }
@media (max-width: 600px) { .subject-head .right .ring, .subject-head .right svg { width: 48px; height: 48px; } .subject-head { align-items: center; } }
/* Page d'un cours épurée (v137) */
.toc-more > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--ink-2); padding: 6px 10px; list-style: none; }
.toc-more > summary::-webkit-details-marker { display: none; }
.toc-more > summary::before { content: "+ "; }
.toc-more[open] > summary::before { content: "− "; }
.toc-more { display: grid; gap: 4px; }
.nv-fold-ch { margin: 0 0 12px; }
.nv-fold-ch .nv-ch { margin-top: 4px; }
.tabs-more .more-list { left: auto; right: 0; }
.view-contenus .tabs { overflow: visible; }
@media (max-width: 600px) { .view-contenus .tabs { flex-wrap: nowrap; } .view-contenus .tabs .tab { padding-left: 9px; padding-right: 9px; white-space: nowrap; } .view-contenus .tabs .tab svg { display: none; } }
/* Offres sur téléphone : une carte par offre (v137) */
.plan-cards { display: none; }
@media (max-width: 700px) {
  .plans-wrap .table-wrap { display: none; }
  .plan-cards { display: grid; gap: 12px; }
  .plan-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--surface); }
  .plan-card.reco { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
  .plan-card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 1.05rem; }
  .plan-card-price { font: 700 .95rem var(--f-display); color: var(--accent); margin: 4px 0 10px; }
  .plan-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .plan-card li { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 6px; }
  .plan-card li strong { color: var(--ink); text-align: right; font-weight: 600; }
}
@media (max-width: 700px) {
  .plan-card li strong { white-space: nowrap; }
  .plan-more > summary { cursor: pointer; font-weight: 600; font-size: .86rem; color: var(--accent); margin-top: 8px; }
  .plan-more ul { margin-top: 6px; }
}
/* v138 : la série s'ouvre sous la pastille flamme */
#streak-pill { cursor: pointer; }
#streak-pill:hover { filter: brightness(.96); }
.streak-pop { width: min(340px, calc(100vw - 16px)); padding: 16px; }
.streak-pop .streak-panel { display: flex; flex-direction: column; gap: 12px; }
.streak-pop .fire-quests summary { list-style: none; pointer-events: none; }
.streak-pop .fire-quests summary::-webkit-details-marker { display: none; }
.streak-pop .menu-head { display: none; }
/* v138 : description du chapitre en une phrase */
.ch-desc { margin: 3px 0 4px; font-size: .86rem; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-desc-k { font-weight: 700; color: var(--ink); }
.chapter-row .meta { font-size: .78rem; }
/* v138 : bulle de visite guidée épurée (sans icône, progression en barre, boutons à droite) */
.guide-bulle { padding: 16px 18px 16px; gap: 8px; border-radius: 18px; }
.guide-bulle .guide-head { align-items: center; justify-content: space-between; }
.guide-bulle .guide-k { display: flex; align-items: center; gap: 8px; }
.guide-n { font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.guide-x { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 99px; background: transparent; color: var(--muted); cursor: pointer; margin: -4px -6px -4px 0; }
.guide-x:hover { background: var(--surface-2); color: var(--ink); }
.guide-bulle h4 { margin: 0; font-size: 1.18rem; }
.guide-bulle .guide-lien { justify-self: start; }
.guide-bulle .guide-foot { margin-top: 6px; flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
.guide-prog { display: flex; gap: 4px; flex: 1; max-width: 140px; }
.guide-prog i { flex: 1; height: 4px; border-radius: 4px; background: var(--line-2); }
.guide-prog i.fait, .guide-prog i.on { background: var(--accent); }
.guide-btns { display: flex; align-items: center; gap: 6px; }
.guide-prev { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 99px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.guide-prev:hover { background: var(--surface-2); }
.streak-pop .fire-quests a { display: inline; padding: 0; width: auto; color: var(--accent); text-decoration: underline; }
/* v139 : défis du jour en semi-gras (romain : pas de petit texte fin) */
.quest .lbl { font-weight: 600; color: var(--ink); }
.quest .xp { font-weight: 700; }
.streak-pop .quest { font-size: .95rem; }
.streak-pop .fire-txt .small, .streak-pop > .streak-panel > .small, .streak-pop .fire-quests > .small { font-weight: 600; }
/* v139 : la série se détache du fond (voile sombre derrière) */
.pop-voile { position: fixed; inset: 0; z-index: 39; background: rgba(20, 14, 8, .38); animation: popvoile .15s ease-out; }
@keyframes popvoile { from { opacity: 0; } }
.streak-pop { box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .45); border-color: transparent; }
.pop-voile { z-index: 60; }
.streak-pop { z-index: 61; }
/* v139 : sur téléphone le bouton Coach s'efface en descendant (il ne cache plus le contenu) */
#coach-toggle { transition: transform .2s ease, opacity .2s ease; }
@media (max-width: 860px) { body.coach-cache #coach-toggle { transform: translateY(24px) scale(.8); opacity: 0; pointer-events: none; } }

/* ===== v140 : couleurs calmes (conseils de relecture) =====
   une seule couleur d'action (marron), onglet actif sans jaune, ombres fines, cartes blanches teintées seulement par l'icône */
.nav-item.active { background: none; color: var(--accent); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.nav-item.active .ic { color: var(--accent); }
@media (max-width: 860px) {
  #tabbar a.active { color: var(--accent); font-weight: 700; }
  #tabbar a.active svg { background: none; color: var(--accent); padding: 2px 10px; }
}
:root { --soft-shadow: 0 1px 2px rgba(30, 20, 10, .05), 0 1px 0 rgba(30, 20, 10, .03); }
a.subj-tile, a.subj-tile:hover, a.chapter-row, a.chapter-row:hover, .exam-card, .exam-card:hover,
.ch-body .card, .ch-body details.card, .ch-body .alt, .ch-body .game-link, .edt-hint, .edt-wrap, .plan-summary .stat,
.plan-after .card, .plan-main .card, .ctrl-card, .ctrl-plan, .ctrl-note, .imp-step {
  box-shadow: var(--soft-shadow); border: 1px solid var(--line); transform: none;
}
a.subj-tile, a.subj-tile:hover, a.chapter-row, a.chapter-row:hover, .exam-card, .exam-card:hover { background: var(--surface); }
a.subj-tile:hover, a.chapter-row:hover, .exam-card:hover { border-color: var(--line-2); }
a.chapter-row.complete { background: var(--surface); box-shadow: var(--soft-shadow); }
a.subj-tile .subj-badge { box-shadow: none; }
.step.on { box-shadow: inset 0 0 0 2px var(--sc, var(--accent)); }
.exam-card .ic-wrap { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.edt-hint { background: var(--surface); }
.dash { gap: 20px; }
.card { margin-bottom: 20px; }
/* l'aide de chaque page reste dans le menu du profil (« Aide ») : plus de bulle « ? » à côté des titres */
h1 .page-help, .page-help { display: none !important; }
/* v140 : barre du haut calme — « bêta » en petit texte gris à côté du logo, plus de point rouge sur l'initiale */
.beta-tag, .beta-tag:hover { background: none; border: 0; padding: 0; margin-left: 8px; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; align-self: center; }
.beta-tag .beta-more { display: none; }
.avatar.dot::after { display: none; }
/* v140 : carte « Continuer » unie (plus de lignes de cahier ni de marge rouge) */
.continue:not(.ctrl-hero) { background-image: none; padding-left: 26px; min-height: 0; box-shadow: var(--soft-shadow); }
@media (max-width: 860px) { .continue:not(.ctrl-hero) { padding-left: 18px; } }
.dash-today .dash-h { gap: 12px; }
@media (max-width: 480px) { .dash-today .dash-h { gap: 8px; } .dash-today .dash-h .day-count .lbl { display: none; } }
.todo-open { margin-left: auto; font-weight: 700; }
.todo-open + a.small { margin-left: 0; }
.quest .q-n { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--muted); }
.quest .q-n + .xp { margin-left: 10px; }
.todo-open { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--accent); cursor: pointer; flex: none; }
.todo-open:hover { background: var(--accent-soft); }
.dash-h a.small { white-space: nowrap; }
/* v140 : page matière — un seul « Plus » en haut à droite, chapitres plus courts */
.subject-head .head-more { margin-left: auto; align-self: center; }
.head-more .more-list { left: auto; right: 0; }
.ch-desc { -webkit-line-clamp: 1; color: var(--muted); font-size: .84rem; margin: 2px 0 2px; }
a.chapter-row.next-ch { border: 2px solid var(--accent); }
.chapter-row .meta { font-size: .8rem; }
.mat-head { display: flex; align-items: center; gap: 12px; }
.mat-head .head-more { margin-left: auto; }
.subj-tile .bar { margin-top: 6px; height: 4px; }
@media (max-width: 760px) { .subject-head { position: relative; } .subject-head .head-more { position: absolute; top: 0; right: 0; } }
/* v140 : cours — temps de lecture + « Aa » en haut, origine et lecteurs en bas en gris */
.course-meta { justify-content: space-between; }
.aa-menu { position: relative; }
.aa-menu > summary { list-style: none; cursor: pointer; font: 700 .95rem var(--f-display); color: var(--ink-2); padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); }
.aa-menu > summary::-webkit-details-marker { display: none; }
.aa-menu[open] .read-ctl { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; gap: 4px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); white-space: nowrap; }
.course-tools.aa-menu { margin: 0; padding: 0; border: 0; }
.course-origin { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 18px; font-size: .8rem; color: var(--muted); }
.course-origin .tag { background: none; border: 0; padding: 0; color: var(--muted); font-weight: 600; }
.course-origin .tag svg { color: var(--muted); }
.course-origin .cours-suivi svg { color: var(--muted); }
.nv-fold-ch { margin-top: 18px; }
.edt-more .more-list { left: auto; right: 0; }
.edt-hand { margin-top: 6px; }
.ctrl-empty { align-items: center; gap: 14px; flex-wrap: wrap; }
/* v140 : progression — 3 chiffres, semaine vide sans tuiles à zéro, 2 onglets + « Plus » */
.ph-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.wk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 4px 0 10px; }
.wk-days span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wk-days i { width: 100%; height: 36px; border-radius: 8px; background: var(--surface-2); }
.wk-days span.on i { background: var(--accent); }
.wk-days span.today i { box-shadow: inset 0 0 0 2px var(--accent); }
.wk-days small { font-size: .72rem; color: var(--muted); font-weight: 600; }
.prog-tabs { overflow: visible; }
.prog-tabs .tabs-more .more-list { left: auto; right: 0; }
@media (max-width: 600px) { .ph-stats .ph-stat { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; } .ph-stats .ph-stat span { font-size: .78rem; } }
/* v141 : sur téléphone le Coach est dans la barre du bas (plus de bouton flottant) */
#tabbar .tab-coach { display: none; }
@media (max-width: 860px) {
  #tabbar { grid-template-columns: repeat(5, 1fr); }
  #tabbar .tab-coach { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font: inherit; font-size: .68rem; color: var(--muted); background: none; border: 0; cursor: pointer; }
  body.coach-open #tabbar .tab-coach { color: var(--accent); font-weight: 700; }
  #coach-toggle { display: none !important; }
  .mat-head .mat-add { margin-left: auto; }
  .mat-head .head-more { margin-left: 0; }
}
.mat-head .mat-add { margin-left: auto; }
.mat-head .mat-add + .head-more { margin-left: 0; }
.modal-foot .welcome-tour { margin-right: auto; }
.set-avance { border-top: 1px solid var(--line); padding-top: 10px; }
.set-avance > summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.set-avance[open] > summary { margin-bottom: 10px; }
/* v141 : sommaire, durée et « Aa » sur une seule ligne (téléphone, tablette) */
.toc-row { display: flex; align-items: center; gap: 10px; }
.toc-row .toc-t { flex: 1; margin: 0 !important; }
.toc-row .course-meta { margin: 0 !important; flex: none; gap: 8px; font-size: .78rem; }
.toc-row .aa-menu > summary { padding: 2px 10px; font-size: .85rem; }
.prog-vide { text-align: center; padding: 36px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.prog-vide-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; }
.prog-vide h3 { margin: 0; } .prog-vide p { margin: 0 0 10px; max-width: 34ch; }
/* v141 : sur téléphone pas de glisser-déposer — un bouton compact « Choisis ton cours » */
.drop-zone .dz-tel { display: none; }
@media (max-width: 600px) {
  .imp-step .drop-zone { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 10px; padding: 16px; min-height: 0; border-style: solid; }
  .imp-step .drop-zone .dz-pc, .imp-step .drop-zone > .btn { display: none; }
  .imp-step .drop-zone .dz-tel { display: inline; }
  .imp-step .drop-zone .drop-ic { width: 36px; height: 36px; }
  .imp-step .drop-zone .drop-ic svg { width: 20px; height: 20px; }
  .imp-step .drop-zone .small { flex-basis: 100%; text-align: center; }
}
/* v141 : cibles tactiles confortables pour les menus « ⋯ » et « Plus » */
.more-menu > summary.btn { min-height: 40px; min-width: 40px; justify-content: center; }
@media (max-width: 860px) { .tabs .tab, .more-menu > summary { min-height: 40px; } }
/* v141 : titres de page à 30 px sur téléphone ; « Plus » des en-têtes réduit à « ⋯ » */
@media (max-width: 600px) {
  .page-head h1, .subject-head h1 { font-size: 30px; line-height: 1.12; }
  .head-more > summary { font-size: 0; gap: 0; padding: 0 10px; }
  .head-more > summary svg { width: 18px; height: 18px; }
  .mat-head { flex-wrap: nowrap; }
  .mat-head .mat-add { white-space: nowrap; }
}
@media (max-width: 600px) { .mat-head h1 { font-size: 28px !important; white-space: nowrap; } .mat-head .mat-add { padding-inline: 10px; } }
@media (max-width: 600px) { .mat-head .ma-xl { display: none; } .mat-head { gap: 8px; } }

/* ===== v143 : lot UX 1 (cohérence sans refonte) ===== */
/* Mêmes marges et même largeur sur toutes les pages : le titre ne saute plus d'un onglet à l'autre */
@media (min-width: 1081px) {
  #main { max-width: 1480px; padding-inline: 32px; }
  #view.view-offres, #view.view-compte:not(:has(.auth-screen)), #view.view-contenus, #view.view-fiches { max-width: 1152px; }
}
/* Un seul style de carte (bordure fine + ombre douce, comme l'accueil, les matières et les examens).
   L'effet « relief » reste réservé à ce qui se touche : boutons, réponses, notes de révision. */
.set-grid > .card, .set-grid > .set-profile, #view:has(> .prog-hero) .prog-hero, #view:has(> .prog-grid) > .card, .prog-grid > .card, .plan-summary .stat {
  border: 1px solid var(--line); box-shadow: var(--shadow); }
.set-grid > .card, .set-grid > .set-profile, #view:has(> .prog-hero) .prog-hero { border-radius: 18px; }
.set-grid > .set-profile { background: var(--surface); }
/* Progression : les matières sont déjà dans une carte, donc des blocs à plat (plus de carte dans la carte) */
#view:has(> .prog-hero) a.sp-tile { border: 0; box-shadow: none; }
#view:has(> .prog-hero) a.sp-tile:hover { background: var(--surface-3, var(--surface-2)); }
.set-profile .form { border-top: 1px solid var(--line); }
/* Planning : chiffres sur fond neutre, comme la page Progression (la couleur reste sur le chiffre) */
.plan-summary .stat.tint-sky, .plan-summary .stat.tint-plum, .plan-summary .stat.tint-leaf, .plan-summary .stat.tint-berry { background: var(--surface); }
/* « ou le remplir à la main » : lien discret à côté du bouton principal, pas un second titre */
.edt-hint .edt-hand { font: 600 .9rem var(--f-ui); }
/* Action destructive des réglages : même forme que les boutons voisins, texte rouge (sans pastille rose) */
.set-grid .btn.bad { background: var(--surface); border-color: var(--line); color: var(--bad); }
.set-grid .btn.bad:hover { border-color: var(--bad); background: var(--bad-soft); }
/* Retour au toucher identique sur tous les boutons */
.btn:active:not(:disabled) { transform: translateY(1px); }

/* ===== v144 : direction « Bois & papier » (identité validée par romain le 24/10/2026) =====
   Fond papier chaud, cartes blanches à filet fin sans ombre, brun bûche pour agir, vert feuille pour réussir,
   Seyès pour réviser. Titres Archivo 700 non étirés, texte et commandes en Atkinson.
   Rayons : 6 étiquettes · 8 éléments internes · 10 commandes · 12 cartes · 16 fenêtres ; rond seulement
   pour les pastilles, avatars, interrupteurs et barres. */
:root {
  --bg: #F6F2EB; --surface-2: #F1EBE2; --surface-3: #E8E0D4; --line: #E4DBCE; --line-2: #D3C7B6; --border-input: #8C8172;
  --ink: #1F1A15; --ink-2: #4A4037; --muted: #675C50;
  --accent: #74431D; --accent-hover: #5C3414; --accent-soft: #F1E5D7; --bark: #74431D; --bark-soft: #F1E5D7;
  --leaf: #3F7D2C; --leaf-soft: #E5F0DC; --marge: #C8323F; --glow: var(--bg);
  --seyes: rgba(59, 91, 219, .07); --seyes-strong: rgba(59, 91, 219, .14);
  --shadow: none; --shadow-lg: 0 1px 2px rgba(40, 28, 16, .06), 0 14px 34px -16px rgba(40, 28, 16, .28);
  --soft-shadow: none;
  --r-tag: 6px; --r-in: 8px; --r-ctl: 10px; --r-card: 12px; --r-win: 16px; --r: 12px; --r-sm: 8px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glow: var(--bg); --shadow: none; } }
:root[data-theme="dark"] { --glow: var(--bg); --shadow: none; }
body { background: var(--bg); }

/* Titres : une seule échelle */
#view h1, #view h2, #view h3, .card-title, .continue .c-title { font-stretch: 100%; }
#view h1 { font-family: var(--f-display); font-weight: 700; font-size: 2.25rem; letter-spacing: -.02em; line-height: 1.15; }
#view h1 mark { background: none; padding: 0; color: inherit; }
#view h2 { font-weight: 700; letter-spacing: -.01em; }
#view h3, #view .card-title { font-weight: 700; letter-spacing: 0; }
#view h2.section-title, #view .eyebrow, .continue .c-kicker { font: 700 .75rem/1.3 var(--f-display); letter-spacing: .07em; text-transform: uppercase; }
#view h2.section-title { color: var(--muted); }
#view .eyebrow, .continue .c-kicker { color: var(--accent); }
.continue .c-title { font-weight: 700; font-size: 1.75rem; letter-spacing: -.015em; }
@media (max-width: 600px) {
  #view h1, .mat-head h1 { font-size: 1.75rem !important; }
  .continue .c-title { font-size: 1.375rem; }
}

/* Barre du haut et menu : sur le papier, l'onglet actif souligné en brun */
#topbar { background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--line); }
.nav-item { border-radius: var(--r-in); font-weight: 600; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: none; color: var(--ink); border-radius: 0; box-shadow: inset 0 -2px 0 var(--accent); }
.nav-item.active .ic { color: var(--accent); }
.pill, .pill.exam, .pill.streak, .icon-btn { border-radius: var(--r-ctl); background: transparent; border: 1px solid var(--line); }
#tabbar { background: var(--bg); }
#tabbar a { font-family: var(--f-ui); font-weight: 600; }
#tabbar a.active { color: var(--accent); }
#tabbar a.active svg { border-radius: var(--r-in); }

/* Boutons : rayon 10, texte Atkinson ; seul le bouton principal a un léger relief */
.btn, a.btn, summary.btn, span.btn, button.btn { border-radius: var(--r-ctl); font: 600 .92rem/1.2 var(--f-ui); letter-spacing: 0; }
.btn.small, a.btn.small, summary.btn.small, span.btn.small, button.btn.small { border-radius: var(--r-in); }
.btn.primary, a.btn.primary, button.btn.primary, .continue .c-go { font-family: var(--f-ui); font-weight: 700; border-radius: var(--r-ctl); box-shadow: 0 2px 0 var(--accent-hover); }
.btn.primary:hover, .continue:hover .c-go { transform: none; box-shadow: 0 2px 0 color-mix(in srgb, var(--accent-hover) 80%, #000); }
.btn.primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--accent-hover); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
#coach-toggle { border-radius: var(--r-ctl); }

/* Champs, étiquettes, puces */
.input, textarea.input, select.input, input.input { border-radius: var(--r-ctl); }
.tag, span.tag, .tag.type { border-radius: var(--r-tag); }
.chip-q { border-radius: var(--r-ctl); }
.subj-badge { border-radius: var(--r-in); }
.subj-badge.lg { border-radius: var(--r-ctl); }

/* Onglets et choix segmentés : contenant 10, choix 8 */
.tabs, .seg, .set-pills, .pw-seg { border-radius: var(--r-ctl); }
.tabs .tab, .seg > button, .set-pill, .day-pick, .pw-opt { border-radius: var(--r-in); }

/* Cartes : filet fin, rayon 12, pas d'ombre */
.card, section.card, details.card, .continue, .subj-tile, .exam-card, .chapter-row, .edt-wrap, .more-list, .drop-zone, .alert,
.course-end, .commu-card, .nv-ch, .copy, .plan-summary .stat,
.set-grid > .card, .set-grid > .set-profile, #view:has(> .prog-hero) .prog-hero, #view:has(> .prog-grid) > .card, .prog-grid > .card {
  border-radius: var(--r-card); box-shadow: none; }
.card, .subj-tile, .exam-card, .chapter-row, .edt-wrap { border: 1px solid var(--line); }
.subj-tile:hover, .exam-card:hover, .chapter-row:hover { border-color: var(--line-2); box-shadow: none; }
/* éléments internes d'une carte (chiffres, tuiles, lignes) */
.ph-stat, .wk-kpi, .sp-kpis, .sp-tile, .pw-row, .edt-col, .list-row, .step, .ic-wrap, .figure-svg { border-radius: var(--r-in); }
.more-list, .modal, .ob-card { border-radius: var(--r-win); }

/* Accueil : « Reprendre » en papier blanc avec un bord brun, liste du jour à plat */
.continue { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.dash-today .list-row { background: transparent; border-radius: 0; border-bottom: 1px solid var(--line); }
.dash-today .list-row:last-child { border-bottom: 0; }

/* Révision : le Seyès reste, plus fin ; réponses à filet, choix en brun */
.qcard, div.qcard.t-qcm { border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: none; }
.qcard .opt, .session .qcard .opts > .opt { border-radius: var(--r-ctl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.qcard .opt:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.qcard .opt:has(input:checked), .qcard .opt.on, .qcard .opt.sel { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.qcard .opt.good { background: var(--good-soft); box-shadow: inset 0 0 0 2px var(--good); }
.qcard .opt.bad { background: var(--bad-soft); box-shadow: inset 0 0 0 2px var(--bad); }
.focus, .focus-top { background: var(--bg); }
.focus-top { border-bottom: 1px solid var(--line); }
/* v144 : formes restantes alignées sur l'échelle (relevé page par page) */
#exam-pill { background: transparent; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.btn.icon { border-radius: var(--r-ctl); }
#coach { border-radius: var(--r-win); }
a.subj-tile, a.chapter-row, .plan-after .card, .plan-main .card { border-radius: var(--r-card); }
a.subj-tile, a.subj-tile:hover, a.chapter-row, a.chapter-row:hover, a.chapter-row.complete, .plan-after .card, .plan-main .card { box-shadow: none; border: 1px solid var(--line); }
a.subj-tile:hover, a.chapter-row:hover { border-color: var(--line-2); }
a.subj-tile .subj-badge { border-radius: var(--r-ctl); box-shadow: none; }
#view a.sp-tile, .set-switch, label.chk.set-switch { border-radius: var(--r-ctl); }
.ph-ic, .wk-ic, .ic-wrap { border-radius: var(--r-in); }

/* ===== v145 : finitions « Bois & papier » des pages prioritaires ===== */
/* --- Cours : une ligne de lecture confortable (~75 caractères), une hiérarchie nette --- */
@media (min-width: 1081px) { body:not(.read-big) .ch-body .reader .course { max-width: 47rem; } }
.course h2 { font: 700 1.5rem/1.25 var(--f-display); font-stretch: 100%; letter-spacing: -.015em; }
/* chaque partie numérotée ouvre une nouvelle « page » du cahier : filet au-dessus, plus d'air */
.course h3 { font: 700 1.3rem/1.3 var(--f-display); font-stretch: 100%; letter-spacing: -.01em; margin: 2.1em 0 .55em; padding-top: .85em; border-top: 1px solid var(--line); }
.course h2 + h3, .course h2 + p + h3 { margin-top: 1.4em; }
.course h4 { font: 700 1.05rem/1.4 var(--f-ui); color: var(--ink); margin: 1.6em 0 .35em; }
.course p { margin: 0 0 .95em; }
.course ul, .course ol { padding-left: 1.4em; }
.course li + li { margin-top: .25em; }
.course strong { font-weight: 700; color: var(--ink); }
/* formules centrées : plus de grande ligne vide après une formule (retour à la ligne superflu) */
.course .katex-display { margin: .7em 0; }
.course .katex-display + br, .course br:has(+ .katex-display) { display: none; }
/* encadrés : même forme, la couleur dit le type ; titre lisible, étiquette discrète */
.course .callout { border-radius: var(--r-in); margin: 1.3em 0 1.4em; }
.course .callout-head { gap: 8px; margin-bottom: 6px; }
.course .callout-body > :last-child { margin-bottom: .2em; }
/* tableaux : en-tête papier, lignes fines */
.course .md-table { border-radius: var(--r-in); }
.course .md-table th { font-weight: 700; color: var(--ink); }
/* sommaire : la partie en cours se voit, les autres restent calmes */
.toc a { border-radius: 0; }
.toc a.on { color: var(--ink); font-weight: 700; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.toc .toc-t { color: var(--muted); }
/* actions du cours : une seule principale (fiche de révision), les autres en liens d'outil */
@media (min-width: 1081px) {
  .toc .toc-actions { gap: 2px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
  .toc .toc-actions .btn.small:not(.fr-cta) { background: transparent; border-color: transparent; justify-content: flex-start; color: var(--ink-2); font-weight: 600; }
  .toc .toc-actions .btn.small:not(.fr-cta):hover { background: var(--surface-2); color: var(--ink); }
  .toc .toc-actions .fr-cta { justify-content: flex-start; margin: 2px 0 6px; order: -1; }
}
.aa-menu > summary, .course-tools summary { border-radius: var(--r-in); }
/* --- Atlas 3D : fond sombre « boîte d'anatomie » pour que les os (ivoire) se détachent ; avec le fond papier
   beige, os et fond avaient presque la même couleur et le modèle paraissait moins net (romain 24/10) --- */
.anat-stage { background: radial-gradient(circle at 50% 38%, #3B352E 0%, #24201C 62%, #1A1714 100%); border-color: #2C2722; }
.anat-stage .anat-loading { color: #EDE6DA; }

/* --- Planning : lisibilité et hiérarchie des actions --- */
/* un seul style de « choix actif » dans toute l'appli : fond papier, contour encre (comme jours, réglages, onglets) */
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
/* chiffres clés : même poids que les titres, couleur d'encre ; seul le compte à rebours garde le brun */
.plan-summary .stat .stat-v, .plan-summary .stat[class*="tint-"] .stat-v { font: 700 1.6rem/1.15 var(--f-display); font-stretch: 100%; color: var(--ink); }
.plan-summary .stat:first-child .stat-v { color: var(--accent); }
/* les actions d'un jour (repos / réviser) restent discrètes : texte gris, souligné au survol */
.edt-head .linkish.tiny { color: var(--muted); text-decoration: none; font-weight: 600; }
.edt-head .linkish.tiny:hover, .edt-head .linkish.tiny:focus-visible { color: var(--accent); text-decoration: underline; }
.edt-head > .today { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
/* frise jusqu'à l'examen : semaines de révision au brun de la marque (plus de bleu froid) */
.tl-week.ph-revision, .ph-sw.ph-revision { --wc: var(--accent); }
.ph-sw.ph-revision { background: var(--accent); }
.tl-week { border-radius: 4px; background: color-mix(in srgb, var(--wc) 12%, var(--surface-2)); }
.tl-week.cur { outline-color: var(--ink); }
/* légende et indications : une ligne calme sous le tableau */
.edt-legend, .edt-hint-drag { color: var(--muted); }

/* --- Première configuration : le bouton suit la question, les choix ont la forme du reste de l'appli --- */
/* ordinateur : « Continuer » juste sous la réponse (il restait collé en bas de l'écran, loin du contenu) ;
   il reste collé en bas seulement si la liste est longue. Téléphone : en bas, sous le pouce. */
@media (min-width: 861px) { .ob-body { flex: 0 0 auto; padding-bottom: 8px; } .ob-foot { padding-top: 18px; } }
/* tuiles de choix à plat, comme les réponses des QCM : filet, choix entouré de brun */
.ob-tile { border: 1px solid var(--line-2); border-radius: var(--r-card); box-shadow: none; }
.ob-tile:active { transform: none; margin-top: 0; border-bottom-width: 1px; }
.ob-tile.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.ob-tile .ob-ic { border-radius: var(--r-in); }
/* matières : forme des étiquettes de l'appli, pastille à la couleur de la matière (elle était toujours brune) */
.ob-chip { border-radius: var(--r-ctl); border-width: 1px; border-color: var(--line-2); padding: 10px 14px; }
.ob-chip.on { border-color: var(--sc); box-shadow: inset 0 0 0 1px var(--sc); }
.ob-chip .ob-dot { --sc: inherit; }
.ob-chip:not(.on) .ob-dot { opacity: .55; }
.ob-q { font-stretch: 100%; letter-spacing: -.02em; }
.ob-back { border-radius: var(--r-ctl); }
.ob-main.ob-still { animation: none; }
.ob-hrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ob-hother { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; }
.ob-hother .input { width: 84px; min-height: 40px; text-align: center; }
.commu-ask { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-in); background: var(--leaf-soft, var(--good-soft)); color: var(--ink); font-size: .95rem; }
.commu-ask svg { flex: none; margin-top: 3px; color: var(--good); }
/* l'œil « masquer ce chapitre » se voit aussi sur téléphone (pas de survol au doigt) */
@media (hover: none) { .chapter-row .ch-hide { opacity: .6; } }
/* menu du compte : le questionnaire testeur ressort en rouge tant qu'il n'est pas rempli */
.menu a.menu-alert { color: var(--bad); font-weight: 700; background: var(--bad-soft); margin-bottom: 4px; }
.menu a.menu-alert:hover { background: color-mix(in srgb, var(--bad) 16%, var(--bad-soft)); }
/* page Offres : l'offre du compte en tête, puis la grille */
.offre-actuelle .oa-k { font: 700 .75rem/1.3 var(--f-display); letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.offre-actuelle .oa-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 4px 0 6px; }
.offre-actuelle .oa-nom { font: 700 1.5rem/1.2 var(--f-display); }
.offre-actuelle .oa-prix { color: var(--ink-2); font-weight: 600; }
/* confiance affichée avant la correction : plus discrète tant qu'on n'a pas validé, mise en avant si on l'oublie */
.conf-ask .conf-btn.on { background: var(--accent-soft) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 2px var(--accent) !important; }
.conf-ask.conf-need { outline: 2px solid var(--accent); outline-offset: 2px; }
/* atlas : le panneau des structures s'arrête à la même hauteur que le modèle 3D (la liste défile à l'intérieur) */
@media (min-width: 861px) {
  .anat-side { display: flex; flex-direction: column; gap: 10px; height: min(62vh, 600px); min-height: 360px; }
  .anat-side > .anat-info:has(.anat-list) { flex: 1; min-height: 0; }
  .anat-side .anat-list { max-height: none; flex: 1; min-height: 0; }
  .anat-info { border-radius: var(--r-card); }
}

/* v146 · saisie visuelle des formules (MathLive) */
.mi-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 100%; }
math-field.mi-field { display: block; width: 100%; min-height: 52px; padding: 8px 12px; font-size: 1.35rem; color: var(--ink); background: var(--surface); border: 1px solid var(--border-input, var(--line-2)); border-radius: var(--r-in, 8px); --caret-color: var(--accent); --selection-background-color: var(--accent-soft); --contains-highlight-background-color: transparent; --placeholder-color: var(--muted); --smart-fence-color: var(--muted); }
math-field.mi-field:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
math-field.mi-field::part(menu-toggle), math-field.mi-field::part(virtual-keyboard-toggle) { display: none; }
math-field.mi-field[readonly] { background: var(--surface-2); }
.mi-bar { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; max-width: 100%; }
.mi-key { min-width: 40px; height: 38px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-ctl, 10px); background: var(--surface); color: var(--ink); cursor: pointer; font-size: .95rem; }
.mi-key:hover { border-color: var(--accent); }
.mi-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mi-key .katex { font-size: 1em; }
.mi-hint { margin: 6px 0 0; }
.mi-switch { display: block; margin: 4px 0 0; text-align: left; justify-self: start; align-self: flex-start; }
.fp-visual .fp-more { border-top: 1px solid var(--line); padding-top: 10px; }
.fp-visual .fp-more > summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.fp-visual .fp-more[open] > summary { margin-bottom: 10px; }
@media (max-width: 640px) {
  .mi-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .mi-key { flex: 0 0 auto; }
}
html.mi-kb-on .modal-wrap { padding-bottom: calc(var(--mi-kb, 0px) + 8px); place-items: end center; }
html.mi-kb-on .modal-wrap .modal { max-height: calc(100dvh - var(--mi-kb, 0px) - 16px); }
html.mi-kb-on #view { padding-bottom: var(--mi-kb, 0px); }

/* v146 · prise de notes en direct */
.live-head { display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); }
.live-head select { max-width: 100%; min-width: 0; }
.live-intro { margin: 0; }
.live-bar { position: sticky; top: calc(var(--topbar-h, 60px) + 4px); z-index: 3; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 10px; margin: 12px 0 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctl, 10px); }
.live-bar .live-rec { color: var(--bad); font-weight: 700; }
.live-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
.live-tools .live-sp { flex: 1; }
.live-txt { min-height: 50vh; font-size: 1.02rem; line-height: 1.6; }
.live-pv { min-height: 50vh; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-in, 8px); background: var(--surface); }
.live-end { margin-top: 10px; }
.anat-diff { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.anat-side .anat-info { min-width: 0; }
.anat-opts { grid-template-columns: minmax(0, 1fr); }
.anat-opts .btn { min-width: 0; white-space: normal; }
@media (max-width: 640px) { .tabs:has(.tabs-more) { flex-wrap: wrap; } .tabs-more .more-list { left: 0; right: auto; max-width: calc(100vw - 32px); } }

/* compte sans place en bêta : aucune page de l'appli, pas de menus */
body.sans-acces #nav, body.sans-acces #tabbar, body.sans-acces #coach-toggle, body.sans-acces #exam-pill, body.sans-acces #streak-pill,
body.sans-acces #coach, body.sans-acces #topbar #streak-pill, body.sans-acces #topbar #exam-pill, body.sans-acces #fb-btn, body.sans-acces #help-btn, body.sans-acces #zen-btn, body.sans-acces .beta-tag { display: none !important; }
body.sans-acces #main { padding-bottom: 24px; }
body.sans-acces #view, body.auth-mode #view, #view:has(.wl-page), #view:has(.auth-screen) { margin-inline: auto; }   /* liste d’attente et connexion : page centrée sur grand écran */

/* liste d'attente : page centrée, seule à l'écran */
.wl-page { max-width: 720px; margin: 8px auto 24px; display: grid; gap: 16px; }
.wl-hero { text-align: center; padding: 28px 24px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-win, 16px); }
.wl-mark { width: 52px; height: 52px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.wl-title { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; margin: 6px 0 10px; }
.wl-lead { color: var(--muted); max-width: 46ch; margin: 0 auto; }
.wl-rank { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 18px; padding: 10px 26px; border-radius: var(--r-card, 12px); background: var(--accent-soft); }
.wl-rank-k { font-size: .8rem; color: var(--muted); }
.wl-rank-v { font-size: 2.2rem; font-weight: 800; line-height: 1.1; font-family: var(--f-title, inherit); color: var(--accent); font-variant-numeric: tabular-nums; }
.wl-card { padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card, 12px); }
.wl-h { font-size: 1.1rem; margin: 0 0 10px; }
.wl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wl-step { display: flex; gap: 12px; align-items: flex-start; }
.wl-step p { margin: 2px 0 0; }
.wl-n { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); font-weight: 700; font-size: .9rem; }
.wl-code { display: flex; gap: 8px; margin-top: 10px; }
.wl-code .input { flex: 1; min-width: 0; }
.wl-foot { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.wl-offres { margin: 0 auto 24px; }   /* même largeur que la carte d’attente (720px, plus bas) */
.wl-offres .card { overflow-x: auto; }
/* v147 : difficulté du cours (menu « Aa ») ; « Plus simple » replie démonstrations et remarques */
.read-diff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.read-diff .set-pills { gap: 4px; }
.read-diff .set-pill { padding: 4px 10px; font-size: .8rem; }
.cd-facile .callout-demo > .callout-head, .cd-facile .callout-remarque > .callout-head { cursor: pointer; margin-bottom: 0; }
.cd-facile .callout-demo > .callout-head::after, .cd-facile .callout-remarque > .callout-head::after { content: 'Afficher'; margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--accent); }
.cd-facile .callout-demo.ouvert > .callout-head::after, .cd-facile .callout-remarque.ouvert > .callout-head::after { content: 'Replier'; }
.cd-facile .callout-demo:not(.ouvert) > .callout-body, .cd-facile .callout-remarque:not(.ouvert) > .callout-body { display: none; }
.wl-offres { display: grid; gap: 16px; max-width: 720px; }
.wl-offres > .card { margin: 0; }
.wl-grid { margin-top: 18px; row-gap: 20px; }
.wl-compare { padding: 0; overflow: hidden; }
.wl-compare > summary { padding: 16px 20px; cursor: pointer; font-weight: 700; }
.wl-compare[open] > summary { border-bottom: 1px solid var(--line); }
.wl-compare > .table-wrap, .wl-compare > :not(summary) { margin: 12px; overflow-x: auto; }
/* le menu du profil reste sous la barre du haut même quand la page est descendue (romain 24/10) */
#account-menu { position: fixed; z-index: 45; }
/* « Mon compte » : lien vers la page des compteurs */
a.link-card { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.card a.link-card { padding: 12px 0; border-top: 1px solid var(--line); }
.acct-danger { margin-top: 4px; }
a.link-card:hover { border-color: var(--line-2); }
a.link-card > svg { color: var(--muted); flex: none; }
a.link-card > .grow { flex: 1; min-width: 0; }

/* iPhone : le champ date garde sa largeur native et déborde sur le champ voisin */
input[type=date], input[type=time], input[type=datetime-local] { min-width: 0; max-width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value { text-align: left; }

/* Minuteur du mode concentration : les 3 rythmes et les boutons prennent toute la largeur */
.zen-seg { display: flex; width: 100%; margin: 4px 0 10px; }
.zen-seg button { flex: 1; text-align: center; }
.zen-perso { margin-bottom: 10px; grid-template-columns: 1fr 1fr !important; }
.zen-panel label.set-switch { display: flex; margin: 2px 0 6px; }
@media (max-width: 600px) { .zen-btns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } .zen-btns .btn { justify-content: center; } }

/* Série du jour faite : flamme pleine et pastille teintée (romain 24/10 : on ne voyait pas qu'elle était active) */
.pill.streak:not(.off) { background: color-mix(in srgb, var(--amber) 16%, transparent); border-color: color-mix(in srgb, var(--amber) 50%, transparent); }
.pill.streak:not(.off) .ic { color: var(--amber); fill: currentColor; fill-opacity: .85; }

/* Cours : titres de parties teintés à la couleur de la matière */
.reader .course h2 { color: color-mix(in srgb, var(--sc, var(--ink)) 62%, var(--ink)); }
.reader .course h2::after { content: ''; display: block; width: 44px; height: 3px; margin-top: .35em; border-radius: 3px; background: var(--sc, var(--accent)); opacity: .75; }
.reader .course h3 { color: color-mix(in srgb, var(--sc, var(--ink)) 35%, var(--ink)); }

/* Planning semaine dézoomé sur téléphone : les 7 jours dans la largeur de l'écran */
.edt-zoom { margin: 0 0 8px; }
.edt-zoom .seg { display: flex; width: 100%; }
.edt-zoom .seg button { flex: 1; font-size: .8rem; padding: 6px 8px; }
.edt-week.edt-fit { padding: 6px 4px 10px; overflow-x: hidden; }
.edt-week.edt-fit .edt-grid { min-width: 0; }
.edt-week.edt-fit .edt-head, .edt-week.edt-fit .edt-body { grid-template-columns: 30px repeat(var(--n), minmax(0, 1fr)); gap: 2px; }
.edt-week.edt-fit .edt-head > div { font-size: .62rem; line-height: 1.2; text-align: center; }
.edt-week.edt-fit .edt-head strong { display: block; font-size: .9rem; }
.edt-week.edt-fit .edt-head .linkish, .edt-week.edt-fit .edt-h, .edt-week.edt-fit .edt-rs { display: none; }
.edt-week.edt-fit .edt-axis span { font-size: .6rem; }
.edt-week.edt-fit .edt-b { padding: 2px 3px; }
.edt-week.edt-fit .edt-t { font-size: .55rem; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; word-break: break-word; hyphens: auto; }
.edt-week.edt-fit .edt-offlbl { font-size: .55rem; }
.edt-week.edt-fit .edt-b.tiny { justify-content: flex-start; }
.edt-week.edt-fit .edt-b.tiny .edt-t { -webkit-line-clamp: 1; }

/* Examen sur téléphone : léger aimant qui cale chaque question sous la barre en glissant (romain 24/10) */
@media (max-width: 860px) and (pointer: coarse) {
  html:has(.exam-bar) { scroll-snap-type: y proximity; }
  .exam-section [id^="q-"] { scroll-snap-align: start; scroll-margin-top: calc(var(--top-h) + 120px); }
}

/* Minuteur d'examen : chiffres de l'interface (plus de police à chasse fixe), barre plus basse sur téléphone */
.exam-bar .timer { font: 700 1.15rem var(--f-ui); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
@media (max-width: 600px) {
  .exam-bar .timer.big { font-size: 1.1rem; }
  .exam-bar { row-gap: 6px; }
  .exam-bar .small { font-size: .78rem; }
  .exam-bar .btn.primary { padding: 7px 12px; font-size: .9rem; }
}
@media (max-width: 600px) {
  .exam-bar .qnav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .exam-bar .qnav a { flex: none; }
}
@media (max-width: 600px) { .exam-bar > .small { order: 4; width: 100%; } }

/* Filières et matières pas encore prêtes : cadenas « En cours de développement » */
.ob-tile.ob-locked { opacity: .55; cursor: not-allowed; border-style: dashed; }
.ob-tile.ob-locked .ob-tx span { color: var(--muted); }
.ob-chip.ob-locked { opacity: .6; cursor: default; border-style: dashed; gap: 6px; }
.ob-chip.ob-locked small { font-weight: 500; color: var(--muted); font-size: .72rem; }
.subj-locked { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; color: var(--muted); }

/* TOEIC : écoute et photo décrite */
.q-audio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 12px; }
.q-script { width: 100%; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); font-size: .95rem; }
.q-script p { margin: 4px 0; }
.q-photo { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 12px; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--line-2); color: var(--ink-2); }

/* Avatars à choisir */
.avatar.has-av { border-color: transparent; }
.av-wrap { margin: 0 0 14px; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; max-width: 520px; }
.av-pick { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 2px solid transparent; background: var(--surface-3); color: var(--ink); font: 700 1rem var(--f-display); cursor: pointer; }
.av-pick.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

/* Atlas plein écran (téléphone) : modèle en haut, questions en bas */
.anat-fullbtn { display: none; position: absolute; top: 10px; right: 10px; z-index: 3; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink); place-items: center; cursor: pointer; }
body.anat-full-on { overflow: hidden; }
.anat-wrap.anat-full { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; gap: 0; background: var(--bg); padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.anat-wrap.anat-full .anat-stage { flex: 1; height: auto; min-height: 0; border: 0; border-radius: 0; }
.anat-wrap.anat-full .anat-side { flex: none; height: auto; min-height: 0; max-height: 42vh; overflow-y: auto; padding: 10px 14px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.anat-wrap.anat-full .anat-list { max-height: 26vh; }
/* plein écran aussi sur ordinateur (romain 25/10) : le modèle à gauche, la fiche ou les questions à droite */
.anat-fullbtn { display: grid; }
@media (min-width: 861px) {
  .anat-wrap.anat-full { flex-direction: row; }
  .anat-wrap.anat-full .anat-side { width: 380px; height: auto; max-height: none; border-top: 0; border-left: 1px solid var(--line); padding: 16px 18px; }
  .anat-wrap.anat-full .anat-list { max-height: none; }
}
/* œil du mot de passe (inscription, connexion, nouveau mot de passe) */
.pw-wrap { position: relative; }
.pw-wrap .input { width: 100%; padding-right: 44px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--ink-3, var(--ink-2)); cursor: pointer; border-radius: 8px; }
.pw-eye:hover { color: var(--ink); background: var(--surface-2); }

/* planning : plusieurs séances sélectionnées, déplacées ensemble (romain 25/10) */
.k-rev.sel { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.edt-selbar:empty { display: none; }
.edt-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); position: sticky; top: 8px; z-index: 5; }
.edt-selbtns { display: flex; flex-wrap: wrap; gap: 6px; }

/* poignée de durée sous le texte (romain 25/10 : « révision » barré par la poignée) */
.edt-b.k-rev { padding-bottom: 9px; }
.edt-b.tiny.k-rev { padding-bottom: 2px; }
/* mode concentration : pas de série en haut (romain 25/10), malgré #topbar #streak-pill plus haut */
body.zen #topbar #streak-pill { display: none !important; }
/* petite séance : pas de poignée par-dessus le titre */
.edt-b.tiny .edt-rs::after { display: none; }

/* nombre de questions (s'entraîner, se tester) */
.nb-choix { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.boss-intro .nb-choix { justify-content: center; }
.nb-choix .set-pill { padding: 5px 11px; font-size: .85rem; }

/* « Vu en classe » sous le titre du chapitre */
.vu-classe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-vu { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); border-radius: 999px; padding: 5px 12px; font: 600 .82rem var(--f-ui); cursor: pointer; }
.chip-vu:hover { color: var(--ink); border-color: var(--ink-2); }
.chip-vu.on { background: color-mix(in srgb, var(--good, #2f7a4a) 14%, var(--surface)); border-color: color-mix(in srgb, var(--good, #2f7a4a) 45%, transparent); color: var(--ink); }

/* Filière « Certificat d'anglais » : carte de l'accueil et tests blancs (views-certif.js) */
.dash-wide { grid-column: span 12 !important; height: auto !important; }
.dash-cert { grid-column: span 12; display: flex; flex-direction: column; gap: 18px; --sc: var(--accent); }
.cert-top { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cert-kicker { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cert-big { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; }
.cert-big strong { font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cert-big > span { color: var(--muted); font-weight: 600; }
.cert-gauge { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.cert-track { position: relative; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--sc) 12%, var(--line)); }
.cert-track i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--sc); }
.cert-track b { position: absolute; top: -4px; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.cert-scale { position: relative; display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); min-height: 1.1em; }
.cert-cible { position: absolute; transform: translateX(-50%); font-weight: 700; color: var(--ink); white-space: nowrap; }
.cert-when { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.cert-when strong { font-size: 1.3rem; line-height: 1.1; }
.cert-when span { font-size: .78rem; color: var(--muted); }
.cert-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.cert-col { display: flex; flex-direction: column; min-width: 0; }
.cert-sec { display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line); font-weight: 700; }
.cert-secv { font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cert-part { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; color: inherit; text-decoration: none; font-size: .93rem; }
.cert-part .grow { flex: 1; min-width: 0; }
.cert-part:hover { background: color-mix(in srgb, var(--sc) 7%, transparent); }
.cert-n { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; font-size: .78rem; font-weight: 800; color: var(--sc); background: color-mix(in srgb, var(--sc) 13%, transparent); }
.cert-pct { display: flex; align-items: center; gap: 8px; flex: none; width: 104px; justify-content: flex-end; font-size: .78rem; font-variant-numeric: tabular-nums; }
.cert-mini { flex: 1; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.cert-mini i { display: block; height: 100%; background: var(--sc); border-radius: 99px; }
.cert-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.cert-voc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cert-voc .cert-kicker { margin-right: 4px; }
.cert-chip { padding: 4px 11px; border-radius: 99px; background: color-mix(in srgb, var(--sc) 9%, transparent); font-size: .8rem; color: inherit; text-decoration: none; }
.cert-chip:hover { background: color-mix(in srgb, var(--sc) 18%, transparent); }
.cert-note { margin: -8px 0 0; font-size: .72rem; color: var(--muted); }
.cert-list { display: flex; flex-direction: column; }
.cert-blancs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cert-blanc { display: flex; flex-direction: column; gap: 4px; }
.cert-blanc h3 { margin: 0 0 6px; }
.cert-blanc-row { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-radius: 8px; color: inherit; text-decoration: none; }
.cert-blanc-row:hover { background: color-mix(in srgb, var(--sc) 7%, transparent); }
.cert-blanc-row + .cert-blanc-row { border-top: 1px solid var(--line); }
.cert-res { font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .cert-top { gap: 14px; } .cert-gauge { order: 3; flex-basis: 100%; } .cert-when { margin-left: auto; }
  .cert-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; } .cert-pct { width: 88px; }
}
.cert-blanc-row .grow { flex: 1; min-width: 0; }

/* « Pour aller plus loin » (:::approfondir) : seulement en difficulté « Plus poussé » */
.callout-approfondir { --c: #6B4FA0; background: color-mix(in srgb, #6B4FA0 6%, var(--surface)); }
.callout-approfondir:not(.cd-difficile .callout-approfondir) { display: none; }

/* page Quiz */
.quiz-mat { margin: 4px 0 14px; flex-wrap: wrap; }
.quiz-jour { margin-bottom: 14px; }
.quiz-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.quiz-list h3 { margin: 0 0 6px; font-size: 1rem; }
.quiz-ch { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 8px; color: inherit; text-decoration: none; border-left: 3px solid var(--sc, var(--line)); }
.quiz-ch:hover { background: var(--surface-2, var(--line)); }
.quiz-ch strong { font-weight: 600; }
/* « Mes notes » à côté d'« Ajouter un cours » : seulement sur téléphone (sur ordinateur, c'est dans le menu) */
.mat-head .mat-notes { display: none; }
.mat-head .mat-notes + .head-more { margin-left: 0; }
@media (max-width: 860px) { .mat-head .mat-notes { display: inline-flex; } }

/* Années précédentes (Mes matières) */
.mat-ant { margin-top: 22px; }
.mat-ant h3 { margin: 0 0 2px; font-size: 1.05rem; }
.mat-ant .subj-tiles { margin-top: 10px; }
.ant-wrap { position: relative; }
.ant-wrap .subj-tile { padding-right: 44px; height: 100%; }
.ant-x { position: absolute; top: 8px; right: 8px; }
.ant-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.callout-enclair { --c: #2E7D5B; background: color-mix(in srgb, #2E7D5B 6%, var(--surface)); }
.quiz-mat a.set-pill { text-decoration: none; }
@media (max-width: 860px) { #tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } }
@media (max-width: 480px) { .mat-head .mat-notes { display: none; } }
/* Admin · Trafic et questionnaire plus lisibles (romain 25/10) */
.adm-traf-f { justify-content: space-between; }
.adm-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-resume { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); line-height: 1.5; max-width: 72ch; }
.adm-rep { border-bottom: 1px solid var(--line); padding: 10px 0; }
.adm-rep summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.adm-badge { margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: .75rem; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.adm-rep-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; margin: 10px 0 4px; }
.adm-rep-dl dt { color: var(--muted); font-size: .85rem; }
.adm-rep-dl dd { margin: 0; }
@media (max-width: 600px) { .adm-rep-dl { grid-template-columns: minmax(0, 1fr); } .adm-rep-dl dd { margin-bottom: 6px; } }
.adm-actions { white-space: nowrap; }
/* Quiz refait (romain 25/10) : matières en pastilles défilantes, tuiles de chapitres avec avancement */
.quiz-mat { display: flex; flex-wrap: nowrap; gap: 8px; margin: 4px 0 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.quiz-mat::-webkit-scrollbar { display: none; }
.quiz-mat-p { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.quiz-mat-p.on { border-color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, var(--surface)); box-shadow: inset 0 0 0 1px var(--sc); }
.quiz-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.quiz-head h2 { margin: 0; font-size: 1.2rem; }
.quiz-sec { margin-bottom: 18px; }
.quiz-sec h3 { margin: 0 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.quiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.quiz-tile { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--sc); color: inherit; text-decoration: none; min-width: 0; transition: transform .12s, box-shadow .12s; }
.quiz-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--sc) 18%, transparent); }
.quiz-tile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.quiz-num { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--sc) 70%, currentColor); }
.quiz-stars { color: #D9A21B; font-size: .85rem; letter-spacing: 1px; }
.quiz-tile-t { font-size: 1rem; line-height: 1.3; flex: 1; }
.quiz-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.quiz-bar span { display: block; height: 100%; border-radius: 99px; background: var(--sc); }
.quiz-tile-bas { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.quiz-go { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .85rem; color: color-mix(in srgb, var(--sc) 70%, currentColor); }
@media (max-width: 600px) { .quiz-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } .quiz-tile { padding: 10px 14px; gap: 6px; } .quiz-mat { margin-right: -16px; padding-right: 16px; } }
/* bouton « ⋯ » du planning bien visible, aussi en thème sombre (romain 25/10) */
#main .edt-more > summary.btn { color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; opacity: 1; }
#main .edt-more > summary.btn svg { width: 22px; height: 22px; opacity: 1; }
#main .edt-more > summary.btn svg, #main .edt-more > summary.btn svg * { stroke-width: 3.4; }
#main .edt-more > summary.btn:hover, #main .edt-more[open] > summary.btn { background: var(--surface); border-color: var(--ink-2); }
/* « Mon programme » : cocher et ranger les chapitres de son prof */
.prog-etab { display: flex; flex-direction: column; gap: 4px; }
.prog-list { display: flex; flex-direction: column; gap: 2px; max-height: 55vh; overflow-y: auto; }
.prog-row { display: flex; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.prog-list .prog-chk { flex: 1; display: flex; flex-direction: row; align-items: center; margin: 0; gap: 10px; min-width: 0; cursor: pointer; }
.prog-chk input { width: 18px; height: 18px; accent-color: var(--accent, currentColor); flex: none; }
.prog-row.off .prog-chk span { color: var(--ink-2); text-decoration: line-through; }
.prog-row .btn.icon:disabled { opacity: .3; }