/* Philo dissertation — langage visuel Adaptia (papier #f7f6f2, vert #2d6a4f) */
:root {
  --ink: #1a2330;
  --ink-2: #3d4a5c;
  --ink-3: #6a7688;
  --paper: #f7f6f2;
  --paper-2: #eeecea;
  --paper-3: #e3e0d8;
  --white: #fffcf8;
  --accent: #2d6a4f;
  --accent-2: #40916c;
  --accent-3: #52b788;
  --accent-soft: #d8f3dc;
  --accent-soft-2: #b7e4c7;
  --ok: #2d6a4f;
  --ok-soft: #d8f3dc;
  --warn: #9a5b24;
  --warn-soft: #f3ebe0;
  --phase-intro: #2aa3b8;
  --phase-dev: #2d6a4f;
  --phase-conc: #1e4d6b;
  --font-d: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-b: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --r: 8px;
  --sh: 0 1px 3px rgba(26, 35, 48, 0.07);
  --space-section: 22px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-b);
  background:
    radial-gradient(ellipse 65% 42% at 6% -6%, rgba(42, 163, 184, 0.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 38% at 100% 0%, rgba(45, 106, 79, 0.09) 0%, transparent 50%),
    var(--paper);
  color: var(--ink);
  min-height: 100vh;
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
}

.app {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 22px 80px;
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--accent-soft-2);
}

.brand {
  font-family: var(--font-d);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}

.brand span {
  display: block;
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-top: 5px;
}

.user-chip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
  text-align: right;
  flex-shrink: 0;
}

.user-chip button {
  margin-left: 8px;
}

/* ── Icônes Adaptia (icons.js · classe .aic) ─────────── */
.nav-ico {
  display: inline-block;
  vertical-align: -0.15em;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.teacher-link .nav-ico {
  opacity: 0.72;
}

.btn .nav-ico {
  margin-right: 2px;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  background: var(--paper-2);
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}

.btn:hover {
  background: var(--paper-3);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-2);
}

.btn-ghost {
  background: transparent;
  border-color: var(--paper-3);
  color: var(--accent);
}

.btn-ghost:hover {
  background: var(--accent-soft);
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

/* ── Panels ─────────────────────────────────────────────── */
.panel {
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: 12px;
  padding: 28px 30px;
  box-shadow: var(--sh);
  margin-bottom: 20px;
}

.panel h1 {
  font-family: var(--font-d);
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}

.panel h2 {
  font-family: var(--font-d);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 14px;
  line-height: 1.3;
  color: var(--ink);
}

.panel h3 {
  font-family: var(--font-d);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}

.lead {
  color: var(--ink-2);
  margin-bottom: 22px;
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.65;
}

.login-grid {
  display: grid;
  gap: 14px;
  max-width: 380px;
}

/* ── Module nav (dissertation) ─────────────────────────── */
.module-nav {
  margin: -8px 0 24px;
}

.module-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  background: linear-gradient(180deg, #f4faf6 0%, var(--paper-2) 100%);
  border: 1px solid var(--accent-soft-2);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
}

.module-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: calc(var(--r) - 2px);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.module-nav-link:hover {
  background: rgba(45, 106, 79, 0.08);
  border-color: var(--accent-soft-2);
}

.module-nav-link.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-soft-2);
  color: var(--ink);
}

.module-nav-btn {
  font-family: inherit;
}

.module-nav-link .nav-ico {
  opacity: 0.78;
  flex-shrink: 0;
}

.module-nav-label {
  line-height: 1.2;
}

.module-nav-btn[data-nav="teacher"] {
  display: inline-flex;
}

/* ── Doc links ──────────────────────────────────────────── */
.doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin: 0 0 24px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #f4faf6 0%, var(--paper-2) 100%);
  border: 1px solid var(--accent-soft-2);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  list-style: none;
}

.doc-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.doc-link:hover {
  border-bottom-color: var(--accent);
}

/* ── Forms ──────────────────────────────────────────────── */
label.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

input[type="text"],
input[type="search"],
select,
textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  background: #fff;
  color: var(--ink);
  width: 100%;
}

textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.55;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent-2);
}

.hint {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 10px;
  line-height: 1.5;
}

.hint code {
  font-size: 11px;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* ── Listes stylisées (méthodo, tips, détail) ───────────── */
.styled-list,
.methodo ul,
.answer-list,
.doc-links.as-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.styled-list > li,
.methodo ul > li,
.answer-list > li {
  position: relative;
  padding: 10px 14px 10px 40px;
  background: rgba(255, 252, 248, 0.72);
  border-radius: 6px;
  border: 1px solid rgba(227, 224, 216, 0.9);
  line-height: 1.55;
  color: var(--ink-2);
  font-size: 14.5px;
}

.styled-list > li::before,
.methodo ul > li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent);
  clip-path: polygon(0 0, 70% 50%, 0 100%);
  transform: translateY(1px);
}

.styled-list.numbered,
.methodo.numbered {
  counter-reset: tip;
}

.styled-list.numbered > li,
.methodo.numbered ul > li {
  counter-increment: tip;
}

.styled-list.numbered > li::before,
.methodo.numbered ul > li::before {
  content: counter(tip);
  clip-path: none;
  width: 20px;
  height: 20px;
  left: 8px;
  top: 8px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none;
  text-align: center;
  line-height: 20px;
}

.answer-list > li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
}

.answer-list > li {
  padding-left: 32px;
}

/* ── Sujets ─────────────────────────────────────────────── */
.sujet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sujet-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.sujet-list li:hover {
  border-color: var(--accent-2);
  background: var(--accent-soft);
  box-shadow: 0 2px 10px rgba(45, 106, 79, 0.1);
}

.sujet-list li:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sujet-list .meta {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}

.sujet-list .title {
  font-weight: 600;
  font-size: 15px;
  font-family: var(--font-d);
}

.sujets-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sujets-head h1 {
  margin: 0 0 6px;
}

.sujets-pdf-link {
  margin: 10px 0 0;
  font-size: 14px;
}

.sujets-pdf-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sujets-pdf-link a:hover {
  border-bottom-color: var(--accent);
}

