/* =========================================================
   MUSICLIC — TABLEAU DE BORD DU PARCOURS 1C1
   ========================================================= */

:root {
  --ml-blue: #336699;
  --ml-blue-dark: #234e78;
  --ml-blue-light: #eef5fb;
  --ml-green: #2e7d5b;
  --ml-green-light: #edf8f2;
  --ml-orange: #a85d18;
  --ml-orange-light: #fff5e9;
  --ml-red: #a13b3b;
  --ml-red-light: #fff0f0;
  --ml-gray-50: #f7f9fb;
  --ml-gray-100: #eef1f4;
  --ml-gray-200: #d8e0e8;
  --ml-gray-500: #657382;
  --ml-text: #263442;
  --ml-white: #ffffff;
  --ml-shadow: 0 12px 30px rgba(35, 63, 91, 0.08);
  --ml-radius: 14px;
  --ml-radius-small: 8px;
}

.ml-dashboard-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 0 48px;
  color: var(--ml-text);
}

.ml-dashboard-shell * {
  box-sizing: border-box;
}

.ml-dashboard-hero,
.ml-calendar-card,
.ml-cycle-waiting,
.ml-cycle-card,
.ml-progress-card,
.ml-note-reading-detail,
.ml-next-objective,
.ml-dashboard-empty,
.ml-start-form {
  margin-bottom: 24px;
  padding: 26px;
  border: 1px solid var(--ml-gray-200);
  border-radius: var(--ml-radius);
  background: var(--ml-white);
  box-shadow: var(--ml-shadow);
}

.ml-dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--ml-blue-light);
}

.ml-dashboard-kicker,
.ml-section-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--ml-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ml-dashboard-hero h2,
.ml-section-heading h2,
.ml-next-objective h2,
.ml-dashboard-empty h2 {
  margin: 0 0 10px;
  color: var(--ml-blue-dark);
}

.ml-dashboard-hero p,
.ml-cycle-card > p,
.ml-note-reading-detail > p,
.ml-next-objective p,
.ml-dashboard-empty p {
  margin: 0;
  line-height: 1.65;
}

.ml-dashboard-score {
  flex: 0 0 170px;
  padding: 18px;
  border-radius: 12px;
  background: var(--ml-white);
  text-align: center;
}

.ml-dashboard-score span,
.ml-dashboard-score small {
  display: block;
  color: var(--ml-gray-500);
}

.ml-dashboard-score strong {
  display: block;
  margin: 6px 0;
  color: var(--ml-blue);
  font-size: 28px;
}


.ml-cycle-waiting {
  border-color: #c7d9cf;
  background: var(--ml-green-light);
}

.ml-cycle-waiting-heading h2 {
  margin: 0 0 10px;
  color: var(--ml-green);
}

.ml-cycle-waiting > p {
  margin: 8px 0 0;
  line-height: 1.65;
}

.ml-cycle-waiting-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.ml-cycle-waiting-actions a {
  display: inline-flex;
  min-height: 40px;
  padding: 8px 13px;
  align-items: center;
  border: 1px solid var(--ml-green);
  border-radius: var(--ml-radius-small);
  background: var(--ml-white);
  color: var(--ml-green);
  font-weight: 700;
  text-decoration: none;
}

.ml-cycle-waiting-actions a:hover,
.ml-cycle-waiting-actions a:focus {
  background: var(--ml-green);
  color: var(--ml-white);
}

.ml-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.ml-section-heading h2 {
  margin-bottom: 0;
}

.ml-locked-badge,
.ml-card-status,
.ml-state-badge {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.ml-locked-badge {
  background: var(--ml-gray-100);
  color: var(--ml-gray-500);
}

.ml-calendar-progress {
  height: 10px;
  margin-bottom: 22px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ml-gray-100);
}

.ml-calendar-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--ml-blue);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.ml-calendar-progress-bar.is-completed {
  background: var(--ml-green);
}

.ml-period-grid,
.ml-domain-grid,
.ml-acquisition-grid,
.ml-pace-grid {
  display: grid;
  gap: 16px;
}

.ml-period-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ml-period-card {
  padding: 18px;
  border: 1px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-small);
  background: var(--ml-gray-50);
}

.ml-period-card span,
.ml-period-card strong,
.ml-period-card small {
  display: block;
}

.ml-period-card {
  display: flex;
  flex-direction: column;
}

.ml-period-card span {
  color: var(--ml-gray-500);
  font-size: 13px;
  font-weight: 700;
}

.ml-period-card strong {
  margin: 7px 0 5px;
  color: var(--ml-blue-dark);
  font-size: 17px;
  line-height: 1.35;
}

.ml-period-subtitle {
  margin: 0 0 10px;
  font-weight: 700;
  line-height: 1.45;
}

.ml-period-objective {
  flex: 1;
  margin: 0 0 12px;
  line-height: 1.5;
}

.ml-period-card small {
  margin-top: auto;
  line-height: 1.5;
}

.ml-period-card.is-current {
  border-color: var(--ml-blue);
  background: var(--ml-blue-light);
}

.ml-period-card.is-past,
.ml-period-card.is-completed {
  border-color: #c7d9cf;
  background: var(--ml-green-light);
}

