/* =====================================================================
   Lalek Learn – styles des écrans
   ===================================================================== */

/* ---------- Démarrage ---------- */
#boot {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 0.45s var(--ease-out), visibility 0.45s;
}
#boot svg { animation: bootpulse 1.6s var(--ease-in-out) infinite; }
#boot.gone { opacity: 0; visibility: hidden; }
@keyframes bootpulse { 50% { transform: scale(0.94); } }
.boot-error { max-width: 520px; margin: 15vh auto; padding: 24px; font-family: var(--font-ui); }
.boot-error h1 { font-family: var(--font-display); font-size: 28px; margin-bottom: 12px; color: var(--ink); }
.boot-error p { color: var(--muted); margin-bottom: 10px; }

/* ---------- Utilitaires ---------- */
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.center { text-align: center; }
.center-pad { text-align: center; padding: 28px 16px; }
.center-row { justify-content: center; }
.grow { flex: 1; min-width: 0; }
.link-btn { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.is-disabled { pointer-events: none; opacity: 0.45; }
.demo-note { margin: -4px 0 12px; }

/* ---------- Accueil ---------- */
.home-hero { margin-top: 6px; }
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--hero-bg);
  color: #fff;
  padding: 26px 24px 24px;
  isolation: isolate;
  box-shadow: 0 24px 48px -28px rgba(23, 47, 158, 0.75);
}
.hero-art {
  position: absolute;
  right: -18px;
  top: 14px;
  width: 250px;
  height: 125px;
  color: #fff;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 520px) { .hero-art { width: 190px; height: 95px; right: -26px; top: 12px; } }
.hero-body { position: relative; max-width: 520px; }
.hero-kicker { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.hero-figure { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 8px; }
.hero-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 84px;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--hl);
  font-variant-numeric: lining-nums tabular-nums;

}
.hero-label { font-size: 18px; font-weight: 550; color: rgba(255, 255, 255, 0.9); max-width: 200px; line-height: 1.25; }
.hero-label.big { font-family: var(--font-display); font-size: 30px; max-width: 420px; font-weight: 650; letter-spacing: -0.015em; }
.hero-text { color: rgba(255, 255, 255, 0.78); font-size: 15px; max-width: 420px; margin-bottom: 20px; }
.hero-title { font-family: var(--font-display); font-weight: 650; font-size: 30px; line-height: 1.12; letter-spacing: -0.01em; margin: 2px 0 16px; max-width: 420px; }
.hero-btn { --btn-bg: #fff; --btn-fg: var(--brand-strong); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5); }
:root[data-theme='dark'] .hero-btn { --btn-fg: var(--hero-bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .hero-btn { --btn-fg: var(--hero-bg); } }
.steps { margin: 0 0 22px; padding: 0; list-style: none; counter-reset: st; }
.steps li { counter-increment: st; position: relative; padding: 0 0 12px 42px; line-height: 1.4; }
.steps li::before {
  content: counter(st);
  position: absolute;
  left: 0;
  top: -3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.16);
}
.steps.compact li::before { background: var(--brand-soft); color: var(--brand-strong); }
.steps.compact li { color: var(--text); padding-bottom: 14px; }
.hero .steps b { color: #fff; }

.resume {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 16px 18px;
  color: inherit;
}
.resume .ring { flex: none; }
.resume-main { flex: 1; min-width: 0; }
.resume-k { font-size: 13px; color: var(--eosin); font-weight: 650; }
.resume-t { font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resume-s { font-size: 13.5px; color: var(--muted); }

.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: inherit;
  min-height: 132px;
  transition: transform var(--dur-2) var(--ease-out);
}
.mode-tile:active { transform: scale(0.97); }
.mode-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); margin-bottom: 8px; }
.mode-ic svg { width: 21px; height: 21px; }
.mode-tile:nth-child(2) .mode-ic { background: var(--eosin-soft); color: var(--eosin); }
.mode-t { font-weight: 650; color: var(--ink); font-size: 15.5px; line-height: 1.25; }
.mode-d { font-size: 13px; color: var(--muted); line-height: 1.35; }
@media (min-width: 700px) {
  .mode-grid { grid-template-columns: repeat(4, 1fr); }
}

