/* ============================================================================
   QZR vNext — Parcours (Catégories)
   ----------------------------------------------------------------------------
   Strangler migration: scoped by [data-qz-skin="parcours"]. Overrides legacy
   #categories styles with vNext tokens. Requires vnext-tokens.css.
   ============================================================================ */

/* ── Container ───────────────────────────────────────────────────────────── */
[data-qz-skin="parcours"] {
  /* background: var(--qz-screen); */
  color: var(--qz-text);
  font-family: var(--qz-font);
  padding: 16px;
}

[data-qz-skin="parcours"] .categories-list {
  max-width: 560px;
  margin-inline: auto;
}
/* Tiles are grid items of #current-displayed-categories (grid rule further down);
   neutralise the Bootstrap column widths + inline-block on each cell. */
[data-qz-skin="parcours"] #current-displayed-categories > .category-card-cell {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding:2px 0px !important;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
[data-qz-skin="parcours"] .categories-toolbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

[data-qz-skin="parcours"] .categories-toolbar__eyebrow {
  display: inline-flex;
  width: max-content;
  padding: 4px 10px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: .7rem;
  font-weight: var(--qz-fw-strong);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 2px;
}

[data-qz-skin="parcours"] .categories-toolbar h1,
[data-qz-skin="parcours"] .categories-toolbar__title {
  font-size: 22px;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  line-height: 1.15;
  margin: 0;
}

/* ── Search ────────────────────────────────────────────────────────────────── */
[data-qz-skin="parcours"] .categories-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid var(--qz-line);
  border-radius: var(--qz-r-field);
  background: var(--qz-surface);
}
[data-qz-skin="parcours"] .categories-search:focus-within {
  border-color: var(--qz-accent);
  box-shadow: var(--qz-focus-ring);
}
[data-qz-skin="parcours"] .categories-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--qz-text);
  font-family: var(--qz-font);
  font-size: var(--qz-fs-body);
}
[data-qz-skin="parcours"] .categories-search-input::placeholder { color: var(--qz-muted); }
[data-qz-skin="parcours"] .categories-search-clear {
  color: var(--qz-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* ── Filter chips ─────────────────────────────────────────────────────────── */
[data-qz-skin="parcours"] .categories-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
[data-qz-skin="parcours"] .categories-filter-actions .action-chip {
  padding: 6px 12px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  color: var(--qz-muted);
  font-size: .78rem;
  font-weight: var(--qz-fw-strong);
  cursor: pointer;
  text-decoration: none;
}
[data-qz-skin="parcours"] .categories-filter-actions .action-chip.is-active {
  background: var(--qz-accent-soft) !important;
  color: var(--qz-accent-ink) !important;
  border-color: var(--qz-accent-mid) !important;
}

/* ── Category cards grid — two tiles per row (vNext theme grid) ───────────── */
[data-qz-skin="parcours"] #current-displayed-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}

/* #categories carries data-qz-skin itself, so #categories[...] (1,3,0) beats the
   legacy `#categories .cat-item-container.content-card` ID rule (1,2,0). */
#categories[data-qz-skin="parcours"] .cat-item-container.content-card,
[data-qz-skin="parcours"] .cat-item-container.content-card {
  position: relative;
  height: 205px;
  display: flex;
  padding: 14px !important;
  border-radius: var(--qz-r-card) !important;
  background: var(--qz-surface) !important;
  border: 1px solid var(--qz-line) !important;
  box-shadow: none !important;
}

#categories[data-qz-skin="parcours"] .cat-item-container.content-card:hover,
[data-qz-skin="parcours"] .cat-item-container.content-card:hover {
  border-color: var(--qz-accent-mid) !important;
}

/* A theme leads to its parcours list — chevron affordance (mockup parcours_0). */
[data-qz-skin="parcours"] .cat-item-container.content-card::after {
  /*content: "\f054";*/ /* fa-chevron-right (FA5 solid) */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: var(--qz-muted);
  font-size: 13px;
  pointer-events: none;
}

/* The meta line already reads "N parcours · N quiz", so the legacy
   standalone "N Quizz" badge is redundant in the parcours skin. */
[data-qz-skin="parcours"] .cat-item-sub-label {
  display: none !important;
}

/* Category icon */
[data-qz-skin="parcours"] .cat-item .no-picture-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* ── Theme card — horizontal row layout (mockup parcours_0) ─────────────────
   Icon square (left) · name + meta (middle) · chevron via ::after (right). */
#categories[data-qz-skin="parcours"] .cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  text-align: center;
}
#categories[data-qz-skin="parcours"] .cat-item-icon-container {
  flex: 0 0 auto;
  width: auto;
  height: auto !important;   /* legacy forces ~168px for the old centered layout */
  min-height: 0 !important;
  margin: 0 !important;
}
#categories[data-qz-skin="parcours"] .cat-item-icon-container .feature-icon-circle,
#categories[data-qz-skin="parcours"] .cat-item-icon-container .cat-item-fa-icon {
  width: 81px !important;
  height: 81px !important;
  min-width: 81px;
  border-radius: 18px !important;
  background: var(--qz-accent-soft) !important;
  color: var(--qz-accent-ink) !important;
  font-size: 3.8em !important;
  line-height: 1;
}
#categories[data-qz-skin="parcours"] .cat-item-icon-container .feature-icon-circle span,
#categories[data-qz-skin="parcours"] .cat-item-icon-container .cat-item-fa-icon span {
  color: var(--qz-accent-ink) !important;
  line-height: 1 !important;
}
#categories[data-qz-skin="parcours"] .category-card__text {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  text-align: center;
}
#categories[data-qz-skin="parcours"] .category-card__title {
  text-align: center;
  margin: 0;
  font-size: 1rem;
  font-weight: var(--qz-fw-strong);
  text-transform: capitalize;
  line-height: 1.25;
}
#categories[data-qz-skin="parcours"] .category-card__meta {
  text-align: center;
  margin-top: 2px;
  color: var(--qz-muted) !important;
  font-weight: 500;
  font-size: .82rem;
}

/* Keep the subtitle in-content on mobile too (legacy hides the toolbar header
   below the breakpoint). The page title is the breadcrumb "Parcours". */
#categories[data-qz-skin="parcours"] .page-header.categories-toolbar__header {
  display: flex !important;
  align-items: flex-start !important;
  padding: 0 !important;
}
#categories[data-qz-skin="parcours"] .categories-toolbar__header .page-header__subtitle {
  text-align: left;
  color: var(--qz-muted);
  margin: 0;
}

/* Category action row */
[data-qz-skin="parcours"] .category-action-row {
  border-top-color: var(--qz-line);
}

[data-qz-skin="parcours"] .category-action-row .btn-ux {
  font-size: .82rem;
  border-radius: var(--qz-r-control);
}

/* Action CTA buttons override */
[data-qz-skin="parcours"] .categories-toolbar__secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--qz-r-control);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-bottom: 4px solid var(--qz-line-strong);
  color: var(--qz-accent-ink);
  font-weight: var(--qz-fw-strong);
  text-decoration: none;
  font-size: .88rem;
}

/* ── Action sheet (bottom sheet) ──────────────────────────────────────────── */
[data-qz-skin="parcours"] ~ .category-action-sheet .category-action-sheet__panel,
.category-action-sheet .category-action-sheet__panel {
  border-radius: 24px 24px 0 0;
  /* background: var(--qz-50, #E8F0ED); */
  border-top: 1px solid var(--qz-line);
}

