/* ===== Lab Candidat Libre — Design System ===== */
/* Thème « Cahier d'examen » : encre bleu-nuit + rouge correction sur papier réglé. */
:root {
  --bg: #FCFAF4;        /* papier crème */
  --bg-2: #F3EFE3;
  --paper: #FFFFFF;     /* feuille blanche posée sur le papier */
  --ink: #1C2A3A;       /* encre bleu-nuit */
  --ink-2: #41536A;
  --muted: #978F7E;
  --line: #E8E1D0;
  --line-strong: #D3C9B2;

  --teal: #1f6f4a;      /* VERT FORÊT — couleur primaire (nom hérité « teal ») */
  --teal-2: #154d35;    /* vert foncé (hover) */
  --teal-soft: #DCEBE2;
  --terra: #D7263D;     /* ROUGE CORRECTION — accent (nom hérité) */
  --terra-soft: #FBD9DD;
  --sage: #4F7A5E;      /* vert « validé » */
  --sage-soft: #DEE9DF;
  --amber: #C8881F;     /* ocre surligneur */
  --amber-soft: #F7E7BE;

  /* Papier réglé (style Seyès) + marge rouge */
  --rule-line: rgba(29,52,97,0.06);
  --margin-rule: rgba(215,38,61,0.30);

  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 0 rgba(28,42,58,0.05);
  --shadow: 0 2px 0 rgba(211,201,178,0.55), 0 1px 12px rgba(28,42,58,0.05);

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, Menlo, monospace;
  --font-hand: 'Caveat', 'Segoe Script', cursive;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
h1 { font-size: 52px; line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: 20px; line-height: 1.2; }
h4 { font-size: 15px; line-height: 1.3; font-weight: 600; }
p { margin: 0; }
a { color: inherit; }

.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.serif-italic { font-family: var(--font-display); font-style: italic; }
.hand { font-family: var(--font-hand); font-style: normal; }

/* ===== App shell ===== */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding: 24px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}
.brand-mark {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.1; }
.brand-sub { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.nav-section { display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 14px;
  user-select: none;
  transition: background 0.15s;
}
.nav-item:hover { background: var(--bg-2); }
.nav-item.active { background: var(--teal); color: var(--bg); }
.nav-item.active .nav-icon { color: var(--bg); }
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
.nav-text-sm { display: none; }  /* short label: mobile bottom-nav only */
.nav-badge {
  margin-left: auto;
  background: var(--terra-soft);
  color: var(--terra);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.nav-item.active .nav-badge { background: rgba(255,255,255,0.18); color: var(--bg); }

.sidebar-footer {
  margin-top: auto;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--paper);
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 13px;
}

/* ===== Main canvas ===== */
/* Papier réglé Seyès (lignes horizontales très pâles) + marge rouge verticale,
   dans la gouttière gauche (le contenu commence à 48px, la marge est à 35px). */
.main {
  padding: 32px 48px 80px;
  max-width: 1280px;
  width: 100%;
  background-image:
    linear-gradient(to right, transparent 35px, var(--margin-rule) 35px, var(--margin-rule) 36px, transparent 36px),
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule-line) 31px 32px);
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.page-title { display: flex; flex-direction: column; gap: 4px; }
.page-title .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra); }
.page-actions { display: flex; gap: 8px; align-items: center; }

/* ===== Buttons ===== */
.btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
  background: none;
}
.btn-primary { background: var(--teal); color: var(--bg); }
.btn-primary:hover { background: var(--teal-2); }
.btn-accent { background: var(--terra); color: var(--paper); }
.btn-accent:hover { background: #B41E33; }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-icon { padding: 8px; }

/* ===== Card ===== */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.card-pad-lg { padding: 28px; }
.card-flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.card-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; }

/* ===== Tag / Badge ===== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  background: var(--bg-2);
  color: var(--ink-2);
}
.tag-teal { background: var(--teal-soft); color: var(--teal); }
.tag-terra { background: var(--terra-soft); color: var(--terra); }
.tag-sage { background: var(--sage-soft); color: #4F6B4E; }
.tag-amber { background: var(--amber-soft); color: #8A6B12; }
.tag-dot::before { content: '●'; font-size: 8px; margin-right: 2px; }

/* ===== Stat block ===== */
.stat-num { font-family: var(--font-display); font-size: 40px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
.stat-num-sm { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: -0.02em; }
.stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.stat-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; padding: 2px 6px; border-radius: 4px; font-weight: 500; }
.trend-up { background: var(--sage-soft); color: #4F6B4E; }
.trend-down { background: var(--terra-soft); color: var(--terra); }

/* ===== Inputs ===== */
.input, .textarea {
  font-family: var(--font-body);
  font-size: 14px;
  width: 100%;
  padding: 9px 12px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--ink);
  outline: none;
}
.input:focus, .textarea:focus { border-color: var(--teal); }
.textarea { resize: none; min-height: 64px; }

/* ===== Grid helpers ===== */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }

/* ===== Hero (Home) ===== */
.hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.hero-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.hero h1 { margin-bottom: 16px; }
.hero h1 em { font-family: var(--font-display); font-style: italic; color: var(--terra); }
.hero-lead { font-size: 17px; color: var(--ink-2); max-width: 540px; margin-bottom: 24px; line-height: 1.5; }
.hero-cta { display: flex; gap: 10px; margin-bottom: 24px; }
.hero-bullets { display: flex; gap: 24px; }
.hero-bullets .b { display: flex; flex-direction: column; gap: 2px; }
.hero-bullets .num { font-family: var(--font-display); font-size: 22px; color: var(--teal); }
.hero-bullets .lbl { font-size: 12px; color: var(--muted); }

