/* ==========================================================================
   Parcours pédagogique : hub et modules
   ========================================================================== */
.modules { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; max-width: 880px; }
.module-card { display: flex; align-items: center; gap: 20px; padding: 22px 24px; }
.module-card.is-soon { opacity: 0.6; }
.module-num { flex: none; font-family: var(--mono); font-size: 28px; color: var(--t3); }
.module-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.module-body h2 { font-size: 20px; }
.module-body h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.module-card { position: relative; }
.module-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.module-status { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--pill); font-size: 13px; color: var(--t2); border: 1px solid var(--glass-border); }
.module-status.is-done { color: var(--bull-text); border-color: rgba(46, 189, 133, 0.35); background: rgba(46, 189, 133, 0.1); }
@media (max-width: 600px) { .module-card { flex-wrap: wrap; } .module-status { margin-left: 48px; } }
.parcours-progress { max-width: 880px; display: grid; gap: 10px; padding: 16px 20px; font-size: 14px; color: var(--t1); }
.parcours-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.parcours-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #4C6EF5, #B79CFF, #F5B8DA); transition: width 300ms var(--ease); }

/* Page d'un module */
.module-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 12px; padding: 4px 12px; border-radius: var(--pill); font-size: 13px; color: var(--bull-text); border: 1px solid rgba(46, 189, 133, 0.35); background: rgba(46, 189, 133, 0.1); }
.module-toc { margin: 24px 0 8px; padding: 16px 22px; }
.module-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.module-toc a { color: var(--blue-text); }
.quiz { margin-top: 40px; padding: 26px; display: grid; gap: 16px; }
.quiz form { display: grid; gap: 18px; }
.quiz-q { border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 16px 18px; margin: 0; display: grid; gap: 8px; }
.quiz-q legend { padding: 0 6px; font-weight: 500; color: var(--t0); }
.quiz-q label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; color: var(--t1); }
.quiz-q label:hover { background: rgba(255, 255, 255, 0.04); }
.quiz-q input { margin-top: 4px; accent-color: #8FB0FF; }
.quiz-q.is-ok { border-color: rgba(46, 189, 133, 0.45); }
.quiz-q.is-ko { border-color: rgba(246, 70, 93, 0.45); }
.quiz-q.is-ko label.is-answer { background: rgba(46, 189, 133, 0.1); color: var(--t0); }
.quiz form > .btn { justify-self: start; }
.quiz-result { padding: 12px 14px; border-radius: var(--r-md); font-size: 14px; background: rgba(255, 255, 255, 0.04); }
.quiz-result.is-ok { color: var(--bull-text); background: rgba(46, 189, 133, 0.1); }
.quiz-result.is-ko { color: var(--bear-text); background: rgba(246, 70, 93, 0.1); }
.module-locked { position: relative; }