.category-action-sheet__handle {
  background: var(--qz-line-strong);
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
[data-qz-skin="parcours"] .categories-empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--qz-muted);
  font-size: .88rem;
}

/* Theme/parcours detail (#categories?view=detail&code=...) hides the app
 * shell chrome — toggled by categories__.syncCategoryDetailShellChrome()
 * (main-dev-front.js), re-evaluated on every route change from
 * PageRouter._applyShellState (page-router.js). Unscoped: these are
 * shell-level elements, outside [data-qz-skin="parcours"]. */
.qzr-hidden-by-category-detail { display: none !important; }

/* Search trigger injected into #top-menu-down's breadcrumb, only while on
 * #categories — toggled by categories__.syncCategoryBreadcrumbSearchButton()
 * (main-dev-front.js), re-evaluated every time the breadcrumb rebuilds.
 * Unscoped for the same reason as above. margin-left:auto pushes it to the
 * opposite end from the back button inside the breadcrumb's flex row. */
.category-breadcrumb-search { margin-left: auto; display: flex; align-items: center; }

/* MOBILE UNIQUEMENT. Au-dela du seuil mobile de l'application (767.98px, celui
   qui fait apparaitre #qzr-mobile-bottom-nav), la recherche est deja accessible
   depuis la barre du haut (.search-box-trigger-open de #app-shell-topbar) : la
   repeter dans le fil d'Ariane fait deux entrees pour la meme action.

   C'est le <li> qu'on masque, pas le bouton : cacher seulement le bouton
   laisserait l'item occuper son emplacement dans la rangee flex — et son
   `margin-left: auto` continuerait de pousser ce vide a droite. */
@media (min-width: 768px) {
  .category-breadcrumb-search { display: none; }
}
.category-breadcrumb-search__btn {
  /* Geometrie (taille, rayon, centrage, font-size) : voir la regle commune
     `.qzr-bc-action` dans crs__front.css. Ici, seule l'identite du bouton. */
  border: 1px solid var(--qz-line);
  background: transparent;
  color: var(--qz-text);
  cursor: pointer;
}
.category-breadcrumb-search__btn:hover,
.category-breadcrumb-search__btn:focus-visible {
  border-color: var(--qz-accent-mid, var(--qz-accent));
  color: var(--qz-accent);
  outline: none;
}

/* ===========================================================================
 * Parcours list (theme → paths) — picker cards (mockup parcours_1)
 * ======================================================================== */
[data-qz-skin="parcours"] .category-path-picker { margin-bottom: 14px; }
[data-qz-skin="parcours"] .category-path-picker__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
[data-qz-skin="parcours"] .category-path-picker__head span {
  display: block;
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
  font-weight: var(--qz-fw-strong);
  text-transform: uppercase;
  letter-spacing: .04em;
}
[data-qz-skin="parcours"] .category-path-picker__head strong {
  font-size: var(--qz-fs-h3);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
}
[data-qz-skin="parcours"] .category-path-picker__head small { color: var(--qz-muted); font-size: var(--qz-fs-sm); }

/* Grille — SEULE autorité sur la mise en page (voir note dans
   ui-visual-language.css : l'ancienne regle #categories-detail, plus
   specifique via son selecteur d'ID, ecrasait ce display:flex en
   silence ; la grille grid ci-dessous n'a donc jamais ete rendue avant
   ce nettoyage). */
[data-qz-skin="parcours"] .category-path-picker__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Carte de parcours — couleur unique de l'accent du theme vnext courant
   (--qz-accent / --qz-500), pas d'identite par carte : medaillon, description
   enfin visible, chips, barre en degrade — alignee sur la carte de
   groupe (slices/groupTemplate.php). */
[data-qz-skin="parcours"] .category-path-choice {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: transform var(--qz-dur-ui) var(--qz-ease, ease), box-shadow var(--qz-dur-ui) var(--qz-ease, ease), border-color var(--qz-dur-ui) var(--qz-ease, ease);
  animation: qzPathCardPop .38s var(--qz-ease-pop, ease) both;
}
[data-qz-skin="parcours"] .category-path-picker__grid .category-path-choice:nth-child(2) { animation-delay: .04s; }
[data-qz-skin="parcours"] .category-path-picker__grid .category-path-choice:nth-child(3) { animation-delay: .08s; }
[data-qz-skin="parcours"] .category-path-picker__grid .category-path-choice:nth-child(4) { animation-delay: .12s; }
[data-qz-skin="parcours"] .category-path-picker__grid .category-path-choice:nth-child(n+5) { animation-delay: .16s; }
@keyframes qzPathCardPop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-qz-skin="parcours"] .category-path-choice { animation: none; } }

[data-qz-skin="parcours"] .category-path-choice:hover,
[data-qz-skin="parcours"] .category-path-choice:focus-visible,
[data-qz-skin="parcours"] .category-path-choice.is-active {
  transform: translateY(-2px);
  border-color: var(--qz-accent);
  outline: none;
}

[data-qz-skin="parcours"] .category-path-choice__cover {
  display: block;
  height: 42px;
  position: relative;
}
[data-qz-skin="parcours"] .category-path-choice__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image: radial-gradient(rgba(255, 255, 255, .9) 1px, transparent 1.4px);
  background-size: 13px 13px;
}
[data-qz-skin="parcours"] .category-path-choice__ribbon {
  position: absolute;
  top: 9px;
  right: 11px;
  font-size: .64rem;
  font-weight: var(--qz-fw-strong);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, .28);
  padding: 3px 8px;
  border-radius: var(--qz-r-pill);
}

[data-qz-skin="parcours"] .category-path-choice__main {
  display: block;
  padding: 0 14px 13px;
  margin-top: -22px;
  position: relative;
}
[data-qz-skin="parcours"] .category-path-choice__icon {
  display: grid;
  place-items: center;
  width: 81px;
  height: 81px;
  border-radius: 14px;
  background: var(--qz-accent-soft) !important;
  color: var(--qz-accent-ink) !important;
  font-size: 3.1em;
  border: 2px solid var(--qz-100);
  margin-bottom: 9px;
}
/* L'icone n'a plus de fond propre a l'etat verrouille : elle garde celui de la
   regle de base (accent-soft). Le verrou reste lisible par ses AUTRES
   marqueurs — texte attenue, curseur inerte, aucun relief au survol,
   traitement du cover (l.516-527). La regle a donc ete SUPPRIMEE plutot que
   videe : un selecteur vide est du CSS mort qui survit aux relectures. */

[data-qz-skin="parcours"] .category-path-choice__main strong {
  display: block;
  font-size: var(--qz-fs-body);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  margin-bottom: 3px;
}
[data-qz-skin="parcours"] .category-path-choice__main small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: normal;
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
  line-height: 1.4;
  margin: 0 0 10px;
}

[data-qz-skin="parcours"] .category-path-choice__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 11px;
}
[data-qz-skin="parcours"] .category-path-choice__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-accent-ink, var(--qz-accent));
  background: var(--qz-accent-soft);
  padding: 3px 9px 3px 7px;
  border-radius: var(--qz-r-pill);
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="parcours"] .category-path-choice__chip .fas { font-size: .62rem; }

[data-qz-skin="parcours"] .category-path-choice__prog {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
[data-qz-skin="parcours"] .category-path-choice__prog-track {
  flex: 1;
  height: 7px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  overflow: hidden;
}
[data-qz-skin="parcours"] .category-path-choice__prog-track span {
  display: block;
  height: 100%;
  border-radius: var(--qz-r-pill);
  background: linear-gradient(90deg, var(--qz-accent), var(--qz-accent-deep));
}
[data-qz-skin="parcours"] .category-path-choice__prog-pct {
  font-size: .72rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-accent-ink, var(--qz-accent));
  font-variant-numeric: tabular-nums;
}

