/* Styles propres aux vues. */

/* ---------- Accueil ---------- */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-5); align-items: center;
  padding: var(--space-7) var(--space-6); border-radius: 24px;
  background: var(--hero-bg); color: var(--hero-text);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent, #000 60%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.hero__text { position: relative; z-index: 1; }
.hero__kicker { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(4, 159, 217, .22); color: #8FD8F6; font-weight: 750; letter-spacing: .12em; font-size: var(--fs-sm); }
.hero__title { margin-top: var(--space-3); font-size: var(--fs-3xl); text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; }
.hero__lead { margin-top: var(--space-4); max-width: 52ch; color: rgba(255, 255, 255, .85); font-size: var(--fs-lg); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.hero .btn--primary { background: #fff; color: var(--navy); }
.hero .btn--primary:hover { background: #E3F2FA; color: var(--navy); }
.hero__art { position: relative; z-index: 1; }

.hero-topo { width: 100%; max-width: 380px; margin-left: auto; }
.hero-topo__links path { stroke: rgba(143, 216, 246, .55); stroke-width: 2.5; fill: none; }
.hero-topo__nodes > * { fill: rgba(255, 255, 255, .1); stroke: #8FD8F6; stroke-width: 2; }
.hero-topo__glyphs path { stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero-topo__labels text { fill: rgba(255, 255, 255, .8); font: 600 12px var(--font-sans); }
.hero-topo__packet { fill: #FFD25E; filter: drop-shadow(0 0 6px rgba(255, 210, 94, .9)); }
.hero-topo__packet--back { fill: #8FD8F6; filter: drop-shadow(0 0 6px rgba(143, 216, 246, .9)); }
/* Ondes autour des routeurs : invisibles au repos, animées par css/motion.css */
.hero-topo__pulses circle { fill: none; stroke: #8FD8F6; stroke-width: 1.5; opacity: 0; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: var(--space-6) var(--space-5); }
  .hero__art { order: -1; }
  .hero-topo { max-width: 280px; margin: 0 auto; }
}
@media (max-width: 480px) { .hero { padding: var(--space-5) var(--space-4); border-radius: 18px; } .hero__actions .btn { width: 100%; } }

.progress-summary { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.progress-summary .kv { flex: 1; min-width: 200px; }

.next-lesson__module { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
.next-lesson__title { font-size: var(--fs-lg); font-weight: 700; margin: 4px 0 var(--space-4); }

.roadmap { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); counter-reset: step; }
.roadmap__step a {
  position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.roadmap__step a:hover { border-color: var(--primary); transform: translateY(-2px); color: var(--text); }
.roadmap__num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: var(--fs-sm); }
.roadmap__num .icon { width: 16px; height: 16px; }
.roadmap__label { font-weight: 700; line-height: 1.3; }
.roadmap__mods { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
.roadmap__step.is-done .roadmap__num { background: var(--success); color: var(--on-success); }
.roadmap__step:last-child a { background: linear-gradient(160deg, var(--primary-soft), var(--surface)); border-color: var(--primary); }

.step-card { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.step-card__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); margin-bottom: var(--space-3); }
.step-card h3 { font-size: var(--fs-lg); margin-bottom: 6px; }
.step-card p { color: var(--text-2); font-size: var(--fs-sm); }

/* ---------- Tableau de bord ---------- */
.overview { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.overview__text { flex: 1; min-width: 220px; }
.overview__level { font-size: var(--fs-xl); font-weight: 750; display: flex; align-items: center; gap: 8px; }
.overview__medal { font-size: 1.6rem; }
.goal { margin-top: var(--space-4); }
.goal__head { display: flex; justify-content: space-between; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin-bottom: 6px; }

.week-strip { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: var(--space-3); }
.week-strip li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.week-strip__day { font-size: var(--fs-xs); color: var(--text-3); font-weight: 650; }
.week-strip__dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); border: 2px dashed var(--border-strong); color: var(--on-success); }
.week-strip__dot .icon { width: 16px; height: 16px; }
.week-strip li.is-done .week-strip__dot { background: var(--success); border: 2px solid var(--success); }
.week-strip li.is-today .week-strip__dot { border-color: var(--primary); }
.week-strip li.is-today .week-strip__day { color: var(--primary); }

.domain-list { list-style: none; display: grid; gap: var(--space-4); }
.domain-list__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: var(--fs-sm); }
.domain-list__name { font-weight: 650; flex: 1; min-width: 0; }
.domain-list__weight { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }
@media (max-width: 480px) { .domain-list__weight { display: none; } }

.week-card__theme { font-size: var(--fs-lg); font-weight: 700; }
.milestone { display: flex; align-items: center; gap: 8px; margin: var(--space-3) 0; padding: 8px 12px; border-radius: 10px; background: var(--warning-soft); color: var(--warning); font-weight: 650; font-size: var(--fs-sm); }

.todo { list-style: none; counter-reset: todo; display: grid; gap: 8px; margin-bottom: var(--space-3); }
.todo li { counter-increment: todo; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.todo li::before { content: counter(todo); display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: var(--fs-xs); }
.todo a { flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.todo a:hover { color: var(--primary); }
.todo__time { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); white-space: nowrap; }

.two-lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.two-lists .card__subtitle { margin-top: 0; }

/* ---------- Cours ---------- */
.module-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--c);
  color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.module-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--text); }
.module-card__top { display: flex; align-items: center; justify-content: space-between; }
/* Couleur du domaine utilisée comme texte : mélangée à la couleur du texte pour rester lisible dans les deux thèmes */
.module-card__code { font-family: var(--font-mono); font-weight: 750; font-size: var(--fs-sm); color: color-mix(in srgb, var(--c) 65%, var(--text)); }
.module-card__icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.module-card__title { font-weight: 750; font-size: var(--fs-lg); line-height: 1.25; }
.module-card__summary { color: var(--text-2); font-size: var(--fs-sm); flex: 1; }
.module-card__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.module-card__meta { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }

.module-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-5); align-items: center;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, var(--surface)), var(--surface) 70%);
  border: 1px solid var(--border);
}
.module-head__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--c); color: var(--surface); }
.module-head__icon .icon { width: 32px; height: 32px; }
.module-head__code { font-family: var(--font-mono); font-weight: 750; color: color-mix(in srgb, var(--c) 65%, var(--text)); font-size: var(--fs-sm); }
.module-head__title { font-size: var(--fs-2xl); margin: 2px 0 6px; }
.module-head__summary { color: var(--text-2); max-width: 65ch; }
.module-head__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
@media (max-width: 639px) {
  .module-head { grid-template-columns: 1fr; gap: var(--space-3); }
  .module-head__icon { width: 48px; height: 48px; border-radius: 14px; }
  .module-head__ring { display: none; }
}