.stat-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat-k { font-size: 14px; font-weight: 600; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.stat-streak { color: var(--eosin); font-weight: 650; }
.stat-figure { font-family: var(--font-display); font-size: 46px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; margin: 2px 0 4px; }
.stat-of { font-size: 20px; color: var(--faint); }
.stat-s { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.act-strip { display: grid; grid-template-columns: repeat(28, 1fr); gap: 3px; margin: 8px 0 4px; }
.act { aspect-ratio: 1; border-radius: 4px; background: var(--surface-3); min-height: 8px; }
.act.l1 { background: var(--m-learning); opacity: 0.55; }
.act.l2 { background: var(--m-learning); }
.act.l3 { background: var(--m-consolidating); }
.act.l4 { background: var(--m-mastered); }
@media (min-width: 700px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat.activity { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .stat-grid { grid-template-columns: 1fr 1fr 1.2fr; }
  .stat.activity { grid-column: auto; }
  .home .view-inner, .home { max-width: 1040px; }
}
.demo-banner { margin-top: 30px; }

/* ---------- Bibliothèque ---------- */
.search-wrap { position: relative; margin: 4px 0 8px; }
.search-wrap > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--faint); pointer-events: none; }
.search-input { padding-left: 42px; background: var(--surface-3); border-color: transparent; }
.search-input:focus { background: var(--surface); }
.subject { margin-top: 26px; }
.subject-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.subject-name { font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.subject-meta { font-size: 13.5px; color: var(--muted); }
.set-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .set-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .set-grid { grid-template-columns: repeat(3, 1fr); } }
.set-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: inherit;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
.set-card:active { transform: scale(0.98); }
@media (hover: hover) { .set-card:hover { box-shadow: var(--shadow-2); } }
.set-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.set-chapter { font-size: 13px; color: var(--muted); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-title { font-family: var(--font-display); font-size: 21px; line-height: 1.2; color: var(--ink); font-weight: 500; flex: 1; text-wrap: balance; }
.set-foot { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.set-count { font-weight: 600; color: var(--text); }

/* ---------- Questionnaire ---------- */
.set-kicker { font-size: 14px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.set-view .large-title { margin-top: 4px; }
.set-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 16px; }
.set-actions .btn.primary { grid-column: 1 / -1; }
@media (min-width: 700px) { .set-actions { grid-template-columns: 1.4fr 1fr 1fr; } .set-actions .btn.primary { grid-column: auto; } }
.set-summary { padding: 18px 20px; }
.sum-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.sum-v { font-family: var(--font-display); font-size: 30px; color: var(--ink); line-height: 1.1; }
.sum-k { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.list-head { display: flex; align-items: center; justify-content: space-between; margin: 32px 0 10px; }
.filter-chips { margin-bottom: 12px; }
.qrow { align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
.qrow-num { width: 26px; flex: none; color: var(--faint); font-weight: 650; font-size: 14px; padding-top: 1px; }
.qrow-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.qrow .row-title { font-weight: 500; font-size: 15.5px; line-height: 1.4; }
.qcheck { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; flex: none; color: transparent; transition: all var(--dur-2) var(--ease-out); }
.qcheck svg { width: 14px; height: 14px; stroke-width: 3; }
.qcheck.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.selbar {
  position: fixed;
  z-index: 45;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border-radius: 18px;
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: var(--shadow-3);
  width: min(560px, calc(100% - 24px));
}
.selbar-t { flex: 1; font-weight: 600; font-size: 14.5px; color: var(--ink); }
@media (min-width: 1000px) { .selbar { bottom: calc(var(--safe-b) + 20px); left: calc(50% + var(--sidebar-w) / 2); } }
.sessions-compare { padding: 18px 18px 14px; }
.spark { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.spark-col { flex: 1; max-width: 48px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; color: inherit; }
.spark-bar { width: 100%; border-radius: 6px 6px 3px 3px; background: var(--m-consolidating); transition: transform var(--dur-2) var(--ease-out); transform-origin: bottom; }
.spark-bar.exam { background: var(--eosin); }
.spark-col:active .spark-bar { transform: scaleY(0.96); }
.spark-l { font-size: 12px; color: var(--muted); font-weight: 600; }
.spark-legend { margin-top: 10px; }

.qsheet .q-card { margin-bottom: 14px; }
.qsheet-mem p { color: var(--text); font-size: 15px; }
.attempt-dots { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.adot { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3); }
.adot.correct { background: var(--good); }
.adot.partial { background: var(--warn); }
.adot.wrong, .adot.skipped { background: var(--bad); }
.qnote { display: flex; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--warn-soft); font-size: 15px; }
.qnote svg { width: 18px; height: 18px; color: var(--warn); flex: none; margin-top: 2px; }

/* ---------- Carte de question ---------- */
.q-card { position: relative; }
.q-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.q-type { color: var(--brand); }
.q-diff { letter-spacing: 1px; color: var(--faint); font-size: 10px; }
.q-num { color: var(--ink); }
.q-stem {
  font-family: var(--font-read);
  font-size: var(--stem-size);
  line-height: 1.42;
  color: var(--ink);
  font-weight: 450;

  letter-spacing: -0.003em;
}
.q-card.compact .q-stem { font-size: calc(var(--stem-size) - 2px); }
.q-stem .rt-table { font-size: 18px; }
.q-hint { margin: 18px 0 10px; font-size: 13.5px; color: var(--muted); font-weight: 550; }
.q-card.compact .q-hint { margin-top: 12px; }
.q-options { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.q-hint + .q-options { margin-top: 0; }

.opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 14px 14px 14px;
  min-height: 58px;
  border-radius: 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.45;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2), opacity var(--dur-2), transform var(--dur-1) var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
}
.opt:active { transform: scale(0.99); }
.opt-letter {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
  background: var(--surface-3);
  transition: background var(--dur-2), color var(--dur-2);
}
.opt.multi .opt-letter { border-radius: 9px; }
.opt-body { flex: 1; min-width: 0; padding-top: 3px; }
.opt-text { display: block; }
.opt-mark {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: transparent;
  transition: all var(--dur-2) var(--ease-out);
}
.opt.multi .opt-mark { border-radius: 8px; }
.opt-mark svg { width: 15px; height: 15px; stroke-width: 3; }
.opt.selected { border-color: var(--brand); background: var(--brand-tint); }
.opt.selected .opt-letter { background: var(--brand); color: var(--on-brand); }
.opt.selected .opt-mark { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.opt .figs { margin-top: 10px; }
.opt .fig.thumb img { max-height: 150px; }
@media (hover: hover) { .opt:not(.selected):hover { border-color: var(--line-strong); } .q-card.revealed .opt:hover { border-color: inherit; } }

/* Correction */
.q-card.revealed .opt { cursor: default; }
.q-card.revealed .opt:active { transform: none; }
.opt.st-hit, .opt.st-right { border-color: var(--good); background: var(--good-soft); }
.opt.st-hit .opt-letter, .opt.st-right .opt-letter { background: var(--good); color: #fff; }
.opt.st-hit .opt-mark { background: var(--good); border-color: var(--good); color: #fff; }
.opt.st-false, .opt.st-wrong { border-color: var(--bad); background: var(--bad-soft); }
.opt.st-false .opt-letter, .opt.st-wrong .opt-letter { background: var(--bad); color: #fff; }
.opt.st-false .opt-mark { background: var(--bad); border-color: var(--bad); color: #fff; }
.opt.st-missed { border-color: var(--good); border-style: dashed; background: var(--surface); }
.opt.st-missed .opt-letter { background: var(--good-soft); color: var(--good); }
.opt.st-missed .opt-mark { border-color: var(--good); border-style: dashed; }
.opt.st-neutral { opacity: 0.6; }
.opt.st-unanswered { border-color: var(--warn); border-style: dashed; }
.opt.st-key { border-color: var(--good); background: var(--good-soft); }
.opt.st-key .opt-letter { background: var(--good); color: #fff; }
.opt.st-key .opt-mark { background: var(--good); border-color: var(--good); color: #fff; }
.opt-flag { display: block; width: fit-content; margin-top: 6px; font-size: 13px; font-weight: 650; color: var(--good); }
.opt-why { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); line-height: 1.45; }

/* Vrai / faux */
.opt.tf { cursor: default; align-items: center; }
.opt.tf .opt-body { padding-top: 0; }
.tf-toggle { display: flex; gap: 6px; flex: none; }
.tf-btn {
  min-width: 64px;
  padding: 0 12px;
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--line-strong);
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
  background: var(--surface);
  transition: all var(--dur-2) var(--ease-out);
}
.tf-btn.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.tf-btn:disabled { cursor: default; }
.tf-truth { display: flex; width: fit-content; margin-top: 6px; font-size: 13px; font-weight: 650; padding: 2px 9px; border-radius: 999px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
@media (max-width: 699px) {
  .opt.tf { flex-wrap: wrap; row-gap: 10px; }
  .opt.tf .opt-body { flex: 1 1 calc(100% - 50px); }
  .opt.tf .tf-toggle { flex: 1 1 100%; padding-left: 44px; }
  .opt.tf .tf-btn { flex: 1; }
}
.opt.tf.st-right .tf-btn.on { background: var(--good); border-color: var(--good); }
.opt.tf.st-wrong .tf-btn.on { background: var(--bad); border-color: var(--bad); }
.opt.tf.st-right .opt-letter, .opt.tf.st-wrong .opt-letter { color: #fff; }

.correction { margin-top: 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); padding: 18px 20px; }
.correction .verdict { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.correction .verdict svg { width: 22px; height: 22px; }
.correction.good .verdict { color: var(--good); }
.correction.warn .verdict { color: var(--warn); }
.correction.bad .verdict { color: var(--bad); }
.correction.neutral .verdict { color: var(--muted); }
.expl { font-size: 16px; line-height: 1.55; color: var(--text); }
.ref { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.ref svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }

/* ---------- Lecteur ---------- */
.view:has(.player) { padding-top: 0; padding-bottom: 0; }
.player { min-height: 100dvh; display: flex; flex-direction: column; }
.pl-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  padding: calc(var(--safe-t) + 6px) calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l));
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
}
@media (min-width: 1000px) { .pl-top, .pl-bar { left: calc(var(--sidebar-w) + var(--safe-l)) !important; } }
.pl-top-row { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.pl-title { flex: 1; min-width: 0; text-align: center; }
.pl-mode { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-counter { font-size: 16px; font-weight: 700; color: var(--ink); }
.pl-top-right { display: flex; align-items: center; gap: 4px; min-width: 44px; justify-content: flex-end; }
.pl-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--text); transition: background var(--dur-1), transform var(--dur-1) var(--ease-out); flex: none; }
.pl-icon:active { background: var(--surface-3); transform: scale(0.92); }
.pl-icon svg { width: 23px; height: 23px; }
.pl-icon.on { color: var(--eosin); }
.pl-timer { font-weight: 700; font-size: 15px; padding: 6px 10px; border-radius: 10px; background: var(--surface-3); color: var(--ink); min-width: 64px; text-align: center; transition: background var(--dur-3), color var(--dur-3); }
.pl-timer.warn { background: var(--warn-soft); color: var(--warn); }
.pl-timer.danger { background: var(--bad-soft); color: var(--bad); animation: pulse 1s infinite; }
.pl-progress { height: 4px; margin: 6px 4px 0; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pl-progress-fill { height: 100%; width: 0; background: var(--brand); border-radius: 999px; transition: width 0.5s var(--ease-out); }
.pl-segs { display: flex; gap: 2px; height: 100%; }
.pl-seg { flex: 1; background: var(--line-strong); opacity: 0.45; transition: background var(--dur-3), opacity var(--dur-3); }
.pl-seg.answered { background: var(--brand); opacity: 0.75; }
.pl-seg.correct { background: var(--good); opacity: 1; }
.pl-seg.partial { background: var(--warn); opacity: 1; }
.pl-seg.wrong, .pl-seg.skipped { background: var(--bad); opacity: 1; }
.pl-seg.current { background: var(--ink); opacity: 1; }
.pl-seg.flagged { box-shadow: inset 0 -2px 0 var(--eosin); }
.pl-progress:has(.pl-segs) { background: transparent; height: 5px; }

.pl-body { flex: 1; display: flex; gap: 32px; max-width: 1100px; width: 100%; margin: 0 auto; padding: calc(var(--safe-t) + 92px) calc(var(--gutter) + var(--safe-r)) calc(var(--safe-b) + 150px) calc(var(--gutter) + var(--safe-l)); }
.pl-main { flex: 1; min-width: 0; max-width: 720px; margin: 0 auto; }
.pl-stage { position: relative; }
.pl-stage .q-card.pl-out { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.pl-side { display: none; }
@media (min-width: 1100px) {
  .player.is-exam .pl-side, .pl-side { display: block; width: 260px; flex: none; position: sticky; top: calc(var(--safe-t) + 92px); align-self: flex-start; }
  .pl-side { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 18px; }
}
.pl-bar {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px calc(var(--gutter) + var(--safe-r)) calc(var(--safe-b) + 12px) calc(var(--gutter) + var(--safe-l));
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(1.8) blur(22px);
  backdrop-filter: saturate(1.8) blur(22px);
  border-top: 0.5px solid var(--line);
  transition: background var(--dur-3) var(--ease-out), border-color var(--dur-3);
}
.pl-bar-inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pl-verdict { flex: 1 1 auto; min-width: 0; }
.pl-verdict:empty { display: none; }
.pl-v { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }
.pl-v svg { width: 24px; height: 24px; }
.pl-bar-actions { display: flex; gap: 10px; flex: 1 1 260px; justify-content: flex-end; }
.pl-primary { flex: 1; max-width: 420px; }
.pl-skip { flex: none; --btn-bg: transparent; --btn-fg: var(--muted); box-shadow: none; padding: 0 14px; }
.pl-bar.v-correct { background: color-mix(in srgb, var(--good-soft) 88%, transparent); border-top-color: var(--good-line); }
.pl-bar.v-correct .pl-v { color: var(--good); }
.pl-bar.v-wrong, .pl-bar.v-skipped { background: color-mix(in srgb, var(--bad-soft) 88%, transparent); border-top-color: var(--bad-line); }
.pl-bar.v-wrong .pl-v, .pl-bar.v-skipped .pl-v { color: var(--bad); }
.pl-bar.v-partial { background: color-mix(in srgb, var(--warn-soft) 88%, transparent); border-top-color: var(--warn-line); }
.pl-bar.v-partial .pl-v { color: var(--warn); }
.pl-correction { margin-top: 4px; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; margin-top: 12px; }
.qcell { height: 44px; border-radius: 12px; background: var(--surface-3); color: var(--muted); font-weight: 650; font-size: 14.5px; position: relative; transition: transform var(--dur-1) var(--ease-out); }
.qcell:active { transform: scale(0.94); }
.qcell.answered { background: var(--brand-soft); color: var(--brand-strong); }
.qcell.current { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.qcell.flagged::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--eosin); }
.grid-head { font-size: 15px; }
.grid-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; }
.grid-legend span { display: inline-flex; align-items: center; gap: 6px; }
.grid-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.lg-answered { background: var(--brand-soft); }
.lg-flagged { background: var(--eosin); border-radius: 50% !important; }
.lg-current { box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- Créer (générateur de prompts) ---------- */
.create-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
.create-preview { display: none; }
@media (min-width: 1000px) {
  .create-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr); align-items: start; }
  .create-preview { display: block; position: sticky; top: calc(var(--safe-t) + var(--navbar-h) + 12px); }
  .mobile-bar { display: none !important; }
}
.form-sec { margin-bottom: 30px; }
.form-sec-t { font-size: 20px; font-weight: 650; color: var(--ink); margin-bottom: 14px; letter-spacing: -0.01em; }
.ctl-label { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.ctl-label small { display: block; font-weight: 500; color: var(--muted); font-size: 13px; margin-top: 2px; }
.ctl-label.block { display: block; margin: 20px 2px 10px; }
.ctl-label.block small { display: inline; margin-left: 6px; }
.ctl-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.ctl-stack > * + * { margin-top: 12px; }
.inline-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg-sm .segmented { min-width: 140px; }
.seg-sm .segmented button { min-height: 32px; font-size: 14px; }
.seg-textsize button:nth-child(2) { font-size: 12px !important; }
.seg-textsize button:nth-child(3) { font-size: 15px !important; }
.seg-textsize button:nth-child(4) { font-size: 19px !important; }
.sub-ctl:empty { display: none; }
.dist-custom { margin-top: 6px; }
.adv-sec .disclosure { font-size: 16px; }
.adv { padding-top: 6px; }
@media (max-width: 560px) { .field-row.stack-mobile { grid-template-columns: 1fr; gap: 0; } }

.preview-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100dvh - var(--safe-t) - var(--navbar-h) - 36px); }
.preview-head { padding: 16px 18px 10px; display: flex; justify-content: space-between; align-items: center; }
.preview-t { font-weight: 650; color: var(--ink); }
.prompt-count { font-size: 12.5px; color: var(--muted); }
.preview-scroll { flex: 1; overflow: auto; padding: 0 18px; min-height: 160px; -webkit-overflow-scrolling: touch; }
.prompt-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
}
.preview-scroll .prompt-text { padding-bottom: 16px; }
.prompt-text.in-sheet { font-size: 12.5px; }
.doc-pre { background: var(--surface); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--shadow-1); overflow-x: auto; }
.preview-actions { padding: 4px 18px 14px; border-bottom: 0.5px solid var(--line); }
.preview-scroll .prompt-text { padding-top: 14px; }
.copy-btn.copied { --btn-bg: var(--good); --btn-fg: #fff; }
.next-step { padding: 16px 18px 18px; border-bottom: 0.5px solid var(--line); background: var(--good-soft); }
.next-step-t { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--good); margin-bottom: 6px; }
.next-step-t svg { width: 20px; height: 20px; }
.next-step p { font-size: 14px; color: var(--text); margin-bottom: 12px; }
.mobile-bar {
  position: fixed;
  z-index: 35;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  padding: 10px calc(16px + var(--safe-r)) 10px calc(16px + var(--safe-l));
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(1.8) blur(22px);
  backdrop-filter: saturate(1.8) blur(22px);
  border-top: 0.5px solid var(--line);
}
.mobile-bar-sum { color: var(--muted); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-bar .btn-row { flex-wrap: nowrap; }
.mobile-copy { flex: 1; }
.create-view { padding-bottom: 110px; }
@media (min-width: 1000px) { .create-view { padding-bottom: 0; } }

/* ---------- Import ---------- */
.paste-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; margin-top: 8px; }
.paste-area { border: 0; border-radius: 0; min-height: 300px; background: transparent; resize: vertical; padding: 18px; }
.paste-area:focus { box-shadow: none; }
.paste-foot { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 18px; border-top: 0.5px solid var(--line); min-height: 44px; }
.paste-actions { margin-top: 16px; }
.paste-actions .btn { flex: 1; }
.review .large-title { margin-bottom: 14px; }
.rv-summary { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: 22px; }
.rv-big { display: flex; align-items: baseline; gap: 12px; }
.rv-big-l { line-height: 1.3; }
.rv-total { font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.rv-big-l { font-size: 17px; font-weight: 600; color: var(--text); }
.rv-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rv-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--surface-3); color: var(--muted); }
.rv-pill svg { width: 16px; height: 16px; }
.rv-pill.good { background: var(--good-soft); color: var(--good); }
.rv-pill.warn { background: var(--warn-soft); color: var(--warn); }
.rv-pill.bad { background: var(--bad-soft); color: var(--bad); }
.rv-global { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.rv-global:empty { display: none; }
.rv-meta { margin-top: 14px; }
.rv-meta-card { padding-bottom: 6px; }
.rv-target { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.rv-target svg { width: 22px; height: 22px; color: var(--brand); }
.rv-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 30px 0 12px; flex-wrap: wrap; }
.rv-list { display: flex; flex-direction: column; gap: 10px; }
.rv-card {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 12px 12px 10px 14px;
  border-left: 4px solid var(--good);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out);
}
.rv-card:active { transform: scale(0.99); }
.rv-card.warn { border-left-color: var(--warn); }
.rv-card.bad { border-left-color: var(--bad); }
.rv-card.excluded { border-left-color: var(--line-strong); opacity: 0.55; }
.rv-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-status svg { width: 19px; height: 19px; }
.rv-card.good .rv-status { color: var(--good); }
.rv-card.warn .rv-status { color: var(--warn); }
.rv-card.bad .rv-status { color: var(--bad); }
.rv-card.excluded .rv-status { color: var(--faint); }
.rv-num { font-weight: 700; color: var(--ink); }
.rv-stem { margin: 6px 0 4px; font-family: var(--font-read); font-size: 17px; line-height: 1.4; color: var(--ink); }
.rv-issues { margin: 6px 0 2px; padding-left: 18px; font-size: 13.5px; }
.rv-issues li.error { color: var(--bad); }
.rv-issues li.warning { color: var(--warn); }
.rv-issues li.info { color: var(--brand); }
.rv-card-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.rv-footer-wrap { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px); margin-top: 20px; z-index: 5; }
@media (min-width: 1000px) { .rv-footer-wrap { bottom: calc(var(--safe-b) + 16px); } }
.rv-footer { background: var(--bar-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 20px; padding: 8px; box-shadow: var(--shadow-3); display: flex; flex-direction: column; gap: 0; }
.rv-footer .btn.lg { min-height: 52px; }
.rv-footer .btn.plain.sm { min-height: 34px; margin-top: 2px; }
.rv-footer p { margin: 2px 0 4px; }
.rv-card-head .row-chevron { margin-left: auto; }
.success { text-align: center; padding: 10vh 0 40px; }
.success-mark { width: 96px; margin: 0 auto 20px; }
.success-t { font-family: var(--font-display); font-weight: 500; font-size: 32px; color: var(--ink); margin-bottom: 8px; }
.success p { max-width: 380px; margin: 0 auto 26px; }

/* ---------- Éditeur ---------- */
.editor { display: flex; flex-direction: column; gap: 22px; }
.ed-issues { display: flex; flex-direction: column; gap: 8px; }
.ed-ok { display: flex; align-items: center; gap: 8px; color: var(--good); font-weight: 600; font-size: 14.5px; }
.ed-ok svg { width: 19px; height: 19px; }
.ed-issue { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; flex-wrap: wrap; }
.ed-issue svg { width: 18px; height: 18px; flex: none; }
.ed-issue span { flex: 1; min-width: 160px; }
.ed-issue.error { background: var(--bad-soft); color: var(--bad); }
.ed-issue.warning { background: var(--warn-soft); color: var(--warn); }
.ed-label { font-size: 14px; font-weight: 650; color: var(--ink); margin: 0 2px 8px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.ed-help { font-weight: 500; color: var(--faint); font-size: 12px; }
.serif-input { font-family: var(--font-read); font-size: 18px; line-height: 1.45; }
.ed-images { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ed-images .figs { margin-top: 0; }
.add-img { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 600; font-size: 14.5px; padding: 6px 2px; align-self: flex-start; }
.add-img svg { width: 19px; height: 19px; }
.fig-remove { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(25, 28, 60, 0.72); color: #fff; display: grid; place-items: center; }
.fig-remove svg { width: 15px; height: 15px; stroke-width: 2.4; }
.fig-pending.actionable { flex-wrap: wrap; margin-top: 0; }
.ed-options { display: flex; flex-direction: column; gap: 10px; }
.ed-opt { background: var(--surface); border-radius: var(--r-md); padding: 10px 12px 10px; border: 1.5px solid var(--line); transition: border-color var(--dur-2); }
.ed-opt.is-correct { border-color: var(--good-line); }
.ed-opt-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.ed-opt .textarea { background: var(--surface-2); }
.ed-opt-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ed-correct { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-weight: 650; font-size: 14px; transition: all var(--dur-2) var(--ease-out); }
.ed-correct svg { width: 17px; height: 17px; stroke-width: 2.6; opacity: 0.4; }
.ed-correct.on { background: var(--good); color: #fff; }
.ed-correct.on svg { opacity: 1; }
.tf-seg { min-width: 150px; }
.why-input { font-size: 14.5px; margin-top: 8px; }
.add-opt { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: var(--r-md); border: 1.5px dashed var(--line-strong); color: var(--brand); font-weight: 600; }
.add-opt svg { width: 19px; height: 19px; }
.ed-preview { margin-top: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); }
.sheet .editor .textarea, .sheet .editor .input { background: var(--surface); }

/* ---------- Préparer une séance ---------- */
.mode-switch { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)) 24px; padding: 2px var(--gutter) 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mode-switch::-webkit-scrollbar { display: none; }
.mode-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); font-weight: 600; font-size: 14.5px; color: var(--text); transition: all var(--dur-2) var(--ease-out); }
.mode-chip svg { width: 18px; height: 18px; color: var(--brand); }
.mode-chip.on { background: var(--ink); color: var(--bg); }
.mode-chip.on svg { color: var(--bg); }
.src-subject { font-size: 13.5px; font-weight: 650; color: var(--muted); margin: 18px 2px 8px; }
.src-fixed { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.src-fixed svg { width: 22px; height: 22px; color: var(--brand); }
.chip:disabled { opacity: 0.4; }
.practice-foot { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px); margin-top: 14px; padding: 12px; border-radius: 20px; background: var(--bar-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--shadow-3); z-index: 5; }
@media (min-width: 1000px) { .practice-foot { bottom: calc(var(--safe-b) + 16px); } }
.match-info { margin-bottom: 8px; }

/* ---------- Bilan ---------- */
.res-hero { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 16px 0 10px; }
@media (min-width: 700px) { .res-hero { flex-direction: row; text-align: left; gap: 34px; padding-top: 30px; } }
.res-ring-wrap { position: relative; width: 168px; height: 168px; flex: none; }
.res-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.res-pct { font-family: var(--font-display); font-size: 54px; line-height: 1; color: var(--ink); letter-spacing: -0.03em; }
.res-pct-unit { font-family: var(--font-display); font-size: 24px; color: var(--muted); margin-left: 2px; }
.res-points { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.res-kicker { font-size: 14px; font-weight: 650; color: var(--eosin); }
.res-title { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.15; color: var(--ink); margin: 4px 0 6px; text-wrap: balance; }
.res-sub { color: var(--muted); font-size: 15px; }
.res-compare { margin-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--brand); }
.res-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 22px 0 8px; }
.res-cell { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 14px 12px; text-align: center; }
.res-cell-v { font-family: var(--font-display); font-size: 28px; color: var(--ink); line-height: 1.1; }
.res-cell-k { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.res-cell.good .res-cell-v { color: var(--good); }
.res-cell.warn .res-cell-v { color: var(--warn); }
.res-cell.bad .res-cell-v { color: var(--bad); }
.topic-meter { width: 72px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; flex: none; }
.topic-meter span { display: block; height: 100%; background: var(--m-weak); border-radius: 999px; }
.res-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
@media (min-width: 560px) { .res-actions { grid-template-columns: 1.4fr 1fr; } }
.res-review { display: flex; flex-direction: column; gap: 8px; }
.res-item { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; }
.res-item.deleted { padding: 14px 16px; }
.res-item-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; }
.res-st svg { width: 22px; height: 22px; }
.res-st.correct { color: var(--good); }
.res-st.partial { color: var(--warn); }
.res-st.wrong, .res-st.skipped { color: var(--bad); }
.res-num { font-weight: 700; color: var(--faint); width: 22px; flex: none; }
.res-stem { flex: 1; min-width: 0; font-size: 15px; color: var(--ink); line-height: 1.4; }
.res-chev { width: 18px; height: 18px; color: var(--faint); transition: transform var(--dur-2) var(--ease-out); flex: none; }
.res-item-head[aria-expanded='true'] .res-chev { transform: rotate(180deg); }
.res-item-body { padding: 4px 16px 16px; }
.res-item-body .correction { box-shadow: none; background: var(--surface-2); }

/* ---------- Progression ---------- */
.prog-top { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .prog-top { grid-template-columns: 1.15fr 1fr; } }
.prog-card { display: flex; flex-direction: column; gap: 10px; }
.prog-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-family: var(--font-display); color: var(--ink); }
.prog-big .num { font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
.prog-big.insufficient span { font-size: 30px; color: var(--muted); }
.prog-of { font-family: var(--font-ui); font-size: 15px; color: var(--muted); font-weight: 550; }
.prog-explain { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.prog-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.prog-mini b { display: block; font-family: var(--font-display); font-size: 24px; color: var(--ink); font-weight: 500; }
.chart-card { padding: 18px 20px 14px; }
.chart-wrap { position: relative; }
.chart-k { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.chart-k + div + .chart-k { margin-top: 10px; }
.chart { display: block; overflow: visible; }
.chart-tip { position: absolute; top: 18px; left: 0; width: 150px; padding: 8px 10px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 12.5px; line-height: 1.4; pointer-events: none; box-shadow: var(--shadow-2); z-index: 2; transition: transform 0.12s var(--ease-out); }
.chart-hit { position: absolute; top: 18px; bottom: 0; left: 0; width: 1px; background: var(--line-strong); pointer-events: none; }
.chart-hit[hidden] { display: none; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot-solid, .dot-hollow { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-solid { background: var(--brand); }
.dot-hollow { border: 1.5px dashed var(--faint); }
.subj-list { display: flex; flex-direction: column; gap: 10px; }
.subj { padding: 0; overflow: hidden; }
.subj-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 16px 18px; }
.subj-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.subj-name { font-family: var(--font-display); font-size: 21px; color: var(--ink); }
.subj-meta { font-size: 13.5px; color: var(--muted); }
.subj-chev { width: 20px; height: 20px; color: var(--faint); transition: transform var(--dur-2) var(--ease-out); flex: none; }
.subj-head[aria-expanded='true'] .subj-chev { transform: rotate(180deg); }
.subj-body { border-top: 0.5px solid var(--line); }
.chap-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: inherit; transition: background var(--dur-1); }
.chap-row + .chap-row { border-top: 0.5px solid var(--line); }
.chap-row:active { background: var(--surface-3); }
.chap-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.chap-name { font-weight: 600; color: var(--ink); }
.chap-meta { font-size: 13px; color: var(--muted); }
.chap-go { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.chap-go svg { width: 18px; height: 18px; }

/* ---------- Historique ---------- */
.hist-score { font-family: var(--font-display); font-size: 20px; color: var(--ink); flex: none; }
.hist-score.good { color: var(--good); }
.hist-score.bad { color: var(--bad); }

/* ---------- Réglages ---------- */
.settings .large-title { margin-bottom: 4px; }
.sync-card { margin-top: 12px; padding-bottom: 18px; }
.rules-card { padding-top: 6px; }
.rules-card .ctl-label.block:first-child { margin-top: 12px; }
code.syntax { display: inline-block; margin-top: 6px; font-size: 12.5px; padding: 3px 8px; border-radius: 7px; background: var(--surface-3); color: var(--brand-strong); }
.format-doc .h-section .btn { margin-left: auto; }

/* ---------- Feuille : contenu ---------- */
.sheet .group { box-shadow: none; border: 0.5px solid var(--line); }
.sheet .q-card .q-stem { font-size: calc(var(--stem-size) - 2px); }

/* Figures dans l'énoncé : pleine largeur, fond blanc (schémas lisibles en mode sombre) */
.q-card > .figs .fig:not(.thumb), .correction .figs .fig:not(.thumb) { width: 100%; }
.q-card > .figs .fig:not(.thumb) img, .correction .figs .fig:not(.thumb) img { width: 100%; max-height: 380px; object-fit: contain; }
.fig.thumb { min-width: 96px; }
.fig.thumb img { width: auto; min-width: 96px; }
.res-cells { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }

.chart-empty { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); font-size: 14px; color: var(--muted); background: var(--surface); padding: 6px 12px; border-radius: 10px; white-space: nowrap; }

/* =====================================================================
   Version 2 : parcours Créer, suivi, examen blanc
   ===================================================================== */

@media (min-width: 1000px) { .only-phone { display: none !important; } }

/* ---------- Parcours Créer ---------- */
.wizard { max-width: 720px; margin: 0 auto; }
.wz-steps { list-style: none; margin: 8px 0 0; padding: 0; }
.wz-step { position: relative; padding-left: 52px; padding-bottom: 6px; }
.wz-rail { position: absolute; left: 17px; top: 40px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.wz-rail::after { content: ''; position: absolute; inset: 0; background: var(--brand); transform: scaleY(0); transform-origin: top; transition: transform 0.6s var(--ease-out); }
.wz-step.done .wz-rail::after { transform: scaleY(1); }
.wz-step:last-child .wz-rail { display: none; }
.wz-head { display: flex; align-items: center; gap: 12px; min-height: 52px; position: relative; }
.wz-dot {
  position: absolute;
  left: -52px;
  top: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
  transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out), color 0.35s, transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.wz-dot > span { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity 0.25s, transform 0.35s var(--ease-out); }
.wz-check { opacity: 0; transform: scale(0.6); }
.wz-check svg { width: 18px; height: 18px; stroke-width: 3; }
.wz-step.active .wz-dot { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 6px var(--brand-soft); transform: scale(1.04); }
.wz-step.done .wz-dot { background: var(--good); border-color: var(--good); color: #fff; }
.wz-step.done .wz-num { opacity: 0; transform: scale(0.6); }
.wz-step.done .wz-check { opacity: 1; transform: none; }
.wz-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wz-title { font-size: 19px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; transition: color 0.3s; }
.wz-step.todo .wz-title { color: var(--faint); }
.wz-sum { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-sum:empty { display: none; }
.wz-edit { color: var(--brand); font-weight: 600; font-size: 15px; padding: 8px 4px; }
.wz-body { overflow: hidden; }
.wz-body-inner { padding: 6px 0 26px; }
.wz-field { margin-bottom: 22px; }
.wz-field .field-label { margin-bottom: 10px; }
.wz-group { margin: 4px 0 6px; }
.wz-notes { padding-top: 4px; }
.wz-next { margin-top: 24px; }
.wz-next svg { transition: transform var(--dur-2) var(--ease-out); }
.wz-next:active svg { transform: translateX(3px); }
.mod-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 520px) { .mod-chips { grid-template-columns: repeat(3, 1fr); } }
.mod-chip {
  height: 52px;
  border-radius: 14px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--text);
  font-size: 16px;
  transition: all 0.3s var(--ease-out);
}
.mod-chip b { font-weight: 700; letter-spacing: 0.01em; }
.mod-chip:active { transform: scale(0.96); }
.mod-chip.on { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; box-shadow: 0 10px 22px -12px var(--brand-strong); }
:root[data-theme='dark'] .mod-chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .mod-chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } }
.mod-name { margin: 10px 2px 0; font-size: 14px; color: var(--muted); font-weight: 550; }
.subj-other { margin-top: 10px; }
.scope-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1); margin-bottom: 18px; }
.scope-mod { flex: none; min-width: 52px; height: 40px; padding: 0 10px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; }
.wz-howto { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.howto { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; }
.howto-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; font-size: 13.5px; display: grid; place-items: center; margin-top: -1px; }
.wz-copy-row { margin: 18px 0 6px; flex-wrap: nowrap; }
.wz-copy-row .copy-btn { flex: 1; }
.copy-btn { transition: background 0.35s var(--ease-out), transform var(--dur-1) var(--ease-out); }
.wz-pre-wrap { margin-top: 4px; }
.wz-pre { max-height: 46vh; overflow: auto; margin-top: 8px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1); }
.wz-paste .paste-area { min-height: 220px; }
.wz-paste .paste-foot { justify-content: space-between; }
.rv-split { display: block; font-size: 14px; margin-top: 2px; }
.rv-list-t { font-size: 18px; font-weight: 650; color: var(--ink); }
.rv-hint { margin: -6px 2px 12px; }
.wizard .review .rv-summary { margin-top: 2px; }