/* Locked parcours (sequential gating, mockup parcours_1: greyed + lock) */
[data-qz-skin="parcours"] .category-path-choice.is-locked {
  cursor: default;
  box-shadow: none;
}
[data-qz-skin="parcours"] .category-path-choice.is-locked:hover,
[data-qz-skin="parcours"] .category-path-choice.is-locked:focus-visible {
  transform: none;
  border-color: var(--qz-line);
  box-shadow: none;
}
[data-qz-skin="parcours"] .category-path-choice.is-locked .category-path-choice__cover {
  opacity: .55;
  filter: grayscale(.35);
}
[data-qz-skin="parcours"] .category-path-choice.is-locked .category-path-choice__main strong,
[data-qz-skin="parcours"] .category-path-choice.is-locked .category-path-choice__main small {
  color: var(--qz-muted);
}
@media (max-width: 767.98px) {
  [data-qz-skin="parcours"] .category-path-picker__grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
 * Path overview — slim header; hide the rich extras to match the clean
 * Chemin mockup (parcours_2). The per-level mission/reward/score now live in
 * the level-detail bottom sheet (mockup path_level_details).
 * ======================================================================== */
[data-qz-skin="parcours"] .qzr-current-mission,
[data-qz-skin="parcours"] .qzr-path-next-activity,
[data-qz-skin="parcours"] .qzr-path-steps-wrap__head,
[data-qz-skin="parcours"] .qzr-path-history {
  display: none !important;
}

[data-qz-skin="parcours"] .qzr-path-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 18px;
  padding: 18px 18px 20px;
  /* background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card); */
}

/* Top overall progress bar (mockup parcours_2: full-width track + "83%") */
[data-qz-skin="parcours"] .qzr-path-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
[data-qz-skin="parcours"] .qzr-path-progress__bar {
  flex: 1;
  height: 12px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  overflow: hidden;
}
[data-qz-skin="parcours"] .qzr-path-progress__bar > i {
  display: block;
  height: 100%;
  background: var(--qz-accent);
  border-radius: var(--qz-r-pill);
  transition: width var(--qz-dur-bar, 1100ms) var(--qz-ease);
}
[data-qz-skin="parcours"] .qzr-path-progress > strong {
  font-size: 14px;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-accent-ink);
  flex-shrink: 0;
  min-width: 42px;
  text-align: right;
}
[data-qz-skin="parcours"] .qzr-path-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
}
[data-qz-skin="parcours"] .qzr-path-badge .fas { font-size: .9em; }
[data-qz-skin="parcours"] .qzr-path-header__main h2 {
  font-size: var(--qz-fs-title);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  margin: 4px 0 2px;
}
[data-qz-skin="parcours"] .qzr-path-header__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--qz-r-card);
  background: var(--qz-accent-soft);
  flex-shrink: 0;
}
[data-qz-skin="parcours"] .qzr-path-header__score strong { font-size: var(--qz-fs-h2); font-weight: var(--qz-fw-strong); color: var(--qz-accent); line-height: 1; }
[data-qz-skin="parcours"] .qzr-path-header__score small { font-size: var(--qz-fs-xs); color: var(--qz-muted); }

/* ===========================================================================
 * Chemin — Duolingo node path (mockup parcours_2)
 * ======================================================================== */
[data-qz-skin="parcours"] .qzr-path-steps-wrap {
  padding: 0;
  background: transparent;
  border: none;
}
[data-qz-skin="parcours"] .qzr-path-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

[data-qz-skin="parcours"] .category-path-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}
/* Connector line behind the dot column (reaches the next dot center) */
[data-qz-skin="parcours"] .category-path-step::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 28px;
  transform: translateX(-50%);
  width: 3px;
  height: calc(100% + 14px);
  background: var(--qz-line);
  z-index: 0;
}
[data-qz-skin="parcours"] .category-path-step:last-child::after { display: none; }
[data-qz-skin="parcours"] .category-path-step.qzr-path-step-done::after { background: var(--qz-accent); }
[data-qz-skin="parcours"] .category-path-step.qzr-path-step-active::after { background: var(--qz-accent-soft); }