.hero-visual {
  background: var(--teal);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-visual::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: 320px; height: 320px;
  background: radial-gradient(circle at center, var(--terra) 0%, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
}

/* ===== Plateau cards ===== */
.plateau {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.plateau:hover { border-color: var(--line-strong); }
.plateau-thumb {
  height: 140px;
  background: var(--bg-2);
  position: relative;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.plateau-body { padding: 18px; }
.plateau-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.plateau-desc { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.plateau-foot { display: flex; align-items: center; justify-content: space-between; }
.plateau-price { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.plateau-price b { font-family: var(--font-display); font-size: 18px; color: var(--ink); font-weight: 500; }

/* Placeholder image (striped) */
.ph-stripes {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--bg-2) 0,
    var(--bg-2) 8px,
    var(--bg) 8px,
    var(--bg) 16px
  );
  width: 100%; height: 100%;
  position: relative;
}
.ph-label {
  position: absolute;
  bottom: 10px; left: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
}

/* ===== AI Chat ===== */
.chat-shell {
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  gap: 0;
  height: min(calc(100vh - 240px), 760px);
  min-height: 520px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.chat-sidebar {
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chat-mode-pills { display: flex; flex-direction: column; gap: 4px; }
.mode-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  width: 100%;
  color: var(--ink-2);
}
.mode-pill:hover { background: var(--paper); }
.mode-pill.active { background: var(--paper); border-color: var(--teal); color: var(--ink); }
.mode-pill .mp-icon {
  width: 28px; height: 28px;
  border-radius: 4px;
  background: var(--bg-2);
  display: grid; place-items: center;
  font-size: 13px;
}
.mode-pill.active .mp-icon { background: var(--teal); color: var(--paper); }
.mode-pill .mp-title { font-weight: 600; }
.mode-pill .mp-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* Mobile-only horizontal mode selector for the Lab IA chat (the .chat-sidebar
   that normally holds the modes is hidden ≤768px). Hidden on desktop. */
.chat-mode-bar { display: none; }
.mode-chip {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; flex-shrink: 0;
  padding: 8px 12px; min-height: 40px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink-2);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.mode-chip.active { background: var(--teal); color: var(--bg); border-color: var(--teal); }

.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-topbar {
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-topbar h3 { font-size: 16px; }
.chat-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.msg { display: flex; gap: 12px; max-width: 88%; }
.msg-user { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar {
  width: 32px; height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 13px;
  font-weight: 600;
}
.msg-avatar.ai { background: var(--teal); color: var(--paper); }
.msg-avatar.user { background: var(--sage); color: var(--paper); }
.msg-bubble {
  background: var(--bg);
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  border: 1px solid var(--line);
}
.msg-user .msg-bubble { background: var(--teal); color: var(--paper); border-color: var(--teal); }
.msg-bubble .qcm-block {
  margin-top: 10px;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.qcm-choice {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  margin-top: 6px;
  cursor: pointer;
  font-size: 13px;
  background: var(--paper);
}
.qcm-choice:hover { border-color: var(--teal); }
.qcm-choice.correct { border-color: var(--sage); background: var(--sage-soft); }
.qcm-choice.wrong { border-color: var(--terra); background: var(--terra-soft); }
.qcm-letter { width: 22px; height: 22px; border-radius: 4px; background: var(--bg-2); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; }

.chat-input-wrap {
  border-top: 1px solid var(--line);
  padding: 16px 22px;
  background: var(--bg);
}
.chat-input-card {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-input-card:focus-within { border-color: var(--teal); }
.chat-input {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 14px;
  resize: none;
  min-height: 24px;
  max-height: 120px;
  color: var(--ink);
}
.chat-input-row { display: flex; align-items: center; justify-content: space-between; }
.suggest-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
}
.chip:hover { background: var(--bg-2); border-color: var(--line-strong); }

/* Menu Schéma à 2 niveaux (thème → schémas) */
.schema-menu { padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; gap: 8px; }
.schema-menu-label { font-size: 11px; color: var(--muted); }
.schema-menu-row { display: flex; gap: 8px; flex-wrap: wrap; }
.schema-select { flex: 1 1 0; min-width: 0; max-width: 280px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 600; min-height: 40px; cursor: pointer; transition: .15s; }
.schema-select:hover { border-color: var(--sage); }
.schema-select:focus { outline: none; border-color: var(--sage); }
.schema-select:disabled { opacity: .5; cursor: not-allowed; }

.chat-right {
  border-left: 1px solid var(--line);
  background: var(--bg);
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ctx-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.ctx-row:last-child { border-bottom: none; }
.ctx-row .l { color: var(--muted); }

/* ===== Booking calendar ===== */
.cal-grid {
  display: grid;
  grid-template-columns: 80px repeat(5, 1fr);
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
}
.cal-head { padding: 12px 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--bg); }
.cal-head.day { color: var(--ink-2); font-family: var(--font-display); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.cal-head.day small { display: block; color: var(--muted); font-family: var(--font-mono); font-size: 10px; font-weight: 400; margin-top: 2px; letter-spacing: 0.05em; }
.cal-time { padding: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.cal-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 6px;
  min-height: 70px;
  position: relative;
  cursor: pointer;
  transition: background 0.1s;
}
.cal-cell:hover { background: var(--bg-2); }
.cal-cell:last-child { border-right: none; }
.cal-event {
  background: var(--teal-soft);
  border-left: 3px solid var(--teal);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.3;
  margin-bottom: 4px;
}
.cal-event.terra { background: var(--terra-soft); border-color: var(--terra); }
.cal-event.sage { background: var(--sage-soft); border-color: var(--sage); }
.cal-event.amber { background: var(--amber-soft); border-color: var(--amber); }
.cal-event b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 12px; }

/* ===== Progress bar ===== */
.bar {
  height: 6px;
  background: var(--bg-2);
  border-radius: 3px;
  overflow: hidden;
}
.bar-fill { height: 100%; background: var(--teal); border-radius: 3px; transition: width 0.4s; }
.bar-fill.terra { background: var(--terra); }
.bar-fill.sage { background: var(--sage); }
.bar-fill.amber { background: var(--amber); }

/* ===== Misc ===== */
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--sage); }
.dot.terra { background: var(--terra); }
.dot.amber { background: var(--amber); }
.dot.muted { background: var(--line-strong); }

.list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.list-row:last-child { border-bottom: none; }

.kpi-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.kpi-card.dark { background: var(--teal); color: var(--paper); border: none; }
.kpi-card.dark .stat-label { color: var(--teal-soft); }
.kpi-card.dark .stat-num { color: var(--paper); }
.kpi-card.dark .bar { background: rgba(255,255,255,0.18); }
.kpi-card.dark .bar-fill { background: var(--terra); }

.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }

/* Sparkline / area chart container */
.chart-svg { width: 100%; height: 100%; display: block; }

/* ===== Auth screen ===== */
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
}
.auth-aside {
  background: var(--teal);
  color: var(--paper);
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-aside::before {
  content: '';
  position: absolute;
  bottom: -30%; right: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle at center, var(--terra) 0%, transparent 65%);
  opacity: 0.45;
  pointer-events: none;
}
.auth-aside .brand-name { color: var(--paper); }
.auth-aside .brand-sub { color: var(--terra-soft); }
.auth-hero { position: relative; z-index: 1; }
.auth-hero h1 { color: var(--paper); font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; }
.auth-hero h1 em { color: var(--terra-soft); font-family: var(--font-display); font-style: italic; }
.auth-hero p { color: var(--teal-soft); font-size: 16px; line-height: 1.5; margin-top: 16px; max-width: 460px; }

.auth-features {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.auth-feat {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 14px;
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--paper);
}
.auth-feat .l { color: var(--terra-soft); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; display: block; }

.auth-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
}
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.auth-tab {
  padding: 10px 4px;
  margin-right: 24px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  border-top: none; border-left: none; border-right: none;
}
.auth-tab.active { color: var(--ink); border-bottom-color: var(--terra); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.field-error { color: var(--terra); font-size: 12px; margin-top: 4px; }
.field-hint { color: var(--muted); font-size: 12px; margin-top: 2px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.pending-card {
  max-width: 540px;
  margin: 80px auto;
  padding: 40px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
}
.pending-icon {
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber);
  display: grid; place-items: center;
}

/* ===== Admin queue ===== */
.queue-row {
  display: grid;
  grid-template-columns: 36px 1.4fr 1fr 110px 130px 200px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.queue-row.head {
  background: var(--bg);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
}
.queue-row:hover:not(.head) { background: var(--bg); }
.queue-actions { display: flex; gap: 6px; justify-content: flex-end; }
.queue-name { font-weight: 500; color: var(--ink); }
.queue-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.queue-check {
  width: 18px; height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.queue-check.on { background: var(--teal); border-color: var(--teal); color: var(--paper); }

.legal-note {
  background: var(--amber-soft);
  border-left: 3px solid var(--amber);
  padding: 10px 12px;
  font-size: 12px;
  color: #6E5210;
  border-radius: 0 4px 4px 0;
}

/* ===== Settings ===== */
.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.tab-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tab-btn:first-child { padding-left: 0; }
.tab-btn:hover { color: var(--ink-2); }
.tab-btn.active { color: var(--ink); border-bottom-color: var(--terra); }

.credit-hero {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  background: var(--teal);
  color: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.credit-hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 360px; height: 360px;
  background: radial-gradient(circle at center, var(--terra) 0%, transparent 65%);
  opacity: 0.35;
  pointer-events: none;
}
.credit-block {
  padding: 28px;
  position: relative;
  z-index: 1;
}
.credit-block + .credit-block { border-left: 1px solid rgba(255,255,255,0.12); }
.credit-block .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terra-soft); margin-bottom: 10px; display: block; }
.credit-block .v { font-family: var(--font-display); font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -0.025em; }
.credit-block .v .unit { font-size: 18px; color: var(--terra-soft); margin-left: 4px; font-weight: 400; }
.credit-block .h { color: var(--teal-soft); font-size: 13px; margin-top: 8px; line-height: 1.4; }

.pack-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: border-color 0.15s;
}
.pack-card:hover { border-color: var(--line-strong); }
.pack-card.best { border-color: var(--terra); }
.pack-best-tag {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--terra);
  color: var(--paper);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pack-icon {
  width: 36px; height: 36px;
  background: var(--bg-2);
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--teal);
}
.pack-price { display: flex; align-items: baseline; gap: 6px; }
.pack-price .p { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -0.02em; }
.pack-price .o { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-decoration: line-through; }

.sub-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.sub-card.current { border-color: var(--teal); background: var(--teal); color: var(--paper); }
.sub-card.current .pack-icon { background: rgba(255,255,255,0.12); color: var(--paper); }
.sub-card.current h3 { color: var(--paper); }
.sub-card.featured { border-color: var(--terra); }
.sub-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.sub-features li { display: flex; gap: 8px; align-items: flex-start; }

.bill-table {
  width: 100%;
  border-collapse: collapse;
}
.bill-table th, .bill-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.bill-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
  font-weight: 500;
}
.bill-table td.num { font-family: var(--font-mono); }
.bill-table tr:hover td { background: var(--bg); }

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(14,59,67,0.45);
  display: grid; place-items: center;
  z-index: 200;
  padding: 20px;
}
.modal-box {
  background: var(--paper);
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-head {
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.modal-body { padding: 24px; }
.modal-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--bg);
}
.card-fake {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 50%, var(--terra) 130%);
  color: var(--paper);
  border-radius: 10px;
  padding: 20px;
  position: relative;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-fake .num { font-family: var(--font-mono); font-size: 17px; letter-spacing: 0.1em; }
