.learning-path-card,
.xp-milestone-card {
  background: color-mix(in srgb, var(--bg-card, #fff) 94%, transparent);
  border: 1px solid var(--border, #dbe3ef);
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .12);
  margin: 0 0 28px;
  padding: clamp(18px, 3vw, 30px);
}

.learning-path-heading {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 22px;
}

.learning-path-heading h2 { margin: 4px 0 8px; }
.learning-path-heading p { color: var(--text-secondary); margin: 0; max-width: 760px; }
.learning-path-kicker,
.learning-level-kicker {
  color: var(--primary, #4f46e5);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.learning-path-rule {
  background: rgba(79, 70, 229, .12);
  border: 1px solid rgba(79, 70, 229, .3);
  border-radius: 999px;
  color: var(--text-primary);
  flex: 0 0 auto;
  font-size: .84rem;
  font-weight: 700;
  padding: 9px 13px;
}

.learning-path-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.learning-level-card {
  /* Repli : c'est la surface de la carte, pas un ornement. */
  background: var(--bg-card, #fff);
  background: linear-gradient(150deg, color-mix(in srgb, var(--level-color) 10%, var(--bg-card, #fff)), var(--bg-card, #fff));
  border: 2px solid color-mix(in srgb, var(--level-color) 48%, transparent);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  min-height: 285px;
  padding: 20px;
  position: relative;
}

.learning-level-card::before {
  background: var(--level-color);
  border-radius: 18px 18px 0 0;
  content: '';
  height: 5px;
  inset: 0 0 auto;
  position: absolute;
}

.learning-level-card.locked { filter: saturate(.55); opacity: .78; }
.learning-level-icon { font-size: 2.2rem; margin-bottom: 12px; }
.learning-level-card h3 { font-size: 1.35rem; margin: 6px 0 10px; }
.learning-level-card p { color: var(--text-secondary); line-height: 1.55; margin: 0 0 16px; }
/* 03/09/2026 — ce qui reste réellement à découvrir à ce niveau. Discret :
   c'est une précision, pas la promesse principale de la carte. */
.learning-level-reste {
  margin: -2px 0 8px;
  font-size: .82em;
  font-weight: 700;
  opacity: .78;
}

/* 03/09/2026 — avancement réel dans la séquence de 30 questions. La carte
   annonçait un effectif ; elle ne disait pas où en était l'élève, donc « 30
   questions » se lisait pareil au premier et au vingt-neuvième jour. */
.learning-level-progress {
  background: rgba(148, 163, 184, .28);
  border-radius: 99px;
  height: 8px;
  margin: 0 0 10px;
  overflow: hidden;
}
.learning-level-progress span {
  background: var(--level-color, #4f46e5);
  display: block;
  height: 100%;
  transition: width .35s ease;
}

/* L'explication pédagogique affichée APRÈS la réponse : c'est le moment où
   l'élève est attentif, elle ne doit donc pas se confondre avec le verdict. */
.exercise-explication {
  border-top: 1px solid rgba(148, 163, 184, .35);
  display: block;
  font-weight: 500;
  line-height: 1.55;
  margin-top: 10px;
  opacity: .92;
  padding-top: 10px;
}

.learning-level-requirement {
  background: color-mix(in srgb, var(--level-color) 10%, transparent);
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 700;
  margin: auto 0 14px;
  padding: 10px;
}

.quest-action-btn {
  background: transparent;
  border: 1px solid var(--primary, #4f46e5);
  border-radius: 10px;
  color: var(--primary, #4f46e5);
  cursor: pointer;
  display: block;
  font-weight: 750;
  margin: 12px auto 0;
  min-height: 42px;
  padding: 9px 16px;
}

.xp-milestone-card {
  background: linear-gradient(135deg, rgba(79, 70, 229, .14), rgba(245, 158, 11, .12));
  border-color: rgba(245, 158, 11, .42);
}
.xp-milestone-copy { align-items: flex-start; display: flex; gap: 14px; }
.xp-milestone-copy strong { font-size: 1.2rem; }
.xp-milestone-copy p { color: var(--text-secondary); margin: 4px 0 0; }
.xp-milestone-icon { font-size: 2rem; }
.xp-milestone-progress { background: rgba(148, 163, 184, .25); border-radius: 99px; height: 10px; margin: 18px 0 12px; overflow: hidden; }
.xp-milestone-progress span { background: linear-gradient(90deg, #f59e0b, #7c3aed); display: block; height: 100%; transition: width .3s ease; }
.xp-milestone-footer { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.xp-milestone-footer > span { font-weight: 750; }

@media (max-width: 900px) {
  .learning-path-grid { grid-template-columns: 1fr; }
  .learning-level-card { min-height: 0; }
  .learning-path-heading,
  .xp-milestone-footer { align-items: stretch; flex-direction: column; }
  .learning-path-rule { align-self: flex-start; }
  .xp-milestone-footer .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .learning-level-progress span { transition: none; }
  .xp-milestone-progress span { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTE D'ENTRÉE DU PARCOURS PYTHON « PROTO » — 14/09/2026

   Ces règles vivaient d'abord en style « inline » dans student_dashboard.html.
   Elles en ont été sorties le jour même, et pour une raison mesurée, pas par
   goût : verify-modular-deployment.js refuse tout déploiement si
   student_dashboard.html dépasse 150 000 octets, et la carte l'avait fait
   passer de 146 886 à 151 616. Le portique a arrêté la publication — il a eu
   raison, et c'est exactement à ça qu'il sert.

   Le plafond n'est pas une coquetterie : cette page est le premier écran que
   chaque élève télécharge, souvent en 4G au fond d'une salle. Tout ce qui peut
   vivre dans une feuille mise en cache doit y vivre.

   Les six teintes sont celles de la table ALLURE de parcours-python.html, dans
   le même ordre : l'élève doit retrouver son chemin de couleurs en arrivant sur
   la page, sinon il ne reconnaît pas où il est. Écrites en rgba() et non en
   color-mix() : la charte impose un repli simple, et test-contraste-eleve.js
   le vérifie.
   ══════════════════════════════════════════════════════════════════════════ */
.py-entree {
  background: linear-gradient(135deg, rgba(52, 211, 153, .12), rgba(96, 165, 250, .10));
  border-color: rgba(52, 211, 153, .45);
}

.py-chemin {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.py-chemin li {
  background: rgba(148, 163, 184, .18);
  border: 1px solid rgba(148, 163, 184, .5);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  padding: 7px 13px;
}

.py-chemin li:nth-child(1) { background: rgba(52, 211, 153, .18);  border-color: rgba(52, 211, 153, .5); }
.py-chemin li:nth-child(2) { background: rgba(34, 211, 238, .18);  border-color: rgba(34, 211, 238, .5); }
.py-chemin li:nth-child(3) { background: rgba(96, 165, 250, .18);  border-color: rgba(96, 165, 250, .5); }
.py-chemin li:nth-child(4) { background: rgba(167, 139, 250, .18); border-color: rgba(167, 139, 250, .5); }
.py-chemin li:nth-child(5) { background: rgba(251, 191, 36, .18);  border-color: rgba(251, 191, 36, .5); }
.py-chemin li:nth-child(6) { background: rgba(251, 113, 133, .18); border-color: rgba(251, 113, 133, .5); }

.py-go { display: inline-block; font-weight: 800; text-decoration: none; }
.py-note { color: var(--text-secondary); font-size: .86rem; margin: 12px 0 0; }

/* 24/09/2026 — quêtes explicites : règle de comptage, renouvellement (heure
   de Paris) et aide repliable « Comment fonctionnent les quêtes ». Sobre,
   lisible en thème clair comme sombre (variables du thème). */
.quest-rule { color: var(--text-primary, inherit); font-size: .95rem; line-height: 1.45; margin: 0 0 8px; }
.quest-rule-muted { color: var(--text-secondary); font-size: .88rem; }
.quest-reset { color: var(--text-secondary); font-size: .85rem; margin: 0 0 4px; text-align: center; }
.quest-help {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 0 0 20px;
  padding: 12px 16px;
}
.quest-help summary { cursor: pointer; font-weight: 700; }
.quest-help ul { color: var(--text-secondary); line-height: 1.5; margin: 10px 0 0; padding-left: 20px; }
.quest-help li + li { margin-top: 6px; }