[data-qz-skin="parcours"] .category-path-step__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  background: var(--qz-accent-soft);
  color: var(--qz-muted);
  font-size: 1.3rem;
  border: 3px solid var(--qz-screen);
}
[data-qz-skin="parcours"] .qzr-path-step-done .category-path-step__dot { background: var(--qz-accent); color: var(--qz-on-accent); }
[data-qz-skin="parcours"] .qzr-path-step-active .category-path-step__dot {
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  box-shadow: 0 0 0 5px var(--qz-accent-soft);
}
[data-qz-skin="parcours"] .qzr-path-step-locked .category-path-step__dot { background: var(--qz-50, #e8f0ed); color: var(--qz-muted); }

[data-qz-skin="parcours"] .qzr-path-step__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
}
[data-qz-skin="parcours"] .qzr-path-step-active .qzr-path-step__body { border-color: var(--qz-accent); }
[data-qz-skin="parcours"] .qzr-path-step-locked .qzr-path-step__body { background: var(--qz-screen); opacity: .7; }
[data-qz-skin="parcours"] .qzr-path-step__body strong { font-size: var(--qz-fs-body); font-weight: var(--qz-fw-strong); color: var(--qz-text); }
[data-qz-skin="parcours"] .qzr-path-step__body small { font-size: var(--qz-fs-sm); color: var(--qz-muted); }
[data-qz-skin="parcours"] .qzr-path-step__body em { font-style: normal; font-size: var(--qz-fs-xs); color: var(--qz-accent); font-weight: var(--qz-fw-strong); }
[data-qz-skin="parcours"] .qzr-path-step-locked .qzr-path-step__body em { color: var(--qz-muted); }

/* Stars on completed level cards (mockup parcours_2) */
[data-qz-skin="parcours"] .qzr-path-step__stars {
  display: inline-flex;
  gap: 3px;
  margin-top: 4px;
}
[data-qz-skin="parcours"] .qzr-path-step__stars .fa-star { color: var(--qz-energy, #F5C542); font-size: 13px; }
[data-qz-skin="parcours"] .qzr-path-step__stars .fa-star.is-empty { color: var(--qz-line-strong); }

/* Current level inline progress bar ("1/3 quiz complété") */
[data-qz-skin="parcours"] .qzr-path-step__bar {
  display: block;
  height: 8px;
  margin-top: 8px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  overflow: hidden;
}
[data-qz-skin="parcours"] .qzr-path-step__bar > i {
  display: block;
  height: 100%;
  background: var(--qz-accent);
  border-radius: var(--qz-r-pill);
}
[data-qz-skin="parcours"] .qzr-path-step-active .qzr-path-step__body em { margin-top: 4px; }

/* Boss locked hint ("Termine le niveau N") */
[data-qz-skin="parcours"] .qzr-path-step__lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
  font-weight: var(--qz-fw);
}
[data-qz-skin="parcours"] .qzr-path-step__lock .fas { font-size: 10px; }

/* Boss node: trophy dot + "BOSS" badge appended to the title */
[data-qz-skin="parcours"] .category-path-step--boss .category-path-step__dot { background: var(--qz-accent-deep); color: var(--qz-energy, #F5C542); }
[data-qz-skin="parcours"] .category-path-step--boss.qzr-path-step-locked .category-path-step__dot { background: var(--qz-50, #e8f0ed); color: var(--qz-muted); }
[data-qz-skin="parcours"] .category-path-step--boss .qzr-path-step__body strong::after {
  content: "BOSS";
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-energy, #F5C542);
  color: #4a3500;
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
  vertical-align: middle;
}

/* ===========================================================================
 * Level-detail bottom sheet — vNext « Niveau »
 * Contenu : hero (n° + titre + statut + Classement) → Mission → Récompense →
 * Quiz disponibles → niveau suivant. Respiration calée sur la showcase solo
 * (sheet 480px arrondie 28px, padding 24px, gros écarts, Nunito).
 * ======================================================================== */
.category-path-step-sheet .category-path-step-sheet__panel {
  left: 0;
  right: 0;
  width: 100%;
  max-width: 480px;
  padding: 12px 24px calc(24px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -14px 44px rgba(6, 52, 42, .20);
  font-family: 'Nunito', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.category-path-step-sheet .category-action-sheet__handle { margin: 0 auto 12px; }
.category-path-step-sheet .qzr-lvl-close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 6;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--qz-r-pill);
  background: var(--qz-screen);
  color: var(--qz-muted);
}
.category-path-step-sheet .qzr-lvl-close:hover { color: var(--qz-text); }
/* Hero FIXE sous la poignée : seul __body défile (à partir de la Mission). */
.category-path-step-sheet .category-path-step-sheet__head {
  flex: 0 0 auto;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--qz-line);
  text-align: left;
}
.category-path-step-sheet .category-path-step-sheet__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 2px 0 4px;
  text-align: left;              /* neutralise le centrage hérité du shell */
  scrollbar-width: thin;         /* visible (repère de défilement), mais discret */
  scrollbar-color: var(--qz-line-strong) transparent;
}
.category-path-step-sheet .category-path-step-sheet__body::-webkit-scrollbar { width: 6px; }
.category-path-step-sheet .category-path-step-sheet__body::-webkit-scrollbar-track { background: transparent; }
.category-path-step-sheet .category-path-step-sheet__body::-webkit-scrollbar-thumb { background: var(--qz-line-strong); border-radius: var(--qz-r-pill); }
.category-path-step-sheet__summary { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.category-path-step-sheet__next:empty { display: none; }

/* ── Hero : badge n° + « Niveau N » / nom + statut + Classement ───────────── */
.qzr-lvl-hero { display: flex; align-items: flex-start; gap: 14px; padding-top: 16px; }
.qzr-lvl-hero__badge {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: var(--qz-accent-soft);
  border: 1.5px solid var(--qz-accent-mid);
  color: var(--qz-accent-ink);
  font-size: 24px;
  font-weight: 800;
}
.qzr-lvl-hero__badge.is-completed { background: var(--qz-success-bg); border-color: color-mix(in srgb, var(--qz-success) 45%, transparent); color: var(--qz-success-ink); }
.qzr-lvl-hero__badge.is-locked { background: var(--qz-screen); border-color: var(--qz-line-strong); color: var(--qz-muted); }
.qzr-lvl-hero__badge.is-boss { background: color-mix(in srgb, var(--qz-energy) 16%, var(--qz-surface)); border-color: color-mix(in srgb, var(--qz-energy) 55%, transparent); color: var(--qz-warning-ink); }
.qzr-lvl-hero__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.qzr-lvl-hero__eyebrow {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--qz-muted);
}
.qzr-lvl-hero__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--qz-text);
}
.qzr-lvl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 4px 12px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: 12px;
  font-weight: 800;
}
.qzr-lvl-chip .fas { font-size: 10px; }
.qzr-lvl-chip.is-completed { background: var(--qz-success-bg); color: var(--qz-success-ink); }
.qzr-lvl-chip.is-locked { background: var(--qz-screen); color: var(--qz-muted); }
.qzr-lvl-rank {
  flex: 0 0 auto;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.qzr-lvl-rank__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--qz-energy) 14%, var(--qz-surface));
  border: 1px solid color-mix(in srgb, var(--qz-energy) 45%, var(--qz-line));
  color: var(--qz-warning-ink);
  font-size: 17px;
}
.qzr-lvl-rank small { font-size: 10.5px; font-weight: 700; color: var(--qz-muted); }
.qzr-lvl-rank:hover small { color: var(--qz-text); }

/* ── Mission du niveau ────────────────────────────────────────────────────── */
.qzr-lvl-mission {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: var(--qz-surface);
  border: 1px solid color-mix(in srgb, var(--qz-accent) 22%, transparent);
}
.qzr-lvl-mission.is-locked { background: var(--qz-screen); border: 1px dashed var(--qz-line-strong); }
.qzr-lvl-mission__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--qz-surface);
  color: var(--qz-accent);
  font-size: 18px;
}
.qzr-lvl-mission.is-locked .qzr-lvl-mission__icon { color: var(--qz-muted); }
.qzr-lvl-mission__body { flex: 1 1 auto; min-width: 0; }
.qzr-lvl-mission__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--qz-accent-ink);
}
.qzr-lvl-mission.is-locked .qzr-lvl-mission__eyebrow { color: var(--qz-muted); }
.qzr-lvl-mission__text {
  margin: 3px 0 12px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--qz-text);
}
.qzr-lvl-mission__progress { display: flex; align-items: center; gap: 10px; }
.qzr-lvl-mission__bar {
  flex: 1 1 auto;
  height: 10px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-surface);
  overflow: hidden;
}
.qzr-lvl-mission__bar > i {
  display: block;
  height: 100%;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent);
  transition: width .24s ease;
}
.qzr-lvl-mission__progress > strong { font-size: 15px; font-weight: 800; color: var(--qz-accent-ink); }
.qzr-lvl-mission.is-locked .qzr-lvl-mission__progress > strong { color: var(--qz-muted); }
.qzr-lvl-mission__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--qz-muted);
}
.qzr-lvl-mission__state.is-done { color: var(--qz-success-ink); }
.qzr-lvl-mission__state .fas { font-size: 12px; }

/* ── Récompense du niveau (teinte énergie/or) ─────────────────────────────── */
.qzr-lvl-reward {
  display: flex;
  align-items: center;
  gap: 14px;
padding: 42px 18px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--qz-energy) 10%, var(--qz-surface));
  border: 1px solid color-mix(in srgb, var(--qz-energy) 42%, var(--qz-line));
}
.qzr-lvl-reward__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--qz-surface);
  color: var(--qz-warning-ink);
  font-size: 18px;
}
.qzr-lvl-reward__body { min-width: 0; }
.qzr-lvl-reward__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--qz-warning-ink);
}
.qzr-lvl-reward__value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 3px 0 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--qz-text);
}
.qzr-lvl-reward__value em { font-style: normal; color: var(--qz-warning-ink); }
.qzr-lvl-reward__value .fa-gem { font-size: 15px; color: var(--qz-accent); }
.qzr-lvl-reward__sep { color: var(--qz-muted); font-weight: 400; }

