/* ============================================================
   LinuxLab — Composants
   ============================================================ */

/* ---- Topbar / Chrome ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
}

.brand .glyph {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad);
  box-shadow: var(--glow);
}

.brand b {
  color: var(--accent);
}

/* ---- Onglets ---- */
.tabs {
  display: flex;
  gap: 4px;
  margin-left: 6px;
}

.tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 13.5px;
  transition: 0.18s;
}

.tab:hover {
  color: var(--text);
  background: var(--panel-2);
}

.tab[aria-selected="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---- Espaceur topbar ---- */
.spacer {
  flex: 1;
}

/* ---- Segment de contrôle (sélecteur de thème, etc.) ---- */
.seg {
  display: flex;
  gap: 3px;
  padding: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 11px;
}

.seg button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  transition: 0.18s;
}

.seg button.on {
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}

:root[data-theme="dark"] .seg button.on {
  color: var(--accent);
}

/* ---- Bouton icône ---- */
.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  display: grid;
  place-items: center;
  transition: 0.18s;
}

.icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- Icônes soleil / lune (bascule thème) ---- */
.moon {
  display: none;
}

:root[data-theme="dark"] .sun {
  display: none;
}

:root[data-theme="dark"] .moon {
  display: block;
}

/* ---- Bandeau d'indice ---- */
.hint-bar {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}

.hint-bar b {
  color: var(--accent);
}

/* ---- Carte de base ---- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: var(--card-blur);
}

/* ---- Bouton principal ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 11px;
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 20px;
  color: #031017;
  background: var(--grad);
  box-shadow: var(--glow);
  transition: 0.2s;
}

.btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn.ghost {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn.sm {
  padding: 9px 15px;
  font-size: 13.5px;
}

/* ============================================================
   Écran Accueil
   ============================================================ */

/* ---- Hero ---- */
.hero {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 20px;
  margin-bottom: 22px;
}

.hero-main {
  padding: 34px 32px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.hero h1 {
  font-size: 38px;
  line-height: 1.08;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 14px 0 22px;
  max-width: 46ch;
}

/* ---- Côté stats hero ---- */
.hero-side {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ring-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---- Anneau de progression ---- */
.ring {
  --p: 40;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--accent) calc(var(--p) * 1%),
    var(--panel-2) 0
  );
  position: relative;
}

.ring::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--panel);
}

.ring b {
  position: relative;
  font-family: var(--font-head);
  font-size: 20px;
}

.side-title {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

/* ---- Sparkline activité ---- */
.spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 44px;
  margin-top: 4px;
}

.spark i {
  flex: 1;
  background: linear-gradient(
    var(--accent),
    color-mix(in srgb, var(--accent) 30%, transparent)
  );
  border-radius: 3px 3px 0 0;
  opacity: 0.85;
}

/* ---- Statistiques rapides ---- */
.statline {
  display: flex;
  gap: 10px;
}

.stat {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 12px;
}

.stat .n {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
}

.stat .l {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.stat .n small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* ---- En-tête de section ---- */
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 26px 4px 14px;
}

.sec-head h2 {
  font-size: 19px;
}

.sec-head span {
  font-size: 12.5px;
  color: var(--muted);
}

/* ---- Grille des parcours ---- */
.tracks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ---- Carte parcours ---- */
.track {
  padding: 18px 16px;
  position: relative;
  transition: 0.2s;
  cursor: pointer;
}

.track:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.track .tico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}

.track.locked {
  opacity: 0.72;
}

.track.locked:hover {
  transform: none;
  border-color: var(--border);
}

.track h3 {
  font-size: 15.5px;
  margin-bottom: 3px;
}

.track .lv {
  font-size: 12px;
  color: var(--muted);
}

/* Barre de progression du parcours */
.track .bar {
  height: 6px;
  border-radius: 4px;
  background: var(--panel-2);
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.track .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: var(--glow);
}

.track .foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--muted);
}

/* ---- Pilule statut ---- */
.pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.pill.free {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}

.pill.lockp {
  color: var(--lock);
}

/* Badge cadenas sur les parcours verrouillés */
.badge-lock {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--lock);
}

/* ============================================================
   Écran Leçon
   ============================================================ */

.lesson {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 18px;
  align-items: stretch;
}

.pane {
  padding: 24px 24px;
}

/* ---- Fil d'Ariane ---- */
.crumb {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.crumb b {
  color: var(--accent);
}

.crumb svg {
  opacity: 0.5;
}

.lesson h2 {
  font-size: 23px;
  margin-bottom: 12px;
}

.lesson .lead {
  color: var(--muted);
  line-height: 1.65;
  font-size: 14.5px;
}

.lesson .lead code {
  font-family: var(--font-mono);
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.9em;
}

/* ---- Bloc mission ---- */
.mission {
  margin-top: 20px;
  padding: 16px 16px;
  border-radius: var(--radius);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--accent-soft);
}

.mission .mh {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
}

.mission p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.mission code {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ---- Progression de leçon ---- */
.lesson-progress {
  margin-top: 22px;
}

.lesson-progress .pl {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 7px;
}

/* Indicateurs de progression (points) */
.dots {
  display: flex;
  gap: 6px;
}

.dots i {
  height: 6px;
  flex: 1;
  border-radius: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.dots i.done {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-color: transparent;
}

.dots i.cur {
  background: color-mix(in srgb, var(--accent) 40%, var(--panel-2));
}

/* Actions de leçon */
.lesson-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* ============================================================
   Terminal simulé
   ============================================================ */

.term-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: var(--term-bg);
  border-color: color-mix(in srgb, var(--term-accent) 12%, var(--border));
}

/* Glow du terminal en mode sombre */
:root[data-theme="dark"] .term-wrap {
  box-shadow: var(--glow), var(--shadow);
}

/* Barre titre du terminal */
.term-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
}