.ml-domain-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
}

.ml-domain-card {
  display: flex;
  min-height: 235px;
  padding: 20px;
  border: 1px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-small);
  background: var(--ml-white);
  flex-direction: column;
}

.ml-domain-card h3 {
  margin: 14px 0 8px;
  color: var(--ml-blue-dark);
  font-size: 18px;
  line-height: 1.35;
}

.ml-domain-card p {
  flex: 1;
  margin: 0 0 18px;
  line-height: 1.55;
}

.ml-domain-card a,
.ml-domain-card button,
.ml-primary-button,
.ml-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--ml-blue);
  border-radius: var(--ml-radius-small);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.ml-domain-card a,
.ml-primary-button {
  background: var(--ml-blue);
  color: var(--ml-white);
}

.ml-domain-card button {
  border-color: var(--ml-gray-200);
  background: var(--ml-gray-100);
  color: var(--ml-gray-500);
}

.ml-secondary-button {
  background: var(--ml-white);
  color: var(--ml-blue);
}


.ml-domain-card.is-completed {
  background: var(--ml-green-light);
}

.ml-domain-card.is-coming {
  background: var(--ml-gray-50);
}

.ml-card-status.is-available,
.ml-state-badge.consolidation,
.ml-state-badge.acquis {
  background: var(--ml-green-light);
  color: var(--ml-green);
}

.ml-card-status.is-completed {
  background: var(--ml-blue-light);
  color: var(--ml-blue);
}

/*
 * Le statut acquis conserve son fond bleu pâle, mais une bordure neutre
 * très légère améliore sa lisibilité sur les cartes colorées.
 */
.ml-domain-card .ml-card-status.is-completed {
  border: 1px solid #d7dee7;
}

.ml-card-status.is-coming,
.ml-state-badge.non-abordee {
  background: var(--ml-gray-100);
  color: var(--ml-gray-500);
}

.ml-state-badge.decouverte,
.ml-state-badge.apprentissage {
  background: var(--ml-orange-light);
  color: var(--ml-orange);
}

.ml-state-badge.a-renforcer {
  background: var(--ml-red-light);
  color: var(--ml-red);
}

.ml-progress-table-wrapper {
  overflow-x: auto;
}

.ml-progress-table {
  width: 100%;
  border-collapse: collapse;
}

.ml-progress-table th,
.ml-progress-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--ml-gray-200);
  text-align: left;
  vertical-align: middle;
}

.ml-progress-table thead th {
  color: var(--ml-gray-500);
  font-size: 13px;
  text-transform: uppercase;
}

.ml-acquisition-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 20px 0;
}

.ml-acquisition-box {
  padding: 18px;
  border-radius: var(--ml-radius-small);
  background: var(--ml-gray-50);
}

.ml-acquisition-box span,
.ml-acquisition-box strong {
  display: block;
}

.ml-acquisition-box span {
  margin-bottom: 6px;
  color: var(--ml-gray-500);
  font-size: 13px;
}

.ml-fragile-notes {
  padding: 18px;
  border-radius: var(--ml-radius-small);
  background: var(--ml-orange-light);
}

.ml-fragile-notes h3,
.ml-fragile-notes p {
  margin: 0;
}

.ml-fragile-notes h3 {
  margin-bottom: 6px;
  color: var(--ml-orange);
  font-size: 16px;
}

.ml-next-objective {
  background: var(--ml-blue-light);
}

.ml-dashboard-empty {
  text-align: center;
}

.ml-dashboard-empty .ml-primary-button {
  margin-top: 16px;
}

/* Démarrage */

.ml-pace-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ml-pace-card {
  position: relative;
  cursor: pointer;
}

.ml-pace-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ml-pace-card-content {
  display: block;
  min-height: 190px;
  padding: 22px;
  border: 2px solid var(--ml-gray-200);
  border-radius: var(--ml-radius);
  background: var(--ml-white);
}

.ml-pace-card input:checked + .ml-pace-card-content {
  border-color: var(--ml-blue);
  background: var(--ml-blue-light);
}

.ml-pace-card-content > strong {
  display: block;
  margin: 18px 0 8px;
  color: var(--ml-blue-dark);
  font-size: 26px;
}

.ml-pace-card-content > span:last-child {
  line-height: 1.6;
}

.ml-card-status.is-current {
  background: var(--ml-blue-light);
  color: var(--ml-blue);
}

.ml-start-summary {
  margin: 22px 0;
  padding: 20px;
  border-radius: var(--ml-radius-small);
  background: var(--ml-gray-50);
}

.ml-start-summary h3 {
  margin-top: 0;
}

.ml-period-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.ml-period-preview li {
  padding: 14px;
  border: 1px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-small);
  background: var(--ml-white);
}

.ml-period-preview strong,
.ml-period-preview span {
  display: block;
}

.ml-period-preview span {
  margin-top: 5px;
  color: var(--ml-gray-500);
  font-size: 13px;
}

.ml-confirm-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0;
  line-height: 1.55;
}

.ml-confirm-choice input {
  margin-top: 5px;
}

.ml-form-error {
  padding: 12px;
  border-radius: var(--ml-radius-small);
  background: var(--ml-red-light);
  color: var(--ml-red);
}