/* ── Quiz disponibles : entête + cartes ───────────────────────────────────── */
.qzr-lvl-quizzes__head { display: flex; align-items: center; gap: 10px; }
.qzr-lvl-quizzes__badge {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: 14px;
}
.qzr-lvl-quizzes__head > strong { flex: 1 1 auto; font-size: 16.5px; font-weight: 800; color: var(--qz-text); }
.qzr-lvl-quizzes__count {
  padding: 4px 12px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-screen);
  color: var(--qz-muted);
  font-size: 12px;
  font-weight: 800;
}
.category-path-step-sheet .category-path-step-sheet__quizzes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}
.category-path-step-sheet .category-path-step-quiz {
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--qz-line);
  border-radius: 20px;
  background: var(--qz-surface);
}
.category-path-step-sheet .category-path-step-quiz.is-locked { opacity: .6; background: var(--qz-screen); }
.qzr-lvl-quiz__icon {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: 18px;
}
.qzr-lvl-quiz--mix .qzr-lvl-quiz__icon {
  background: color-mix(in srgb, var(--qz-energy) 16%, var(--qz-surface));
  color: var(--qz-warning-ink);
}
.qzr-lvl-quiz__done {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: var(--qz-r-pill);
  border: 2px solid var(--qz-surface);
  background: var(--qz-success);
  color: #fff;
  font-size: 9px;
}
.category-path-step-sheet .qzr-lvl-quiz__main { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; min-width: 0; }
.category-path-step-sheet .qzr-lvl-quiz__title { font-size: 14.5px; font-weight: 800; line-height: 1.3; color: var(--qz-text); }
.qzr-lvl-quiz__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.qzr-lvl-quiz__meta em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-screen);
  color: var(--qz-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.qzr-lvl-quiz__meta em .fas { font-size: 9px; }
.qzr-lvl-quiz__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.qzr-lvl-quiz__ring {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--qz-r-pill);
  background: conic-gradient(var(--qz-accent) calc(var(--qzr-ring, 0) * 1%), color-mix(in srgb, var(--qz-line) 60%, transparent) 0);
}
.qzr-lvl-quiz__ring > em {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--qz-r-pill);
  background: var(--qz-surface);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 800;
  color: var(--qz-text);
}
.qzr-lvl-quiz__ring.is-empty > em { color: var(--qz-muted); }
/* FAB « Jouer » : rond, icône play, arête basse enfoncable façon jeu (même
   langage que le CTA « Commencer » de la showcase). Icône cadenas si verrouillé. */
.category-path-step-sheet .qzr-lvl-fab {
  width: 50px;
  height: 50px;
  min-width: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent);
  color: var(--qz-on-accent, #fff);
  font-size: 17px;
  box-shadow: inset 0 -4px 0 rgba(6, 52, 42, .28), 0 8px 16px color-mix(in srgb, var(--qz-accent) 35%, transparent);
  transition: background var(--qz-dur-ui) ease, transform .08s ease, box-shadow .08s ease;
}
.category-path-step-sheet .qzr-lvl-fab .fa-play { margin-left: 3px; }   /* centrage optique */
.category-path-step-sheet .qzr-lvl-fab:hover:not(:disabled) { background: var(--qz-accent-deep); }
.category-path-step-sheet .qzr-lvl-fab:active:not(:disabled) {
  transform: scale(var(--qz-press-scale));
  box-shadow: inset 0 -2px 0 rgba(6, 52, 42, .28), 0 4px 10px color-mix(in srgb, var(--qz-accent) 28%, transparent);
}
.category-path-step-sheet .qzr-lvl-fab:disabled,
.category-path-step-sheet .qzr-lvl-fab[aria-disabled="true"] {
  background: var(--qz-screen);
  color: var(--qz-muted);
  border: 1px solid var(--qz-line-strong);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;               /* la carte verrouillée est déjà atténuée */
}
/* Pendant le lancement (spinner), le FAB est disabled par le feedback bouton :
   il doit rester accent (« ça charge ») et ne pas prendre le gris « verrouillé ». */
.category-path-step-sheet .qzr-lvl-fab.is-loading,
.category-path-step-sheet .qzr-lvl-fab.qzr-launch-busy {
  background: var(--qz-accent);
  color: var(--qz-on-accent, #fff);
  border: 0;
  box-shadow: inset 0 -4px 0 rgba(6, 52, 42, .28), 0 8px 16px color-mix(in srgb, var(--qz-accent) 35%, transparent);
  cursor: progress;
}

/* ── Niveau suivant : ce que la mission débloque ──────────────────────────── */
.qzr-lvl-next {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--qz-line);
  border-radius: 20px;
  background: var(--qz-screen);
  color: var(--qz-text);
  text-align: left;
  font-family: inherit;
}
button.qzr-lvl-next { cursor: pointer; transition: border-color var(--qz-dur-ui) ease, transform var(--qz-dur-ui) ease; }
button.qzr-lvl-next:hover { border-color: var(--qz-accent-mid); }
button.qzr-lvl-next:active { transform: scale(var(--qz-press-scale)); }
.qzr-lvl-next__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  color: var(--qz-muted);
  font-size: 16px;
}
.qzr-lvl-next__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qzr-lvl-next__text small { font-size: 12px; font-weight: 700; color: var(--qz-muted); }
.qzr-lvl-next__text strong { font-size: 15.5px; font-weight: 800; color: var(--qz-text); }
.qzr-lvl-next__chev { flex: 0 0 auto; color: var(--qz-muted); font-size: 13px; }
.qzr-lvl-next.is-open { background: var(--qz-accent-soft); border-color: color-mix(in srgb, var(--qz-accent) 30%, transparent); }
.qzr-lvl-next.is-open .qzr-lvl-next__icon { color: var(--qz-accent-ink); border-color: transparent; }
.qzr-lvl-next.is-open .qzr-lvl-next__text strong { color: var(--qz-accent-ink); }
.qzr-lvl-next.is-done { background: var(--qz-success-bg); border-color: color-mix(in srgb, var(--qz-success) 35%, transparent); }
.qzr-lvl-next.is-done .qzr-lvl-next__icon { color: var(--qz-success-ink); border-color: transparent; }
.qzr-lvl-next.is-done .qzr-lvl-next__text strong { color: var(--qz-success-ink); }
.qzr-lvl-next.is-final .qzr-lvl-next__icon { color: var(--qz-warning-ink); }

/* ── Parcours loading state — mascot + cycling tip bubble ─────────────────── */
/* Le selecteur etait scope a l'ecran de parcours ; la mascotte parlante sert
   maintenant d'attente a toute l'application (qzr-chargement.js). La regle
   generique vient donc en premier, la version scopee restant pour ne rien
   changer a l'ecran d'origine. */
.qzr-path-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 200px;
  padding: 28px 16px;
  text-align: center;
}
#categories-detail .category-path-overview__loading.qzr-path-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 200px;
  padding: 28px 16px;
  text-align: center;
}
.qzr-path-loading__mascot {
  width: 96px;
  height: 96px;
  animation: qzrPathLoadingBob 2.4s var(--qz-ease, ease-in-out) infinite;
}
.qzr-path-loading__mascot svg { width: 100%; height: 100%; display: block; }
.qzr-path-loading__bubble {
  position: relative;
  max-width: 300px;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text) !important;
  box-shadow: 0 6px 18px rgba(6, 52, 42, 0.08);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* little arrow pointing up to the mascot */
