/* ================================================================
   lab-modern.css - Prototype de rendu pour les labs
   ================================================================ */

:root {
  --serif: 'Instrument Serif', Georgia, serif;
}

.lab-wrap {
  background: var(--bg);
  min-height: calc(100vh - 72px);
}

.lab-sidebar {
  top: 72px;
  height: calc(100vh - 72px);
  overflow-y: auto;
  width: 246px;
  padding: 18px 0;
  background: rgba(251,249,246,.92);
  border-right: 1px solid rgba(26,22,18,.10);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.45);
}

.lab-sidebar-title {
  padding: 8px 18px 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.lab-progress {
  padding: 0 18px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(26,22,18,.08);
}

.lab-progress-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
}

.lab-progress-bar {
  height: 4px;
  background: var(--bg3);
  border-radius: 999px;
}

.lab-progress-fill {
  border-radius: 999px;
}

.lab-nav-item {
  margin: 0 10px 5px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #6B6258;
}

.lab-nav-item:hover {
  background: rgba(244,239,230,.72);
  border-color: rgba(30,100,152,.16);
  border-left-color: rgba(30,100,152,.32);
  color: var(--text);
}

.lab-nav-item.active {
  background: var(--bg2);
  border-color: rgba(30,100,152,.22);
  border-left-color: var(--accent);
  box-shadow: 0 8px 18px rgba(26,22,18,.045);
  color: var(--text);
  font-weight: 700;
}

.lab-nav-item.done {
  background: rgba(236,253,245,.38);
  border-color: rgba(16,185,129,.12);
  border-left-color: var(--green);
  color: #3f6f59;
  font-weight: 600;
}

.lab-nav-num {
  min-width: 22px;
  color: var(--text3);
}

.lab-nav-item.done .lab-nav-num {
  color: var(--green);
  font-size: 0;
}

.lab-nav-item.done .lab-nav-num::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(236,253,245,.76);
  border: 1px solid rgba(16,185,129,.26);
  color: var(--green);
  font-size: 10px;
}

.lab-nav-item.done.active {
  background: var(--bg2);
  border-color: rgba(30,100,152,.22);
  border-left-color: var(--accent);
  color: var(--text);
}

.lab-divider {
  margin: 14px 18px;
  background: rgba(26,22,18,.10);
}

.lab-nav-divider {
  height: 1px;
  margin: 8px 18px;
  background: rgba(26,22,18,.10);
}

.lab-nav-quiz .lab-nav-quiz-icon {
  font-weight: 700;
  color: var(--accent);
}

.lab-nav-quiz.locked {
  opacity: .45;
  cursor: not-allowed;
}

.lab-nav-lock {
  margin-left: auto;
  font-size: 11px;
}

.step-dot-quiz {
  font-weight: 700;
  color: var(--accent);
  border-color: rgba(30,100,152,.3);
}

.step-dot-quiz.locked {
  opacity: .4;
  cursor: not-allowed;
}

.prereqs-block a {
  color: var(--text4);
  text-decoration: none;
  transition: color .15s;
}
.prereqs-block a:hover {
  color: var(--text);
}

.lab-main {
  max-width: 860px;
  margin-left: 246px;
  padding: 0 34px 70px;
  min-width: 0;
}

.lab-back {
  display: none;
}

.lab-hero-panel,
.topo-wrap,
.step-card,
.quiz-card,
.lab-next-card,
.done-banner {
  border-radius: 6px;
  border: 1px solid rgba(26,22,18,.10);
  box-shadow: 0 10px 26px rgba(26,22,18,.045);
}