@media (max-width: 900px) {
  .ml-domain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ml-period-grid,
  .ml-acquisition-grid,
  .ml-period-preview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ml-dashboard-shell {
    padding-top: 12px;
  }

  .ml-dashboard-hero,
  .ml-section-heading {
    display: block;
  }

  .ml-dashboard-score {
    margin-top: 18px;
  }

  .ml-domain-grid,
  .ml-pace-grid {
    grid-template-columns: 1fr;
  }

  .ml-dashboard-hero,
  .ml-calendar-card,
  .ml-cycle-waiting,
  .ml-cycle-card,
  .ml-progress-card,
  .ml-note-reading-detail,
  .ml-next-objective,
  .ml-dashboard-empty,
  .ml-start-form {
    padding: 18px;
  }

  .ml-section-heading .ml-secondary-button,
  .ml-locked-badge {
    margin-top: 14px;
  }
}


/* =========================================================
   V2 — REPÈRES VISUELS DU TABLEAU DE BORD
   ========================================================= */

.ml-domain-card:not(.is-coming) {
  border-left: 5px solid #336699;
}

.ml-domain-card:not(.is-coming) a {
  border-color: #336699;
  background: #edf4fa;
  color: #244d73;
}

.ml-note-reading-detail {
  border-left: 6px solid #2f7a5d;
  background: #edf7f2;
}

.ml-note-reading-detail .ml-secondary-button {
  border-color: #2f7a5d;
  color: #235c47;
}

.ml-next-objective {
  border-left: 6px solid #a56a1f;
  background: #fff6e7;
}


/* =========================================================
   V3 — LECTURE DE NOTES : ACCÈS DIRECT ET DESIGN MUSICLIC
   ========================================================= */

.h2_background.ml-h2-note-reading {
  margin-bottom: 8px;
}

.h2_background.ml-h2-note-reading h2 {
  padding-left: 9px;
  border-left: 4px solid #3f7d65;
}

.ml-note-reading-detail {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ml-dashboard-next-label,
.ml-dashboard-session-meta,
.ml-dashboard-note-actions,
.ml-dashboard-acquisitions,
.ml-dashboard-fragile {
  margin: 7px 0;
}

.ml-dashboard-session-meta {
  color: #6f7880;
  font-size: 13px;
}

.ml-dashboard-note-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ml-note-reading-start,
.ml-dashboard-note-actions a {
  display: inline-flex;
  min-height: 38px;
  padding: 8px 13px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}

.ml-note-reading-start {
  border: 1px solid #2d604c;
  background: #3f7d65;
  color: #ffffff;
  cursor: pointer;
}

.ml-note-reading-start:disabled {
  border-color: #dfe3e6;
  background: #f2f3f4;
  color: #6f7880;
  cursor: default;
}

.ml-dashboard-note-actions a {
  border: 1px solid #336699;
  background: #ffffff;
  color: #336699;
}

.ml-dashboard-acquisitions {
  display: flex;
  gap: 8px 18px;
  padding-top: 8px;
  border-top: 1px solid #dfe3e6;
  color: #6f7880;
  flex-wrap: wrap;
}

.ml-dashboard-acquisitions strong {
  color: #333333;
}

.ml-dashboard-fragile {
  color: #6f7880;
}

@media (max-width: 640px) {
  .ml-dashboard-note-actions {
    align-items: stretch;
    flex-direction: column;
  }
}


/* =========================================================
   V4 — CODE COULEUR DES SEPT DISCIPLINES
   ========================================================= */

.ml-domain-card {
  position: relative;
  --ml-domain-color: #607080;
  --ml-domain-light: #f2f4f5;
  border-top: 4px solid var(--ml-domain-color);
  border-left: 1px solid var(--ml-gray-200);
}

.ml-domain--theory {
  --ml-domain-color: #4f6f8f;
  --ml-domain-light: #eef3f7;
}

.ml-domain--note-reading {
  --ml-domain-color: #3f7d65;
  --ml-domain-light: #edf7f2;
}


.ml-domain--intervals {
  --ml-domain-color: #71669a;
  --ml-domain-light: #f2f0f8;
}

.ml-domain--melodic-dictation {
  --ml-domain-color: #3f7f86;
  --ml-domain-light: #edf6f7;
}

.ml-domain--rhythm {
  --ml-domain-color: #ae6d38;
  --ml-domain-light: #faf2eb;
}

.ml-domain--scales {
  --ml-domain-color: #875b46;
  --ml-domain-light: #f6f0ed;
}

.ml-domain-color-dot {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ml-domain-color);
}

.ml-domain-card h3 {
  padding-right: 16px;
  color: var(--ml-domain-color);
}


/* V11 — le statut « Disponible » reprend la couleur de la discipline.
   Le vert reste réservé aux réussites et validations. */
.ml-domain-card .ml-card-status.is-available {
  background: var(--ml-domain-light);
  color: var(--ml-domain-color);
}

/* Un résultat terminé sous le seuil doit être clairement
   distinguée d'une discipline simplement disponible. */
.ml-domain-card .ml-card-status.is-retry {
  background: var(--ml-red-light);
  color: var(--ml-red);
}