.qzr-path-loading__bubble::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--qz-surface);
}
.qzr-path-loading__bubble.is-in {
  animation: qzrPathBubbleIn 0.3s var(--qz-ease, ease) both;
}
@keyframes qzrPathLoadingBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes qzrPathBubbleIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .qzr-path-loading__mascot { animation: none; }
  .qzr-path-loading__bubble.is-in { animation: none; }
}
/* Carte Boss « mix » (bordure or) + état vide du niveau */
.category-path-step-sheet .qzr-lvl-quiz--mix {
  border-color: color-mix(in srgb, var(--qz-energy, #F5C542) 55%, var(--qz-line));
  background: color-mix(in srgb, var(--qz-energy, #F5C542) 6%, var(--qz-surface));
}
.category-path-step-sheet__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 32px 20px;
  border: 1px dashed var(--qz-line-strong);
  border-radius: 20px;
  color: var(--qz-muted);
}
.category-path-step-sheet__empty .fas { font-size: 1.4rem; color: var(--qz-accent); }
.category-path-step-sheet__empty strong { color: var(--qz-text); font-weight: 800; }

/* ===========================================================================
 * Legacy override — the detail surface (#categories-detail) is also styled by
 * ui-visual-language.css with `#categories-detail .category-path-*` selectors
 * (ID specificity 1,1,0) that beat the [data-qz-skin] rules above. These
 * #categories-detail-scoped rules match that specificity and load later, so the
 * vNext node path / picker win. Mirrors the design above for the conflicting
 * properties only.
 * ======================================================================== */

/* Chemin — vertical node path (parcours_2) */
#categories-detail .category-path-overview__steps,
#categories-detail .qzr-path-steps {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 14px !important;
}
#categories-detail .category-path-step {
  position: relative;
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
#categories-detail .category-path-step::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 28px;
  transform: translateX(-50%);
  width: 3px;
  height: calc(100% + 14px);
  background: var(--qz-line);
  z-index: 0;
}
#categories-detail .category-path-step:last-child::after { display: none; }
#categories-detail .category-path-step.qzr-path-step-done::after { background: var(--qz-accent); }
#categories-detail .category-path-step.qzr-path-step-active::after { background: var(--qz-accent-soft); }

#categories-detail .category-path-step__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px;
  border-radius: 50% !important;
  background: var(--qz-accent-soft) !important;
  color: var(--qz-muted) !important;
  font-size: 1.3rem;
  border: 3px solid var(--qz-screen) !important;
}
#categories-detail .qzr-path-step-done .category-path-step__dot { background: var(--qz-accent) !important; color: var(--qz-on-accent) !important; }
#categories-detail .qzr-path-step-active .category-path-step__dot { background: var(--qz-accent) !important; color: var(--qz-on-accent) !important; box-shadow: 0 0 0 5px var(--qz-accent-soft); }
#categories-detail .qzr-path-step-locked .category-path-step__dot { background: var(--qz-50, #e8f0ed) !important; color: var(--qz-muted) !important; }
#categories-detail .category-path-step--boss .category-path-step__dot { background: var(--qz-accent-deep) !important; color: var(--qz-energy, #F5C542) !important; }
#categories-detail .category-path-step--boss.qzr-path-step-locked .category-path-step__dot { background: var(--qz-50, #e8f0ed) !important; color: var(--qz-muted) !important; }

#categories-detail .qzr-path-step__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px !important;
  background: var(--qz-surface) !important;
  border: 1px solid var(--qz-line) !important;
  border-radius: var(--qz-r-card) !important;
}
#categories-detail .category-path-step--current,
#categories-detail .category-path-step--completed,
#categories-detail .category-path-step--boss { background: transparent !important; border: none !important; }
#categories-detail .qzr-path-step-active .qzr-path-step__body { border-color: var(--qz-accent) !important; }
#categories-detail .qzr-path-step-locked .qzr-path-step__body { background: var(--qz-screen) !important; opacity: 0.7; }
#categories-detail .category-path-step strong,
#categories-detail .qzr-path-step__body strong { color: var(--qz-text) !important; font-size: var(--qz-fs-body) !important; font-weight: var(--qz-fw-strong) !important; }
#categories-detail .category-path-step small,
#categories-detail .qzr-path-step__body small { color: var(--qz-muted) !important; font-size: var(--qz-fs-sm) !important; }
#categories-detail .qzr-path-step__body em { color: var(--qz-accent) !important; font-style: normal; font-size: var(--qz-fs-xs); font-weight: var(--qz-fw-strong); }
#categories-detail .qzr-path-step-locked .qzr-path-step__body em { color: var(--qz-muted) !important; }
#categories-detail .category-path-step:hover { transform: none !important; box-shadow: none !important; }

/* Stars / current bar / boss badge (markup added by main-dev-front.js render) */
#categories-detail .qzr-path-step__stars { display: inline-flex; gap: 3px; margin-top: 4px; }
#categories-detail .qzr-path-step__stars .fa-star { color: var(--qz-energy, #F5C542); font-size: 13px; }
#categories-detail .qzr-path-step__stars .fa-star.is-empty { color: var(--qz-line-strong); }
#categories-detail .qzr-path-step__bar { display: block; height: 8px; margin-top: 8px; border-radius: var(--qz-r-pill); background: var(--qz-accent-soft); overflow: hidden; }
#categories-detail .qzr-path-step__bar > i { display: block; height: 100%; background: var(--qz-accent); border-radius: var(--qz-r-pill); }
#categories-detail .qzr-path-step__lock { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--qz-fs-xs); color: var(--qz-muted); }
#categories-detail .category-path-step--boss .qzr-path-step__body strong::after {
  content: "BOSS"; display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--qz-r-pill);
  background: var(--qz-energy, #F5C542); color: #4a3500; font-size: var(--qz-fs-xs); font-weight: var(--qz-fw-strong); vertical-align: middle;
}

/* Header + overall progress (parcours_2 top) */
#categories-detail .qzr-path-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px; margin-bottom: 18px; padding: 18px 18px 20px !important; /*background: var(--qz-surface) !important; border: 1px solid var(--qz-line) !important; border-radius: var(--qz-r-card) !important;*/ }
#categories-detail .qzr-path-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--qz-r-pill); background: var(--qz-accent-soft) !important; color: var(--qz-accent-ink) !important; font-size: 2rem; font-weight: var(--qz-fw-strong); text-transform: none !important; letter-spacing: 0 !important; }
#categories-detail .qzr-path-badge .fas { font-size: 2rem; }
#categories-detail .qzr-path-header__main h2 { font-size: var(--qz-fs-title) !important; font-weight: var(--qz-fw-strong) !important; color: var(--qz-text) !important; margin: 2px 0 2px !important; }

#categories-detail .qzr-path-progress { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
#categories-detail .qzr-path-progress__bar { flex: 1; height: 12px; border-radius: var(--qz-r-pill); background: var(--qz-accent-soft) !important; overflow: hidden; }
#categories-detail .qzr-path-progress__bar > i { display: block; height: 100%; background: var(--qz-accent) !important; border-radius: var(--qz-r-pill); }
#categories-detail .qzr-path-progress > strong { font-size: 14px; font-weight: var(--qz-fw-strong); color: var(--qz-accent-ink) !important; flex-shrink: 0; min-width: 42px; text-align: right; }

/* Header top row: badge + compact contextual CTA on the same line */
[data-qz-skin="parcours"] .qzr-path-header__toprow,
#categories-detail .qzr-path-header__toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
[data-qz-skin="parcours"] .qzr-path-header__toprow > .qzr-path-badge,
#categories-detail .qzr-path-header__toprow > .qzr-path-badge { align-self: center; text-align: center; }
/* Header CTA → petit FAB rond (même langage que le FAB des quiz du niveau) ;
   le libellé (Revoir/Continuer…) vit dans l'aria-label, l'icône suffit ici. */
