/* ============================================================
   student-tabs.css — onglets + layout principal
   PerfShop — SPDX-License-Identifier: AGPL-3.0-or-later
   ============================================================ */

/* ── Navigation onglets ─────────────────────────────────────── */
.tabs {
  display: flex; gap: 4px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 6px; margin-bottom: 24px; flex-wrap: wrap;
}
.tab {
  padding: 9px 18px; border-radius: 8px; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 0.87rem; font-weight: 600;
  color: var(--text2); background: transparent; transition: all 0.2s;
  white-space: nowrap;
}
.tab:hover { background: var(--surface2); color: var(--text); }
.tab.active { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.tab.tab-perf.active     { color: var(--perf);     border-color: rgba(56,189,248,0.35); }
.tab.tab-script.active   { color: var(--script);   border-color: rgba(167,139,250,0.35); }
.tab.tab-business.active { color: var(--business); border-color: rgba(251,146,60,0.35); }
.tab.tab-func.active     { color: var(--func);     border-color: rgba(250,204,21,0.35); }
.tab.tab-security.active { color: var(--security); border-color: rgba(239,68,68,0.35); }
.tab.tab-pedagogy.active { color: var(--pedagogy); border-color: rgba(52,211,153,0.35); }

/* ── Sections ───────────────────────────────────────────────── */
.section { display: none; }
.section.active { display: block; }

/* ── Slider générique (chaos classiques) ────────────────────── */
.classic-card {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 16px; padding: 24px 28px; max-width: 680px;
}
.classic-card.locked    { opacity: 0.5; pointer-events: none; }
.classic-card.active-1  { border-color: var(--n1-color); box-shadow: 0 0 0 3px rgba(46,213,115,0.06); }
.classic-card.active-2  { border-color: var(--n2-color); box-shadow: 0 0 0 3px rgba(255,165,2,0.06); }
.classic-card.active-3  { border-color: var(--n3-color); box-shadow: 0 0 0 3px rgba(255,71,87,0.06); }
.classic-card.active-4  { border-color: var(--n4-color); box-shadow: 0 0 0 3px rgba(192,132,252,0.06); }

.classic-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.classic-label  { font-size: 0.72rem; font-weight: 700; font-family: 'DM Mono', monospace;
                  margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.08em; }
.classic-title  { font-size: 1.05rem; font-weight: 700; }
.classic-desc   { font-size: 0.82rem; color: var(--text2); margin-bottom: 20px; line-height: 1.55; }

.card-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
  border-radius: 20px; font-size: 0.75rem; font-weight: 700;
  font-family: 'DM Mono', monospace; white-space: nowrap;
}
.badge-off  { background: var(--surface2); color: var(--text2); border: 1px solid var(--border); }
.badge-1    { background: rgba(46,213,115,0.12);  color: var(--n1-color); }
.badge-2    { background: rgba(255,165,2,0.12);   color: var(--n2-color); }
.badge-3    { background: rgba(255,71,87,0.12);   color: var(--n3-color); }
.badge-4    { background: rgba(192,132,252,0.12); color: var(--n4-color); }
.badge-lock { background: rgba(120,120,160,0.08); color: var(--text2); border: 1px solid var(--border); }

/* Slider */
.slider-wrap   { padding: 4px 0; }
.slider-labels { display: flex; justify-content: space-between; font-size: 0.7rem;
                 color: var(--text2); font-family: 'DM Mono', monospace; margin-bottom: 8px; }
input[type=range] {
  -webkit-appearance: none; width: 100%; height: 6px;
  background: var(--border); border-radius: 4px; outline: none; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg); cursor: pointer;
  box-shadow: 0 0 0 2px var(--accent);
}
.slider-status {
  margin-top: 10px; font-size: 0.82rem; font-weight: 600;
  text-align: center; font-family: 'DM Mono', monospace;
  padding: 6px 12px; border-radius: 8px; background: var(--surface2); transition: all 0.3s;
}
.lock-msg {
  display: none; margin-top: 10px; padding: 8px 12px; border-radius: 8px;
  background: rgba(102,126,234,0.08); border: 1px solid rgba(102,126,234,0.2);
  font-size: 0.78rem; color: var(--accent); text-align: center;
}
.classic-card.locked .lock-msg { display: block; }

/* ── Section intro ──────────────────────────────────────────── */
.section-intro {
  font-size: 0.82rem; color: var(--text2); margin-bottom: 20px; line-height: 1.6;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 18px;
}

/* ── Toast ──────────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 28px; right: 28px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 20px;
  font-size: 0.85rem; font-weight: 600; opacity: 0; transform: translateY(10px);
  transition: all 0.25s; pointer-events: none; max-width: 340px; z-index: 999;
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast.ok   { border-color: rgba(46,213,115,0.4); color: var(--success); }
#toast.err  { border-color: rgba(255,71,87,0.4);  color: var(--danger); }
#toast.warn { border-color: rgba(255,165,2,0.4);  color: var(--warning); }