/* Pastilles macOS (rouge/jaune/vert) */
.dotwin {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.dotwin.r {
  background: #ff5f57;
}

.dotwin.y {
  background: #febc2e;
}

.dotwin.g {
  background: #28c840;
}

.term-title {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--term-dim);
}

.term-title span {
  color: var(--term-accent);
}

/* Corps du terminal */
.term-body {
  flex: 1;
  padding: 14px 15px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--term-fg);
  overflow-y: auto;
  min-height: 300px;
  max-height: 52vh;
  cursor: text;
}

.term-body::-webkit-scrollbar {
  width: 8px;
}

.term-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

/* Lignes de texte terminal */
.tline {
  white-space: pre-wrap;
  word-break: break-word;
}

.tprompt {
  color: var(--term-accent);
  font-weight: 500;
}

.tpath {
  color: #7aa2f7;
}

.tdir {
  color: var(--term-accent);
  font-weight: 500;
}

.terr {
  color: #ff7b72;
}

.tok {
  color: #3fb950;
}

.tmuted {
  color: var(--term-dim);
}

/* ---- Ligne de saisie de commande ---- */
.input-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 15px 15px;
}

.input-line .tprompt,
.input-line .tpath {
  font-family: var(--font-mono);
  font-size: 16px;
}

/* Champ de saisie de commande — 16px pour empêcher le zoom auto iOS au focus */
#cmd {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--term-fg);
  font-family: var(--font-mono);
  font-size: 16px;
  caret-color: var(--term-accent);
}

/* ---- Puce de mission dans le terminal ---- */
.mission-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--term-dim);
  background: rgba(255, 255, 255, 0.02);
}

.mission-chip .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #febc2e;
  box-shadow: 0 0 8px #febc2e88;
  flex: 0 0 auto;
}

/* État mission réussie */
.mission-chip.done {
  color: #3fb950;
}

.mission-chip.done .dot {
  background: #28c840;
  box-shadow: 0 0 10px #28c840aa;
}

.mission-chip.done .txt strong {
  color: #7ee787;
}

/* ============================================================
   Écran Examen
   ============================================================ */

.exam-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 18px;
}

.exam-top h2 {
  font-size: 19px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.exam-meta {
  display: flex;
  gap: 22px;
  align-items: center;
}

/* Chronomètre */
.chrono {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}

.exam-meta .l {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Grille examen : checklist + résultat */
.exam-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 18px;
}

/* ---- Checklist des missions ---- */
.checklist {
  padding: 8px 8px;
}

.chk {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border-radius: var(--radius);
  transition: 0.15s;
}

.chk + .chk {
  border-top: 1px solid var(--border);
}

.chk .mk {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  color: var(--muted);
}

/* Mission réussie */
.chk.ok .mk {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}

/* Mission en cours */
.chk.cur .mk {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.chk .t {
  font-size: 14px;
}

.chk .t small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

/* Mission verrouillée */
.chk.lock {
  opacity: 0.55;
}

/* ---- Panneau résultat / badge ---- */
.result {
  padding: 26px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Médaille */
.medal {
  width: 96px;
  height: 96px;
  margin: 2px auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: conic-gradient(
    from 210deg,
    var(--accent),
    var(--accent-2),
    var(--accent)
  );
  box-shadow:
    var(--glow),
    0 10px 30px -8px rgba(0, 0, 0, 0.35);
}

.result h3 {
  font-size: 20px;
  margin-bottom: 4px;
}

.result .sub {
  color: var(--muted);
  font-size: 13.5px;
  margin-bottom: 18px;
}

/* ---- Ligne de scores ---- */
.score-row {
  display: flex;
  gap: 12px;
  margin: 0 0 20px;
}

.score {
  flex: 1;
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.score .n {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 700;
}

.score .n small {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.score .l {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Confettis ---- */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetti i {
  position: absolute;
  top: -12px;
  width: 7px;
  height: 11px;
  opacity: 0.85;
  border-radius: 1px;
  animation: fall linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(360px) rotate(320deg);
  }
}

/* ---- Note de bas de page ---- */
.note {
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}

.note b {
  color: var(--accent);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  /* Grilles → colonne unique */
  .hero,
  .lesson,
  .exam-grid {
    grid-template-columns: 1fr;
  }

  .tracks {
    grid-template-columns: 1fr 1fr;
  }

  .hero h1 {
    font-size: 30px;
  }

  /* Topbar adaptée mobile : tout visible et cliquable au doigt */
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
  }

  .spacer {
    display: none;
  }

  .brand {
    order: 1;
  }

  #theme {
    order: 2;
    margin-left: auto;
  }

  .tabs {
    display: flex;
    order: 3;
    width: 100%;
    gap: 6px;
  }

  .tabs .tab {
    flex: 1;
    text-align: center;
    padding: 11px 8px;
  }

  .seg {
    order: 4;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .seg button {
    flex: 1 1 40%;
    padding: 11px 8px;
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  .tracks {
    grid-template-columns: 1fr;
  }

  .exam-meta {
    gap: 14px;
  }
}