.sujet-item-main {
  flex: 1;
  min-width: 0;
}

.sujet-item-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
}

.sujet-list li .pct {
  flex-shrink: 0;
}

.sujet-correctif-tag {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sujets-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 4px 0 8px;
}

.sujet-list-pinned {
  margin-bottom: 18px;
}

.sujet-item-correctif {
  border-color: #c9a227;
  background: linear-gradient(135deg, #fffdf5 0%, #fff 55%);
  box-shadow: 0 2px 12px rgba(201, 162, 39, 0.12);
}

.sujet-item-correctif:hover {
  border-color: #b8921f;
  background: linear-gradient(135deg, #fff9e8 0%, #fffef8 55%);
}

.sujet-item-pinned {
  position: relative;
}

.sujet-badge-correctif {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #7a5d00;
  background: #fff3cd;
  border: 1px solid #e8d48a;
  padding: 2px 8px;
  border-radius: 999px;
}

.sujet-pin-badge {
  font-size: 12px;
  margin-left: 4px;
}

.sujet-open-hint {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.progress-bar-correctif i {
  background: linear-gradient(90deg, #c9a227, #e8c547);
}

.correctif-view-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid #e8d48a;
  background: #fff9e8;
  color: #5c4a00;
  font-size: 13px;
  font-weight: 600;
}

.sujets-section-label {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sujet-list-pinned {
  margin-bottom: 4px;
}

.sujet-list li.sujet-item-correctif,
.sujet-list li.sujet-item-pinned.sujet-item-correctif {
  border-color: #c9a227;
  background: linear-gradient(135deg, #fffdf5 0%, #fff9e6 100%);
  box-shadow: 0 2px 12px rgba(201, 162, 39, 0.15);
}

.sujet-list li.sujet-item-correctif:hover {
  border-color: #b8921f;
  background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);
}

.sujet-badge-correctif {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #8a6d0a;
  background: rgba(201, 162, 39, 0.18);
  border: 1px solid rgba(201, 162, 39, 0.35);
  padding: 2px 10px;
  border-radius: 999px;
}

.sujet-pin-badge {
  font-size: 12px;
}

.sujet-open-hint {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: #8a6d0a;
}

.progress-bar-correctif i {
  background: linear-gradient(90deg, #c9a227, #e6c547);
}

.correctif-view-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid rgba(201, 162, 39, 0.4);
  background: #fff9e6;
  color: #6b5410;
  font-size: 14px;
  font-weight: 600;
}

.fields.readonly-correctif input,
.fields.readonly-correctif textarea,
.fields.readonly-correctif select,
.fields.readonly-correctif button {
  pointer-events: none;
  opacity: 0.92;
}

.sujet-lock {
  margin-right: 4px;
  font-size: 12px;
}

.sujet-del-btn {
  color: #9b2c2c;
}

.sujet-del-btn:hover {
  background: #fde8e8;
}

.sujet-empty {
  padding: 16px;
  border: 1px dashed var(--paper-3);
  border-radius: var(--r);
}

/* ── Modal sujets (CRUD enseignant) ───────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(28, 27, 46, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.hidden {
  display: none;
}

.modal-card {
  background: #fff;
  border-radius: var(--r);
  border: 1px solid var(--paper-3);
  box-shadow: 0 12px 40px rgba(28, 27, 46, 0.18);
  width: min(520px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 0;
}

.modal-head h2 {
  margin: 0;
  font-size: 18px;
}

.sujet-form {
  padding: 14px 18px 18px;
}

.sujet-correctif-fieldset {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  background: var(--paper);
}

.sujet-correctif-fieldset legend {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  padding: 0 4px;
}

.modal-actions {
  margin-top: 16px;
  justify-content: flex-end;
}

.sujets-admin-toolbar {
  margin-bottom: 12px;
}

.sujets-admin-table .sujet-corr-cell {
  font-size: 12px;
  color: var(--ink-3);
  max-width: 220px;
}

@media (max-width: 720px) {
  .sujet-list li {
    flex-direction: column;
    align-items: stretch;
  }

  .sujet-item-actions {
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid var(--paper-3);
  }
}

.progress-bar {
  height: 7px;
  background: var(--paper-2);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0 4px;
}

.progress-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  border-radius: 4px;
  transition: width 0.25s ease;
}

/* ── Chevrons Adaptia (workflow dissertation) ───────────── */
.wizard-flow {
  margin: 0 0 20px;
  padding: 14px 14px 8px;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
}

.wizard-flow-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.wizard-chevrons {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--paper-3) transparent;
  padding: 4px 2px 10px;
  filter: drop-shadow(0 2px 5px rgba(28, 27, 46, 0.1));
}

.wizard-chevrons::-webkit-scrollbar {
  height: 5px;
}

.wizard-chevrons::-webkit-scrollbar-thumb {
  background: var(--paper-3);
  border-radius: 3px;
}

.wiz-chev {
  flex: 0 0 auto;
  min-width: 0;
  position: relative;
  z-index: 1;
  padding: 10px 18px 10px 28px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  user-select: none;
  background: var(--c, var(--accent));
  opacity: 0.55;
  font-weight: 700;
  font-size: 12px;
  border: none;
  font-family: inherit;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 12px 50%);
  margin-left: -12px;
  transition: opacity 0.15s, filter 0.15s, transform 0.15s;
  box-shadow: 0 1px 3px rgba(28, 27, 46, 0.12);
}

.wiz-chev:first-child {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  margin-left: 0;
  border-radius: 8px 0 0 8px;
}

.wiz-chev:last-child {
  border-radius: 0 8px 8px 0;
  padding-right: 20px;
}

.wiz-chev:nth-child(1) { z-index: 1; }
.wiz-chev:nth-child(2) { z-index: 2; }
.wiz-chev:nth-child(3) { z-index: 3; }
.wiz-chev:nth-child(4) { z-index: 4; }
.wiz-chev:nth-child(5) { z-index: 5; }
.wiz-chev:nth-child(6) { z-index: 6; }
.wiz-chev:nth-child(7) { z-index: 7; }
.wiz-chev:nth-child(8) { z-index: 8; }
.wiz-chev:nth-child(9) { z-index: 9; }
.wiz-chev:nth-child(10) { z-index: 10; }
.wiz-chev:nth-child(11) { z-index: 11; }
.wiz-chev:nth-child(12) { z-index: 12; }
.wiz-chev:nth-child(13) { z-index: 13; }
.wiz-chev:nth-child(14) { z-index: 14; }

.wiz-chev:hover {
  opacity: 0.88;
  z-index: 30;
  transform: translateY(-1px);
}

.wiz-chev.done {
  opacity: 0.92;
}

.wiz-chev.current {
  opacity: 1;
  filter: brightness(1.06);
  transform: translateY(-1px);
  z-index: 25;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.55),
    0 0 0 4px var(--c, var(--accent)),
    0 2px 6px rgba(28, 27, 46, 0.15);
}

.wiz-chev .wiz-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.wiz-chev.done .wiz-n {
  background: rgba(255, 255, 255, 0.4);
}

.wiz-chev.gem-ok {
  box-shadow: 0 0 0 2px rgba(46, 160, 100, 0.55) inset;
}

.wiz-chev.gem-ok .wiz-n {
  background: #2ea064;
  color: #fff;
}

.wiz-chev.gem-warn {
  box-shadow: 0 0 0 2px rgba(214, 140, 40, 0.6) inset;
}

.wiz-chev.gem-warn .wiz-n {
  background: #d68c28;
  color: #fff;
}

.wiz-chev .wiz-lbl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9.5em;
}

