.docker-lesson {
  --lesson-blue: #2496ed;
  --lesson-cyan: #67e8f9;
  --lesson-green: #34d399;
  --lesson-amber: #fbbf24;
  background:
    radial-gradient(circle at 86% 10%, rgba(36, 150, 237, .12), transparent 30rem),
    var(--bg-primary);
}

.lesson-hero { padding: 132px 0 64px; border-bottom: 1px solid var(--border); }
.lesson-breadcrumb { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 28px; color: var(--text-muted); font: 600 .78rem var(--font-mono); }
.lesson-breadcrumb a { color: var(--accent-cyan); }
.lesson-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 44px; align-items: center; }
.lesson-eyebrow { color: var(--lesson-cyan); font: 700 .76rem var(--font-mono); letter-spacing: .18em; text-transform: uppercase; }
.lesson-hero h1 { max-width: 850px; margin: 14px 0 18px; color: var(--text-primary); font-size: clamp(2.6rem, 6vw, 5.3rem); line-height: .98; letter-spacing: -.06em; }
.lesson-hero h1 span { color: var(--lesson-blue); }
.lesson-lead { max-width: 760px; color: var(--text-secondary); font-size: 1.1rem; line-height: 1.75; }
.lesson-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 25px; }
.lesson-meta span { padding: 8px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); font: 650 .76rem var(--font-mono); background: rgba(15, 23, 42, .62); }

.lesson-map { position: relative; display: grid; gap: 12px; padding: 24px; border: 1px solid rgba(36, 150, 237, .32); border-radius: 24px; background: linear-gradient(145deg, rgba(36,150,237,.13), rgba(8,17,30,.82)); box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.lesson-map-node { padding: 15px 17px; border: 1px solid var(--border); border-radius: 13px; background: rgba(7, 15, 27, .84); }
.lesson-map-node strong { display: block; color: var(--text-primary); }
.lesson-map-node span { color: var(--text-muted); font-size: .84rem; }
.lesson-map-arrow { color: var(--lesson-cyan); text-align: center; font-size: 1.25rem; }

.lesson-shell { padding: 58px 0 88px; }
.lesson-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 38px; align-items: start; }
.lesson-toc { position: sticky; top: 98px; padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: rgba(12, 22, 37, .9); }
.lesson-toc p { margin: 0 0 12px; color: var(--text-muted); font: 700 .72rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.lesson-toc a { display: block; padding: 9px 10px; border-radius: 8px; color: var(--text-secondary); font-size: .88rem; }
.lesson-toc a:hover, .lesson-toc a.active { color: var(--text-primary); background: rgba(36,150,237,.12); }
.lesson-content { min-width: 0; }
.lesson-section { scroll-margin-top: 110px; padding: 30px; margin-bottom: 22px; border: 1px solid var(--border); border-radius: 18px; background: rgba(13, 23, 39, .82); }
.lesson-section h2 { margin: 0 0 12px; color: var(--text-primary); font-size: clamp(1.45rem, 3vw, 2rem); }
.lesson-section h3 { color: var(--text-primary); }
.lesson-section > p { color: var(--text-secondary); line-height: 1.75; }
.lesson-objectives { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; }
.lesson-objectives div { padding: 15px; border: 1px solid rgba(52,211,153,.22); border-radius: 11px; color: var(--text-secondary); background: rgba(52,211,153,.055); }
.lesson-objectives strong { color: var(--lesson-green); }

.concept-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: stretch; margin: 24px 0; }
.concept-card { padding: 20px; border: 1px solid rgba(36,150,237,.28); border-radius: 14px; background: rgba(36,150,237,.06); }
.concept-card span { display: inline-grid; width: 36px; height: 36px; place-items: center; margin-bottom: 14px; border-radius: 10px; color: var(--lesson-cyan); background: rgba(36,150,237,.17); font: 800 .82rem var(--font-mono); }
.concept-card strong { display: block; margin-bottom: 6px; color: var(--text-primary); }
.concept-card p { margin: 0; color: var(--text-secondary); font-size: .9rem; line-height: 1.6; }
.concept-arrow { align-self: center; color: var(--lesson-cyan); font-size: 1.25rem; }

