/* ================================================================
   Maths Trainer — styles personnalisés
   (mise en page principale gérée par Tailwind CDN)
   ================================================================ */

/* ── Base ─────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Cache le contenu Alpine avant l'initialisation (évite le flash) */
[x-cloak] { display: none !important; }

/* ── Sidebar — scrollbar fine ─────────────────────────────────── */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.sidebar::-webkit-scrollbar        { width: 4px; }
.sidebar::-webkit-scrollbar-track  { background: transparent; }
.sidebar::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 4px; }

/* ── KaTeX — overrides ────────────────────────────────────────── */
.katex-display {
  margin: 0.6em 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Légèrement plus grand que le corps de texte */
.katex { font-size: 1.06em; }

/* Dans les listes de méthode, les blocs display restent compacts */
.method-card .katex-display {
  margin: 0.25em 0;
}

/* ── Carte Méthode — numérotation custom ──────────────────────── */
.method-card ol {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}

.method-card li {
  counter-increment: step;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.3rem 0;
  line-height: 1.55;
}

.method-card li::before {
  content: counter(step);
  flex-shrink: 0;
  width:  1.55em;
  height: 1.55em;
  background: #3b82f6;   /* blue-500 */
  color: #fff;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}

/* ── Résultat final dans la correction ───────────────────────── */
.result-highlight {
  display: inline-block;
  background: #fef9c3;        /* yellow-100 */
  border: 2px solid #eab308;  /* yellow-500 */
  border-radius: 8px;
  padding: 0.3rem 1.1rem;
  margin-top: 0.6rem;
}

/* ── Transitions Alpine ───────────────────────────────────────── */
.transition-colors { transition: background-color 120ms, color 120ms; }