/* Labs : liste, fiche détaillée. */

.lab-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.lab-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.lab-dots i.is-on { background: var(--warning); }
.lab-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; font-size: var(--fs-xs); color: var(--text-2); }
.lab-card__meta .icon { width: 14px; height: 14px; }

.lab-head a { color: inherit; }
.lab-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; font-size: var(--fs-sm); opacity: .95; }
.lab-head__meta span { display: inline-flex; align-items: center; gap: 6px; }
.lab-head__meta .icon { width: 16px; height: 16px; }
.lab-head .lab-dots i { background: rgba(255, 255, 255, .35); }
.lab-head .lab-dots i.is-on { background: #FFD15C; }
.lab-toc { margin-top: 0; }
#sec-objectif, #sec-topologie, #sec-plan, #sec-config, #sec-tests, #sec-erreurs, #sec-challenge, #sec-pratique { scroll-margin-top: calc(var(--header-h) + 12px); }

.lab-steps { display: grid; gap: var(--space-3); }
.lab-step .card__subtitle { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3); }
.lab-step__n { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: var(--fs-xs); font-weight: 800; }
.lab-gui { padding-left: 1.3em; display: grid; gap: 6px; }

.lab-errors { display: grid; gap: 10px; }
.lab-errors div { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 3px solid var(--danger); }
.lab-errors dt { font-weight: 750; }
.lab-errors dd { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }

.lab-reveal { margin-top: var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); }
.lab-reveal summary { padding: 10px 12px; font-weight: 700; cursor: pointer; }
.lab-reveal p { padding: 0 12px 12px; }
.lab-done { display: grid; gap: 10px; }

/* ---------- Projet final ---------- */
.proj-done { margin-top: var(--space-3); padding: 10px 12px; border-radius: var(--radius-sm); background: var(--success-soft); font-weight: 700; }
.proj-steps { list-style: none; display: grid; gap: var(--space-3); }
.proj-step { display: grid; gap: var(--space-3); scroll-margin-top: calc(var(--header-h) + 12px); }
.proj-step.is-done { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.proj-step.is-done .lab-step__n { background: var(--success); }
.proj-step__head { display: flex; align-items: center; gap: 10px; }
.proj-step__title { font-size: var(--fs-lg); font-weight: 800; }
.proj-step__mods { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.proj-step__mods .chip { font-size: var(--fs-xs); }
.proj-sol { display: grid; gap: var(--space-3); padding: 0 12px 12px; }
.proj-sol__block { min-width: 0; }