/* ---------- Suivi des questionnaires ---------- */
.flow-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 14px; }
.flow-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 12px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  border: 1.5px solid transparent;
  text-align: left;
  transition: border-color 0.3s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.3s;
}
.flow-tile:active { transform: scale(0.97); }
.flow-tile .flow-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); margin-bottom: 6px; }
.flow-tile .flow-ic svg { width: 16px; height: 16px; }
.flow-tile.eosin .flow-ic { background: var(--eosin-soft); color: var(--eosin); }
.flow-tile.brand .flow-ic { background: var(--brand-soft); color: var(--brand); }
.flow-tile.good .flow-ic { background: var(--good-soft); color: var(--good); }
.flow-n { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--ink); }
.flow-l { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.flow-tile.on { border-color: var(--ink); box-shadow: var(--shadow-2); }
@media (max-width: 420px) { .flow-tiles { gap: 8px; } .flow-tile { padding: 10px 9px; } .flow-n { font-size: 24px; } .flow-l { font-size: 11px; letter-spacing: -0.01em; } }

.module { margin-top: 26px; }
.module-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.module-name { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.module-sub { font-family: var(--font-ui); font-size: 15px; font-weight: 550; color: var(--muted); letter-spacing: 0; }
.module-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.module-bar { width: 72px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.module-bar span { display: block; height: 100%; border-radius: 999px; background: var(--m-mastered); transition: width 0.6s var(--ease-out); }

.set-card { gap: 10px; }
.set-card .set-title { font-size: 20px; }
.set-foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.set-line { flex: 1; min-width: 0; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.card-action { flex: none; }
.set-card.st-awaiting { box-shadow: var(--shadow-1), inset 0 0 0 1.5px var(--eosin-soft); }
.stage-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; white-space: nowrap; background: var(--surface-3); color: var(--muted); }
.stage-pill svg { width: 14px; height: 14px; }
.stage-pill.brand { background: var(--brand-soft); color: var(--brand-strong); }
.stage-pill.eosin { background: var(--eosin-soft); color: var(--eosin); }
.stage-pill.warn { background: var(--warn-soft); color: var(--warn); }
.stage-pill.good { background: var(--good-soft); color: var(--good); }

.track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.track-seg { position: relative; height: 5px; border-radius: 999px; background: var(--surface-3); }
.track-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--brand); transform-origin: left; }
.st-mastered .track-fill { background: var(--good); }
.st-awaiting .track-fill { background: var(--eosin); }
.track.lg { gap: 6px; margin: 16px 0 22px; }
.track.lg .track-seg { height: 7px; }
.track-l { position: absolute; top: 14px; left: 0; font-size: 12px; color: var(--faint); font-weight: 600; white-space: nowrap; }
.track.lg .track-seg.done .track-l, .track.lg .track-seg.partial .track-l { color: var(--ink); }
.track.lg .track-seg.current .track-l { color: var(--brand); }
@media (max-width: 420px) { .track-l { font-size: 10.5px; } }

.flow-card { margin: 16px 0 14px; padding: 18px 20px 20px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-1); }
.flow-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flow-card-line { font-size: 14.5px; color: var(--muted); }
.flow-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.flow-card-actions .btn.primary { flex: 1 1 100%; }
.flow-card-actions .btn:not(.primary) { flex: 1 1 0; }
@media (min-width: 700px) { .flow-card-actions .btn.primary { flex: 1.4 1 0; } }
.kicker-mod { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; font-size: 12.5px; }