.lesson-table { width: 100%; margin-top: 20px; border-collapse: collapse; overflow: hidden; border-radius: 12px; }
.lesson-table th, .lesson-table td { padding: 14px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.lesson-table th { color: var(--lesson-cyan); background: rgba(36,150,237,.08); }
.lesson-table td { color: var(--text-secondary); }
.lesson-callout { margin-top: 18px; padding: 16px 18px; border-left: 3px solid var(--lesson-amber); border-radius: 9px; color: var(--text-secondary); background: rgba(251,191,36,.07); }
.lesson-callout strong { color: var(--lesson-amber); }

.lesson-details { margin-top: 18px; border: 1px solid rgba(36,150,237,.28); border-radius: 12px; background: rgba(36,150,237,.055); overflow: hidden; }
.lesson-details summary { padding: 15px 18px; color: var(--text-primary); font-weight: 750; cursor: pointer; list-style-position: inside; }
.lesson-details summary:hover { color: var(--lesson-cyan); background: rgba(36,150,237,.07); }
.lesson-details[open] summary { border-bottom: 1px solid var(--border); }
.lesson-details > p { margin: 16px 18px 8px; color: var(--text-secondary); line-height: 1.7; }
.lesson-details > .lesson-code { margin: 14px 18px 18px; }

.lesson-code { margin: 14px 0; border: 1px solid rgba(36,150,237,.28); border-radius: 12px; background: #050b14; overflow: hidden; }
.lesson-code-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 13px; border-bottom: 1px solid var(--border); color: var(--text-muted); font: 650 .74rem var(--font-mono); }
.lesson-code button { border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; color: var(--lesson-cyan); background: rgba(36,150,237,.08); cursor: pointer; }
.lesson-code pre { margin: 0; padding: 16px; overflow-x: auto; color: #dbeafe; font: 500 .84rem/1.65 var(--font-mono); }
.lesson-explain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 16px; }
.lesson-explain div { padding: 14px; border: 1px solid var(--border); border-radius: 10px; color: var(--text-secondary); }
.lesson-explain code { color: var(--lesson-cyan); }

.lesson-recap { margin-top: 18px; padding: 20px; border: 1px solid rgba(45, 212, 191, .32); border-radius: 14px; background: linear-gradient(145deg, rgba(45, 212, 191, .08), rgba(36, 150, 237, .04)); }
.lesson-recap-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
.lesson-recap-head h3 { margin: 4px 0 0; color: var(--text-primary); font-size: 1.08rem; }
.lesson-recap-kicker { color: var(--lesson-cyan); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lesson-recap-time { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(45, 212, 191, .28); border-radius: 999px; color: var(--lesson-green); font-size: .76rem; font-weight: 750; }
.lesson-recap-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 17px 0 0; padding: 0; list-style: none; }
.lesson-recap-list li { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.lesson-recap-list li > span { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: rgba(45, 212, 191, .14); color: var(--lesson-green); font-weight: 850; }
.lesson-recap-list strong, .lesson-recap-list small { display: block; }
.lesson-recap-list strong { color: var(--text-primary); font-size: .9rem; }
.lesson-recap-list small { margin-top: 3px; color: var(--text-secondary); line-height: 1.5; }
.lesson-recap-result { margin-top: 17px; padding: 12px 14px; border-radius: 10px; background: rgba(45, 212, 191, .1); color: var(--text-secondary); }
.lesson-recap-result strong { color: var(--lesson-green); }

.quiz-list { display: grid; gap: 14px; margin-top: 20px; }
.quiz-item { padding: 17px; border: 1px solid var(--border); border-radius: 12px; }
.quiz-item.correct { border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.055); }
.quiz-item.incorrect { border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.05); }
.quiz-item fieldset { border: 0; padding: 0; margin: 0; }
.quiz-item legend { margin-bottom: 11px; color: var(--text-primary); font-weight: 700; }
.quiz-item label { display: block; padding: 7px 0; color: var(--text-secondary); cursor: pointer; }
.quiz-feedback { min-height: 1.3em; margin: 9px 0 0; font-size: .86rem; }
.lesson-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.lesson-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(36,150,237,.5); border-radius: 10px; color: #fff; background: linear-gradient(135deg, #1878ca, #2563eb); cursor: pointer; font-weight: 750; }
.lesson-button.secondary { color: var(--text-secondary); background: transparent; border-color: var(--border); }
.lesson-button:disabled { opacity: .45; cursor: not-allowed; }
.lesson-complete { text-align: center; padding: 32px; border-color: rgba(52,211,153,.3); }
.lesson-complete.is-done { background: rgba(52,211,153,.07); }
.lesson-complete-status { margin-top: 12px; color: var(--text-muted); }
.lesson-toast { position: fixed; right: 22px; bottom: 22px; z-index: 30; padding: 12px 16px; border: 1px solid rgba(52,211,153,.4); border-radius: 10px; color: var(--text-primary); background: #10251f; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; }
.lesson-toast.show { opacity: 1; transform: translateY(0); }

.install-checklist { display: grid; gap: 12px; margin-top: 20px; }
.method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0 24px; }
.method-card { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: rgba(7,15,27,.55); }
.method-card.recommended { border-color: rgba(52,211,153,.42); background: linear-gradient(145deg, rgba(52,211,153,.09), rgba(36,150,237,.06)); }
.method-card h3 { margin: 14px 0 7px; }
.method-card p { flex: 1; margin: 0 0 18px; color: var(--text-secondary); line-height: 1.65; }
.method-badge { display: inline-flex; padding: 6px 9px; border: 1px solid rgba(103,232,249,.3); border-radius: 999px; color: var(--lesson-cyan); background: rgba(36,150,237,.09); font: 750 .67rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.method-card.recommended .method-badge { color: var(--lesson-green); border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.09); }
.install-checklist label { display: flex; gap: 13px; align-items: flex-start; padding: 15px 16px; border: 1px solid var(--border); border-radius: 11px; color: var(--text-secondary); background: rgba(36,150,237,.045); cursor: pointer; }
.install-checklist input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--lesson-green); }
.install-checklist strong { display: block; margin-bottom: 3px; color: var(--text-primary); }
.step-stack { display: grid; gap: 14px; margin-top: 20px; }
.step-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 15px; padding: 18px; border: 1px solid var(--border); border-radius: 13px; background: rgba(7,15,27,.5); }
.step-card > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--lesson-cyan); background: rgba(36,150,237,.16); font: 800 .82rem var(--font-mono); }
.step-card h3 { margin: 1px 0 6px; }
.step-card p { margin: 0; color: var(--text-secondary); line-height: 1.65; }
.gui-steps .step-card { border-color: rgba(52,211,153,.25); background: linear-gradient(135deg, rgba(52,211,153,.055), rgba(36,150,237,.035)); }
.gui-steps .step-card > span { color: var(--lesson-green); background: rgba(52,211,153,.14); }
.step-command { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.step-command code { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid rgba(36,150,237,.25); border-radius: 8px; color: #dbeafe; background: #050b14; font: 600 .8rem var(--font-mono); overflow-x: auto; }
.step-command button { flex: 0 0 auto; border: 1px solid rgba(36,150,237,.35); border-radius: 8px; padding: 8px 11px; color: var(--lesson-cyan); background: rgba(36,150,237,.09); font: 700 .72rem var(--font-mono); cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.step-command button:hover { border-color: var(--lesson-cyan); background: rgba(36,150,237,.16); }
.step-command button.is-copied { border-color: rgba(61,214,178,.55); color: var(--lesson-green); background: rgba(61,214,178,.12); }
.status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.status-card { padding: 16px; border: 1px solid var(--border); border-radius: 11px; background: rgba(15,23,42,.48); }
.status-card strong { display: block; margin-bottom: 5px; color: var(--text-primary); }
.status-card span { color: var(--text-secondary); font-size: .9rem; }
.status-card.good { border-color: rgba(52,211,153,.3); }
.status-card.good strong { color: var(--lesson-green); }
.official-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; color: var(--lesson-cyan); font-weight: 700; }
.lesson-observation { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 15px; margin-top: 18px; padding: 18px; border: 1px solid rgba(103,232,249,.28); border-radius: 13px; background: rgba(36,150,237,.075); }
.lesson-observation-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--lesson-cyan); background: rgba(36,150,237,.18); font: 800 1rem var(--font-mono); }
.lesson-observation h3 { margin: 0 0 9px; }
.lesson-observation ul { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: var(--text-secondary); line-height: 1.6; }
.lesson-observation code { color: var(--lesson-cyan); }
.lesson-screenshot { margin: 22px 0 0; padding: 12px; border: 1px solid rgba(36,150,237,.28); border-radius: 15px; background: rgba(5,11,20,.72); }
.lesson-screenshot img { display: block; width: 100%; height: auto; border-radius: 9px; }
.lesson-screenshot figcaption { padding: 12px 4px 2px; color: var(--text-muted); font-size: .86rem; line-height: 1.55; }
.lesson-screenshot figcaption strong { color: var(--lesson-green); }

@media (max-width: 900px) {
  .lesson-hero-grid, .lesson-layout { grid-template-columns: 1fr; }
  .lesson-toc { position: static; }
  .concept-flow { grid-template-columns: 1fr; }
  .concept-arrow { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 620px) {
  .lesson-hero { padding-top: 110px; }
  .lesson-section { padding: 21px; }
  .lesson-objectives, .lesson-explain, .lesson-recap-list, .status-grid, .method-grid { grid-template-columns: 1fr; }
  .lesson-recap-head { align-items: flex-start; flex-direction: column; }
  .lesson-table { display: block; overflow-x: auto; }
}

/* Repères visuels du parcours Ubuntu */
.docker-ubuntu-module-visual { margin: 0 0 1.5rem; }
.docker-ubuntu-module-visual img { width: 100%; max-height: 430px; object-fit: cover; object-position: center; }