[data-qz-skin="parcours"] .qzr-path-header .qzr-path-header__cta,
#categories-detail .qzr-path-header .qzr-path-header__cta {
  flex: 0 0 auto !important; width: 42px !important; height: 42px; min-width: 0 !important; margin: 0 !important;
  padding: 0 !important; font-size: 14px !important;
  border: 0 !important;
  border-radius: var(--qz-r-pill) !important;
  background: var(--qz-accent) !important; color: var(--qz-on-accent, #fff) !important;
  box-shadow: inset 0 -3px 0 rgba(6, 52, 42, .28), 0 6px 12px color-mix(in srgb, var(--qz-accent) 35%, transparent) !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  transition: background var(--qz-dur-ui) ease, transform .08s ease, box-shadow .08s ease;
}
[data-qz-skin="parcours"] .qzr-path-header .qzr-path-header__cta:hover,
#categories-detail .qzr-path-header .qzr-path-header__cta:hover { background: var(--qz-accent-deep) !important; }
[data-qz-skin="parcours"] .qzr-path-header .qzr-path-header__cta:active,
#categories-detail .qzr-path-header .qzr-path-header__cta:active {
  transform: scale(var(--qz-press-scale));
  box-shadow: inset 0 -1px 0 rgba(6, 52, 42, .28), 0 3px 8px color-mix(in srgb, var(--qz-accent) 28%, transparent) !important;
}
[data-qz-skin="parcours"] .qzr-path-header .qzr-path-header__cta > .fas,
#categories-detail .qzr-path-header .qzr-path-header__cta > .fas { font-size: 14px; color: var(--qz-on-accent, #fff) !important; margin-left: 2px; }
/* On masque le LIBELLE (il vit dans aria-label/title) — surtout PAS le spinner
   de lancement : utilities.buttonFeedback remplace le contenu du bouton par un
   <span class="qzr-button-spinner"> (repli qzrLaunchSpinner : .qzr-launch-spinner),
   lui aussi un span sans .fas. Sans ces exclusions le FAB parait inerte pendant
   tout le chargement du quiz. */
[data-qz-skin="parcours"] .qzr-path-header .qzr-path-header__cta > span:not(.fas):not(.qzr-button-spinner):not(.qzr-launch-spinner),
#categories-detail .qzr-path-header .qzr-path-header__cta > span:not(.fas):not(.qzr-button-spinner):not(.qzr-launch-spinner) { display: none; }

/* Hide the legacy rich extras inside the detail surface too */
#categories-detail .qzr-current-mission,
#categories-detail .qzr-path-next-activity,
#categories-detail .qzr-path-steps-wrap__head,
#categories-detail .qzr-path-history { display: none !important; }

/* Path-level contextual CTA — bottom of the path card. Rangée : lien
   « Classement du parcours » (flex:1) + gros FAB play rond à droite. */
[data-qz-skin="parcours"] .qzr-path-footer,
#categories-detail .qzr-path-footer {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
[data-qz-skin="parcours"] .qzr-path-cta,
#categories-detail .qzr-path-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px !important;
  border-radius: var(--qz-r-control) !important;
  font-size: var(--qz-fs-body);
  font-weight: var(--qz-fw-strong);
  margin-top: 10px;
}
[data-qz-skin="parcours"] .qzr-path-footer .category-path-overview__stats,
#categories-detail .qzr-path-footer .category-path-overview__stats {
  flex: 1 1 auto;
  width: auto !important;
  margin-top: 0 !important;
}
/* Footer CTA → gros FAB rond (libellé contextuel dans aria-label/title). */
[data-qz-skin="parcours"] .qzr-path-footer .category-path-overview__cta,
#categories-detail .qzr-path-footer .category-path-overview__cta {
  flex: 0 0 auto;
  width: 56px !important;
  height: 56px;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--qz-r-pill) !important;
  background: var(--qz-accent) !important;
  color: var(--qz-on-accent, #fff) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -4px 0 rgba(6, 52, 42, .28), 0 10px 20px color-mix(in srgb, var(--qz-accent) 38%, transparent) !important;
  transition: background var(--qz-dur-ui) ease, transform .08s ease, box-shadow .08s ease;
}
[data-qz-skin="parcours"] .qzr-path-footer .category-path-overview__cta:hover,
#categories-detail .qzr-path-footer .category-path-overview__cta:hover { background: var(--qz-accent-deep) !important; }
[data-qz-skin="parcours"] .qzr-path-footer .category-path-overview__cta:active,
#categories-detail .qzr-path-footer .category-path-overview__cta:active {
  transform: scale(var(--qz-press-scale));
  box-shadow: inset 0 -2px 0 rgba(6, 52, 42, .28), 0 5px 12px color-mix(in srgb, var(--qz-accent) 30%, transparent) !important;
}
[data-qz-skin="parcours"] .qzr-path-footer .category-path-overview__cta > .fas,
#categories-detail .qzr-path-footer .category-path-overview__cta > .fas { font-size: 19px; margin-left: 3px; }
/* Idem footer : masquer le libellé, jamais le spinner (cf. header ci-dessus). */
[data-qz-skin="parcours"] .qzr-path-footer .category-path-overview__cta > span:not(.fas):not(.qzr-button-spinner):not(.qzr-launch-spinner),
#categories-detail .qzr-path-footer .category-path-overview__cta > span:not(.fas):not(.qzr-button-spinner):not(.qzr-launch-spinner) { display: none; }
/* Spinner dans un FAB rond : le bouton n'a pas de texte, donc pas de 1em utile —
   on le dimensionne explicitement et on le force en blanc sur l'accent. */
[data-qz-skin="parcours"] .qzr-path-header .qzr-path-header__cta .qzr-button-spinner,
#categories-detail .qzr-path-header .qzr-path-header__cta .qzr-button-spinner,
[data-qz-skin="parcours"] .qzr-path-footer .category-path-overview__cta .qzr-button-spinner,
#categories-detail .qzr-path-footer .category-path-overview__cta .qzr-button-spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
  color: var(--qz-on-accent, #fff);
}
/* Le feedback bouton désactive le FAB pendant le chargement : il doit rester
   accent (« ça charge »), pas prendre un gris qui se lirait « indisponible ». */
[data-qz-skin="parcours"] .qzr-path-header .qzr-path-header__cta.is-loading,
#categories-detail .qzr-path-header .qzr-path-header__cta.is-loading,
[data-qz-skin="parcours"] .qzr-path-footer .category-path-overview__cta.is-loading,
#categories-detail .qzr-path-footer .category-path-overview__cta.is-loading {
  background: var(--qz-accent) !important;
  color: var(--qz-on-accent, #fff) !important;
  opacity: 1 !important;
  cursor: progress;
}

/* Parcours picker (parcours_1) — superseded by the card redesign above
 * ([data-qz-skin="parcours"] .category-path-choice*, ~line 336). That old
 * markup used __body/__icon/__cta on a flex-row card; the current markup
 * (main-dev-front.js renderPathCollection) uses __cover/__main/__chips/__prog
 * and does not have __body at all — this ID-selector !important block was
 * silently overriding the new grid-card layout (collapsed cover to 0 width). */

/* Full convert — the parcours detail shows ONLY the path flow (themes →
 * parcours → chemin). Hide the legacy per-category quiz grid, tab panels,
 * category hero and the play sticky-CTA so the route is the clean parcours UI. */
#categories-detail .category-detail-mobile-hero,
#categories-detail [data-category-detail-panel],
#categories-detail .category-detail-tabs,
#categories-detail .category-detail-tabbar,
#categories-detail [data-category-detail-tabs],
#categories-detail .category-detail-tab-nav,
#categories-detail .category-detail-sticky-cta {
  display: none !important;
}
#categories-detail .category-path-overview { margin-top: 0 !important; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  [data-qz-skin="parcours"] {
    padding: 12px 12px calc(12px + 64px);
  }

  #categories-detail .qzr-path-header__main h2 {
    font-size: var(--qz-fs-body) !important;
  }

  #categories-detail .qzr-path-badge {
    font-size: 1rem;
  }
}