/* ---------- Accueil ---------- */
.exam-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 18px 18px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: inherit;
  transition: transform 0.25s var(--ease-out), box-shadow 0.3s;
}
.exam-card:active { transform: scale(0.985); }
@media (hover: hover) { .exam-card:hover, .set-card:hover, .mode-tile:hover, .flow-tile:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); } }
.exam-card-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--eosin-soft); color: var(--eosin); flex: none; }
.exam-card-ic svg { width: 24px; height: 24px; }
.exam-card-main { flex: 1; min-width: 0; }
.exam-card-t { font-weight: 700; color: var(--ink); font-size: 17px; }
.exam-card-s { font-size: 14px; color: var(--muted); line-height: 1.4; }
.exam-card-score { font-family: var(--font-display); font-size: 26px; color: var(--ink); }
.exam-card-score.good { color: var(--good); }
.exam-card-score.bad { color: var(--bad); }
.todo-action { font-size: 14px; font-weight: 600; color: var(--brand); white-space: nowrap; flex: none; }
@media (max-width: 420px) { .todo-action { display: none; } }

/* ---------- Examen blanc ---------- */
.exam-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
@media (max-width: 560px) { .exam-mods { grid-template-columns: 1fr 1fr; gap: 8px; } .exam-mod { padding: 12px 12px; } .exam-mod-id { font-size: 16px; } .exam-mod-name { font-size: 13px; line-height: 1.3; } .exam-mod-n { font-size: 12px; } }
.exam-mod {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  border: 1.5px solid transparent;
  text-align: left;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s, background 0.3s;
}
.exam-mod-id { font-weight: 800; font-size: 18px; color: var(--ink); }
.exam-mod-name { font-size: 14px; color: var(--text); font-weight: 550; }
.exam-mod-n { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.exam-mod.on { border-color: var(--brand); background: var(--brand-tint); box-shadow: var(--shadow-2); }
.exam-preview { margin-top: 20px; padding: 20px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-1); }
.exam-prev-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.exam-prev-big { font-family: var(--font-display); color: var(--ink); }
.exam-prev-big .num { font-size: 52px; line-height: 1; letter-spacing: -0.02em; }
.exam-prev-big > span:last-child { font-size: 20px; color: var(--muted); }
.exam-prev-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.exam-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: 13.5px; font-weight: 600; }
.exam-chip.k { background: var(--eosin-soft); color: var(--eosin); }
.exam-chip svg { width: 15px; height: 15px; }
.exam-chip:nth-child(n + 3) { background: var(--surface-3); color: var(--text); }
.comp-row { display: grid; grid-template-columns: minmax(110px, 0.9fr) 2fr 34px; align-items: center; gap: 12px; padding: 7px 0; }
.comp-name { font-size: 14.5px; font-weight: 550; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-bar { display: flex; gap: 2px; height: 10px; }
.comp-a, .comp-k { display: block; height: 100%; transform-origin: left; transition: width 0.5s var(--ease-out); }
.comp-a { background: var(--brand); border-radius: 999px 0 0 999px; }
.comp-k { background: var(--eosin); border-radius: 0 999px 999px 0; }
.comp-a[style*='width: 0%'] + .comp-k { border-radius: 999px; }
.comp-n { text-align: right; font-weight: 650; color: var(--ink); font-size: 14px; }
.comp-note { margin-top: 10px; }
.exam-opts { margin-top: 14px; }
.exam-start-wrap { margin-top: 16px; }
.exam-hist-card { padding: 18px 20px; }
.exam-hist-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.exam-hist-top b { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--ink); }
.exam-hist-top span { font-size: 12.5px; color: var(--muted); }
.exam-chart { width: 100%; height: auto; display: block; overflow: visible; }