.phase-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
}

.phase-legend button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.phase-legend button:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.04);
}

.phase-legend button:focus-visible {
  outline: 2px solid var(--accent, #2aa3b8);
  outline-offset: 2px;
}

.phase-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.phase-legend .lg-intro i { background: var(--phase-intro); }
.phase-legend .lg-dev i { background: var(--phase-dev); }
.phase-legend .lg-conc i { background: var(--phase-conc); }

.phase-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: var(--r);
  margin-bottom: 10px;
}

.sujet-banner {
  font-family: var(--font-d);
  font-size: 19px;
  font-style: italic;
  color: var(--ink-2);
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--paper-3);
  margin-bottom: 16px;
  line-height: 1.4;
}

/* ── Boîtes d'aide (méthodo / exos / méthodes / réflexion) ─ */
.help-box {
  margin-bottom: var(--space-section);
}

.help-box > .help-box-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 12px 14px 12px 40px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

.help-box > .help-box-summary::-webkit-details-marker {
  display: none;
}

.help-box > .help-box-summary::marker {
  content: "";
}

.help-box > .help-box-summary::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s ease;
}

.help-box[open] > .help-box-summary::before {
  transform: translateY(-30%) rotate(225deg);
}

.help-box > .help-box-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.help-box-title {
  font-weight: 700;
  color: var(--ink);
}

.help-box-hint {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

.help-box-body {
  padding: 0 16px 16px;
}

.help-box:not([open]) > .help-box-summary {
  margin-bottom: 0;
}

/* ── Méthodologie ───────────────────────────────────────── */
.methodo {
  background: linear-gradient(180deg, #f4faf6 0%, #eef6f1 100%);
  border: 1px solid var(--accent-soft-2);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 0;
  margin-bottom: var(--space-section);
  font-size: 14.5px;
  color: var(--ink-2);
}

.methodo > .methodo-head,
.methodo > .help-box-summary.methodo-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.methodo > .help-box-summary.methodo-head::after {
  content: none;
}

.methodo[open] > .help-box-summary.methodo-head {
  margin-bottom: 4px;
}

.methodo strong,
.methodo b {
  color: var(--ink);
  font-weight: 700;
}

.fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.multi-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  max-height: 220px;
  overflow-y: auto;
}

.multi-box label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-2);
  padding: 4px 0;
}

.tags-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
}

.tag button {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1;
}

.tag-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

/* ── Réservoir dynamique (concepts / actions / idées) ── */
.pool-panel {
  margin: 0 0 18px;
  padding: 14px 16px 16px;
  background:
    linear-gradient(135deg, rgba(42, 163, 184, 0.08) 0%, transparent 42%),
    var(--white);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--r);
  box-shadow: var(--sh);
}

.pool-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pool-title {
  font-family: var(--font-d);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.pool-lead {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 2px;
  max-width: 36em;
}

.pool-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}

.pool-panel.pool-collapsed .pool-head {
  margin-bottom: 0;
}

.pool-panel.pool-collapsed .pool-lead,
.pool-panel.pool-collapsed .pool-tabs,
.pool-panel.pool-collapsed .pool-body,
.pool-panel.pool-collapsed .pool-add,
.pool-panel.pool-collapsed .pool-proposals,
.pool-panel.pool-collapsed .pool-actions-wrap {
  display: none;
}

.pool-actions-wrap {
  position: relative;
  flex-shrink: 0;
}

.pool-actions-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  box-shadow: var(--sh-lg, 0 8px 24px rgba(28, 27, 46, 0.12));
  z-index: 12;
}

.pool-actions-menu.hidden {
  display: none;
}

.pool-actions-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: calc(var(--r) - 2px);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

.pool-actions-item:hover,
.pool-actions-item:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.pool-bridge-btn {
  margin-top: 6px;
  font-size: 12px;
}

.pool-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.pool-tab {
  border: 1px solid var(--paper-3);
  background: var(--paper);
  color: var(--ink-2);
  padding: 6px 12px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-b);
}

.pool-tab:hover {
  border-color: var(--accent-3);
}

.pool-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent-2);
  color: var(--accent);
}

.pool-count {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 4px;
  background: rgba(28, 27, 46, 0.08);
  font-size: 11px;
  font-weight: 700;
}

.pool-tab.active .pool-count {
  background: rgba(45, 106, 79, 0.18);
}

.pool-body {
  min-height: 48px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.pool-empty {
  padding: 8px 0;
}

.pool-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pool-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  animation: poolIn 0.28s ease;
}

