.docker-course {
  --px-orange: #2496ed;
  --px-orange-soft: rgba(36, 150, 237, 0.14);
  --px-blue: #67e8f9;
  --px-green: #34d399;
}

.docker-course .px-hero {
  background:
    radial-gradient(circle at 78% 24%, rgba(36, 150, 237, 0.22), transparent 29%),
    radial-gradient(circle at 20% 12%, rgba(103, 232, 249, 0.1), transparent 28%),
    linear-gradient(135deg, #070b13 0%, #071525 62%, #08111e 100%);
}

.docker-course .px-hero h1 span {
  background: linear-gradient(90deg, #2496ed, #67e8f9 52%, #60a5fa);
  background-clip: text;
  -webkit-background-clip: text;
}

.docker-course .px-logo-mark {
  border-color: rgba(36, 150, 237, 0.38);
  background: linear-gradient(145deg, rgba(36, 150, 237, 0.3), rgba(8, 17, 30, 0.82));
}

.docker-course .px-logo-mark span {
  font-size: 0;
}

.docker-course .px-logo-mark span::before {
  content: "🐳";
  font-size: 3.1rem;
}

.docker-course .docker-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.docker-course .docker-path {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.72);
}

.docker-course .docker-path strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text-primary);
}

.docker-course .docker-path p {
  margin: 0;
  color: var(--text-secondary);
}

.docker-course .docker-file {
  margin: 16px 0;
  padding: 17px 18px;
  overflow-x: auto;
  border: 1px solid rgba(36, 150, 237, 0.26);
  border-radius: 10px;
  color: #dbeafe;
  background: #050b14;
  font: 500 0.84rem/1.65 var(--font-mono);
  white-space: pre;
}

.docker-course .docker-safe-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.docker-course .docker-safe-list div {
  padding: 15px;
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 10px;
  background: rgba(52, 211, 153, 0.06);
}

.docker-course .docker-system-choice {
  padding: 42px 0 28px;
  border-top: 1px solid rgba(36, 150, 237, 0.18);
  border-bottom: 1px solid rgba(36, 150, 237, 0.18);
  background:
    radial-gradient(circle at 50% 0%, rgba(36, 150, 237, 0.12), transparent 46%),
    rgba(5, 11, 20, 0.64);
}

.docker-course .docker-choice-heading {
  max-width: 780px;
  margin-bottom: 22px;
}

.docker-course .docker-choice-heading h2 {
  margin: 5px 0 10px;
  color: var(--text-primary);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.docker-course .docker-choice-heading p:last-child {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.docker-course .docker-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.docker-course .docker-choice-card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 132px;
  padding: 21px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.82);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.docker-course .docker-choice-card:hover,
.docker-course .docker-choice-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(103, 232, 249, 0.62);
  outline: none;
}

.docker-course .docker-choice-card.selected {
  border-color: #67e8f9;
  background: linear-gradient(135deg, rgba(36, 150, 237, 0.18), rgba(15, 23, 42, 0.9));
  box-shadow: 0 0 0 2px rgba(103, 232, 249, 0.1), 0 18px 40px rgba(0, 0, 0, 0.2);
}

.docker-course .docker-choice-icon {
  display: grid;
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 1px solid rgba(103, 232, 249, 0.26);
  border-radius: 16px;
  font-size: 2rem;
  font-style: normal;
  background: rgba(36, 150, 237, 0.12);
}