.exam-intro { max-width: 560px; margin: 4vh auto 0; padding: 28px 24px 24px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-2); text-align: center; }
.exam-intro-ic { width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--eosin-soft); color: var(--eosin); }
.exam-intro-ic svg { width: 30px; height: 30px; }
.exam-intro-k { font-size: 14px; font-weight: 650; color: var(--eosin); }
.exam-intro-t { font-family: var(--font-display); font-weight: 500; font-size: 32px; color: var(--ink); margin: 2px 0 18px; }
.exam-intro-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.exam-intro-figs > div { padding: 12px 6px; border-radius: 14px; background: var(--surface-2); }
.exam-intro-figs b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--ink); }
.exam-intro-figs span { font-size: 12.5px; color: var(--muted); }
.exam-intro-subj { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.exam-rules { text-align: left; margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.exam-rules li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.exam-rules li::before { content: ''; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.q-kicker { font-size: 13px; font-weight: 650; color: var(--eosin); margin-bottom: 6px; }
.q-label { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 8px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 13px; }
.res-verdict { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 2px; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 16px; }
.res-verdict svg { width: 20px; height: 20px; }
.res-verdict span { font-weight: 550; font-size: 13.5px; opacity: 0.85; }
.res-verdict.good { background: var(--good-soft); color: var(--good); }
.res-verdict.bad { background: var(--bad-soft); color: var(--bad); }
.topic-meter.subj span { background: var(--bad); }
.topic-meter.subj.ok span { background: var(--good); }
.res-cells.types { margin-top: 14px; }
.res-num.lab { width: auto; min-width: 30px; color: var(--ink); }
.adv-card { padding: 6px 18px 10px; }
.adv-settings { padding-bottom: 10px; }

/* Finitions : survol et focus plus doux sur les surfaces interactives */
.set-card, .exam-card, .flow-tile, .exam-mod, .mode-tile { will-change: transform; }
.btn.primary:not(:disabled):hover { filter: brightness(1.06); }
.btn { transition: transform 0.18s var(--ease-out), background 0.3s var(--ease-out), color 0.3s, opacity 0.25s, box-shadow 0.3s, filter 0.2s; }

/* v2.1 : suite de la réponse de l'IA, nombre de questions libre */
.stack-8 { display: grid; gap: 8px; }
.rv-append .paste-area { min-height: 180px; margin-top: 10px; }
.rv-bottom-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 6px; }
.rv-more .btn-row { justify-content: flex-start; }
.count-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.count-presets { flex: 1 1 300px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-3); }
.count-chip { min-height: 36px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--muted); transition: background 0.28s var(--ease-out), color 0.2s, box-shadow 0.28s var(--ease-out); }
.count-chip.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 24, 60, 0.08), 0 3px 10px -4px rgba(20, 24, 60, 0.18); }
.count-exact { flex: none; display: flex; align-items: center; gap: 10px; }
.count-exact > span { display: none; font-size: 14.5px; color: var(--muted); }
.count-long { margin-top: 10px; }
@media (max-width: 520px) {
  .count-exact { flex: 1 1 100%; justify-content: space-between; }
  .count-exact > span { display: inline; }
}