@keyframes poolIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pool-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pool-item-main strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.pool-detail {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.35;
}

.pool-src {
  font-size: 11px;
  color: var(--phase-intro);
  font-weight: 600;
  text-transform: lowercase;
}

.pool-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.pool-add {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.pool-add input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  font: inherit;
  background: var(--white);
}

.pool-proposals {
  margin-top: 12px;
  padding: 12px;
  background: var(--warn-soft);
  border: 1px solid #e8d4b8;
  border-radius: var(--r);
  animation: poolIn 0.3s ease;
}

.pool-proposals.hidden {
  display: none;
}

.pool-prop-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.pool-prop-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.pool-prop-list label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  cursor: pointer;
}

.pool-prop-list small {
  display: block;
  color: var(--ink-3);
  font-size: 12px;
  margin-top: 2px;
}

.pool-prop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-pool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 14px;
}

.pool-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--paper-3);
}

.gemini-check-panel {
  margin-top: 18px;
}

.gemini-check-empty {
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
  margin: 0;
}

.gemini-check-result {
  border-radius: var(--r);
  padding: 14px 16px;
  border-left: 4px solid var(--accent);
  background: #f8faf9;
}

.gemini-check-result.gemini-check-ok {
  border-left-color: #2ea064;
  background: #f2faf5;
}

.gemini-check-result.gemini-check-warn {
  border-left-color: #d68c28;
  background: #fdf7ee;
}

.gemini-check-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.gemini-check-score {
  font-weight: 800;
  font-size: 15px;
}

.gemini-check-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}

.gemini-check-feedback {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 8px;
}

.gemini-check-sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 8px 0 2px;
}

.gemini-check-result ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  z-index: 50;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table th,
.table td {
  text-align: left;
  padding: 11px 10px;
  border-bottom: 1px solid var(--paper-3);
  vertical-align: top;
}

.table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-weight: 700;
  background: var(--paper);
}

.table tbody tr:hover td {
  background: rgba(216, 243, 220, 0.35);
}

.pct {
  font-weight: 700;
  color: var(--ok);
}

.pct.low {
  color: var(--warn);
}

.pct.zero {
  color: var(--ink-3);
}

.roster-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
}

.roster-form label {
  flex: 1;
  min-width: 140px;
}

.hidden {
  display: none !important;
}

.detail-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 12px;
}

.detail-steps span {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--paper-2);
  color: var(--ink-3);
  font-weight: 600;
}

.detail-steps span.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.detail-block {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--paper-3);
}

.detail-block:last-child {
  border-bottom: none;
}

.detail-answers details {
  margin: 8px 0;
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  background: var(--paper);
  overflow: hidden;
}

.detail-answers summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-answers summary::-webkit-details-marker {
  display: none;
}

.detail-answers summary::before {
  content: "";
  width: 8px;
  height: 12px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  flex-shrink: 0;
  transition: transform 0.15s;
}

.detail-answers details[open] summary::before {
  transform: rotate(90deg);
}

.detail-answers details[open] summary {
  border-bottom: 1px solid var(--paper-3);
  background: var(--accent-soft);
}

.detail-answers .answer-list {
  margin: 0;
  padding: 10px 12px 12px;
}

.stu-diss-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  padding: 0;
}

.stu-diss-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px 10px;
  align-items: baseline;
  font-size: 12px;
  color: var(--ink-2);
  padding: 6px 8px;
  background: var(--paper);
  border-radius: 4px;
  border-left: 3px solid var(--accent-soft-2);
}

.stu-diss-list > li.stu-diss-empty {
  display: block;
  color: var(--ink-3);
  font-style: italic;
  border-left-color: var(--paper-3);
}

.stu-diss-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stu-diss-meta {
  color: var(--ink-3);
  font-size: 11px;
  white-space: nowrap;
}

.teacher-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #f4faf6 0%, var(--paper) 100%);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--r);
}

@media (max-width: 768px) {
  .wizard-chevrons {
    gap: 6px;
    filter: none;
    padding-bottom: 8px;
  }

  .wiz-chev,
  .wiz-chev:first-child,
  .wiz-chev:last-child {
    clip-path: none;
    margin: 0;
    border-radius: 10px;
    padding: 9px 12px;
    opacity: 0.6;
    box-shadow: none;
  }

  .wiz-chev.current {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 0 3px var(--c, var(--accent));
    transform: none;
  }

  .wiz-chev .wiz-lbl {
    display: none;
  }

  .wiz-chev.current .wiz-lbl {
    display: inline;
    max-width: 10em;
  }
}

@media (max-width: 640px) {
  .app {
    padding: 14px 12px 56px;
  }

  .panel {
    padding: 18px 16px;
    border-radius: 10px;
  }

  .panel h1 {
    font-size: 22px;
  }

  .sujet-list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .brand {
    font-size: 20px;
  }
}

/* ── Méthodes (Problématiser) ───────────────────────────── */
.methods-panel {
  margin: 14px 0 var(--space-section);
  padding: 0;
  background: linear-gradient(165deg, #f4faf6 0%, #e8f5ee 55%, #e2f0e8 100%);
  border: 1px solid var(--accent-soft-2);
  border-left: 4px solid var(--accent-2);
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: var(--sh);
}

.methods-panel .methods-head,
.methods-panel .help-box-title.methods-head {
  font-family: var(--font-d);
  font-size: 17px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0;
  letter-spacing: -0.01em;
  text-transform: none;
}

.methods-lead {
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 10px;
}

.methods-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: meth;
  margin: 0 0 10px;
  padding: 0;
}

.methods-list > li {
  counter-increment: meth;
  position: relative;
  padding: 10px 12px 10px 44px;
  background: rgba(255, 252, 248, 0.9);
  border: 1px solid var(--accent-soft-2);
  border-radius: 8px;
}

.methods-list > li::before {
  content: counter(meth);
  position: absolute;
  left: 10px;
  top: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.methods-title {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
}

.methods-text {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.methods-note {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-3);
  margin: 0;
}

/* ── Badge pilule « À venir » (aligné accueil.css) ─────── */
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  line-height: 1.3;
  border: 1px solid transparent;
  flex-shrink: 0;
}

