/* ============================================================
   Nexalys — Ma progression (mode Apprentissage)
   Scoped sous .nxpr-root.
   Page de l'EFFORT : série, temps, régularité, volume et activité récente.
   L'objectif et les compétences prioritaires ont leur propre page.
   ============================================================ */

#tab-fiche { background: transparent; }

.nxpr-root {
  --p-primary: var(--nx-green-700);
  --p-primary-ink: var(--nx-green-800);
  --p-primary-soft: var(--nx-green-50);
  --p-primary-soft-2: var(--nx-green-200);

  /* La série n'est plus orange : jours actifs en vert, 🔥 conservé */
  --p-flame: var(--nx-green-500);
  --p-flame-soft: var(--nx-green-50);
  --p-flame-border: var(--nx-green-200);

  --p-ok: var(--nx-green-700);
  --p-ok-ink: var(--nx-green-800);
  --p-ok-soft: var(--nx-green-50);
  --p-ok-border: var(--nx-green-200);

  --p-warn-ink: var(--nx-warn-ink);
  --p-warn-soft: var(--nx-warn-soft);
  --p-warn-border: var(--nx-warn-border);

  --p-ink: var(--nx-ink);
  --p-text: var(--nx-text);
  --p-muted: var(--nx-muted);
  --p-card: var(--nx-surface);
  --p-border: var(--nx-border);
  --p-border-strong: var(--nx-border-strong);
  --p-track: var(--nx-green-100);

  font-family: "Geist", "Geist Variable", "InterVariable", "Inter", system-ui,
               -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-feature-settings: "tnum" 1, "ss01" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.008em;
  color: var(--p-text);
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 13px 28px;
  background: var(--nx-bg);
}

/* ── Header ── */
.nxpr-head { display: flex; flex-direction: column; gap: 2px; }

.nxpr-eyebrow {
  font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--p-primary);
}

.nxpr-title {
  margin: 2px 0 0;
  font-size: 20px; font-weight: 800;
  color: var(--p-ink); letter-spacing: -.02em;
}

.nxpr-sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--p-muted); }

/* ── Carte générique ── */
.nxpr-card {
  border-radius: 15px;
  padding: 15px;
  background: var(--p-card);
  border: 1px solid var(--p-border);
  box-shadow: 0 4px 13px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .03);
}

.nxpr-card-title {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--p-muted);
  margin-bottom: 13px;
}

/* ── Série (hero) ── */
.nxpr-streak {
  border-radius: 18px;
  padding: 18px 16px 15px;
  background: linear-gradient(158deg, #fff6ed 0%, #ffffff 62%);
  border: 1px solid var(--p-flame-border);
  box-shadow: 0 10px 24px rgba(249, 115, 22, .10), 0 2px 5px rgba(15, 23, 42, .04);
}

.nxpr-streak--off {
  background: linear-gradient(158deg, #f6f8fc 0%, #ffffff 62%);
  border-color: var(--p-border);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
}

.nxpr-streak-top { display: flex; align-items: center; gap: 14px; }

.nxpr-flame {
  flex: 0 0 auto;
  width: 58px; height: 58px;
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 27px;
  background: #fff;
  border: 1px solid var(--p-flame-border);
  box-shadow: 0 4px 12px rgba(249, 115, 22, .16);
}

.nxpr-streak--off .nxpr-flame {
  border-color: var(--p-border);
  box-shadow: none;
  filter: grayscale(1);
  opacity: .55;
}

.nxpr-streak-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.nxpr-streak-count {
  font-size: 30px; font-weight: 900;
  line-height: 1; letter-spacing: -.03em;
  color: var(--p-ink);
  font-variant-numeric: tabular-nums;
}

.nxpr-streak-unit { font-size: 12.5px; font-weight: 700; color: var(--p-text); }
.nxpr-streak-best { font-size: 11px; color: var(--p-muted); margin-top: 3px; }

/* Pastilles de la semaine */
.nxpr-days {
  display: flex; justify-content: space-between; gap: 5px;
  margin-top: 15px; padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, .07);
}

.nxpr-day { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }

.nxpr-day-label {
  font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--p-muted);
}