/* =====================================================================
   v2.2 : identité « stylo et surligneur »
   ===================================================================== */
/* Titres et chiffres en Bricolage Grotesque : graisses franches, approche serrée */
.large-title { font-weight: 750; letter-spacing: -0.028em; font-size: 38px; line-height: 1.04; }
.brand-name { font-weight: 750; letter-spacing: -0.02em; }
.empty h3, .boot-error h1, .success-t, .res-title, .exam-intro-t { font-weight: 700; letter-spacing: -0.02em; }
.subject-name, .module-name, .subj-name { font-weight: 700; letter-spacing: -0.018em; }
.set-title { font-weight: 650; letter-spacing: -0.012em; line-height: 1.18; }
.stat-figure, .rv-total, .res-pct, .sum-v, .res-cell-v, .prog-big, .prog-mini b, .flow-n,
.exam-card-score, .exam-prev-big, .exam-hist-top b, .exam-intro-figs b, .hist-score {
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.res-pct-unit { font-weight: 600; }
.module-sub, .prog-of { letter-spacing: 0; }

/* Lecture des questions : Atkinson, interligne généreux */
.q-stem { font-weight: 450; line-height: 1.5; letter-spacing: 0; }
.rv-stem { font-size: 16.5px; line-height: 1.45; }
.serif-input { font-size: 17px; line-height: 1.5; }

/* Le surligneur : signature réservée à la réussite */
.success-mark circle:first-child { fill: var(--hl-soft); }

/* Grilles : une colonne « 1fr » ne doit jamais dépasser l'écran à cause de son contenu */
.set-grid > *, .stat-grid > *, .mode-grid > *, .prog-top > *, .create-grid > *, .flow-tiles > *,
.exam-mods > *, .res-actions > *, .set-actions > *, .sum-cells > *, .track > *, .mod-chips > *,
.count-presets > *, .exam-hist-top > *, .exam-intro-figs > *, .comp-row > *, .prog-mini > *,
.res-cells > *, .qgrid > * { min-width: 0; }
.set-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .set-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.set-chapter { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.large-title { margin-bottom: 16px; }
.large-title + .large-sub { margin-top: -8px; }
.act-strip { grid-template-columns: repeat(28, minmax(0, 1fr)); }
.act-strip > * { min-width: 0; }
@media (max-width: 360px) { .act-strip { gap: 2px; } }
.count-presets { flex: 1 1 240px; min-width: 0; }
@media (max-width: 360px) { .count-chip { font-size: 14px; } }
.segmented button { min-width: 0; }
@media (max-width: 380px) {
  .segmented button { padding: 4px 6px; font-size: 13.5px; white-space: normal; line-height: 1.15; }
}

/* =====================================================================
   v3 : écrans d'accès (connexion, configuration, invitation)
   ===================================================================== */
.auth-root { position: fixed; inset: 0; z-index: 60; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg); display: flex; justify-content: center; padding: calc(var(--safe-t) + 20px) calc(var(--safe-r) + 20px) calc(var(--safe-b) + 24px) calc(var(--safe-l) + 20px); }
.auth-screen { width: 100%; max-width: 420px; margin: auto 0; padding: 28px 0 12px; }
.auth-head { text-align: center; margin-bottom: 26px; }
.auth-mark { display: inline-block; margin-bottom: 18px; filter: drop-shadow(0 14px 24px rgba(23, 47, 158, 0.28)); }
.auth-mark svg { display: block; }
.auth-title { font-family: var(--font-display); font-weight: 750; font-size: 34px; line-height: 1.08; letter-spacing: -0.028em; color: var(--ink); margin: 0 0 10px; text-wrap: balance; }
.auth-sub { color: var(--muted); font-size: 16px; line-height: 1.45; margin: 0 auto; max-width: 360px; text-wrap: pretty; }
.auth-body > .auth-sub { text-align: center; margin-bottom: 22px; }
.auth-notice { margin-bottom: 18px; }
.auth-passkey .btn { min-height: 58px; font-size: 17.5px; }
.auth-passkey .btn svg { width: 24px; height: 24px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--faint); font-size: 14px; font-weight: 600; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-form { display: grid; gap: 14px; }
.auth-form .field { margin: 0; }
.auth-form .btn { margin-top: 4px; }
.auth-error { background: var(--bad-soft); color: var(--bad); border-radius: 12px; padding: 11px 14px; font-weight: 600; font-size: 15px; line-height: 1.35; }
.auth-foot { text-align: center; color: var(--muted); font-size: 14px; margin: 22px 0 0; }
.auth-checks { list-style: none; margin: 0 0 20px; padding: 6px 16px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.auth-checks li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink); font-size: 15px; }
.auth-checks li:last-child { border-bottom: 0; }
.auth-checks li svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.auth-checks li.ok svg { color: var(--good); }
.auth-checks li.ko svg { color: var(--warn); }
.auth-checks small { display: block; font-weight: 500; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.auth-ident { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 18px; background: var(--brand-tint); border-radius: var(--r-md); color: var(--brand); }
.auth-ident small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.auth-ident b { color: var(--ink); font-size: 17px; }
.pk-offer { text-align: center; padding: 6px 4px 2px; }
.pk-offer-art { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 22px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.pk-offer-art svg { width: 40px; height: 40px; stroke-width: 1.6; }
.pk-offer p { margin: 0 0 10px; font-size: 16px; line-height: 1.45; color: var(--text); }

/* Compte */
.account-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 12px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.account-avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.account-main { min-width: 0; }
.account-name { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.015em; color: var(--ink); }
.account-sub { color: var(--muted); font-size: 14.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-btn { width: 100%; text-align: left; }
.danger-text { --btn-fg: var(--bad); }
.form-stack { display: grid; gap: 14px; }
.form-stack .field { margin: 0; }
.pk-list { margin-top: 14px; }

/* Administration */
.admin-invite { margin: 8px 0 6px; }
.admin-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.admin-avatar.admin { background: var(--brand); color: var(--on-brand); }
.admin-row .row-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-row.off { opacity: 0.6; }
.admin-pk { color: var(--good); display: grid; place-items: center; margin-right: 4px; }
.admin-pk svg { width: 20px; height: 20px; }
.invite-link { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; margin-bottom: 14px; border-radius: var(--r-md); background: var(--brand-tint); color: var(--brand-strong); font-size: 14.5px; font-weight: 600; word-break: break-all; user-select: all; -webkit-user-select: all; }
.invite-link svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.badge.warn { background: var(--warn-soft); color: var(--warn); }

/* Barre de séance stable : « Je ne sais pas » et le verdict se relaient au même endroit */
.pl-bar-actions.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 10px; flex: 1 1 100%; align-items: center; }
.pl-bar-actions.duo .pl-primary { max-width: none; width: 100%; }
.pl-slot { display: grid; align-items: center; min-width: 0; }
.pl-slot > * { grid-area: 1 / 1; min-width: 0; transition: opacity 0.22s var(--ease-out), transform 0.34s var(--ease-out); }
.pl-slot .pl-skip { width: 100%; padding: 0 8px; }
.pl-slot .pl-verdict, .pl-slot .pl-verdict:empty { display: block; opacity: 0; transform: translateY(8px); pointer-events: none; }
.pl-slot.show-verdict .pl-verdict { opacity: 1; transform: none; }
.pl-slot.show-verdict .pl-skip { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.pl-slot .pl-skip:disabled { opacity: 0; }
.pl-slot:not(.show-verdict) .pl-skip:not(:disabled) { opacity: 1; }
.pl-slot .pl-v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-primary-label { display: inline-block; }
.fixed-layer { position: relative; z-index: 30; }

/* Choix en cartes (création) : lisible à toute largeur */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.choice { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line); text-align: left; color: var(--text); transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.choice:active { transform: scale(0.98); }
.choice-dot { width: 18px; height: 18px; flex: none; margin-top: 2px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); transition: border 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.choice-text { display: grid; gap: 2px; min-width: 0; }
.choice-label { font-weight: 650; font-size: 15.5px; color: var(--ink); line-height: 1.25; }
.choice-hint { font-size: 13.5px; color: var(--muted); line-height: 1.3; }
.choice.on { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 6px 18px -12px var(--brand); }
.choice.on .choice-dot { border: 5.5px solid var(--brand); }
@media (max-width: 420px) { .choice-grid { grid-template-columns: 1fr; } .choice { padding: 11px 14px; } }

/* Précisions pour l'IA : vraie zone de saisie, même sur petit écran */
.wz-notes-ta { min-height: 112px; width: 100%; font-size: 16px; line-height: 1.45; }

/* Barre segmentée : le texte passe à la ligne plutôt que de se superposer */
.segmented button { white-space: normal; line-height: 1.15; text-wrap: balance; padding-top: 6px; padding-bottom: 6px; }
.disclosure { text-align: left; }
/* Très petits écrans : l'assistant de création récupère de la largeur */
@media (max-width: 360px) {
  .wz-step { padding-left: 40px; }
  .wz-rail { left: 17px; }
  .wz-dot { left: -40px; }
}