/* ── Paid parcours: the locked shop window (P6) ────────────────────────────
   Shown INSTEAD of the chemin, because a locked parcours comes back from the
   server with every step's quiz list emptied — drawing the normal course would
   render an empty one and read as broken rather than as locked. */

.qzr-path-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 20px;
  text-align: center;
  border-radius: var(--qz-r-card);
  background: var(--qz-surface);
  border: 1px dashed var(--qz-line);
}

.qzr-path-locked__icon {
  font-size: 26px;
  color: var(--qz-accent);
  background: var(--qz-accent-soft);
  width: 56px;
  height: 56px;
  border-radius: var(--qz-r-pill);
  display: grid;
  place-items: center;
}

.qzr-path-locked__title { font-size: var(--qz-fs-h3); color: var(--qz-text); line-height: 1.3; }
.qzr-path-locked__meta  { margin: 0; font-size: var(--qz-fs-xs); color: var(--qz-muted); }
.qzr-path-locked__cta   { margin-top: 4px; }
.qzr-path-locked__hint  { font-size: var(--qz-fs-xs); color: var(--qz-muted); }

/* ── Mascotte guide : chemin (inline) + fiche de niveau (modale) ────────────
   UNE SEULE visible a la fois. Ce n'est pas cosmetique : qzr-mascot.js cible la
   PREMIERE mascotte visible du document, donc deux exemplaires affiches
   rendraient les reactions du bus imprevisibles. La regle d'exclusion est plus
   bas (body.category-action-sheet-open). */
.qzr-path-mascot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.qzr-path-mascot__fig,
.qzr-lvl-mascot__fig {
  flex: 0 0 auto;
  width: 46px;
  height: 56px;
}
.qzr-lvl-mascot__fig { width: 38px; height: 46px; }   /* entete de feuille : plus compact */
.qzr-path-mascot__fig .qzr-mascot-svg,
.qzr-lvl-mascot__fig .qzr-mascot-svg { width: 100%; height: 100%; display: block; }

/* La bulle reprend .qzv-bubble (partagee avec le dashboard, et cible de
   qzrMascot.say) — on n'ajuste que la densite pour ces deux emplacements.
   text-align explicite : la feuille et la carte heritent d'un centrage. */
.qzr-path-mascot__bubble,
.qzr-lvl-mascot__bubble {
  padding: 10px 12px;
  font-size: var(--qz-fs-xs);
  line-height: 1.35;
  text-align: left;
}

/* Entete de la fiche de niveau : la mascotte se glisse apres la pastille, la
   bulle passe seule a la ligne suivante (flex-basis 100%). */
.qzr-lvl-hero.has-mascot { flex-wrap: wrap; }
.qzr-lvl-hero.has-mascot .qzr-lvl-mascot__bubble {
  flex: 1 0 100%;
  margin-top: 10px;
}
/* La fleche de .qzv-bubble pointe vers la GAUCHE (mascotte du dashboard posee a
   sa gauche) : translateY(-50%) rotate(45deg) + bordures gauche/bas. Ici la
   bulle est SOUS la mascotte — on refait la fleche pour qu'elle pointe vers le
   HAUT : bordures haut/gauche, et on annule le recentrage vertical. */
.qzr-lvl-hero.has-mascot .qzr-lvl-mascot__bubble::before {
  top: -7px;
  left: 20px;
  transform: rotate(45deg);
  border-left: 1px solid var(--qz-line);
  border-top: 1px solid var(--qz-line);
  border-bottom: 0;
}

/* Exclusion mutuelle : des qu'une feuille est ouverte (open/closeCategoryPath
   StepSheet posent/retirent la classe), la mascotte du chemin s'efface au
   profit de celle de la fiche. Pilote en CSS pour survivre aux re-rendus. */
body.category-action-sheet-open .qzr-path-mascot { display: none; }

/* ── Hiding a card: three owners, three classes ─────────────────────────────
   .is-filter-hidden  the theme search's
   .is-page-hidden    the theme pager's (6 per page, numbered like #players)
   .is-fold-hidden    the parcours "Voir plus" fold's
   Each is set by ONE owner and read by no one else, so a card excluded by more
   than one stays hidden until every owner releases it — no cancelling out.
   The specificity dance is forced: #categories-detail .category-path-choice
   already sets display:flex !important (1,1,0). Between two !important
   declarations the cascade falls back to specificity, so a bare .is-fold-hidden
   (0,1,0) LOSES and the card stays on screen — measured, not guessed. Repeating
   the class inside the two id scopes lifts those selectors to (1,2,0), which
   wins outright instead of relying on file order. The bare class is kept first
   so the helper still works on any list without an id-scoped display rule. */
.is-fold-hidden,
.is-page-hidden,
#categories .is-fold-hidden.is-fold-hidden,
#categories .is-page-hidden.is-page-hidden,
#categories-detail .is-fold-hidden.is-fold-hidden,
#categories-detail .is-page-hidden.is-page-hidden {
  display: none !important;
}

.qzr-load-more {
  /* Same grid-item trap as the pager above: .category-path-picker__grid is a
     grid, so the button must span it rather than take one card slot. */
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  margin: 10px auto 0;
  padding: 11px 18px;
  border: 1px solid var(--qz-line);
  border-bottom: 3px solid var(--qz-line-strong, var(--qz-line));
  border-radius: var(--qz-r-control);
  background: var(--qz-surface);
  color: var(--qz-text);
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong, 700);
  cursor: pointer;
}
.qzr-load-more:hover {
  border-color: var(--qz-accent-mid, var(--qz-accent));
  background: var(--qz-accent-soft);
}
.qzr-load-more:focus-visible { outline: none; box-shadow: var(--qz-focus-ring); }

/* ── Sentence case on the two parcours titles ───────────────────────────────
   Theme and path names arrive from the database in whatever case they were
   typed — often ALL CAPS. Lowercasing the whole string and re-capitalising the
   first letter renders them as a sentence, whatever the stored casing.
   NOT text-transform:capitalize, which would upper-case EVERY word.

   ::first-letter only applies to block containers. The <h2> is one already; the
   <strong> is a flex item of .category-path-choice__body (display:flex above),
   and flex items are blockified — so both take the pseudo-element. The
   display:block on the strong is belt-and-braces for any context where that
   parent is not a flex container.

   The rules these override carry !important (#categories-detail ... h2 above),
   hence the matching !important here; the selectors also repeat the id so they
   win on specificity rather than on order alone. */
.category-path-choice__body > strong,
#categories-detail .category-path-choice__body > strong,
[data-qz-skin="parcours"] .category-path-choice__body > strong {
  display: block;
  text-transform: lowercase !important;
}
.category-path-choice__body > strong::first-letter,
#categories-detail .category-path-choice__body > strong::first-letter,
[data-qz-skin="parcours"] .category-path-choice__body > strong::first-letter {
  text-transform: uppercase !important;
}

.qzr-path-header__main > h2,
#categories-detail .qzr-path-header__main > h2,
[data-qz-skin="parcours"] .qzr-path-header__main > h2 {
  text-transform: lowercase !important;
}
.qzr-path-header__main > h2::first-letter,
#categories-detail .qzr-path-header__main > h2::first-letter,
[data-qz-skin="parcours"] .qzr-path-header__main > h2::first-letter {
  text-transform: uppercase !important;
}