.lab-hero-panel {
  padding: 42px 38px 36px;
  margin: 0 -34px 28px;
  border-left: none;
  border-right: none;
  border-radius: 0;
  background:
    radial-gradient(circle at 14% 18%, rgba(30,100,152,.28), transparent 30%),
    radial-gradient(circle at 84% 14%, rgba(16,185,129,.10), transparent 28%),
    linear-gradient(135deg, #0B1018 0%, #121A24 58%, #0D1117 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: none;
}

.lab-hero-panel::before {
  display: none;
}

.lab-number {
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: #93c5fd;
  letter-spacing: 0;
  text-transform: none;
}

.lab-title {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  color: #f1f5f9;
}

.lab-concept {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  padding: 0;
  border-left: none;
  background: transparent;
  color: #dbe5f1;
  font-size: 13px;
  line-height: 1.75;
}

.lab-cours-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 7px 18px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity .15s;
}
.lab-cours-banner:hover { opacity: .85; }
.lab-cours-banner-icon, .lab-cours-banner-text, .lab-cours-banner-cta { }

.section-title {
  max-width: 860px;
  margin: 24px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(26,22,18,.08);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.topo-wrap {
  padding: 22px;
  margin-bottom: 26px;
  background: rgba(251,249,246,.72);
}

.topology-svg {
  display: block;
  min-width: 0;
}

.topology-svg-wide {
  min-width: 0;
}

.topology-svg-windows {
  overflow: visible;
  aspect-ratio: 720 / 260;
  background: #F4EFE6;
  border: 1px solid rgba(26,22,18,.08);
  border-radius: 10px;
}

.topology-svg-windows rect {
  fill: #FBF9F6 !important;
  stroke-width: 1.3 !important;
  filter: drop-shadow(0 10px 10px rgba(26,22,18,.08));
}

.topology-svg-windows line {
  stroke: #476173 !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round;
}

.topology-svg-windows text {
  letter-spacing: 0;
}

.topology-svg-windows text[font-weight="600"] {
  font-family: system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  fill: #18130E !important;
}

.topology-svg-windows text[font-family="monospace"] {
  fill: #6B6258 !important;
  font-family: var(--mono);
}

.topology-svg-windows text[fill="#3b82f6"],
.topology-svg-windows text[fill="#60a5fa"] {
  fill: var(--accent) !important;
}

.topology-svg-windows text[fill="#a78bfa"],
.topology-svg-windows text[fill="#8b5cf6"] {
  fill: #6B48D8 !important;
}

.topology-svg-windows text[fill="#f59e0b"],
.topology-svg-windows text[fill="#fbbf24"] {
  fill: #b45309 !important;
}

.topology-svg-windows text[fill="#6ee7b7"] {
  fill: #047857 !important;
}

.steps-progress {
  gap: 8px;
  margin-bottom: 16px;
}

.step-dot {
  width: 31px;
  height: 31px;
  border: 1px solid rgba(26,22,18,.14);
  background: var(--bg2);
}

.step-dot:hover {
  border-color: rgba(30,100,152,.35);
}

.step-dot.active {
  border-color: var(--accent);
  background: var(--accent);
}

.step-dot.done {
  border-color: var(--green);
  background: #ecfdf5;
  color: var(--green);
}

.step-card {
  padding: 24px;
  background: var(--bg2);
  position: relative;
  overflow: visible;
}

.step-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: rgba(30,100,152,.72);
}

.step-header {
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(26,22,18,.08);
}

.step-title-text {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0;
}

.step-body {
  color: var(--text2);
  font-size: 13px;
  line-height: 1.75;
}

.step-body code {
  background: var(--bg3);
  color: var(--text);
}

.step-body a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.step-body a:hover {
  opacity: .75;
}

.cable-list li {
  border-bottom-color: rgba(26,22,18,.08);
}

.cable-icon {
  color: var(--accent);
}

.cable-type {
  background: rgba(244,239,230,.84);
  color: #7a4e08;
}

.cli-block {
  margin: 20px 0;
  border: 1px solid rgba(30,100,152,.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(7,10,16,1));
  box-shadow: 0 18px 38px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}

.cli-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 9px 12px;
  background: linear-gradient(180deg, #182231, #101720);
  border-bottom: 1px solid rgba(148,163,184,.18);
}

.cli-window-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cli-window-controls span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

