/* ============================================================
   Nexalys — Barre d'onglets du mode Apprentissage + squelettes
   ============================================================ */

.lrn-tabs {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  background: var(--nx-surface);
  border-bottom: 1px solid var(--nx-border);
  padding: 0 2px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

/* Visible uniquement en mode Apprentissage */
.app-shell:not([data-mode="apprentissage"]) .lrn-tabs { display: none; }
.lrn-tabs[hidden] { display: none; }

.lrn-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 2px 7px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--nx-muted);
  transition: color .14s, border-color .14s;
}

.lrn-tab:hover { color: var(--nx-ink); }

.lrn-tab.is-active {
  color: var(--nx-green-800);
  font-weight: 800;
  border-bottom-color: var(--nx-green-700);
}

.lrn-tab-ico {
  display: grid;
  place-items: center;
  height: 18px;
  color: currentColor;
}

.lrn-tab-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lrn-label-short { display: none; }

@media (max-width: 340px) {
  .lrn-tab { font-size: 10px; }
  .lrn-label-long { display: none; }
  .lrn-label-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .lrn-tab { transition: none; }
}

/* ── Squelettes de chargement (parcours / entraînement) ── */
.lrn-page {
  font-family: var(--font-ui, "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  min-height: 100%;
  padding: 14px 12px 20px;
  box-sizing: border-box;
  background: var(--nx-bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lrn-page-head { display: flex; flex-direction: column; gap: 2px; }

.lrn-page-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nx-green-700);
}

.lrn-page-title {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--nx-ink);
  letter-spacing: -.02em;
}

.lrn-page-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--nx-muted);
}

.lrn-skel {
  border-radius: 14px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.lrn-skel-line {
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--nx-surface-3) 25%, var(--nx-border) 37%, var(--nx-surface-3) 63%);
  background-size: 400% 100%;
  animation: lrn-shimmer 1.35s ease-in-out infinite;
}

.lrn-skel-line--sm { width: 45%; }
.lrn-skel-line--md { width: 72%; }
.lrn-skel-line--lg { width: 100%; }

.lrn-skel-block {
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--nx-surface-3) 25%, var(--nx-border) 37%, var(--nx-surface-3) 63%);
  background-size: 400% 100%;
  animation: lrn-shimmer 1.35s ease-in-out infinite;
}

@keyframes lrn-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .lrn-skel-line, .lrn-skel-block { animation: none; }
}