/* student/plan.css

   Mes objectifs : avancement, semaines, tâches.

   Chargé par index.html, dans l'ordre de css/README.md. Ne pas changer cet
   ordre sans relire la section « Ordre de chargement ». */

/* ===================== Parcours mensuels =====================
   Chaque semaine est une carte, comme dans les maquettes need-academy-
   dashboards.html (4.2, « Mes objectifs »). La semaine en cours se distingue
   par un liseré de couleur d'action ; une tâche faite est cochée, pas juste
   grisée. */

.item-done .item-title { color: var(--muted); }

.item-done .item-title::before { content: '\2713'; color: var(--green); margin-right: 8px; }

.item[role="button"] { cursor: pointer; }

.item[role="button"]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.item[role="button"] > .tag { margin-right: 22px; }

/* =========================================================
   Mes objectifs
   ========================================================= */

.progress-line {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  max-width: var(--w-read);
  margin: 0 0 var(--s-6);
}

.progress-text { margin: 0; font-size: var(--fs-3); color: var(--muted); white-space: nowrap; }

.progress-text b { color: var(--text); font-weight: 600; }

.progress-line .bar { margin: 0; }

.progress-pct { font-size: var(--fs-3); font-variant-numeric: tabular-nums; }

.next-task {
  max-width: var(--w-read);
  margin: 0 0 var(--s-7);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}

.next-task .section-label { margin-bottom: var(--s-2); font-size: var(--fs-2); color: var(--muted); }

.next-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
}

.next-task-title { margin: 0 0 2px; font-size: var(--fs-5); font-weight: 600; line-height: 1.35; }

.weeks { list-style: none; margin: 0; padding: 0; max-width: var(--w-read); }

.week {
  padding: var(--s-5);
  margin-bottom: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}

.week.is-current { border-left: 3px solid var(--primary); }

.week-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin-bottom: var(--s-2);
}

.week-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
  font-size: var(--fs-5);
  font-weight: 600;
}

.week-badge {
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-tint);
  border-radius: 20px;
  padding: 2px 10px;
}

:root:not([data-theme="light"]) .week-badge { color: var(--primary-strong); }

.week-focus { margin: var(--s-1) 0 0; font-size: var(--fs-3); color: var(--muted); }

/* Une semaine vide tient sur une ligne et recule d'un plan. */

.week.is-empty { padding: var(--s-4) var(--s-5); }

.week.is-empty .week-title { font-size: var(--fs-4); font-weight: 500; color: var(--muted); }

.week-empty { margin: 2px 0 0; font-size: var(--fs-3); color: var(--muted); }

.task-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; }

.task-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 40px;
  padding: 7px 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* Puce d'état : vide et discrète pour une tâche à faire, cochée et verte
   pour une tâche faite. Une seule forme, dans les deux cas. */

.task-row::before {
  content: '';
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
}

.task-row.is-done::before,
.task-row.is-graded::before {
  border-color: var(--green);
  background: var(--green);
}

.task-row-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.task-row-title { font-size: var(--fs-3); font-weight: 500; color: var(--text); }

.task-row:hover .task-row-title { text-decoration: underline; text-underline-offset: 3px; }

.task-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.task-row-state {
  flex: 0 0 auto;
  font-size: var(--fs-1);
  color: var(--muted);
  white-space: nowrap;
  margin-left: auto;
}

.task-row.is-todo .task-row-state { color: var(--text); }

.task-row.is-done .task-row-state,
.task-row.is-graded .task-row-state { color: var(--green); }

.task-row.is-submitted .task-row-state { color: var(--primary); }

@media (max-width: 480px) {
  .progress-line { grid-template-columns: 1fr auto; }
  .progress-line .bar { grid-column: 1 / -1; grid-row: 2; }
  .next-task { padding: var(--s-4); }
  .next-task-row .btn { flex: 1 1 100%; }
  .task-row-state { white-space: normal; margin-left: 0; }
}

/* Semaine terminée sans rendu : la tâche est fermée. */
.task-row.is-missed .task-row-title { color: var(--muted); }

.task-row.is-missed .task-row-state { color: var(--red); }

/* =========================================================
   Parcours, version groupée (comme l'accueil)
   ========================================================= */

.plan-header .eyebrow { margin-bottom: 2px; }

.plan-all-done { max-width: var(--w-read); margin: 0 0 var(--s-6); color: var(--muted); }

.plan-weeks { max-width: var(--w-read); display: flex; flex-direction: column; gap: var(--s-5); }

.plan-week-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0 0 var(--s-2);
  padding: 0 var(--s-1);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan-week.is-current .plan-week-name { color: var(--primary); }
:root:not([data-theme="light"]) .plan-week.is-current .plan-week-name { color: var(--primary-strong); }

.plan-week-meta { font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-week-ok { color: var(--green); font-weight: 600; }

.plan-week-focus { margin: 0 0 var(--s-2); padding: 0 var(--s-1); font-size: var(--fs-3); color: var(--muted); }
.plan-week-empty { margin: 0; padding: 0 var(--s-1); font-size: var(--fs-3); color: var(--muted); }

.home-group.is-current { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

/* Semaine passée : repliée, titre cliquable avec un chevron. */
details.plan-week > summary { cursor: pointer; list-style: none; }
details.plan-week > summary::-webkit-details-marker { display: none; }
details.plan-week > summary .plan-week-name::before {
  content: '›';
  display: inline-block;
  width: 14px;
  font-size: var(--fs-4);
  transition: transform .15s ease;
}
details.plan-week[open] > summary .plan-week-name::before { transform: rotate(90deg); }
details.plan-week > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* Puce d'état : vide à faire, verte cochée faite, demi-pleine envoyée, rouge manquée. */
.plan-dot {
  width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
}
.plan-dot svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.plan-row.is-done .plan-dot,
.plan-row.is-graded .plan-dot { background: var(--green); border-color: var(--green); }
.plan-row.is-submitted .plan-dot { border-color: var(--primary); background: linear-gradient(90deg, var(--primary) 50%, transparent 50%); }
.plan-row.is-submitted .meta { color: var(--primary); }
.plan-row.is-missed .plan-dot { border-color: var(--red); border-style: dashed; }
.plan-row.is-missed .home-row-title { color: var(--muted); }
.plan-row.is-missed .meta { color: var(--red); }
.plan-row.is-done .meta, .plan-row.is-graded .meta { color: var(--green); }
.plan-row .tag { flex: none; }
.plan-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }