/* MathsTD — système de jetons de couleurs "app" (suite 22, 2026-09-22)
   Portée : pages du système Workspace/enseignant/prolongements de classe (règle navy/gold levée pour ces pages,
   CLAUDE.md, palette professionnelle plus riche autorisée). Police Calisto MT et mobile-first restent obligatoires.
   Chargé une seule fois (voir snippet_app_ui_v1), réutilisé par toutes les pages "app" plutôt que dupliqué par widget —
   pensé comme un premier pas vers un vrai design system, réutilisable tel quel si le site devient une application. */

.mtd-app {
  --ink: #161A33;
  --muted: #6C7185;
  --bg: #F5F6FB;
  --card: #FFFFFF;
  --border: #E4E6F1;
  --border-strong: #CBD0E3;

  --navy: #0F1B4C;
  --navy-2: #1A2E6B;
  --gold: #C9A84C;
  --gold-bg: #FBF3E1;
  --gold-ink: #8A6A1C;

  --success: #1F7A5C;
  --success-bg: #E4F5EE;
  --warning: #8A5A12;
  --warning-bg: #FBF0DE;
  --danger: #A83A46;
  --danger-bg: #FAEAEC;
  --info: #2E5AA8;
  --info-bg: #E9F0FB;
  --teal: #0E7C7B;
  --teal-bg: #E1F3F2;
  --violet: #5B4B9E;
  --violet-bg: #EFEBFA;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 3px rgba(20,22,43,.07);
  --font: 'Calisto MT','Bookman Old Style',Georgia,serif;

  font-family: var(--font);
  color: var(--ink);
}

.mtd-app h1, .mtd-app h2, .mtd-app h3 { font-family: var(--font); color: var(--ink); }
.mtd-app a { color: var(--navy); }

.mtd-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.1rem;
}
.mtd-card-flat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; }

.mtd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--navy); color: #fff; border: 0; border-radius: var(--radius-sm);
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; padding: .68rem 1.2rem;
  text-decoration: none; transition: background .15s;
}
.mtd-btn:hover { background: var(--navy-2); }
.mtd-btn[disabled] { opacity: .55; cursor: default; }
.mtd-btn-ghost {
  background: #fff; color: var(--navy); border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm); font: inherit; font-weight: 700; font-size: .92rem;
  cursor: pointer; padding: .66rem 1.15rem; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
}
.mtd-btn-text {
  background: none; border: 0; color: var(--navy); text-decoration: underline;
  padding: 0; font: inherit; font-size: .9rem; cursor: pointer;
}

.mtd-badge {
  display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px;
  padding: .2rem .65rem; font-size: .75rem; font-weight: 700;
}
.mtd-badge-gold { background: var(--gold-bg); color: var(--gold-ink); }
.mtd-badge-success { background: var(--success-bg); color: var(--success); }
.mtd-badge-warning { background: var(--warning-bg); color: var(--warning); }
.mtd-badge-danger { background: var(--danger-bg); color: var(--danger); }
.mtd-badge-info { background: var(--info-bg); color: var(--info); }

.mtd-chip {
  display: inline-block; background: #F1F2F8; color: #3A3F55; border-radius: 999px;
  padding: .16rem .65rem; font-size: .78rem; margin: .15rem .3rem .15rem 0;
}

.mtd-tile-ico {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
}

.mtd-input, .mtd-textarea, .mtd-select {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: .58rem .75rem; font: inherit; font-size: .92rem; background: #fff; color: var(--ink);
}
.mtd-input:focus, .mtd-textarea:focus, .mtd-select:focus { outline: 2px solid var(--navy); outline-offset: 1px; }

.mtd-label {
  display: block; font-size: .78rem; font-weight: 700; margin: .8rem 0 .3rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}

.mtd-empty {
  background: #F8F9FC; border: 1px dashed var(--border-strong); border-radius: var(--radius);
  padding: 1.4rem; color: var(--muted); line-height: 1.6;
}

.mtd-note { font-size: .8rem; color: var(--muted); line-height: 1.55; }
.mtd-section-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.mtd-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--gold-bg); color: var(--gold-ink);
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 44px;
}