.ml-domain-card.is-completed {
  background: var(--ml-domain-light);
}

.ml-domain-actions {
  display: flex;
  gap: 7px;
  align-items: stretch;
}

.ml-domain-primary-action,
.ml-domain-secondary-action {
  display: inline-flex;
  min-height: 38px;
  padding: 8px 11px;
  align-items: center;
  justify-content: center;
  border-radius: var(--ml-radius-small);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}

.ml-domain-primary-action {
  flex: 1;
  border: 1px solid var(--ml-domain-color);
  background: var(--ml-domain-color);
  color: #ffffff;
  cursor: pointer;
}

.ml-domain-secondary-action {
  border: 1px solid var(--ml-domain-color);
  background: #ffffff;
  color: var(--ml-domain-color);
}

.ml-domain-card > .ml-domain-primary-action {
  border-color: var(--ml-domain-color);
  background: var(--ml-domain-light);
  color: var(--ml-domain-color);
}

.ml-domain-card.is-coming {
  opacity: 0.82;
  background: #fafafa;
}

.ml-domain-card:not(.is-coming) {
  border-left: 1px solid var(--ml-gray-200);
}

.h2_background.ml-h2-note-reading h2 {
  padding-left: 0;
  border-left: 0;
}

@media (max-width: 640px) {
  .ml-domain-actions {
    flex-direction: column;
  }
}


/* =========================================================
   V5 — TABLEAU DE BORD SOBRE
   ========================================================= */

.ml-dashboard-intro {
  margin-bottom: 18px;
}

.ml-dashboard-intro p {
  margin: 7px 0 0;
  line-height: 1.6;
}

.ml-calendar-heading-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ml-calendar-current-state {
  color: var(--ml-gray-500);
  font-size: 13px;
}

.ml-calendar-current-state strong {
  color: var(--ml-blue-dark);
}

.ml-domain--note-reading .ml-domain-actions {
  align-items: stretch;
}

.ml-domain--note-reading .ml-domain-secondary-action {
  flex: 0 0 auto;
}

.ml-domain--note-reading .ml-domain-primary-action {
  flex: 1;
}

@media (max-width: 640px) {
  .ml-calendar-heading-meta {
    margin-top: 10px;
    justify-content: flex-start;
  }

  .ml-domain--note-reading .ml-domain-actions {
    flex-direction: column;
  }
}


/* =========================================================
   V8 — GESTION DU PARCOURS
   ========================================================= */

.ml-manage-parcours-link {
  color: var(--ml-blue);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
}

.ml-delete-parcours-form {
  max-width: 780px;
  margin-top: 18px;
}