.docker-course .docker-choice-icon.windows { color: #60a5fa; }
.docker-course .windows-mark {
  display: grid;
  grid-template-columns: repeat(2, 17px);
  grid-template-rows: repeat(2, 17px);
  gap: 4px;
  transform: perspective(90px) rotateY(-6deg);
  filter: drop-shadow(0 6px 12px rgba(37, 151, 255, 0.28));
}
.docker-course .windows-mark i {
  display: block;
  border-radius: 3px;
  background: linear-gradient(145deg, #72dcff 0%, #2d8cff 58%, #5468ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
}
.docker-course .docker-choice-icon.ubuntu { color: #fb923c; background: rgba(249, 115, 22, 0.11); }

.docker-course .docker-choice-content {
  display: grid;
  gap: 5px;
}

.docker-course .docker-choice-content strong { font-size: 1.08rem; }
.docker-course .docker-choice-content small { color: var(--text-secondary); line-height: 1.5; }
.docker-course .docker-choice-content em { color: #67e8f9; font-size: 0.82rem; font-style: normal; font-weight: 700; }

.docker-course .docker-choice-status {
  margin: 15px 0 0;
  color: #a5f3fc;
  font-size: 0.88rem;
}

.docker-course .docker-path-module.path-hidden,
.docker-course [data-path-link].path-hidden {
  display: none;
}

.docker-course .docker-common-divider {
  display: grid;
  gap: 6px;
  margin: 8px 0 20px;
  padding: 16px 18px;
  border: 1px solid rgba(52, 211, 153, 0.24);
  border-radius: 12px;
  background: rgba(52, 211, 153, 0.06);
}

.docker-course .docker-common-divider span {
  color: #34d399;
  font: 700 0.72rem/1.2 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.docker-course .docker-common-divider strong { color: var(--text-primary); }

.docker-track-hero {
  padding: 88px 0 64px;
  border-bottom: 1px solid rgba(36, 150, 237, 0.22);
  background: radial-gradient(circle at 82% 30%, rgba(36, 150, 237, 0.2), transparent 30%), #07111e;
}

.docker-track-hero.ubuntu-track {
  background: radial-gradient(circle at 82% 30%, rgba(249, 115, 22, 0.18), transparent 30%), #07111e;
}

.docker-track-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 54px;
  align-items: center;
}

.docker-track-hero h1 { margin: 12px 0 18px; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 0.98; }
.docker-track-hero h1 span { color: #67e8f9; }
.docker-track-hero.ubuntu-track h1 span { color: #fb923c; }
.docker-track-hero p:not(.px-kicker) { max-width: 760px; color: var(--text-secondary); font-size: 1.08rem; line-height: 1.75; }
.docker-track-mark { display: grid; width: 170px; height: 170px; place-items: center; border: 1px solid rgba(103, 232, 249, 0.34); border-radius: 42px; color: #60a5fa; background: rgba(36, 150, 237, 0.13); font-size: 5.2rem; box-shadow: 0 28px 70px rgba(0,0,0,.28); }
.docker-track-mark.windows { position: relative; overflow: hidden; background: radial-gradient(circle at 35% 28%, rgba(103,232,249,.2), transparent 48%), linear-gradient(145deg, rgba(25,104,168,.28), rgba(12,42,78,.78)); }
.docker-track-mark.windows::before { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: rgba(56,189,248,.24); filter: blur(25px); }
.windows-hero-mark { position: relative; display: grid; grid-template-columns: repeat(2, 38px); grid-template-rows: repeat(2, 38px); gap: 7px; transform: perspective(180px) rotateY(-7deg); filter: drop-shadow(0 12px 22px rgba(37,99,235,.38)); }
.windows-hero-mark i { display: block; border-radius: 7px; background: linear-gradient(145deg, #7de8ff 0%, #38a9ff 48%, #5967ff 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.52), 0 3px 10px rgba(37,99,235,.28); }
.windows-hero-mark i:nth-child(2) { background: linear-gradient(145deg, #60cfff, #4f7dff); }
.windows-hero-mark i:nth-child(3) { background: linear-gradient(145deg, #35d6e9, #287ee9); }
.windows-hero-mark i:nth-child(4) { background: linear-gradient(145deg, #419eff, #705cff); }
.docker-track-mark.ubuntu { color: #fb923c; border-color: rgba(251,146,60,.35); background: rgba(249,115,22,.1); }
.docker-track-main { padding: 68px 0 86px; }
.docker-track-intro { max-width: 820px; margin-bottom: 28px; }
.docker-track-intro h2 { margin: 6px 0 10px; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.docker-track-intro p:last-child { color: var(--text-secondary); }
.docker-beginner-guide {
  margin: 0 0 24px;
  padding: 26px;
  border: 1px solid rgba(103,232,249,.32);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(36,150,237,.1), rgba(15,23,42,.86));
}
.docker-beginner-heading { max-width: 850px; }
.docker-beginner-heading h2,
.docker-start-check h2 { margin: 6px 0 10px; color: var(--text-primary); font-size: clamp(1.45rem, 2.4vw, 2rem); }
.docker-beginner-heading > p:last-child,
.docker-start-check p { margin: 0; color: var(--text-secondary); line-height: 1.7; }
.docker-beginner-steps { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.docker-beginner-steps article { display: flex; gap: 13px; align-items: flex-start; padding: 16px; border: 1px solid rgba(148,163,184,.2); border-radius: 13px; background: rgba(7,17,30,.56); }
.docker-beginner-steps article > span { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #07111e; background: #67e8f9; font: 800 .82rem var(--font-mono); }
.docker-beginner-steps article div { display: grid; gap: 5px; }
.docker-beginner-steps strong { color: var(--text-primary); }
.docker-beginner-steps small { color: var(--text-secondary); line-height: 1.55; }
.docker-beginner-rule { margin-top: 16px; padding: 13px 15px; border-left: 3px solid #fbbf24; border-radius: 8px; color: var(--text-secondary); background: rgba(251,191,36,.07); }
.docker-beginner-rule strong { color: #fbbf24; }
.docker-start-check { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.8fr); gap: 28px; align-items: center; margin-bottom: 28px; padding: 24px 26px; border: 1px solid rgba(52,211,153,.28); border-radius: 18px; background: rgba(52,211,153,.055); }
.docker-start-check ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.docker-start-check li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-secondary); line-height: 1.45; }
.docker-start-check li span { color: #34d399; font-weight: 800; }
.docker-track-roadmap { display: grid; gap: 14px; margin-bottom: 28px; }
.docker-track-step { display: grid; grid-template-columns: 70px minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 22px; border: 1px solid rgba(148,163,184,.22); border-radius: 16px; color: var(--text-primary); background: rgba(15,23,42,.82); text-decoration: none; transition: transform .16s ease, border-color .16s ease; }
.docker-track-step:hover, .docker-track-step:focus-visible { transform: translateX(4px); border-color: rgba(103,232,249,.58); outline: none; }
.docker-track-step.highlighted { border-color: rgba(52,211,153,.38); background: linear-gradient(90deg, rgba(52,211,153,.08), rgba(15,23,42,.85)); }
.docker-track-step > span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 14px; color: #67e8f9; background: rgba(36,150,237,.14); font: 800 .9rem var(--font-mono); }
.docker-track-step div { display: grid; gap: 6px; }
.docker-track-step strong { font-size: 1.05rem; }
.docker-track-step small { color: var(--text-secondary); line-height: 1.5; }
.docker-track-step em { color: #67e8f9; font-style: normal; font-weight: 700; }

@media (max-width: 720px) {
  .docker-course .docker-paths,
  .docker-course .docker-safe-list,
  .docker-course .docker-choice-grid {
    grid-template-columns: 1fr;
  }

  .docker-course .docker-choice-card { align-items: flex-start; }
  .docker-beginner-steps,
  .docker-start-check { grid-template-columns: 1fr; }
  .docker-beginner-guide,
  .docker-start-check { padding: 20px; }
  .docker-track-hero-grid { grid-template-columns: 1fr; }
  .docker-track-mark { width: 108px; height: 108px; border-radius: 28px; font-size: 3.4rem; }
  .windows-hero-mark { grid-template-columns: repeat(2, 25px); grid-template-rows: repeat(2, 25px); gap: 5px; }
  .docker-track-step { grid-template-columns: 54px minmax(0,1fr); }
  .docker-track-step em { grid-column: 2; }
}

/* Aperçu du parcours choisi */
.docker-track-visual { margin: 0 0 1.5rem; border: 1px solid rgba(56,189,248,.24); border-radius: 22px; overflow: hidden; background: #071628; }
.docker-track-visual img { display: block; width: 100%; max-height: 360px; object-fit: cover; }
.docker-track-visual figcaption { padding: .85rem 1rem; color: #9fb3c8; font-size: .92rem; }