.cli-window-controls span:nth-child(1) { background: #ef4444; }
.cli-window-controls span:nth-child(2) { background: #f59e0b; }
.cli-window-controls span:nth-child(3) { background: #10b981; }

.cli-label {
  min-width: 0;
  overflow: hidden;
  color: #cbd5e1;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cli-copy {
  border-color: rgba(96,165,250,.34);
  border-radius: 5px;
  background: rgba(30,100,152,.14);
  color: #bfdbfe;
  font-size: 11px;
  font-weight: 700;
}

.cli-copy:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.cli-body {
  padding: 16px 18px 18px;
  color: #e2e8f0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.85;
  scrollbar-color: rgba(148,163,184,.48) transparent;
}

.cli-line {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: start;
}

.cli-prompt {
  color: #7dd3fc;
  font-weight: 700;
  white-space: nowrap;
}

.cli-cmd {
  color: #f8fafc;
  white-space: pre-wrap;
  word-break: break-word;
}

.cli-copy-line {
  background: transparent;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 4px;
  color: #7dd3fc;
  font-size: 11px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s, background-color .15s;
}

.cli-copy-line:hover {
  opacity: 1;
  background-color: rgba(125,211,252,.12);
}

.cli-copy-line.copied {
  opacity: 1;
  color: #6ee7a8;
  border-color: rgba(110,231,168,.4);
}

.cli-comment {
  color: #94a3b8;
  font-style: italic;
  white-space: pre-wrap;
  word-break: break-word;
}

.cli-output {
  color: #a8c5a0;
  padding-left: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

.result-box,
.panne-box {
  border-radius: 6px;
  padding: 14px 16px;
}

.result-box {
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.panne-box {
  background: #fffbeb;
  border-color: #fde68a;
}

.result-box-title,
.panne-box-title,
.quiz-title {
  font-family: var(--mono);
  letter-spacing: 0;
  text-transform: none;
}

.step-nav {
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}

.btn-step {
  border-radius: 6px;
  font-size: 12px;
}

.btn-step.primary {
  background: var(--accent);
  border-color: var(--accent);
}

.step-check {
  font-size: 12px;
}

.quiz-section {
  margin-top: 34px;
  padding-top: 24px;
}

.quiz-title {
  font-size: 14px;
}

.quiz-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quiz-page-hero {
  padding: 32px 38px;
  margin: 0 -34px 4px;
  background:
    radial-gradient(circle at 80% 20%, rgba(30,100,152,.18), transparent 40%),
    linear-gradient(135deg, #0B1018 0%, #121A24 100%);
  border-top: 1px solid rgba(26,22,18,.10);
  border-bottom: 1px solid rgba(26,22,18,.10);
  text-align: center;
}

.quiz-page-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #93c5fd;
  margin-bottom: 8px;
}

.quiz-page-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  color: #f1f5f9;
  margin: 0 0 8px;
}

.quiz-page-sub {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}

.quiz-card {
  padding: 18px;
  background: var(--bg2);
}

.quiz-opt {
  border-radius: 6px;
  background: rgba(244,239,230,.62);
}

.done-banner {
  padding: 24px;
  background: var(--bg2);
}

.done-banner h3 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
}

.lab-rating {
  max-width: 420px;
  margin: 18px auto 0;
  padding: 16px;
  border: 1px solid rgba(26,22,18,.10);
  border-radius: 6px;
  background: rgba(244,239,230,.58);
}

.lab-rating-title {
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.lab-rating-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.lab-rating-star {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(26,22,18,.14);
  border-radius: 6px;
  background: var(--bg2);
  color: #b8afa4;
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
}

.lab-rating-star:hover,
.lab-rating-star.active {
  border-color: rgba(180,83,9,.38);
  background: #fffbeb;
  color: #d97706;
}

.lab-rating-status {
  min-height: 18px;
  margin-top: 9px;
  color: var(--text3);
  font-size: 12px;
}

.lex {
  color: var(--accent);
  border-bottom-color: rgba(30,100,152,.45);
}

.lex:hover,
.lex.open {
  background-color: rgba(30,100,152,.12);
}

.lab-hero-panel .lex {
  color: #dbeafe;
  border-bottom-color: rgba(147,197,253,.48);
}

.lab-hero-panel .lex:hover,
.lab-hero-panel .lex.open {
  background-color: rgba(147,197,253,.18);
}

.lex-tooltip {
  background: var(--bg2);
  color: var(--text2);
  border-color: rgba(26,22,18,.12);
  box-shadow: 0 14px 34px rgba(26,22,18,.14);
  z-index: 500;
  font-weight: 400;
}

@media(max-width:1024px) {
  .lab-main {
    margin-left: 0;
    max-width: none;
    width: 100%;
    padding: 0 16px 60px;
  }
}

@media(max-width:700px) {
  .lab-main {
    padding: 0 16px 52px;
  }
  .lab-hero-panel {
    margin: 0 -16px 24px;
    padding: 32px 16px 28px;
  }
  .lab-title {
    font-size: 34px;
  }
  .topo-wrap {
    padding: 16px;
  }
  .topology-svg {
    min-width: 0;
  }
  .topology-svg-wide {
    min-width: 0;
  }
  .step-card {
    padding: 18px;
  }
  .cli-header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .cli-copy {
    grid-column: 1 / -1;
    justify-self: stretch;
    padding: 7px 10px;
  }
  .cli-body {
    padding: 14px;
    font-size: 12px;
  }
  .cli-line {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
  }
  .step-header {
    align-items: flex-start;
  }
  .step-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-step,
  .step-check {
    width: 100%;
    justify-content: center;
  }
  .step-check {
    margin-left: 0;
  }
  .lab-wrap ~ footer {
    margin-left: 0 !important;
  }
}

/* ---- Changelog ---- */
.lab-changelog-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 10px;
  margin: 0 0 5px;
}
.lab-changelog-label {
  font-size: 13px;
  font-weight: 600;
  color: #7e22ce;
}
.lab-changelog-date {
  font-size: 11px;
  color: var(--text3);
}
.lab-changelog-btn:hover {
  background: rgba(168,85,247,.06);
}
.lab-changelog-btn.active .lab-changelog-label {
  color: #6b21a8;
}

.lab-main.changelog-view .topo-wrap,
.lab-main.changelog-view .section-title,
.lab-main.changelog-view #steps-progress {
  display: none;
}

.step-changelog {
  background: var(--bg2);
}

.step-changelog .step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(168,85,247,.10);
  border: 1px solid rgba(168,85,247,.22);
  color: #7e22ce;
  font-size: 16px;
  flex-shrink: 0;
}

.changelog-entry {
  margin-bottom: 20px;
}

.changelog-entry:last-child {
  margin-bottom: 0;
}

.changelog-date {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(168,85,247,.08);
  border: 1px solid rgba(168,85,247,.18);
  color: #7e22ce;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

.changelog-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text2);
  font-size: 14px;
  line-height: 2;
}

.changelog-list code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(26,22,18,.06);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}

.lab-quiz-link {
  margin-top: 24px;
  text-align: center;
}
.lab-quiz-link a {
  display: inline-block;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  padding: 9px 22px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 6px;
  transition: background .15s, transform .15s;
}
.lab-quiz-link a:hover {
  transform: translateY(-2px);
  background: #174f78;
  border-color: #174f78;
  box-shadow: 0 4px 12px rgba(30,100,152,.25);
}
.lab-next-card {
  padding: 24px 28px;
  background: var(--bg2);
  margin-top: 32px;
}
.lab-next-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  margin-bottom: 10px;
}
.lab-next-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(26,22,18,.10);
  border-radius: 6px;
  padding: 14px 16px;
  background: rgba(244,239,230,.5);
  transition: border-color .15s, background .15s;
}
.lab-next-link:hover {
  border-color: var(--accent);
  background: rgba(244,239,230,.85);
}
.lab-next-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.lab-next-desc {
  font-size: 13px;
  color: var(--text3);
  margin-bottom: 10px;
  line-height: 1.5;
}
.lab-next-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}
.lab-next-tag {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(26,22,18,.07);
  color: var(--text3);
}
.lab-next-btn {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}