.card-fake .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }

.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 300;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  animation: toastIn 0.25s ease-out;
}
@keyframes toastIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.toast .check { color: var(--sage); }

/* ===== Forum ===== */
.forum-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-2);
  font-weight: 500;
}
.cat-pill:hover { border-color: var(--line-strong); }
.cat-pill.active { background: var(--teal); color: var(--paper); border-color: var(--teal); }
.cat-pill .count { font-family: var(--font-mono); font-size: 11px; opacity: 0.7; }

.thread-row {
  display: grid;
  grid-template-columns: 42px 1fr 100px 120px;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.1s;
}
.thread-row:hover { background: var(--bg); }
.thread-row:last-child { border-bottom: none; }
.thread-row.pinned { background: linear-gradient(to right, var(--terra-soft) 0%, transparent 6%); }
.thread-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-bottom: 3px; color: var(--ink); }
.thread-meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.thread-replies { text-align: center; }
.thread-replies .n { font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.thread-replies .l { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

.reply-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 12px;
}
.reply-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.reply-author { font-weight: 600; font-size: 14px; }
.reply-time { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.reply-body { font-size: 14px; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; }
.reply-actions { display: flex; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.reply-action { font-size: 12px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 2px 4px; }
.reply-action:hover { color: var(--terra); }
.reply-action.liked { color: var(--terra); }
.reply-card.op { background: var(--bg-2); border-color: var(--line-strong); }

/* ===== Messages / friends ===== */
.msg-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: calc(100vh - 180px);
  min-height: 580px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.msg-left {
  background: var(--bg);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.msg-left-section { padding: 14px 16px; }
.msg-left-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 16px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.friend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.friend-item:hover { background: var(--paper); }
.friend-item.active { background: var(--paper); border-left-color: var(--teal); }
.friend-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.friend-preview { font-size: 11px; color: var(--muted); margin-top: 2px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-unread {
  background: var(--terra); color: var(--paper);
  font-size: 10px; padding: 1px 6px; border-radius: 999px;
  font-weight: 600;
}
.friend-status-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--sage); position: absolute; bottom: 0; right: 0; border: 2px solid var(--paper); }

.req-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.req-item.incoming { border-color: var(--terra-soft); }

.msg-conv {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.msg-conv-head {
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.msg-conv-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msg-pm {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
}
.msg-pm.them { background: var(--bg-2); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-pm.me { background: var(--teal); color: var(--paper); align-self: flex-end; border-bottom-right-radius: 4px; }
.msg-pm-time {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  align-self: center;
  margin: 8px 0 0;
}
.msg-day-sep {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 8px 0;
  position: relative;
}
.msg-day-sep::before, .msg-day-sep::after {
  content: ''; position: absolute; top: 50%; width: 30%; height: 1px; background: var(--line);
}
.msg-day-sep::before { left: 0; }
.msg-day-sep::after { right: 0; }

.msg-conv-empty {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px;
}

.suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}
.suggest-item .info { flex: 1; min-width: 0; }

/* ===== Reactions ===== */
.reactions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: all 0.12s;
}
.reaction-pill:hover { border-color: var(--line-strong); }
.reaction-pill.active { background: var(--terra-soft); border-color: var(--terra); color: var(--terra); }
.reaction-pill .em { font-size: 13px; line-height: 1; }
.reaction-pill .n { font-family: var(--font-mono); font-size: 11px; }
.reaction-add {
  width: 24px; height: 24px;
  display: inline-grid; place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  background: var(--paper);
  font-size: 12px;
  color: var(--muted);
}
.reaction-add:hover { background: var(--bg); color: var(--ink); }

.reaction-picker {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  display: flex;
  gap: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 10;
}
.reaction-picker-item {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: 18px;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.12s;
}
.reaction-picker-item:hover { background: var(--bg); }

/* Mentions */
.mention {
  background: var(--teal-soft);
  color: var(--teal);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
  cursor: pointer;
}

/* Search bar */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 12px;
  flex: 1;
  max-width: 360px;
}
.search-bar input {
  border: none; outline: none; background: none;
  flex: 1; font-size: 13px; font-family: var(--font-body);
}
.search-bar .icon { color: var(--muted); }
.search-hit {
  background: linear-gradient(transparent 60%, var(--amber-soft) 60%);
}

/* Edit / delete */
.msg-edit-row {
  display: flex; align-items: center; gap: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.reply-card:hover .msg-edit-row, .msg-pm:hover .msg-edit-row { opacity: 1; }
.edit-action-btn {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 3px;
}
.edit-action-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.edit-action-btn.delete:hover { color: var(--terra); border-color: var(--terra); }

.edited-tag {
  font-size: 10px;
  color: var(--muted);
  margin-left: 6px;
  font-style: italic;
}

/* Typing dots */
.typing-dots {
  display: inline-flex;
  gap: 3px;
  padding: 8px 12px;
  background: var(--bg-2);
  border-radius: 12px;
  align-self: flex-start;
}
.typing-dots span {
  width: 6px; height: 6px;
  background: var(--muted);
  border-radius: 999px;
  animation: typing-pulse 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-pulse {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* Read receipts */
.read-receipt {
  font-size: 11px;
  opacity: 0.7;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Image attachment */
.msg-pm.has-image { padding: 4px 4px 8px; max-width: 320px; }
.msg-pm.has-image img {
  max-width: 100%;
  max-height: 280px;
  border-radius: 8px;
  display: block;
  margin-bottom: 6px;
  cursor: pointer;
}
.msg-pm.has-image .caption { padding: 0 8px; }

.attach-preview {
  position: relative;
  margin-bottom: 8px;
  display: inline-block;
}
.attach-preview img {
  max-width: 200px;
  max-height: 160px;
  border-radius: 6px;
  display: block;
  border: 1px solid var(--line);
}
.attach-preview .remove {
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 12px;
}

/* Report panel */
.report-row {
  display: grid;
  grid-template-columns: 1fr 200px 110px 130px 200px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.report-row.head {
  background: var(--bg); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 10px 16px;
}
.report-row:hover:not(.head) { background: var(--bg); }

.image-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  display: grid; place-items: center;
  z-index: 400;
  padding: 40px;
  cursor: zoom-out;
}
.image-lightbox img {
  max-width: 90vw; max-height: 90vh;
  border-radius: 8px;
}

/* ===== Exercises (interactive) ===== */
.exo {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--terra);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.exo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.exo-type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--teal);
  color: var(--paper);
  border-radius: 4px;
}
.exo-type.qcm { background: var(--teal); }
.exo-type.qcm_multi { background: var(--teal-2); }
.exo-type.vraifaux { background: var(--sage); color: var(--paper); }
.exo-type.trous { background: var(--amber); color: #5a4400; }
.exo-type.ouvert   { background: var(--terra); }
.exo-type.schema   { background: #5B6B8A; color: var(--paper); }
.exo-type.accueil  { background: #7A5C88; color: var(--paper); }
.exo-q { font-family: var(--font-display); font-size: 15px; font-weight: 600; flex: 1; color: var(--ink); }

.exo-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-top: 6px;
  cursor: pointer;
  background: var(--bg);
  transition: all 0.15s;
}
.exo-choice:hover:not(.locked) { border-color: var(--line-strong); background: var(--paper); }
.exo-choice.selected { border-color: var(--teal); background: var(--teal-soft); }
.exo-choice.correct { border-color: var(--sage); background: var(--sage-soft); }
.exo-choice.wrong { border-color: var(--terra); background: var(--terra-soft); }
.exo-choice.locked { cursor: default; }
.exo-letter {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.exo-choice.selected .exo-letter { background: var(--teal); color: var(--paper); border-color: var(--teal); }
.exo-choice.correct .exo-letter { background: var(--sage); color: var(--paper); border-color: var(--sage); }
.exo-choice.wrong .exo-letter { background: var(--terra); color: var(--paper); border-color: var(--terra); }
.exo-choice-icon {
  margin-left: auto;
  width: 20px; height: 20px;
  display: grid; place-items: center;
}

.exo-checkbox {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--line-strong);
  background: var(--paper);
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.exo-choice.selected .exo-checkbox { background: var(--teal); border-color: var(--teal); color: var(--paper); }
.exo-choice.correct .exo-checkbox { background: var(--sage); border-color: var(--sage); color: var(--paper); }
.exo-choice.wrong .exo-checkbox { background: var(--terra); border-color: var(--terra); color: var(--paper); }

.exo-tf {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.exo-tf-btn {
  flex: 1;
  padding: 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.exo-tf-btn:hover:not(.locked) { border-color: var(--teal); }
.exo-tf-btn.selected { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
.exo-tf-btn.correct { border-color: var(--sage); background: var(--sage-soft); color: #4F6B4E; }
.exo-tf-btn.wrong { border-color: var(--terra); background: var(--terra-soft); color: var(--terra); }
.exo-tf-btn.locked { cursor: default; }

.exo-blank {
  display: inline-block;
  border: none;
  border-bottom: 2px solid var(--teal);
  background: var(--teal-soft);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  min-width: 80px;
  padding: 2px 6px;
  margin: 0 4px;
  outline: none;
  text-align: center;
}
.exo-blank.correct { border-color: var(--sage); background: var(--sage-soft); color: #4F6B4E; }
.exo-blank.wrong { border-color: var(--terra); background: var(--terra-soft); color: var(--terra); text-decoration: line-through; }
.exo-blank-expected {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sage);
  margin-left: 4px;
  background: var(--sage-soft);
  padding: 1px 6px;
  border-radius: 3px;
}

.exo-open-textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--paper);
  resize: vertical;
  min-height: 90px;
  outline: none;
  margin-top: 8px;
}
.exo-open-textarea:focus { border-color: var(--teal); }
.exo-open-feedback {
  background: var(--bg-2);
  border-left: 3px solid var(--teal);
  padding: 10px 12px;
  border-radius: 0 4px 4px 0;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.exo-open-feedback.evaluating {
  background: var(--amber-soft);
  border-color: var(--amber);
  color: #6E5210;
  font-style: italic;
}

.exo-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  flex-wrap: wrap;
  gap: 8px;
}
.exo-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.exo-status.ok { color: var(--sage); }
.exo-status.ko { color: var(--terra); }
.exo-status.neutral { color: var(--muted); }

.exo-explain {
  background: var(--bg-2);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.55;
  margin-top: 12px;
  border-left: 3px solid var(--teal);
}
.exo-explain b { color: var(--teal); }

/* ===== Pendu (hangman) game ===== */
.exo-type.pendu { background: var(--terra-soft); color: var(--terra); }
.pendu-top { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.pendu-gallows {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.15;
  white-space: pre; margin: 0; color: var(--ink-2);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px;
}
.pendu-side { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 8px; }
.pendu-word { display: flex; flex-wrap: wrap; gap: 6px; }
.pendu-slot {
  min-width: 22px; height: 30px; display: inline-grid; place-items: center;
  border-bottom: 3px solid var(--line); font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
}
.pendu-slot.filled { border-bottom-color: var(--teal); }
.pendu-errors { font-size: 12px; color: var(--muted); }
.pendu-wrong { color: var(--terra); font-family: var(--font-mono); letter-spacing: 1px; }
.pendu-hint { font-size: 13px; color: var(--ink-2); background: var(--amber-soft); border-radius: 6px; padding: 6px 10px; }
.pendu-keyboard { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.pendu-key {
  width: 34px; height: 38px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); font-family: var(--font-display); font-weight: 600; font-size: 14px;
  cursor: pointer; color: var(--ink); transition: background .12s, border-color .12s;
}
.pendu-key:hover:not(:disabled) { background: var(--bg-2); border-color: var(--teal); }
.pendu-key:disabled { cursor: default; }
.pendu-key.ok { background: var(--sage-soft); border-color: var(--sage); color: #3f6b3e; }
.pendu-key.ko { background: var(--terra-soft); border-color: var(--terra); color: var(--terra); opacity: 0.55; }

/* ===== Anagramme ===== */
.exo-type.anagramme { background: var(--teal-soft); color: var(--teal); }
.anag-letters { display: flex; flex-wrap: wrap; gap: 6px; }
.anag-tile {
  width: 34px; height: 40px; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2);
  font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink);
}

/* ===== Paires (memory) ===== */
.exo-type.memory { background: var(--sage-soft); color: #3f6b3e; }
.mem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mem-card {
  min-height: 64px; padding: 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--teal); color: var(--paper); cursor: pointer;
  font-size: 13px; line-height: 1.25; display: grid; place-items: center; text-align: center;
  transition: background .12s, transform .08s;
}
.mem-card:active:not(:disabled) { transform: scale(0.97); }
.mem-card.show { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.mem-card.matched { background: var(--sage-soft); color: #3f6b3e; border-color: var(--sage); cursor: default; }

/* ===== Quiz chrono ===== */
.exo-type.quizchrono { background: var(--amber-soft); color: #6E5210; }
.qz-bar { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 13px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.qz-time { font-weight: 600; }
.qz-score { color: var(--muted); }

/* ===== Qui suis-je ? ===== */
.exo-type.quisuisje { background: var(--terra-soft); color: var(--terra); }
.qsj-clues { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.qsj-clues li { font-size: 14px; line-height: 1.4; color: var(--ink-2); }

/* ===== Mascotte (capybara) ===== */
.mascot { display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.mascot-reaction {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding: 10px 12px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
}
.mascot-reaction .mascot { flex-shrink: 0; border-radius: 10px; }
.mascot-bubble {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--ink);
  font-family: var(--font-display); line-height: 1.35;
}

@media (max-width: 768px) {
  .mem-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Schema exercise ===== */
.exo-schema-diagram {
  margin: 10px 0 14px; padding: 12px;
  background: var(--bg-2); border: 1.5px solid var(--line);
  border-radius: 6px; overflow-x: auto; text-align: center;
}
.exo-schema-diagram svg { max-width: 100%; height: auto; }
.exo-schema-figure {
  margin: 10px 0 14px; padding: 8px;
  background: #fbfcfc; border: 1.5px solid var(--line);
  border-radius: 10px; text-align: center;
}
.exo-schema-figure svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
/* Figure cliquable + bouton « Agrandir » (ouvre la fenêtre carrée) */
.exo-schema-figwrap { position: relative; cursor: zoom-in; }
.schema-zoom-btn {
  position: absolute; top: 14px; right: 14px;
  background: rgba(29,52,97,0.85); color: #fff; border: none;
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; backdrop-filter: blur(2px);
}
.schema-zoom-btn:hover { background: var(--teal); }
/* Fenêtre carrée d'agrandissement du schéma */
.schema-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(18,32,24,0.62);
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
.schema-modal-box {
  background: var(--paper); border-radius: 14px;
  width: min(96vw, 1040px); max-height: 94vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}
.schema-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
  font-family: var(--font-display);
}
.schema-modal-close {
  background: none; border: none; font-size: 20px; line-height: 1;
  cursor: pointer; color: var(--ink-2); padding: 4px 8px; border-radius: 6px;
}
.schema-modal-close:hover { background: var(--bg-2); }
.schema-modal-fig {
  flex-shrink: 0; padding: 10px; background: #fbfcfc;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line); max-height: 50vh; overflow: auto;
}
.schema-modal-fig .exo-schema-figure { margin: 0; border: none; padding: 0; background: none; width: 100%; display: flex; justify-content: center; }
.schema-modal-fig .exo-schema-figure svg,
.schema-modal-fig svg { width: auto; max-width: 100%; height: auto; max-height: 46vh; display: block; }
.schema-modal-side { flex: 1 1 auto; min-height: 60px; overflow-y: auto; padding: 12px 16px; }
/* Saisie des réponses directement à côté des numéros, sur la figure */
.exo-schema-figwrap { text-align: center; }
.schema-overlay { position: relative; display: inline-block; max-width: 100%; }
/* la boîte de positionnement doit coller au SVG (sinon le padding/bordure décale les champs) */
.schema-overlay .exo-schema-figure { display: block; margin: 0; padding: 0; border: none; background: none; }
.schema-overlay svg { display: block; }
.schema-mark-input {
  position: absolute; width: 96px; max-width: 30vw;
  font-size: 13px; padding: 2px 6px; box-sizing: border-box;
  border: 1.5px solid var(--teal); border-radius: 6px;
  background: rgba(255,255,255,0.94); color: var(--ink);
  z-index: 3; box-shadow: 0 1px 5px rgba(0,0,0,0.18);
}
.schema-mark-input::placeholder { color: var(--teal); opacity: 0.6; }
.schema-mark-input:focus { outline: none; background: #fff; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(200,136,31,0.25); }
.schema-mark-ans {
  position: absolute; font-size: 12px; font-weight: 700; padding: 1px 6px;
  border-radius: 5px; background: rgba(255,255,255,0.94); z-index: 3; max-width: 36vw;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.schema-mark-ans.ok { color: var(--sage); }
.schema-mark-ans.ko { color: var(--terra); }
.exo-schema { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
/* Saisie des réponses : grille compacte 2 colonnes (tout visible, sans dérouler) */
.exo-schema-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 10px 0; }
@media (max-width: 600px) { .exo-schema-grid { grid-template-columns: 1fr; } }
.exo-schema-cell {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; background: var(--bg-2);
  border-radius: 8px; border: 1.5px solid var(--line);
  transition: border-color 0.15s;
}
.exo-schema-cell.correct { border-color: var(--sage); background: var(--sage-soft); }
.exo-schema-cell.wrong   { border-color: var(--terra); background: var(--terra-soft); }
.exo-schema-cellbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.schema-blank {
  width: 100%; box-sizing: border-box; min-width: 0; margin: 0;
  text-align: left; border: 1.5px solid var(--teal); border-radius: 6px;
  background: #fff;
}
.exo-schema-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; background: var(--bg-2);
  border-radius: 6px; border: 1.5px solid var(--line);
  transition: border-color 0.15s;
}
.exo-schema-item.correct { border-color: var(--sage); background: var(--sage-soft); }
.exo-schema-item.wrong   { border-color: var(--terra); background: var(--terra-soft); }
.exo-schema-num {
  width: 26px; height: 26px; min-width: 26px;
  background: #5B6B8A; color: var(--paper);
  border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-family: var(--font-mono); font-weight: 600;
}
.exo-schema-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.exo-schema-hint { font-size: 12px; color: var(--muted); font-style: italic; }
.exo-schema-answer { font-size: 14px; font-weight: 500; }

/* ===== Accueil client bubble ===== */
.accueil-role {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-family: var(--font-mono);
  color: #7A5C88; text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.accueil-eval {
  background: var(--bg-2); border-left: 3px solid #7A5C88;
  padding: 12px 14px; border-radius: 0 6px 6px 0;
  margin-top: 8px; font-size: 13px; line-height: 1.6;
}

/* ===== Mic recording + attachment chip ===== */
.mic-btn { transition: all 0.15s; }
.mic-btn.recording {
  background: var(--terra) !important;
  color: var(--paper) !important;
  animation: mic-pulse 1.2s infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(215, 38, 61, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(215, 38, 61, 0); }
}
.mic-transcript {
  font-size: 12px;
  color: var(--terra);
  font-style: italic;
  padding: 4px 0;
}

/* ----- Conversation mains-libres ----- */
.convo-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2);
}
.convo-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--muted); }
.convo-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.convo-interim { font-size: 12px; color: var(--muted); font-style: italic; flex: 1 1 100%; }
.convo-stop {
  margin-left: auto; border: 1px solid var(--terra); color: var(--terra);
  background: var(--paper); border-radius: var(--radius);
  font-size: 12px; font-weight: 700; padding: 5px 12px; min-height: 34px; cursor: pointer;
}
.convo-stop:hover { background: var(--terra); color: var(--paper); }
/* Couleur + pulsation selon la phase */
.convo-bar.listening { border-color: var(--terra); }
.convo-bar.listening .convo-dot { background: var(--terra); animation: convo-pulse 1.2s infinite; }
.convo-bar.listening .convo-label { color: var(--terra); }
.convo-bar.thinking .convo-dot { background: var(--gold, #c79a3a); animation: convo-blink 1s infinite; }
.convo-bar.speaking .convo-dot { background: var(--sage); animation: convo-pulse 1.2s infinite; }
.convo-bar.speaking .convo-label { color: var(--sage); }
@keyframes convo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50% { box-shadow: 0 0 0 6px transparent; opacity: .5; }
}
@keyframes convo-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 8px 4px 6px;
  font-size: 12px;
  margin-bottom: 8px;
  max-width: 100%;
}
.attach-chip .name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.attach-chip .size {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 10px;
}
.attach-chip .x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
}
.attach-chip .x:hover { color: var(--terra); }
.attach-chip.image img {
  width: 32px; height: 32px;
  object-fit: cover;
  border-radius: 3px;
}

.voice-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-2);
}
.voice-toggle.on { background: var(--teal); color: var(--paper); border-color: var(--teal); }
.voice-toggle:hover { border-color: var(--line-strong); }

/* ===== Mobile responsive (≤ 768px) ===== */
@media (max-width: 768px) {
  h1 { font-size: 30px; }
  h2 { font-size: 22px; }
  .stat-num { font-size: 26px; }
  .stat-num-sm { font-size: 20px; }

  /* App shell: full width, sidebar becomes bottom nav */
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    height: auto;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-right: none;
    border-top: 1px solid var(--line);
    z-index: 100;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .brand { display: none; }
  .sidebar-footer { display: none; }
  .nav-label { display: none; }
  .nav-section { flex-direction: row; gap: 0; flex: 0 0 auto; }
  .nav-item {
    flex: 0 0 auto;
    min-width: 62px;
    flex-direction: column;
    padding: 6px 8px;
    gap: 3px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    position: relative;
  }
  .nav-icon { width: 22px; height: 22px; }
  /* Hide the full label, show the short one underneath the icon */
  .nav-text { display: none; }
  .nav-text-sm {
    display: block;
    font-size: 10px;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Notification badge as a small count near the icon's top-right */
  .nav-badge {
    display: block;
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(3px);
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 15px;
  }

  /* Main: full width, padding-bottom for bottom nav.
     Drop the red margin rule (the gutter is too thin on mobile) but keep the
     faint Seyès ruling for the paper feel. */
  .main {
    padding: 16px 16px 76px;
    max-width: 100%;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule-line) 31px 32px);
  }

  /* Page header: stack vertically */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 18px;
  }
  .page-actions { flex-wrap: wrap; }

  /* Grids: collapse to 1 column */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; }

  /* Hero: stack vertically, hide visual panel */
  .hero {
    grid-template-columns: 1fr;
    padding: 20px 0 16px;
    margin-bottom: 24px;
    gap: 16px;
  }
  .hero-visual { display: none; }
  .hero h1 { font-size: 26px; }
  .hero-lead { font-size: 15px; }
  .hero-bullets { gap: 16px; }
  .hero-cta { flex-wrap: wrap; }

  /* Auth: hide decorative aside, full width form */
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-form { padding: 24px 16px; }
  .auth-card { max-width: 100%; }
  .row-2 { grid-template-columns: 1fr; }

  /* Chat: hide side panels, single column */
  .chat-shell {
    grid-template-columns: 1fr;
    height: calc(100vh - 130px);
    min-height: 400px;
  }
  .chat-sidebar { display: none; }
  .chat-right { display: none; }
  /* Menu déroulant des modes (la sidebar est masquée) — compact, tout visible */
  .chat-mode-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
  }
  .chat-mode-select-label { font-size: 12px; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
  .chat-mode-select {
    flex: 1 1 auto; min-width: 0;
    padding: 10px 12px; font-size: 16px; /* 16px = pas de zoom auto iOS */
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); color: var(--text); font-weight: 600;
  }
  .chat-topbar { padding: 10px 14px; }
  .chat-body { padding: 14px; gap: 12px; }
  .chat-input-wrap { padding: 10px 14px; }

  /* Messages: stack contact list above conversation */
  .msg-shell {
    grid-template-columns: 1fr;
    height: calc(100vh - 130px);
    min-height: 400px;
    grid-template-rows: 180px 1fr;
  }
  .msg-left { height: 180px; min-height: 0; border-right: none; border-bottom: 1px solid var(--line); }
  .msg-conv-head { padding: 10px 14px; }
  .msg-conv-body { padding: 12px 14px; }

  /* Calendar: horizontal scroll */
  .cal-grid {
    min-width: 480px;
  }
  /* Wrap the calendar area in overflow-x scroll via the parent card */
  .card:has(.cal-grid) { overflow-x: auto; }

  /* Admin queue rows: simplified layout */
  .queue-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px;
  }
  .queue-row.head { display: none; }
  .queue-check { display: none; }
  .queue-actions { justify-content: flex-start; margin-top: 4px; }

  /* Report rows: simplified */
  .report-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px;
  }
  .report-row.head { display: none; }

  /* Credit hero: stack vertically */
  .credit-hero { grid-template-columns: 1fr; }
  .credit-block + .credit-block { border-left: none; border-top: 1px solid rgba(255,255,255,0.12); }
  .credit-block .v { font-size: 36px; }

  /* Subscription packs: single column */
  .pack-card { padding: 16px; }
  .sub-card { padding: 18px; }

  /* Thread rows in forum */
  .thread-row {
    grid-template-columns: 36px 1fr;
    gap: 8px;
  }
  .thread-row > :nth-child(3),
  .thread-row > :nth-child(4) { display: none; }

  /* Toast: above bottom nav */
  .toast {
    bottom: 76px;
    right: 12px;
    left: 12px;
    font-size: 12px;
  }

  /* Modal: full width on small screens */
  .modal-backdrop { padding: 12px; align-items: flex-end; }
  .modal-box { max-width: 100%; border-radius: 12px 12px 0 0; max-height: 90vh; }

  /* Pending card: reduce margins */
  .pending-card { margin: 32px auto; padding: 24px 16px; }

  /* Buttons: ensure tap targets (≥44px recommended for touch) */
  .btn { padding: 10px 14px; font-size: 14px; min-height: 44px; }
  .btn-icon { padding: 10px; min-height: 44px; min-width: 44px; }
  .chip { min-height: 36px; padding: 7px 12px; font-size: 13px; }

  /* Inputs at 16px to stop Android/iOS from zooming the page on focus */
  .input, .textarea, .chat-input, select.input, .schema-select { font-size: 16px; }
}


/* ===== Analyse gestuelle (module Geste) — mobile-first ===== */
.btn-sm { padding: 7px 12px; font-size: 13px; border: 1px solid var(--line); min-height: 34px; }
.btn-sm.btn-primary, .btn-sm.btn-danger { border-color: transparent; }
.btn-danger { background: var(--terra); color: #fff; border-color: transparent; }
.btn-danger:hover { background: #B41E33; }

/* gros boutons tactiles */
.geste-btn-lg { min-height: 46px; padding: 11px 18px; font-size: 15px; font-weight: 600; justify-content: center; }
.geste-btn-outline { border: 1px solid var(--line-strong, var(--line)); color: var(--ink, var(--fg)); background: var(--bg); }
.geste-btn-outline:hover { background: var(--bg-2); }

/* cartes du module */
.geste-card { padding: 18px; margin-bottom: 16px; }
.geste-step, .geste-step-plain { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 16px; }
.geste-step > span { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.geste-hint { color: var(--muted); margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.geste-empty { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* onglets = segmented control pleine largeur */
.geste-seg { display: flex; gap: 4px; background: var(--bg-2); border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.geste-seg button { flex: 1; min-height: 42px; border: none; background: transparent; border-radius: 7px; cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: all .15s; }
.geste-seg button.active { background: var(--bg); color: var(--teal); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* consentement RGPD */
.geste-consent { max-width: 560px; margin: 0 auto; padding: 26px 22px; text-align: center; }
.geste-consent-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-2); color: var(--teal); display: grid; place-items: center; margin: 0 auto 12px; }
.geste-consent h2 { margin: 0 0 10px; font-size: 20px; }
.geste-consent p { color: var(--ink-2, var(--fg)); font-size: 15px; line-height: 1.55; margin: 0 0 12px; }
.geste-consent ul { text-align: left; margin: 0 auto 16px; padding-left: 20px; max-width: 460px; font-size: 14px; line-height: 1.55; color: var(--ink-2, var(--fg)); }
.geste-consent li { margin-bottom: 6px; }
.geste-consent-check { display: flex; align-items: flex-start; gap: 10px; text-align: left; max-width: 460px; margin: 0 auto 16px; font-size: 14px; cursor: pointer; }
.geste-consent-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.geste-consent .geste-btn-lg { width: 100%; max-width: 300px; }
.geste-consent .geste-btn-lg:disabled { opacity: .5; cursor: not-allowed; }

/* choix de la référence */
.geste-ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.geste-ref-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; text-align: left; transition: all .15s; min-height: 60px; }
.geste-ref-card:hover { border-color: var(--teal); }
.geste-ref-card.sel { border-color: var(--teal); background: var(--bg-2); box-shadow: inset 0 0 0 2px var(--teal); }
.geste-ref-card > div { display: flex; flex-direction: column; min-width: 0; }
.geste-ref-card b { font-size: 15px; }
.geste-ref-card span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }

/* capture */
.geste-capture-actions { display: flex; gap: 10px; }
.geste-capture-actions > * { flex: 1; }
.geste-live { width: 100%; border-radius: 10px; background: #000; margin-bottom: 12px; max-height: 46vh; }
.geste-progress { background: var(--bg-2); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
.geste-progress-track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.geste-progress-bar { height: 100%; border-radius: 4px; background: var(--teal); transition: width .2s; }
.geste-err { color: var(--terra); font-size: 14px; margin-top: 8px; }
.geste-analysing { display: flex; align-items: center; gap: 14px; font-size: 15px; }

/* résultat */
.geste-result-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.geste-result-txt h3 { margin: 6px 0 2px; font-size: 17px; }
.geste-warn-inline { color: #9a6b00; font-size: 13px; margin-top: 4px; }
.geste-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.geste-block h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 15px; }
.geste-notes { margin: 0 0 10px; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.geste-metrics { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.geste-segments { display: flex; gap: 8px; flex-wrap: wrap; }
.geste-segments span { background: var(--bg-2); border-radius: 6px; padding: 5px 9px; font-size: 13px; font-family: var(--font-mono); }
.geste-retry { width: 100%; margin-top: 18px; }

/* lecteur overlay */
.geste-player { margin: 16px 0 4px; }
.geste-canvas { width: 100%; max-height: 62vh; object-fit: contain; background: #111; border-radius: 10px; cursor: pointer; display: block; }
.geste-player-bar { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.geste-play-btn { min-height: 44px; min-width: 110px; justify-content: center; }
.geste-check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.geste-check input { width: 18px; height: 18px; }
.geste-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; color: var(--muted); font-size: 13px; }
.geste-legend span { display: inline-flex; align-items: center; gap: 6px; }
.geste-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* formulaire références */
.geste-form { display: flex; gap: 10px; margin-bottom: 12px; }
/* ⚠️ .input porte width:100% -> dans un flex, le <select> prend cette largeur comme
   flex-basis (auto) et écrasait le champ « Nom du geste » (basis 0) à ~30px, le
   rendant invisible. On impose une base 0 aux DEUX, avec min-width:0 pour autoriser
   la réduction, et on donne 2/3 de la place au champ texte. */
.geste-form .input { flex: 1 1 0; min-width: 0; }
.geste-form .input:first-child { flex: 2 1 0; }
.geste-reflist-title { margin: 22px 0 10px; font-size: 15px; }
.geste-ref-list { display: flex; flex-direction: column; gap: 8px; }
.geste-ref-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.geste-ref-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.geste-ref-row-main b { font-size: 15px; }
.geste-ref-row-main span { font-size: 12px; color: var(--muted); }

/* lien de révocation RGPD */
.geste-revoke { display: block; width: 100%; margin: 8px 0 4px; padding: 10px; background: none; border: none; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; text-align: center; }

/* ---- mobile ---- */
@media (max-width: 768px) {
  .geste-card { padding: 15px; }
  .geste-ref-grid { grid-template-columns: 1fr; }
  .geste-capture-actions { flex-direction: column; }
  .geste-form { flex-direction: column; }
  .geste-result-head { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .geste-result-txt { display: flex; flex-direction: column; align-items: center; }
  .geste-player-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .geste-play-btn { width: 100%; }
  .geste-check { justify-content: center; }
  .geste-canvas { max-height: 56vh; }
}


/* ===== Série d'entraînement : un exercice à la fois ===== */
.serie-body { display: block; padding: 18px 16px 32px; }
.serie-carte { max-width: 720px; margin: 0 auto; background: var(--paper);
  border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px 24px; box-shadow: var(--shadow); }
.serie-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.serie-compteur { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }
.serie-matiere { font-size: 12px; color: var(--muted); margin-top: 2px; }
.serie-barre { height: 5px; background: var(--bg-2); border-radius: 3px; overflow: hidden; margin-bottom: 20px; }
.serie-barre-remplie { height: 100%; background: var(--teal); border-radius: 3px; transition: width .35s ease; }
.serie-suivant { width: 100%; justify-content: center; margin-top: 18px; padding: 11px 0; font-size: 14px; }
.serie-bilan { text-align: center; padding: 34px 22px 30px; }
.serie-score { font-family: var(--font-display); font-size: 44px; font-weight: 700; color: var(--teal); line-height: 1; }
.serie-bilan-txt { font-size: 14px; color: var(--ink-2); margin: 12px 0 20px; line-height: 1.6; }
@media (max-width: 640px) {
  .serie-body { padding: 12px 10px 28px; }
  .serie-carte { padding: 16px 14px 20px; border-radius: 10px; }
  .serie-score { font-size: 36px; }
}

.serie-aide { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 12px; }
.serie-aide-btn { padding: 6px 12px; font-size: 12.5px; color: var(--teal); }
.serie-aide-txt { margin-top: 10px; padding: 12px 14px; background: var(--bg-2);
  border-left: 3px solid var(--teal); border-radius: 6px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.serie-aide-txt p:last-child { margin-bottom: 0; }

/* Barre de choix du type : une seule ligne, pour laisser l'écran à l'énoncé */
.serie-typebar { display: flex; align-items: center; gap: 8px; padding: 6px 16px;
  border-bottom: 1px solid var(--line); background: var(--bg-2); }
.serie-typebar-l { font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; flex-shrink: 0; }
.serie-typebar-select { flex: 1; min-width: 0; height: 30px; padding: 2px 8px;
  font-family: inherit; font-size: 13px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.serie-typebar-etat { font-family: var(--font-mono); font-size: 12px; color: var(--muted); flex-shrink: 0; }
@media (max-width: 640px) {
  .serie-typebar { padding: 5px 10px; }
  .serie-carte { padding: 14px 12px 18px; }
  .serie-entete { margin-bottom: 8px; }
  .serie-compteur { font-size: 15px; }
  .serie-barre { margin-bottom: 14px; }
}

/* Série en plein écran : toute la fenêtre pour l'énoncé */
.serie-plein { position: fixed; inset: 0; z-index: 900; background: var(--bg);
  display: flex; flex-direction: column; }
.serie-plein-tete { display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 10px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.serie-plein-titre { flex: 1; min-width: 0; line-height: 1.25; }
.serie-plein-titre b { display: block; font-size: 14px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serie-plein-titre span { font-size: 11px; color: var(--muted); }
.serie-plein-corps { flex: 1; overflow-y: auto; padding: 20px 16px 40px; }
.serie-plein .serie-carte { max-width: 760px; margin: 0 auto; }
@media (max-width: 640px) {
  .serie-plein-tete { padding: 8px 10px; gap: 6px; }
  .serie-plein-corps { padding: 12px 10px 32px; }
  .serie-plein .serie-carte { padding: 14px 12px 18px; }
}

.serie-plein-select { flex: 1 1 0; min-width: 0; height: 32px; padding: 2px 8px;
  font-family: inherit; font-size: 13px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.serie-plein-select.court { flex: 0 1 150px; }
.serie-plein-fermer { padding: 4px 10px; font-size: 12px; flex-shrink: 0; }
@media (max-width: 640px) {
  .serie-plein-tete { flex-wrap: wrap; }
  .serie-plein-select { flex: 1 1 100%; }
  .serie-plein-select.court { flex: 1 1 0; }
}

/* Chat en plein écran sur téléphone — vaut pour TOUS les modes (fiches, jury, accueil…).
   On laisse la barre de navigation du bas accessible : elle mesure 52 px, plus la zone
   sûre de l'appareil. Sans ça le candidat serait prisonnier de l'écran. */
@media (max-width: 768px) {
  .chat-shell {
    position: fixed;
    top: 0; left: 0; right: 0;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    height: auto; min-height: 0;
    z-index: 90;
    border-radius: 0;
  }
  .chat-mode-bar { flex-wrap: wrap; }
  .chat-mode-select-label { display: none; }
  .chat-mode-bar .chat-mode-select { flex: 1 1 100%; padding: 8px 10px; font-size: 16px; }
  .chat-mat-select { font-weight: 500; }
  /* la série reste au-dessus, et s'arrête elle aussi avant la barre de navigation */
  .serie-plein { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
}

/* Chat en plein écran — toutes tailles d'écran, tous les modes (Question, Fiches, Jury,
   Accueil, Correction, Photo, Jeux). Sur ordinateur on laisse la barre de navigation de
   gauche (240 px) : sans elle, impossible de sortir de Lab IA. */
.chat-shell {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 240px;
  height: auto; min-height: 0;
  z-index: 90;
  border-radius: 0;
}
.serie-plein { left: 240px; }
@media (max-width: 768px) {
  /* ⚠️ Doit rester APRÈS la règle générale ci-dessus, sinon le `bottom: 0` de celle-ci
     l'emporte (même spécificité, c'est l'ordre qui tranche) et le plein écran recouvre
     la barre de navigation du bas : le candidat ne peut plus sortir de Lab IA. */
  .chat-shell, .serie-plein {
    left: 0;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }
}

/* ===== Lab IA — changer de matière sur ORDINATEUR =====
   Le sélecteur de matière n'existe QUE dans .chat-mode-bar, laquelle n'était affichée
   qu'en dessous de 769 px ; et le plein écran ci-dessus recouvre celui de l'en-tête de
   page. Sur grand écran il n'y avait donc plus AUCUN moyen de changer de matière une
   fois un mode ouvert. On réaffiche la barre en ne gardant que la matière : les modes
   sont déjà dans la colonne de gauche, les remontrer ferait doublon.
   ⚠️ Doit rester après le bloc ≤768px : à spécificité égale, c'est l'ordre qui tranche. */
@media (min-width: 769px) {
  .chat-mode-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
  }
  /* seul le sélecteur de matière est utile ici : le bouton « Modes », le libellé et le
     menu des modes appartiennent à la version téléphone */
  .chat-mode-bar > *:not(.chat-mat-select) { display: none; }
  .chat-mode-bar .chat-mat-select {
    flex: 0 1 300px; min-width: 0;
    padding: 7px 10px; font-size: 13px; font-weight: 500;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); color: var(--text);
  }
}

/* ===== Lab IA — choix du mode (premier écran) =====
   L'écran ouvrait directement sur « Question », les sept autres modes restant
   invisibles sur mobile (barre latérale masquée ≤768px). On les présente donc
   d'abord, à égalité. */
.mode-picker { max-width: 880px; margin: 0 auto; padding: 8px 0 24px; }
.mode-picker-head { text-align: center; margin-bottom: 22px; }
.mode-picker-head h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin: 0 0 6px; }
.mode-picker-head p { color: var(--muted); font-size: 14px; margin: 0; }
.mode-picker-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.mode-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px; text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.mode-card:hover, .mode-card:focus-visible {
  border-color: var(--teal); transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
}
.mode-card-icon {
  width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center;
  background: var(--teal); color: var(--paper); margin-bottom: 2px;
}
.mode-card-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.mode-card-sub { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
/* Retour au choix depuis le chat : compact, il partage la barre avec deux menus. */
.chat-mode-back { flex-shrink: 0; padding: 4px 10px; font-size: 13px; gap: 4px; }
.chat-mode-back svg { transform: rotate(180deg); }
@media (max-width: 768px) {
  .mode-picker-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .mode-card { padding: 13px; }
  /* cible tactile confortable, comme les autres boutons de l'app */
  .chat-mode-back { min-height: 36px; }
}

/* ===== Écran Cours =====
   Fiches de cours lues à l'écran, souvent sur téléphone et parfois longtemps :
   on privilégie une colonne de texte étroite, une taille de police confortable
   et des cibles tactiles ≥44px. */
/* ===== Écran Cours — traitement éditorial =====
   Reprend la mise en page de l'aperçu du corpus : serif pour les titres et le résumé,
   résumé détaché par un filet, blocs « à retenir » et « erreurs » en encadrés colorés.
   🔑 Aucune police n'est ajoutée : `--font-display` est déjà Newsreader, chargée par
   app.html pour toute l'application. Une fiche de cours se lit longtemps — la serif y
   est un choix de confort, pas un ornement. */

.cours-p { line-height: 1.7; margin: 0 0 12px; max-width: 66ch; }

/* Le résumé annonce la fiche : serif, pleine encre, détaché par un filet. */
.cours-resume {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 64ch;
  margin: 0 0 22px;
  padding-left: 16px;
  border-left: 3px solid var(--teal);
}

/* Titre de la fiche et titres de section : la hiérarchie passe par la serif. */
.cours-fiche .card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -.01em;
  line-height: 1.25;
  text-wrap: balance;
}
.cours-fiche > .card:first-child .card-title { font-size: 1.65rem; }
.cours-liste { margin: 4px 0 12px; padding-left: 20px; line-height: 1.65; max-width: 68ch; }
.cours-liste li { margin-bottom: 6px; }
.cours-bloc { margin-top: 16px; }
.cours-bloc h4 { margin: 0 0 6px; font-size: .95em; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.cours-cles { border-left: 3px solid var(--teal); background: var(--teal-soft); }
.cours-cles .card-title { color: var(--teal-2); }
/* Les erreurs sont un avertissement : même traitement, couleur d'alerte. */
.cours-erreurs { border-left: 3px solid var(--amber); background: var(--amber-soft); }
.cours-erreurs .card-title { color: #7a5310; }
.cours-fiche { padding-bottom: 24px; }

.cours-vocab { margin: 0; }
.cours-vocab-item { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line, #e6e1dc); }
.cours-vocab-item:last-child { border-bottom: 0; }
.cours-vocab dt { font-weight: 600; min-width: 160px; }
.cours-vocab dd { margin: 0; color: var(--muted); flex: 1 1 220px; }

.cours-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.cours-ligne { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; min-height: 44px; padding: 10px 4px; background: none; border: 0;
  border-bottom: 1px solid var(--line, #e6e1dc); text-align: left; cursor: pointer; }
.cours-ligne:last-child { border-bottom: 0; }
.cours-ligne:hover { background: var(--hover, rgba(0,0,0,.03)); }
.cours-ligne-titre { font-weight: 600; }

/* ----- Sommaire : les pôles structurent la lecture ----- */
.cours-pole {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.cours-pole-nom {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
/* L'avancement par pôle, pas seulement un total : le candidat voit où il en est
   dans CE thème, ce qui l'aide à choisir la prochaine fiche. */
.cours-pole-compte {
  font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--muted); white-space: nowrap;
}
/* Une fiche lue s'efface sans disparaître : elle reste lisible, mais ne tire plus l'œil. */
.cours-ligne-lue .cours-ligne-titre { color: var(--muted); font-weight: 500; }
/* Un pôle encore fermé reste visible — le candidat voit le chemin devant lui — mais
   se distingue nettement de ce qu'il peut lire aujourd'hui. */
.cours-pole-verrou { opacity: .72; border-style: dashed; }
.cours-pole-verrou .cours-pole-nom { color: var(--muted); }

.cours-ligne-lue .cours-ligne-titre::before { content: "✓ "; color: var(--teal); font-weight: 700; }
.cours-ligne-meta { font-size: .85em; color: var(--muted); }

.cours-recherche { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 1em;
  border: 1px solid var(--line, #e6e1dc); border-radius: 8px; background: var(--card, #fff); color: inherit; }

@media (max-width: 768px) {
  .cours-vocab dt { min-width: 100%; }
  .cours-actions .btn { flex: 1 1 100%; }
}