/* ==========================================================================
   Le plan d'apprentissage.

   Téléphone d'abord : tout tient dans 390 px sans défilement horizontal, et
   les cibles font au moins 44 px de haut. Les pastilles de choix passent en
   ligne dès qu'il y a la place, et restent empilables quand il n'y en a pas.
   ========================================================================== */

.plan-page{max-width:var(--reading-width,62ch);margin-inline:auto}
.plan-heading{display:grid;gap:6px}
.plan-heading h1{margin:0}
.plan-resume{margin:4px 0 0;color:var(--text-muted);font-size:1.02rem;line-height:1.5}
.plan-rappel-test{margin:0;color:var(--text-muted);font-size:.9rem}

/* --- Les choix ----------------------------------------------------------- */
.plan-choix-form{display:grid;gap:22px}
.plan-rangee{border:0;margin:0;padding:0;display:grid;gap:10px}
.plan-rangee-titre{padding:0;font-weight:600;font-size:1.02rem}
.plan-rangee-aide{margin:0;color:var(--text-muted);font-size:.86rem}
.plan-pastilles{display:flex;flex-wrap:wrap;gap:8px}
.plan-pastille{
  flex:1 1 auto;min-width:min(100%,9.5rem);min-height:52px;
  display:grid;gap:2px;justify-items:start;text-align:left;
  padding:10px 14px;border-radius:14px;cursor:pointer;
  border:1px solid var(--border,rgba(0,0,0,.14));
  background:var(--surface,#fff);color:inherit;font:inherit;
  transition:border-color .15s ease,background .15s ease;
}
.plan-pastille:hover{border-color:var(--accent,#0a7)}
.plan-pastille:focus-visible{outline:2px solid var(--accent,#0a7);outline-offset:2px}
.plan-pastille.is-active{
  border-color:var(--accent,#0a7);
  box-shadow:inset 0 0 0 1px var(--accent,#0a7);
  background:var(--accent-soft,rgba(0,170,119,.08));
}
.plan-pastille-label{font-weight:600}
.plan-pastille-detail{color:var(--text-muted);font-size:.82rem;line-height:1.35}
.plan-choix-actions{display:flex;flex-wrap:wrap;gap:10px}
.plan-valider,.plan-annuler{min-height:48px}
.plan-erreur{margin:0;color:var(--danger,#b4232a);font-size:.92rem}

/* --- Les compteurs et la piste ------------------------------------------ */
.plan-kpis{display:flex;flex-wrap:wrap;gap:10px}
.plan-kpi{
  flex:1 1 8rem;display:grid;gap:2px;padding:12px 14px;border-radius:14px;
  background:var(--surface-sunken,rgba(0,0,0,.035));
}
.plan-kpi strong{font-size:1.25rem;line-height:1.1}
.plan-kpi span{color:var(--text-muted);font-size:.82rem}
.plan-piste{height:6px;border-radius:999px;overflow:hidden;
  background:var(--surface-sunken,rgba(0,0,0,.08))}
.plan-piste i{display:block;height:100%;border-radius:999px;
  background:var(--accent,#0a7);transition:width .3s ease}
.plan-avertissement{
  margin:0;padding:10px 14px;border-radius:12px;font-size:.92rem;
  background:var(--warn-soft,rgba(180,120,0,.1));
}

/* --- Une semaine -------------------------------------------------------- */
.plan-semaine{
  display:grid;gap:12px;padding:16px;border-radius:18px;
  border:1px solid var(--border,rgba(0,0,0,.12));background:var(--surface,#fff);
}
/* La semaine en cours est mise en avant, et elle seule. */
.plan-semaine.is-en-cours{
  border-color:var(--accent,#0a7);
  box-shadow:0 1px 0 var(--accent,#0a7) inset,0 10px 24px rgba(0,0,0,.05);
}
.plan-semaine.is-terminee{opacity:.75}
/* Une semaine en retard est DITE, pas accusée : pas de rouge, pas d'alarme. */
.plan-semaine.is-a-reprendre{border-style:dashed}
.plan-semaine-tete{display:grid;gap:2px}
.plan-semaine-tete h2{margin:0;font-size:1.08rem}
.plan-semaine-dates,.plan-semaine-duree{color:var(--text-muted);font-size:.84rem}
.plan-semaine-vide{margin:0;color:var(--text-muted);font-size:.9rem}

.plan-lecons{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plan-lecon{
  display:grid;grid-template-columns:1.4rem 1fr auto;gap:10px;align-items:start;
  padding:8px 0;border-top:1px solid var(--border-soft,rgba(0,0,0,.07));
}
.plan-lecons>.plan-lecon:first-child{border-top:0}
.plan-lecon-coche{
  width:1.4rem;height:1.4rem;border-radius:999px;display:grid;place-items:center;
  font-size:.8rem;border:1px solid var(--border,rgba(0,0,0,.2));
}
.plan-lecon.is-done .plan-lecon-coche{
  background:var(--accent,#0a7);border-color:var(--accent,#0a7);color:#fff}
.plan-lecon.is-done .plan-lecon-titre{text-decoration:line-through;opacity:.7}
.plan-lecon-corps{display:grid;gap:2px;min-width:0}
.plan-lecon-titre{font-weight:500;overflow-wrap:anywhere}
.plan-lecon-raison{color:var(--text-muted);font-size:.8rem}
/* Une idée fausse se voit : c'est l'information la plus utile du plan. */
.plan-lecon.is-idee-fausse .plan-lecon-raison{color:var(--danger,#b4232a);font-weight:500}
.plan-lecon-duree{color:var(--text-muted);font-size:.82rem;white-space:nowrap}

.plan-atelier{
  display:grid;gap:6px;padding:12px 14px;border-radius:14px;
  background:var(--surface-sunken,rgba(0,0,0,.035));
}
.plan-atelier-tete{margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.plan-atelier-etiquette,.plan-revisions-etiquette{
  font-family:var(--font-mono,monospace);font-size:.68rem;letter-spacing:.1em;
  color:var(--text-muted);
}
.plan-atelier-titre{font-weight:600}
.plan-atelier-duree{color:var(--text-muted);font-size:.82rem}
.plan-atelier-essai,.plan-atelier-note{margin:0;font-size:.88rem;line-height:1.45}
.plan-atelier-note{color:var(--text-muted)}
.plan-revisions{margin:0;font-size:.88rem;display:flex;flex-wrap:wrap;gap:6px;
  align-items:baseline}

.plan-revisions-reste{color:var(--text-muted)}
/* Avoir fini avant la fin n'est pas un échec : on le dit sans alarme. */
.plan-avance{
  margin:0;padding:12px 16px;border-radius:14px;font-size:.92rem;
  background:var(--surface-sunken,rgba(0,0,0,.035));color:var(--text-muted);
}

/* --- Le reste, le re-test, les choix ------------------------------------ */
.plan-reste,.plan-retest,.plan-choix-rappel{
  display:grid;gap:8px;padding:16px;border-radius:18px;
  background:var(--surface-sunken,rgba(0,0,0,.03));
}
.plan-reste h2,.plan-retest h2,.plan-choix-rappel h2{margin:0;font-size:1.02rem}
.plan-choix-liste{margin:0;padding-left:1.1rem;display:grid;gap:3px;font-size:.92rem}
.plan-changer{min-height:48px;justify-self:start}
.plan-groupe{margin:0}

/* --- L'invitation posée dans Parcours et Profil -------------------------- */
.plan-invite{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;
  text-decoration:none;color:inherit;padding:16px;
}
.plan-invite:hover{border-color:var(--accent,#0a7)}
.plan-invite-eyebrow{
  grid-column:1;font-family:var(--font-mono,monospace);font-size:.68rem;
  letter-spacing:.1em;color:var(--text-muted);
}
.plan-invite-titre{grid-column:1;font-size:1.05rem}
.plan-invite-detail{grid-column:1;color:var(--text-muted);font-size:.9rem}
.plan-invite-chevron{grid-column:2;grid-row:1 / span 3;font-size:1.6rem;
  color:var(--text-muted)}

@media(min-width:720px){
  .plan-pastille{min-width:10.5rem}
  .plan-semaine{padding:20px 22px}
}