.badge--soon {
  background: linear-gradient(180deg, var(--warn-soft) 0%, #ebe0d0 100%);
  color: var(--warn);
  border-color: #dcc9b0;
}

.badge--exo {
  background: linear-gradient(180deg, var(--accent-soft) 0%, #c8e6d0 100%);
  color: var(--accent);
  border-color: var(--accent-soft-2);
}

.exercises-hub-lead {
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 10px;
}

.exercises-hub-more {
  margin-top: 12px;
  font-size: 14px;
}

.exercises-hub-link {
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

.exercises-hub-link:hover {
  text-decoration: underline;
}

.exercises-hub-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  text-decoration: none;
}

/* ── Exercices contextuels (par étape) ───────────────────── */
.exercises-panel {
  margin: 0 0 var(--space-section);
  padding: 0;
  background:
    linear-gradient(135deg, rgba(45, 106, 79, 0.06) 0%, transparent 45%),
    var(--white);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--r);
  box-shadow: var(--sh);
}

.exercises-panel--soon {
  opacity: 0.88;
  background:
    linear-gradient(135deg, rgba(154, 91, 36, 0.05) 0%, transparent 45%),
    var(--paper-2);
  border-color: #dcc9b0;
}

.exercises-panel .exercises-title,
.exercises-panel .help-box-title.exercises-title {
  font-family: var(--font-d);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: none;
}

.exercises-empty-text {
  margin: 0;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink-3);
  background: var(--paper);
  border: 1px dashed var(--paper-3);
  border-radius: var(--r);
  text-align: center;
}

.exercises-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exercises-list > li {
  margin: 0;
}

.exercises-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.exercises-link:hover {
  border-color: var(--accent-2);
  background: var(--accent-soft);
  box-shadow: 0 1px 4px rgba(45, 106, 79, 0.1);
}

.exercises-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.exercises-link-title {
  flex: 1;
  min-width: 0;
}

.exercises-link-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 12px;
  margin-right: 10px;
  vertical-align: -1px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.exercises-duration {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* ── Scrollbars discrètes (wizard dissertation) ─────────── */
#wizard-sidebar,
.pool-body,
.pool-prop-list,
.draft-section-body,
.multi-box,
.modal-card {
  scrollbar-width: thin;
  scrollbar-color: var(--paper-3) transparent;
}

#wizard-sidebar::-webkit-scrollbar,
.pool-body::-webkit-scrollbar,
.pool-prop-list::-webkit-scrollbar,
.draft-section-body::-webkit-scrollbar,
.multi-box::-webkit-scrollbar,
.modal-card::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#wizard-sidebar::-webkit-scrollbar-track,
.pool-body::-webkit-scrollbar-track,
.pool-prop-list::-webkit-scrollbar-track,
.draft-section-body::-webkit-scrollbar-track,
.multi-box::-webkit-scrollbar-track,
.modal-card::-webkit-scrollbar-track {
  background: transparent;
}

#wizard-sidebar::-webkit-scrollbar-thumb,
.pool-body::-webkit-scrollbar-thumb,
.pool-prop-list::-webkit-scrollbar-thumb,
.draft-section-body::-webkit-scrollbar-thumb,
.multi-box::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb {
  background: var(--paper-3);
  border-radius: 4px;
}

#wizard-sidebar::-webkit-scrollbar-thumb:hover,
.pool-body::-webkit-scrollbar-thumb:hover,
.pool-prop-list::-webkit-scrollbar-thumb:hover,
.draft-section-body::-webkit-scrollbar-thumb:hover,
.multi-box::-webkit-scrollbar-thumb:hover,
.modal-card::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink-3) 40%, var(--paper-3));
}

/* ── Exercices contextuels — colonne droite wizard ─────── */
.wizard-sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wizard-sidebar-right > #pool-panel:empty {
  display: none;
}

.exercises-sidebar-panel {
  margin: 0;
  padding: 14px 16px 16px;
  background:
    linear-gradient(135deg, rgba(45, 106, 79, 0.06) 0%, transparent 45%),
    var(--white);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--r);
  box-shadow: var(--sh);
}

.exercises-sidebar-panel--soon {
  opacity: 0.88;
  background:
    linear-gradient(135deg, rgba(154, 91, 36, 0.05) 0%, transparent 45%),
    var(--paper-2);
  border-color: #dcc9b0;
}

.exercises-sidebar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.exercises-sidebar-panel.exercises-collapsed .exercises-sidebar-head {
  margin-bottom: 0;
}

.exercises-sidebar-panel.exercises-collapsed .exercises-sidebar-lead,
.exercises-sidebar-panel.exercises-collapsed .exercises-sidebar-body {
  display: none;
}

.exercises-sidebar-panel .exercises-title {
  font-family: var(--font-d);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.exercises-sidebar-lead {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 2px 0 0;
  max-width: 22em;
}

.exercises-sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.exercises-sidebar-body .exercises-hub-lead {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}

.exercises-sidebar-body .exercises-empty-text {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  text-align: left;
}

.exercises-sidebar-body .exercises-hub-cta {
  width: 100%;
  justify-content: center;
  margin-top: 0;
}

.exercises-featured {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.exercises-featured > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  font-size: 13px;
}

.exercises-featured-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.wizard-sidebar-right .pool-panel,
.wizard-sidebar-right .exercises-sidebar-panel,
.wizard-sidebar-right .draft-panel {
  margin-bottom: 0;
}

.badge--exo {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ── Éléments de réflexion (Reformuler) ─────────────────── */
.reflection-panel {
  margin: 14px 0 var(--space-section);
  padding: 0;
  background: linear-gradient(165deg, #f2f7fa 0%, #e8f0f5 55%, #e4edf3 100%);
  border: 1px solid #c5d4e0;
  border-left: 4px solid var(--phase-conc);
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: var(--sh);
}

.reflection-panel .reflection-head,
.reflection-panel .help-box-title.reflection-head {
  font-family: var(--font-d);
  font-size: 17px;
  font-weight: 600;
  color: var(--phase-conc);
  margin-bottom: 0;
  letter-spacing: -0.01em;
  text-transform: none;
}

.reflection-panel .help-box-body .reflection-list,
.reflection-panel .help-box-body .reflection-empty {
  margin-top: 2px;
}

.reflection-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reflection-list > li {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #c5d6e4;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

.reflection-list > li b {
  color: var(--ink);
}

.reflection-empty {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ── Stage banners (vrac / classer / ordonner) ──────────── */
.stage-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 8px 0 12px;
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
}

.stage-banner.stage-vrac {
  border-left-color: #b86a2a;
  background: var(--warn-soft);
}

.stage-banner.stage-classer {
  border-left-color: var(--phase-intro);
  background: #e4f4f7;
}

.stage-banner.stage-ordonner {
  border-left-color: var(--phase-dev);
  background: var(--accent-soft);
}

.stage-label {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.stage-hint {
  font-size: 13.5px;
  color: var(--ink-2);
}

/* ── Concept vocab cards ────────────────────────────────── */
.field-block {
  display: block;
}

.field-label {
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

.vocab-hint {
  margin-bottom: 12px;
}

.vocab-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 10px;
}

.vocab-card {
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: 10px;
  box-shadow: var(--sh);
}

.vocab-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.vocab-card-head label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}

.vocab-card-head input {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 10px;
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  background: var(--paper);
}

.vocab-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 13px;
}

.vocab-table th,
.vocab-table td {
  padding: 4px;
  vertical-align: middle;
}

.vocab-table thead th {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
  text-align: center;
}

.vocab-table tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  padding-right: 8px;
  width: 1%;
}

.vocab-table input {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--paper-3);
  border-radius: 6px;
  font: inherit;
  background: var(--paper);
}

.vocab-def {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}

.vocab-def textarea {
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  padding: 8px 10px;
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  background: var(--paper);
  resize: vertical;
  min-height: 64px;
}

/* ── Theses board (classer / ordonner) ──────────────────── */
.theses-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.theses-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 820px) {
  .theses-board {
    grid-template-columns: 1fr;
  }
}

.thesis-col {
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: 10px;
  padding: 12px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.thesis-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}

.thesis-title input {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  padding: 8px;
  border: 1px solid var(--paper-3);
  border-radius: 6px;
  background: var(--paper);
}

.thesis-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  margin: 0;
  padding: 0;
  min-height: 60px;
}

.thesis-list > li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.35;
}

.thesis-empty {
  color: var(--ink-3);
  font-style: italic;
  border-style: dashed !important;
  background: transparent !important;
}

.thesis-item-label {
  flex: 1;
  min-width: 0;
}

.thesis-item-actions {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
}

.thesis-add select {
  width: 100%;
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px dashed var(--accent-2);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--ink-2);
}

.answer-pre {
  display: block;
  white-space: pre-wrap;
  font: inherit;
  margin: 4px 0 0;
  color: var(--ink-2);
}

/* ── Notices méthodo (Terminale & CPGE) ─────────────────── */
.doc-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  text-align: left;
}
.doc-link-btn:hover { border-bottom-color: var(--accent); }

.notice-hint { margin: 12px 0 0; }

.notice-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 18px;
}
.notice-tab {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r);
  border: 1px solid var(--paper-3);
  background: var(--white);
  color: var(--ink-2);
  cursor: pointer;
}
.notice-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.notice-tab:hover:not(.active) { border-color: var(--accent-2); color: var(--accent); }

.forme-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.forme-chip {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--r);
  border: 1px solid var(--paper-3);
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: pointer;
}
.forme-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent-2);
  color: var(--accent);
}

.forme-card {
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: var(--sh);
}
.forme-card h3 {
  font-family: var(--font-d);
  font-size: 20px;
  margin-bottom: 8px;
}
.forme-card h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin: 14px 0 6px;
}
.forme-sens { color: var(--ink-2); }
.forme-ns {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--warn-soft);
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 14px;
}

.notice-box {
  background: var(--paper-2);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-top: 14px;
}
.notice-box-head {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 8px;
}
.notice-box.retain { border-left: 3px solid var(--ok); }
.notice-box.avoid { border-left: 3px solid var(--warn); }
.notice-box ul, .forme-card ul, .notice-body ul {
  padding-left: 1.15em;
  margin: 0;
}
.notice-box li, .forme-card li { margin: 4px 0; }

.ns-grid, .methods-grid, .plan-schemas, .niveau-grid, .redaction-cols, .retain-avoid {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}
.ns-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.methods-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.plan-schemas { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.niveau-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.redaction-cols { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.retain-avoid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.ns-card, .method-card, .plan-schema, .niveau-card {
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  padding: 14px;
  box-shadow: var(--sh);
}
.ns-term, .plan-label {
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}
.method-n {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  margin-right: 6px;
}
.niveau-card.term { border-top: 3px solid var(--phase-intro); }
.niveau-card.cpge { border-top: 3px solid var(--phase-conc); }

.notice-tip {
  padding: 10px 12px;
  background: var(--accent-soft);
  border-radius: var(--r);
  font-size: 14px;
}
.notice-tip.warn { background: var(--warn-soft); }
.notice-ol { padding-left: 1.2em; margin: 8px 0 14px; }
.notice-ol li { margin: 6px 0; }

.checklist { list-style: none; padding: 0; margin: 0; }
.check-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  font-weight: 500;
  cursor: pointer;
}
.check-item input { margin-top: 3px; accent-color: var(--accent); }

.source-list { list-style: none; padding: 0; }
.source-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--paper-3);
}
.source-kind {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* ── Brouillon assemblé (intro / plan / conclusion progressifs) ── */
.draft-panel {
  margin: 0 0 var(--space-section);
  padding: 16px 18px 18px;
  background:
    linear-gradient(160deg, rgba(30, 77, 107, 0.06) 0%, transparent 48%),
    var(--white);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  box-shadow: var(--sh);
}

.draft-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.draft-title {
  font-family: var(--font-d);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.draft-lead {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 2px;
  max-width: 40em;
}

.draft-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.draft-panel.draft-collapsed .draft-head {
  margin-bottom: 0;
}

.draft-panel.draft-collapsed .draft-lead,
.draft-panel.draft-collapsed .draft-body {
  display: none;
}

.draft-body {
  display: grid;
  gap: 12px;
}

.draft-section {
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  background: var(--paper);
  overflow: hidden;
}

.draft-section.draft-intro {
  border-left: 3px solid var(--phase-intro);
}

.draft-section.draft-plan {
  border-left: 3px solid var(--phase-dev);
}

.draft-section.draft-conc {
  border-left: 3px solid var(--phase-conc);
}

.draft-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 252, 248, 0.7);
  border-bottom: 1px solid var(--paper-3);
}