.nxpr-day-dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900; color: #fff;
  background: #fff;
  border: 1.5px solid var(--p-border-strong);
}

.nxpr-day.is-on .nxpr-day-dot {
  background: var(--p-flame);
  border-color: var(--p-flame);
  box-shadow: 0 2px 7px rgba(249, 115, 22, .30);
}

.nxpr-day.is-today .nxpr-day-dot { border-color: var(--p-primary); border-width: 2px; }
.nxpr-day.is-today.is-on .nxpr-day-dot { border-color: var(--p-flame); }
.nxpr-day.is-future .nxpr-day-dot { opacity: .38; border-style: dashed; }

.nxpr-streak-note {
  margin: 12px 0 0;
  font-size: 12px; line-height: 1.5;
  color: var(--p-text);
}

/* ── Barres de progression (temps par leçon) ── */
.nxpr-bar { height: 8px; border-radius: 999px; background: var(--p-track); overflow: hidden; }
.nxpr-bar > i {
  display: block; height: 100%;
  width: var(--v, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--p-primary), #2f5bb7);
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

/* ── Calendrier d'activité ── */
.nxpr-cal {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.nxpr-cal::-webkit-scrollbar { height: 5px; }
.nxpr-cal::-webkit-scrollbar-thumb { background: var(--p-border-strong); border-radius: 999px; }

.nxpr-cal-cell {
  width: 11px; height: 11px;
  border-radius: 3px;
  background: #eef1f6;
  border: 1px solid rgba(15, 23, 42, .04);
}
.nxpr-cal-cell[data-l="1"] { background: #d7e4d0; }
.nxpr-cal-cell[data-l="2"] { background: #a7d6b4; }
.nxpr-cal-cell[data-l="3"] { background: #52ab74; }
.nxpr-cal-cell[data-l="4"] { background: var(--p-ok); }

.nxpr-cal-legend {
  display: flex; align-items: center; gap: 5px;
  margin-top: 11px;
  font-size: 10px; color: var(--p-muted);
}
.nxpr-cal-legend .nxpr-cal-cell { width: 9px; height: 9px; }

/* ── Temps par leçon ── */
.nxpr-lessons { display: flex; flex-direction: column; gap: 11px; }
.nxpr-lesson { display: flex; flex-direction: column; gap: 5px; }
.nxpr-lesson-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nxpr-lesson-name {
  font-size: 12px; color: var(--p-ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nxpr-lesson-time {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 750;
  color: var(--p-muted); font-variant-numeric: tabular-nums;
}
.nxpr-lesson .nxpr-bar { height: 5px; }
.nxpr-lesson .nxpr-bar > i { background: var(--p-primary); }
.nxpr-lesson.is-mastered .nxpr-bar > i { background: var(--p-ok); }

/* ── Fil d'activité ── */
.nxpr-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.nxpr-tl {
  position: relative;
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 0 10px 0;
}
.nxpr-tl + .nxpr-tl { border-top: 1px solid var(--p-border); }

.nxpr-tl-dot {
  flex: 0 0 auto; width: 9px; height: 9px; margin-top: 4px;
  border-radius: 50%; background: #cbd5e1;
  box-shadow: 0 0 0 3px rgba(203, 213, 225, .22);
}
.nxpr-tl--ok .nxpr-tl-dot { background: var(--p-ok); box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
.nxpr-tl--warn .nxpr-tl-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }

.nxpr-tl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nxpr-tl-main b { font-size: 12.5px; font-weight: 700; color: var(--p-ink); }
.nxpr-tl-main span {
  font-size: 11px; color: var(--p-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nxpr-tl-date { flex: 0 0 auto; font-size: 10.5px; color: var(--p-muted); white-space: nowrap; margin-top: 2px; }

/* ── États vides / chargement ── */
.nxpr-empty {
  margin: 6px 0;
  padding: 32px 18px;
  text-align: center;
  border-radius: 16px;
  background: var(--p-card);
  border: 1px dashed var(--p-border-strong);
}
.nxpr-empty-ico { font-size: 30px; }
.nxpr-empty h2 { margin: 11px 0 6px; font-size: 15.5px; font-weight: 800; color: var(--p-ink); }
.nxpr-empty p { margin: 0 0 17px; font-size: 12.5px; line-height: 1.5; color: var(--p-muted); }

.nxpr-cta {
  height: 42px; padding: 0 22px; border-radius: 12px;
  cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 750;
  color: #fff; background: var(--p-primary);
  border: 1px solid var(--p-primary-ink);
  box-shadow: 0 5px 14px rgba(34, 68, 148, .25);
  transition: background-color .15s, transform .06s;
}
.nxpr-cta:hover { background: var(--p-primary-ink); }
.nxpr-cta:active { transform: translateY(1px); }

.nxpr-skel {
  border-radius: 15px; padding: 15px;
  background: var(--p-card); border: 1px solid var(--p-border);
  display: flex; flex-direction: column; gap: 9px;
}
.nxpr-skel-line, .nxpr-skel-block {
  border-radius: 999px;
  background: linear-gradient(90deg, #eef1f6 25%, #e2e8f0 37%, #eef1f6 63%);
  background-size: 400% 100%;
  animation: nxpr-shimmer 1.35s ease-in-out infinite;
}
.nxpr-skel-line { height: 11px; }
.nxpr-skel-line--sm { width: 45%; }
.nxpr-skel-line--md { width: 72%; }
.nxpr-skel-block { height: 58px; border-radius: 12px; }

@keyframes nxpr-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}


/* ── Typographie premium (Geist) ── */
.nxpr-title {
  font-weight: 650;
  letter-spacing: -.035em;
}

.nxpr-streak-count,
.nxpr-lesson-time,
.nxpr-tl-date {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.nxpr-streak-count {
  font-weight: 700;
  letter-spacing: -.045em;
}

.nxpr-eyebrow,
.nxpr-card-title,
.nxpr-day-label {
  font-weight: 700;
}

.nxpr-tl-main b {
  font-weight: 650;
  letter-spacing: -.012em;
}

@media (max-width: 340px) {
  .nxpr-streak-count { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .nxpr-skel-line, .nxpr-skel-block { animation: none; }
  .nxpr-bar > i, .nxpr-cta { transition: none; }
}

/* ═══ Harmonisation Nexalys (theme.css) ═══ */
.nxpr-card { box-shadow: var(--nx-shadow-1); }

.nxpr-streak,
.nxpr-streak--off {
  background: var(--nx-surface);
  border-color: var(--nx-border);
  box-shadow: var(--nx-shadow-1);
}
.nxpr-flame { border-color: var(--nx-border); background: var(--nx-green-25); box-shadow: none; }
.nxpr-day.is-on .nxpr-day-dot { box-shadow: none; }
.nxpr-day.is-today .nxpr-day-dot { border-color: var(--nx-green-600); }

.nxpr-bar > i { background: var(--nx-green-500); }

.nxpr-cal-cell { background: var(--nx-surface-3); }
.nxpr-cal-cell[data-l="1"] { background: var(--nx-green-100); }
.nxpr-cal-cell[data-l="2"] { background: var(--nx-green-300); }
.nxpr-cal-cell[data-l="3"] { background: var(--nx-green-500); }
.nxpr-cal-cell[data-l="4"] { background: var(--nx-green-700); }

.nxpr-tl--ok .nxpr-tl-dot { background: var(--nx-green-500); box-shadow: 0 0 0 3px var(--nx-green-100); }
.nxpr-tl--warn .nxpr-tl-dot { background: var(--nx-warn-dot); box-shadow: 0 0 0 3px var(--nx-warn-soft); }

.nxpr-cta {
  color: var(--nx-btn-primary-fg);
  background: var(--nx-btn-primary-bg);
  border-color: var(--nx-btn-primary-bd);
  box-shadow: var(--nx-shadow-green);
}
.nxpr-cta:hover { background: var(--nx-btn-primary-bg-hover); border-color: var(--nx-btn-primary-bd-hover); }

.nxpr-skel-line,
.nxpr-skel-block {
  background: linear-gradient(90deg, #eef2ef 25%, #e3eae5 37%, #eef2ef 63%);
  background-size: 400% 100%;
}