.lesson-list { list-style: none; display: grid; gap: 6px; }
.lesson-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; border: 1px solid transparent; }
.lesson-list a:hover { background: var(--surface-2); border-color: var(--border); }
.lesson-list__status { display: inline-grid; place-items: center; flex: none; min-width: 42px; height: 28px; padding: 0 6px; border-radius: 8px; background: var(--surface-2); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); }
.lesson-list__title { flex: 1; min-width: 0; }
.lesson-list li.is-done .lesson-list__status { background: var(--success); color: var(--on-success); }
.lesson-list li.is-out a { opacity: .6; }

.objectives { list-style: none; display: grid; gap: 10px; font-size: var(--fs-sm); }
.objectives li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.objectives__code { font-family: var(--font-mono); font-weight: 750; padding: 1px 7px; border-radius: 6px; background: var(--primary-soft); color: var(--primary); }

.levels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-4); }
.levels button { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-weight: 650; font-size: var(--fs-sm); color: var(--text-2); }
.levels button.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

.lesson-path { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: var(--space-3); border-radius: var(--radius); background: var(--surface-2); }
.lesson-path li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; }
.lesson-path__n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 800; }

/* ---------- Plan d'étude ---------- */
.timeline { list-style: none; position: relative; display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.timeline::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.timeline__item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); }
.timeline__marker {
  position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong); font-weight: 800; color: var(--text-2);
}
.timeline__item.is-past .timeline__marker { background: var(--surface-3); color: var(--text-3); }
.timeline__item.is-now .timeline__marker { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 6px var(--primary-soft); }
.timeline__item.is-exam .timeline__marker { border-color: var(--warning); }
.timeline__item.is-now .timeline__body { border-color: var(--primary); box-shadow: var(--shadow); }
.timeline__body { padding: var(--space-4) var(--space-5); }
.timeline__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.timeline__title { font-size: var(--fs-lg); }
.timeline__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--fs-sm); }
.timeline__meta div { display: flex; gap: 6px; align-items: center; }
.timeline__meta dt { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); }
.timeline__meta dt .icon { width: 16px; height: 16px; }
.timeline__meta dd { font-weight: 650; }
@media (max-width: 480px) {
  .timeline::before { left: 15px; }
  .timeline__item { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); }
  .timeline__marker { width: 32px; height: 32px; font-size: var(--fs-sm); }
  .timeline__body { padding: var(--space-3) var(--space-4); }
}

/* ---------- Sections à venir ---------- */
.soon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.soon__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: var(--primary-soft); color: var(--primary); }
.soon__icon .icon { width: 36px; height: 36px; }
.soon .badge { margin-bottom: var(--space-3); }
@media (max-width: 639px) { .soon { grid-template-columns: 1fr; } }