.draft-section-head h3 {
  font-family: var(--font-d);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

.draft-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.draft-status-building .draft-badge,
.draft-status-dense .draft-badge {
  color: var(--accent);
  background: var(--accent-soft);
}

.draft-status-empty .draft-badge {
  color: var(--ink-3);
}

.draft-section-body {
  padding: 10px 12px 12px;
}

.draft-placeholder {
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
}

.draft-piece {
  margin-bottom: 10px;
}

.draft-piece:last-child {
  margin-bottom: 0;
}

.draft-piece-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 3px;
}

.draft-piece-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  white-space: normal;
}

.draft-prep .draft-piece-label {
  color: var(--ink-3);
}

.draft-prep .draft-piece-text {
  color: var(--ink-2);
  font-size: 13px;
}

.draft-args {
  margin: 4px 0 0 1.1em;
  font-size: 13px;
}

.draft-args li {
  margin-bottom: 2px;
}

.draft-sub {
  font-size: 13px;
  margin-top: 6px;
  color: var(--ink-2);
}

.draft-trans {
  border-left: 2px solid var(--phase-dev);
  padding-left: 8px;
}

.draft-plan-meta {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.draft-full-page .draft-full-body {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.draft-full-page .draft-section-body {
  max-height: none;
}

@media (min-width: 1100px) {
  .app {
    max-width: 1180px;
  }

  .panel:has(#wizard-sidebar) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    column-gap: 20px;
    align-items: start;
  }

  .panel:has(#wizard-sidebar) > .btn,
  .panel:has(#wizard-sidebar) > .sujet-banner,
  .panel:has(#wizard-sidebar) > .progress-bar,
  .panel:has(#wizard-sidebar) > .hint,
  .panel:has(#wizard-sidebar) > .wizard-flow,
  .panel:has(#wizard-sidebar) > .phase-tag,
  .panel:has(#wizard-sidebar) > h2,
  .panel:has(#wizard-sidebar) > .stage-banner,
  .panel:has(#wizard-sidebar) > .correctif-view-banner,
  .panel:has(#wizard-sidebar) > .methodo,
  .panel:has(#wizard-sidebar) > .methods-panel,
  .panel:has(#wizard-sidebar) > .reflection-panel,
  .panel:has(#wizard-sidebar) > .fields,
  .panel:has(#wizard-sidebar) > .actions {
    grid-column: 1;
  }

  .panel:has(#wizard-sidebar) > #wizard-sidebar {
    grid-column: 2;
    grid-row: 1 / span 20;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow: auto;
    z-index: 2;
  }

  .draft-section-body {
    max-height: 220px;
    overflow: auto;
  }

  .wizard-tools-fab,
  .wizard-tools-backdrop {
    display: none !important;
  }
}

/* Tablette / mobile : accès flottant au réservoir, exercices et brouillon */
@media (max-width: 1099.98px) {
  .wizard-tools-fab {
    position: fixed;
    right: 16px;
    bottom: 18px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--accent-soft-2);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 8px 24px rgba(28, 42, 36, 0.18);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  .wizard-tools-fab .nav-ico {
    flex-shrink: 0;
  }

  .wizard-tools-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 38;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(20, 28, 24, 0.42);
    cursor: pointer;
  }

  body.wizard-tools-open .wizard-tools-backdrop {
    display: block;
  }

  .panel:has(#wizard-sidebar) > #wizard-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 92vw);
    z-index: 42;
    margin: 0;
    padding: 16px 14px 28px;
    background: var(--paper);
    border-left: 1px solid var(--paper-3);
    box-shadow: -8px 0 28px rgba(20, 28, 24, 0.18);
    overflow: auto;
    transform: translateX(105%);
    transition: transform 0.22s ease;
  }

  body.wizard-tools-open .panel:has(#wizard-sidebar) > #wizard-sidebar {
    transform: translateX(0);
  }
}

@media print {
  body.print-checklist .topbar,
  body.print-checklist .notice-tabs,
  body.print-checklist #btn-back-notices,
  body.print-checklist #btn-print-checklist { display: none !important; }
  body.print-checklist .notices-panel { box-shadow: none; border: none; }
  .wizard-tools-fab,
  .wizard-tools-backdrop { display: none !important; }
}

/* ── Espace professeur (styles dédiés — ne pas fusionner avec le wizard) ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.track-crosslinks {
  margin: 12px 0 0;
}

.login-panel .lead strong {
  color: var(--accent);
  font-weight: 700;
}

.login-layout {
  display: grid;
  gap: 18px;
  margin-top: 4px;
}

@media (min-width: 720px) {
  .login-layout {
    grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
    align-items: start;
  }
}

.login-roles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-role {
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
}

.login-role-teacher {
  background: linear-gradient(165deg, #f4faf6 0%, var(--paper) 100%);
  border-color: var(--accent-soft-2);
  border-left: 4px solid var(--accent);
}

.login-role-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.login-role-teacher .login-role-label {
  color: var(--accent);
}

.login-role p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.login-role code {
  font-size: 11px;
  background: var(--white);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--paper-3);
}

.teacher-panel {
  padding-bottom: 32px;
}

.teacher-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}

.teacher-stat {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  text-align: left;
}

.teacher-stat-value {
  display: block;
  font-family: var(--font-d);
  font-size: 26px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.teacher-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.35;
}

.teacher-toolbar-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.teacher-toolbar-copy strong {
  font-size: 14px;
  color: var(--ink);
}

.teacher-toolbar-copy span {
  font-size: 12.5px;
  color: var(--ink-3);
}

.teacher-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.teacher-help {
  margin: 0 0 22px;
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  background: var(--white);
  overflow: hidden;
}

.teacher-help > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
}

.teacher-help > summary::-webkit-details-marker {
  display: none;
}

.teacher-help > summary::before {
  content: "";
  width: 8px;
  height: 12px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  flex-shrink: 0;
  transition: transform 0.15s;
}

.teacher-help[open] > summary::before {
  transform: rotate(90deg);
}

.teacher-help[open] > summary {
  border-bottom: 1px solid var(--paper-3);
}

.teacher-help .styled-list {
  margin: 0;
  padding: 12px 14px 14px;
}

.teacher-help code {
  font-size: 11px;
  background: var(--paper-2);
  padding: 1px 5px;
  border-radius: 3px;
}

.teacher-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin: 18px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--paper-3);
}

.teacher-help + .teacher-section-head {
  margin-top: 8px;
}

.teacher-section-head h2 {
  margin-bottom: 0;
}

.teacher-section-hint {
  margin: 0;
  max-width: 42ch;
  text-align: right;
}

.teacher-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  background: var(--white);
}

.teacher-table {
  margin: 0;
}

.teacher-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.teacher-table tbody tr:last-child td {
  border-bottom: none;
}

.teacher-stu-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
}

.teacher-stu-code {
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-3);
}

.teacher-stu-code code {
  font-size: 11px;
  background: var(--paper-2);
  padding: 1px 5px;
  border-radius: 3px;
}

.teacher-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-2);
}

.teacher-pct-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.teacher-mini-bar {
  flex: 1;
  min-width: 64px;
  max-width: 120px;
  height: 6px;
  margin: 0;
}

.teacher-date {
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.teacher-actions-cell {
  white-space: nowrap;
  text-align: right;
}

.teacher-detail-panel {
  border-left: 4px solid var(--accent);
}

.teacher-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.teacher-detail-head h2 {
  margin-bottom: 0;
}

.detail-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 4px;
}

.detail-block-head h3 {
  margin-bottom: 0;
}

.detail-block-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}

.detail-note {
  margin-bottom: 16px;
  font-size: 14.5px;
}

.roster-form {
  background: linear-gradient(180deg, var(--paper) 0%, #f3f1ec 100%);
  border-color: var(--accent-soft-2);
  margin-bottom: 22px;
}

@media (max-width: 720px) {
  .teacher-stats {
    grid-template-columns: 1fr;
  }

  .teacher-section-hint {
    text-align: left;
  }

  .stu-diss-list > li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .stu-diss-meta {
    grid-column: 1;
  }
}

/* ── Suivi élèves (espace professeur) ───────────────────── */
.teacher-track-panel {
  padding-bottom: 36px;
}

.track-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 28px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--paper-3);
}

.track-page-head h1 {
  margin-bottom: 6px;
}

.track-lead {
  margin-bottom: 0;
  max-width: 52ch;
}

.track-lead strong {
  color: var(--accent);
  font-weight: 700;
}

.track-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.track-summary-item {
  min-width: 88px;
  padding: 12px 16px;
  background: linear-gradient(165deg, #f4faf6 0%, var(--paper) 100%);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--r);
  text-align: center;
}

.track-summary-value {
  display: block;
  font-family: var(--font-d);
  font-size: 24px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.1;
}

.track-summary-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.track-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--paper-3);
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--sh);
}

.track-table tbody tr {
  transition: background 0.15s ease;
}

.track-table .track-cell-subject {
  max-width: 220px;
}

.track-subject {
  font-family: var(--font-d);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.track-subject-count {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
}

.track-student {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.track-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.track-student-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

.track-student-code {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-3);
}

.track-student-code code {
  font-size: 11px;
  background: var(--paper-2);
  padding: 1px 5px;
  border-radius: 3px;
}

.track-step {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.track-step-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-3);
}

.track-progress-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.track-progress-bar {
  min-width: 100px;
  max-width: 140px;
  height: 8px;
  margin: 0;
}

.track-cell-date,
.track-date {
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.track-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.track-badge--empty {
  background: var(--paper-2);
  color: var(--ink-3);
  border-color: var(--paper-3);
}

.track-badge--started {
  background: #eef4f8;
  color: var(--phase-conc);
  border-color: #c5d4e0;
}

.track-badge--active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-soft-2);
}

.track-badge--review {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: #dcc9b0;
}

.track-badge--done {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: var(--accent-soft-2);
}

.track-row--empty td {
  opacity: 0.92;
}

.track-cards {
  display: none;
  flex-direction: column;
  gap: 14px;
}

.track-card {
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: 12px;
  box-shadow: var(--sh);
  overflow: hidden;
}

.track-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #faf9f6 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--paper-3);
}

.track-card-body {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
}

.track-card-field {
  display: grid;
  gap: 4px;
}

.track-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.track-card-foot {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--paper-3);
  background: var(--paper);
}

.track-card-foot .btn {
  width: 100%;
}

.track-empty {
  text-align: center;
  padding: 48px 24px;
  background: linear-gradient(180deg, var(--paper) 0%, #f3f1ec 100%);
  border: 1px dashed var(--paper-3);
  border-radius: 12px;
}

.track-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.track-empty-icon .nav-ico {
  width: 24px;
  height: 24px;
}

.track-empty h2 {
  font-family: var(--font-d);
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--ink);
}

.track-empty p {
  margin: 0 auto;
  max-width: 40ch;
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.55;
}

.track-empty--inline {
  padding: 28px 20px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .track-table-wrap {
    display: none;
  }

  .track-cards {
    display: flex;
  }

  .track-page-head {
    flex-direction: column;
  }

  .track-summary {
    width: 100%;
  }

  .track-summary-item {
    flex: 1;
  }
}

@media (min-width: 1100px) {
  .app:has(.teacher-track-panel) {
    max-width: 1180px;
  }
}