.ml-delete-parcours-button {
  display: inline-flex;
  min-height: 40px;
  padding: 8px 14px;
  align-items: center;
  justify-content: center;
  border: 1px solid #8b3f4f;
  border-radius: 5px;
  background: #8b3f4f;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}


/* =========================================================
   V9 — ÉTAT D’UNE DISCIPLINE DANS LE CYCLE
   ========================================================= */

.ml-domain-lock-note {
  margin: 10px 0 0;
  color: var(--ml-muted);
  font-size: 13px;
  line-height: 1.45;
}


/* =========================================================
   V14 — progression horizontale en 9 étapes
   ========================================================= */
.ml-v14-roadmap,.ml-v14-final-card{margin:28px 0;padding:24px;border:1px solid #d8dee8;border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(30,55,80,.06)}
.ml-v14-roadmap-intro{margin:0 0 18px}
.ml-v14-progress-table-wrap{overflow-x:auto;border:1px solid #dce2e9;border-radius:10px;background:#fff}
.ml-v14-progress-table{min-width:720px}
.ml-v14-table-row{display:grid;grid-template-columns:minmax(170px,1.15fr) repeat(3,minmax(160px,1fr));align-items:stretch;border-top:1px solid #e5e9ee}
.ml-v14-table-row:first-child{border-top:0}
.ml-v14-table-head{background:#f6f8fb;color:#17395f}
.ml-v14-discipline-head,.ml-v14-discipline-name,.ml-v14-period-head,.ml-v14-period-cell{padding:14px 16px}
.ml-v14-discipline-head,.ml-v14-discipline-name{display:flex;align-items:center;border-right:1px solid #e2e7ed}
.ml-v14-discipline-head{font-weight:700}
.ml-v14-discipline-name{font-weight:600;color:#17395f}
.ml-v14-period-head{text-align:center;border-right:1px solid #e2e7ed}
.ml-v14-period-head:last-child{border-right:0}
.ml-v14-period-head strong,.ml-v14-period-head span{display:block}
.ml-v14-period-head span{margin-top:3px;font-size:.78rem;font-weight:400;color:#687384}
.ml-v14-period-cell{display:flex;align-items:center;justify-content:center;gap:18px;border-right:1px solid #e8ecf0}
.ml-v14-period-cell:last-child{border-right:0}
.ml-v14-status{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:34px;line-height:1;text-align:center}
.ml-v14-status-symbol{display:flex;align-items:center;justify-content:center;width:27px;height:27px;font-size:1.28rem;font-weight:700}
.ml-v14-status small{margin-top:4px;font-size:.72rem;color:#6f7884}
.ml-v14-status.is-acquired .ml-v14-status-symbol{color:#c59624}
.ml-v14-status.is-current .ml-v14-status-symbol{color:#2e74b5;font-size:1.05rem}
.ml-v14-status.is-retry .ml-v14-status-symbol{color:#d74a68;font-size:1.7rem}
.ml-v14-status.is-locked .ml-v14-status-symbol{font-size:1rem;filter:grayscale(.25);opacity:.72}
.ml-v14-legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin:14px 0 0;font-size:.84rem;color:#5d6775}
.ml-v14-legend span{display:inline-flex;align-items:center;gap:6px}
.ml-v14-legend-symbol{font-size:1rem}
.ml-v14-legend-symbol.is-star{color:#c59624}
.ml-v14-legend-symbol.is-current{color:#2e74b5}
.ml-v14-legend-symbol.is-retry{color:#d74a68;font-size:1.25rem}
.ml-v14-blocking-message{margin:16px 0 0;padding:12px 15px;border-left:4px solid #336699;background:#f2f6fa;line-height:1.55}
.ml-v14-objective{padding:10px 12px;background:#f6f8fb;border-radius:7px;font-size:.93rem}.ml-v14-objective strong{color:#336699}
.ml-v14-final-card{display:flex;align-items:center;justify-content:space-between;gap:24px}.ml-v14-final-card.is-available{border-color:#8db4d8;background:#f2f7fc}.ml-v14-final-card.is-complete{border-color:#6d9b72;background:#f5fbf5}.ml-primary-button.is-disabled{pointer-events:none;opacity:.55;filter:grayscale(.4)}
@media(max-width:760px){.ml-v14-roadmap{padding:18px}.ml-v14-legend{gap:8px 14px}.ml-v14-final-card{align-items:flex-start;flex-direction:column}}

.ml-domain--rhythm { --domain-color:#b45f32; --domain-soft:#fff2e9; border-left-color:#b45f32; }

/* =========================================================
   V16.6 — TABLEAU DE BORD : SIX CARTES PLUS LISIBLES
   ========================================================= */

.ml-dashboard-overview {
  display: flex;
  margin-bottom: 24px;
  padding: 24px 26px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid #d8e0e8;
  border-radius: 14px;
  background: #f6f8fb;
  box-shadow: var(--ml-shadow);
}

.ml-dashboard-overview-copy {
  min-width: 0;
}

.ml-dashboard-overview-copy h2 {
  margin: 0 0 7px;
  color: var(--ml-blue-dark);
  font-size: 24px;
  line-height: 1.25;
}

.ml-dashboard-overview-copy p {
  margin: 0;
  color: var(--ml-gray-500);
  line-height: 1.55;
}

.ml-dashboard-overview-score {
  flex: 0 0 190px;
  padding: 15px 17px;
  border: 1px solid #d8e0e8;
  border-radius: 11px;
  background: #ffffff;
  text-align: center;
}

.ml-dashboard-overview-score strong,
.ml-dashboard-overview-score span {
  display: block;
}

.ml-dashboard-overview-score strong {
  color: var(--ml-blue);
  font-size: 25px;
  line-height: 1.1;
}

.ml-dashboard-overview-score > span {
  margin-top: 5px;
  color: var(--ml-gray-500);
  font-size: 12px;
}

.ml-overview-progress {
  height: 7px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ml-gray-100);
}

.ml-overview-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ml-blue);
  transition: width .25s ease;
}

.ml-cycle-card-intro {
  max-width: 850px;
}

.ml-domain-grid {
  align-items: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ml-domain-card {
  min-height: 405px;
  padding: 18px;
  overflow: hidden;
  border-top-width: 4px;
}

.ml-domain-card .ml-card-status {
  display: flex;
  width: 100%;
  min-height: 34px;
  padding: 7px 11px;
  align-items: center;
}

.ml-domain-card h3 {
  min-height: 25px;
  margin: 16px 0 8px;
  padding-right: 14px;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-domain-card .ml-domain-summary {
  flex: 0 0 auto;
  min-height: 46px;
  margin: 0 0 15px;
  color: #263442;
  font-size: 14px;
  line-height: 1.55;
}

.ml-domain-panel {
  display: flex;
  flex: 1 1 auto;
  min-height: 190px;
  padding: 14px;
  flex-direction: column;
  gap: 14px;
  border: 1px solid rgba(80, 100, 120, .08);
  border-radius: 9px;
  background: var(--ml-domain-light);
}

.ml-domain-objective {
  flex: 1 1 auto;
}

.ml-domain-objective-heading {
  display: flex;
  margin-bottom: 7px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ml-domain-color);
  font-size: 13px;
  font-weight: 700;
}

.ml-domain-objective-code {
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .78;
}

.ml-domain-card .ml-domain-objective-text {
  min-height: 0;
  margin: 0;
  color: #263442;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

.ml-domain-actions {
  margin-top: auto;
  gap: 8px;
}

.ml-domain-primary-action,
.ml-domain-secondary-action {
  min-height: 42px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.25;
}

.ml-domain-secondary-action {
  flex: 0 0 38%;
}

.ml-domain-primary-action {
  min-width: 0;
}

.ml-domain-lock-note {
  flex: 0 0 auto;
  margin: 0;
  padding-top: 9px;
  border-top: 1px solid rgba(80, 100, 120, .14);
}

.ml-domain--melodic-dictation {
  --ml-domain-color: #9b526f;
  --ml-domain-light: #f8eff3;
}

.ml-domain--culture {
  --ml-domain-color: #947329;
  --ml-domain-light: #fbf6e8;
}

.ml-domain-card .ml-card-status.is-informational {
  background: var(--ml-domain-light);
  color: var(--ml-domain-color);
}

.ml-domain-card.is-informational {
  background: #ffffff;
}

.ml-culture-panel {
  justify-content: space-between;
}

.ml-domain-card .ml-culture-auto-note {
  flex: 0 0 auto;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 115, 41, .2);
  color: #6f5b2d;
  font-size: 12px;
  line-height: 1.45;
}

/* Les anciens codes de profil ne sont plus affichés aux élèves.
   Ils ne réapparaissent que dans le mode de test administrateur. */
.ml-v14-objective {
  display: none;
}

@media (max-width: 980px) {
  .ml-domain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ml-domain-card h3 {
    white-space: normal;
  }
}

@media (max-width: 720px) {
  .ml-dashboard-overview {
    align-items: stretch;
    flex-direction: column;
  }

  .ml-dashboard-overview-score {
    flex-basis: auto;
    width: 100%;
  }

  .ml-domain-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ml-domain-card {
    min-height: 0;
  }
}

@media (max-width: 440px) {
  .ml-dashboard-overview,
  .ml-cycle-card,
  .ml-calendar-card,
  .ml-v14-roadmap,
  .ml-v14-final-card {
    padding: 18px;
  }

  .ml-domain-actions {
    flex-direction: column;
  }

  .ml-domain-secondary-action {
    flex-basis: auto;
  }
}

/* Les sélecteurs historiques ciblant tous les boutons de carte étaient
   plus spécifiques que les classes d’action. Ces règles rétablissent
   clairement la hiérarchie visuelle des deux boutons. */
.ml-domain-card .ml-domain-primary-action {
  border-color: var(--ml-domain-color);
  background: var(--ml-domain-color);
  color: #ffffff;
  cursor: pointer;
}

.ml-domain-card .ml-domain-secondary-action {
  border-color: var(--ml-domain-color);
  background: #ffffff;
  color: var(--ml-domain-color);
  cursor: pointer;
}

.ml-domain-card .ml-domain-primary-action:hover,
.ml-domain-card .ml-domain-primary-action:focus {
  filter: brightness(.94);
}

.ml-domain-card .ml-domain-secondary-action:hover,
.ml-domain-card .ml-domain-secondary-action:focus {
  background: rgba(255, 255, 255, .62);
}

.ml-domain-card .ml-domain-primary-action:disabled,
.ml-domain-card .ml-domain-secondary-action:disabled {
  cursor: default;
  opacity: .62;
}

/* V16.14.71 - Les deux actions d’une carte partagent toujours
   exactement la même largeur. Le libellé d’attente peut revenir
   proprement à la ligne sans rogner l’action principale. */
.ml-domain-card .ml-domain-actions .ml-domain-primary-action,
.ml-domain-card .ml-domain-actions .ml-domain-secondary-action {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
}


/* =========================================================
   V16.8 - HIÉRARCHIE ÉDITORIALE ET DATES DU PARCOURS
   ========================================================= */

.now_page2 .ml-dashboard-tagline {
  max-width: none;
  margin: 7px 0 0;
  line-height: 1.45;
}

.ml-dashboard-introduction {
  margin: 0 0 26px;
}

.ml-dashboard-introduction .h2_background {
  margin-bottom: 12px;
}

.ml-dashboard-introduction-body {
  display: flex;
  align-items: flex-start;
  gap: 26px;
}

.ml-dashboard-introduction-copy {
  max-width: 920px;
}

.ml-dashboard-introduction-copy p {
  margin: 0 0 10px;
  line-height: 1.65;
}

.ml-dashboard-introduction-copy p:last-child {
  margin-bottom: 0;
}

/* Zone prête à accueillir ultérieurement une illustration. */
.ml-dashboard-introduction-media {
  flex: 0 0 240px;
}

.ml-dashboard-introduction-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.ml-dashboard-overview {
  background: #f7f9fb;
}

.ml-dashboard-overview-copy .ml-dashboard-step-rule {
  margin: 8px 0 0;
  color: var(--ml-text);
  line-height: 1.6;
}

.ml-dashboard-overview-copy #mlDashboardCalendarSummary {
  margin-top: 10px;
  color: var(--ml-gray-500);
}

.ml-cycle-card .ml-section-heading,
.ml-v14-roadmap .ml-section-heading,
.ml-calendar-card .ml-section-heading {
  margin-bottom: 14px;
}

/* Les références internes restent dans les données, jamais dans la carte. */
.ml-domain-objective-code {
  display: none !important;
}

.ml-v14-progress-table {
  width: 100%;
  min-width: 0;
}

.ml-v14-table-row {
  grid-template-columns: minmax(160px, .95fr) repeat(3, minmax(0, 1fr));
}

.ml-v14-discipline-head,
.ml-v14-discipline-name,
.ml-v14-period-head,
.ml-v14-period-cell {
  padding-right: 12px;
  padding-left: 12px;
}

.ml-v14-period-cell {
  gap: 12px;
}

@media (max-width: 820px) {
  .ml-v14-progress-table {
    min-width: 720px;
  }

  .ml-v14-table-row {
    grid-template-columns: minmax(160px, 1fr) repeat(3, minmax(180px, 1fr));
  }
}

.ml-v14-period-head {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.ml-v14-period-head strong,
.ml-v14-period-head span,
.ml-v14-period-head small {
  display: block;
}

.ml-v14-period-head span {
  margin-top: 5px;
  color: #4f5f70;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
}

.ml-v14-period-head small {
  margin-top: 4px;
  color: #75808c;
  font-size: 11px;
  font-weight: 400;
}

.ml-v14-final-card h2 {
  margin-top: 0;
}

@media (max-width: 720px) {
  .now_page2 .ml-dashboard-tagline {
    white-space: normal;
  }

  .ml-dashboard-introduction-body {
    flex-direction: column;
  }

  .ml-dashboard-introduction-media {
    width: 100%;
    flex-basis: auto;
  }
}


/* =========================================================
   V16.9.5.6 - FINITIONS DU TABLEAU DE BORD
   ========================================================= */

.musiclic-breadcrumb + .ml-dashboard-shell {
  padding-top: 4px;
}

.ml-dashboard-introduction .h2_background {
  margin-top: 0;
}

.ml-v14-final-card {
  border-left: 5px solid #aeb8c4;
  background: #f7f9fb;
}

.ml-v14-final-card h2 {
  color: var(--ml-blue-dark);
}

.ml-v14-final-card.is-available {
  border-left-color: #2e74b5;
  background: #f2f7fc;
}

.ml-v14-final-card.is-complete {
  border-left-color: #6d9b72;
  background: #f5fbf5;
}

.ml-final-status {
  display: inline-flex;
  margin: 0 0 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e9edf1;
  color: #566575;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.ml-final-status.is-available {
  background: #dfeefa;
  color: #245f95;
}

.ml-final-status.is-complete {
  background: #e0f1e5;
  color: #286a3f;
}


/* V16.10.9 — la culture musicale suit le même traitement visuel
   que les autres disciplines dans le tableau de progression. */
.ml-v14-culture-cell {
  justify-content: center;
}
.ml-v14-culture-cell .ml-v14-status {
  min-width: 46px;
}

/* =========================================================
   V16.14.16 — ESPACEMENT COMMUN ENTRE FIL D’ARIANE ET H2
   ========================================================= */
.musiclic-breadcrumb {
  margin-bottom: 20px !important;
}

.musiclic-breadcrumb + .ml-dashboard-shell {
  padding-top: 0 !important;
}

.ml-dashboard-introduction .h2_background {
  margin-top: 0 !important;
}


/* =========================================================
   V16.14.18 — PAGE DE DÉMARRAGE ALLÉGÉE
   ========================================================= */
.ml-start-page {
  padding-top: 0;
}

.ml-start-page > .h2_background,
.ml-start-calendar-section .h2_background {
  margin-top: 0;
  margin-bottom: 14px;
}

.ml-start-introduction {
  margin-bottom: 24px;
}

.ml-start-page .ml-start-form {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ml-start-calendar-section {
  margin-top: 30px;
}

.ml-start-calendar-section #mlStartCalendarPreview > p {
  margin-bottom: 16px;
}

.ml-start-page .ml-confirm-choice {
  align-items: center;
  margin: 22px 0 18px;
}

.ml-start-page .ml-confirm-choice input {
  flex: 0 0 auto;
  margin: 0;
}

.ml-start-page .ml-actions-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

@media (max-width: 620px) {
  .ml-start-page .ml-actions-line {
    align-items: stretch;
    flex-direction: column;
  }

  .ml-start-page .ml-actions-line .ml-primary-button,
  .ml-start-page .ml-actions-line .ml-secondary-button {
    width: 100%;
  }
}

/* =========================================================
   V16.14.42 - FIL D'ARIANE ALIGNÉ SUR LE STYLE GÉNÉRAL DU SITE

   Texte et séparateurs noirs. Les liens sont noirs et soulignés
   au repos, puis bleus et non soulignés au survol / focus.
   ========================================================= */
.musiclic-breadcrumb {
  color: #000000 !important;
}

.musiclic-breadcrumb a,
.musiclic-breadcrumb a:link,
.musiclic-breadcrumb a:visited {
  color: #000000 !important;
  text-decoration: underline !important;
  text-decoration-skip-ink: auto;
}

.musiclic-breadcrumb a:hover,
.musiclic-breadcrumb a:focus,
.musiclic-breadcrumb a:active {
  color: #0099cc !important;
  text-decoration: none !important;
}

.musiclic-breadcrumb [aria-current="page"] {
  color: #000000 !important;
  text-decoration: none !important;
}


/* ================================================================
   V16.14.44 - TABLEAU DE BORD : BLOC DE PÉRIODE SANS ACCENT LATÉRAL
   ================================================================ */
/* Le bloc récapitulatif de la période conserve sa bordure neutre de carte,
   sans trait bleu à gauche afin de ne pas suggérer un état ou une action. */


/* =========================================================
   V16.14.45 - TABLEAU DE BORD EN MODE DECOUVERTE
   ========================================================= */
.ml-discovery-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 24px;
  padding: 22px 24px;
  border: 1px solid #c7dbea;
  border-radius: 12px;
  background: #f5faff;
}

.ml-discovery-banner-copy {
  min-width: 0;
}

.ml-discovery-banner-kicker {
  display: block;
  margin-bottom: 5px;
  color: #336699;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ml-discovery-banner h2 {
  margin: 0 0 7px;
  color: #234e78;
  font-size: 21px;
  line-height: 1.3;
}

.ml-discovery-banner p {
  margin: 0;
  color: #51677b;
  line-height: 1.6;
}

.ml-discovery-banner-actions {
  display: flex;
  flex: 0 0 245px;
  flex-direction: column;
  gap: 9px;
}

.ml-discovery-banner-actions .ml-primary-button {
  justify-content: center;
  text-align: center;
}

.ml-discovery-login-link {
  display: block;
  color: #334f69 !important;
  font-weight: 600;
  text-align: center;
  text-decoration: underline !important;
}

.ml-discovery-login-link:hover,
.ml-discovery-login-link:focus {
  color: #0099cc !important;
  text-decoration: none !important;
}

.ml-discovery-mode .ml-dashboard-overview-score {
  min-width: 190px;
}

.ml-discovery-mode .ml-dashboard-overview-score .ml-overview-progress,
.ml-discovery-mode .ml-calendar-progress {
  display: none;
}

.ml-discovery-mode .ml-domain-card {
  opacity: 1;
}

.ml-discovery-mode .ml-card-status.is-locked {
  border-color: #d7dde3;
  background: #f4f5f6;
  color: #6c757d;
}

.ml-discovery-step-title {
  display: block;
  margin: 6px 0 8px;
  color: #3a4f62;
  font-size: 14px;
  line-height: 1.45;
}

.ml-discovery-locked-action {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #d9dee3;
  border-radius: 7px;
  background: #f3f4f5;
  color: #747d85;
  font-size: 13px;
  font-weight: 600;
  cursor: not-allowed;
  text-align: center;
}

.ml-discovery-mode .ml-period-card {
  border-color: #d9e1e8;
  background: #fff;
}

.ml-discovery-mode .ml-period-card:hover {
  border-color: #cbd7e1;
}

.ml-discovery-mode .ml-v14-blocking-message {
  color: #536779;
}

.ml-discovery-mode .ml-v14-final-card .ml-primary-button {
  border-color: #4f6f8f;
  background: #587895;
  color: #fff;
  pointer-events: auto;
  opacity: 1;
}

.ml-discovery-mode .ml-v14-final-card .ml-primary-button:hover,
.ml-discovery-mode .ml-v14-final-card .ml-primary-button:focus {
  background: #466681;
}

@media (max-width: 760px) {
  .ml-discovery-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .ml-discovery-banner-actions {
    flex-basis: auto;
  }
}


/* =========================================================
   V16.14.50 - MODE DECOUVERTE : PROGRAMMES PAR DISCIPLINE
   ========================================================= */
.ml-discovery-program-form {
  flex: 0 0 38%;
  margin: 0;
}

.ml-discovery-program-form .ml-discovery-program-button {
  width: 100%;
  min-height: 42px;
  cursor: pointer;
  background: #ffffff;
  color: var(--ml-domain-color);
}

.ml-discovery-program-shell {
  max-width: 1120px;
}

.ml-discovery-program-shell .ml-step-row.is-future {
  color: inherit;
}

.ml-discovery-program-shell .ml-step-row.is-future .ml-step-text span {
  color: var(--ml-muted);
}

.ml-discovery-locked-button {
  min-width: 92px;
  cursor: default;
}

.ml-discovery-program-footer-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 28px;
}

.ml-discovery-program-footer-actions form {
  margin: 0;
}

@media (max-width: 760px) {
  .ml-discovery-program-form {
    flex: 1 1 100%;
  }

  .ml-domain-actions {
    flex-wrap: wrap;
  }

  .ml-discovery-program-footer-actions {
    align-items: stretch;
    flex-direction: column;
  }
}


/* v16.14.63 - Actions du programme en mode découverte */
.ml-discovery-program-footer-actions .ml-primary-button {
  box-shadow: none;
  text-shadow: none;
  transform: none;
}

.ml-discovery-program-footer-actions .ml-primary-button:hover,
.ml-discovery-program-footer-actions .ml-primary-button:focus {
  box-shadow: none;
  text-shadow: none;
  transform: none;
}

.ml-discovery-program-footer-actions .ml-secondary-button {
  border-color: var(--ml-blue);
  background: var(--ml-white);
  color: var(--ml-blue);
}

.ml-discovery-program-footer-actions .ml-secondary-button:hover,
.ml-discovery-program-footer-actions .ml-secondary-button:focus {
  border-color: var(--ml-blue);
  background: #eef5fb;
  color: var(--ml-blue);
  text-decoration: none;
  box-shadow: none;
  transform: none;
}