/* Clarté du parcours non technique : vos sujets d'articles (Plan), Pages à améliorer, Articles (liste, À rédiger), Calendrier.
   Mêmes jetons que tokens.css : aucune couleur ni police en plus. Chargée en dernier. */

/* ---------- Vos sujets : le parcours en trois étapes, sous la phrase d'en-tête ---------- */
.pl-journey { margin-top: -8px; }
.pl-journey .xflow-steps { gap: 26px; max-width: 880px; }
.pl-journey .xflow-step { padding: 8px 12px; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
.pl-journey .xflow-num { grid-row: 1 / span 2; }
.pl-journey .xflow-label { font-weight: 500; }
/* Le libellé en gras de l'étape ouverte tient sur une ligne : le bandeau garde la même hauteur d'un onglet à l'autre. */
@media (min-width: 721px) { .pl-journey .xflow-label { white-space: nowrap; } }
.pl-journey .xflow-arrow { right: -24px; }
/* L'étape de la vue ouverte : en gras, et un filet plein autour. */
.pl-journey[data-stage='1'] .xflow-step:nth-child(1),
.pl-journey[data-stage='2'] .xflow-step:nth-child(2),
.pl-journey[data-stage='3'] .xflow-step:nth-child(3) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pl-journey[data-stage='1'] .xflow-step:nth-child(1) .xflow-num,
.pl-journey[data-stage='2'] .xflow-step:nth-child(2) .xflow-num,
.pl-journey[data-stage='3'] .xflow-step:nth-child(3) .xflow-num { color: var(--accent-ink); }
.pl-journey[data-stage='1'] .xflow-step:nth-child(1) .xflow-label,
.pl-journey[data-stage='2'] .xflow-step:nth-child(2) .xflow-label,
.pl-journey[data-stage='3'] .xflow-step:nth-child(3) .xflow-label { font-weight: 700; }
@media (max-width: 720px) {
  /* Sur téléphone, les trois étapes restent sur une ligne : le premier sujet arrive plus vite. */
  .pl-journey .xflow-steps { grid-auto-flow: column; gap: 14px; }
  .pl-journey .xflow-step { display: block; padding: 8px; }
  .pl-journey .xflow-num { display: none; }
  .pl-journey .xflow-label { display: block; font-size: var(--fs-meta); line-height: 1.3; }
  .pl-journey .xflow-sub { display: none; }
  .pl-journey .xflow-arrow { left: auto; right: -14px; top: 50%; bottom: auto; transform: translateY(-50%); width: 14px; height: 14px; }
}

/* L'encadré d'action, discret quand ce n'est pas lui le bouton principal de l'écran. */
.pl-next.is-quiet { background: transparent; }
.pl-next .credit-note { margin-top: 8px; }

/* La phrase en tête des vues secondaires (Rédigés, Pages à améliorer, Déjà visibles, Écartés). */
.pl-lead { margin: -4px 0 0; padding-inline: 10px; color: var(--body); font-size: var(--fs-small); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pl-lead p { margin: 0; max-width: 70ch; }

/* « Trouver des sujets » : en toutes lettres sur ordinateur, en icône à droite des onglets sur téléphone. */
.pl-find-icon { display: none; }
@media (max-width: 600px) {
  .pl-bar { flex-wrap: nowrap; gap: 8px; align-items: center; }
  .pl-bar-tools { width: auto; order: 0; margin-left: 0; padding: 0; flex: none; }
  .pl-find-full { display: none; }
  .pl-find-icon { display: grid; width: 44px; height: 44px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--relief); }
  /* Les onglets sur une seule ligne qui défile, sans icônes : plus de place pour les sujets. */
  .pl-tabs-wrap { flex: 1 1 auto; width: auto; min-width: 0; }
  .seg.pl-tabs { width: 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px; gap: 0; }
  .seg.pl-tabs::-webkit-scrollbar { display: none; }
  .seg.pl-tabs > button { flex: none; gap: 4px; padding: 0 10px; font-size: 14px; white-space: nowrap; }
  .seg.pl-tabs > button[role='tab'] > svg { display: none; }
  .seg.pl-tabs .count { font-size: 12.5px; }
}

/* Noms des sujets sur la carte et dans le panneau : une majuscule, comme dans la liste. */
.pl-topic-name::first-letter, .pl-panel-title::first-letter { text-transform: uppercase; }

/* Légende de la carte : trois états, la taille des ronds, un seul bouton qui replie ou déplie. Le reste est replié. */
.pl-legend-size { color: var(--muted); }
.xfold.pl-howto { border: 0; background: transparent; margin: 0 0 4px; }
.xfold.pl-howto > summary { padding: 6px 0; display: inline-flex; gap: 6px; font-size: var(--fs-small); }
.xfold.pl-howto > summary:hover { background: transparent; }
.xfold.pl-howto .xfold-summary { font-size: var(--fs-small); font-weight: 500; color: var(--accent-ink); }
.xfold.pl-howto .xfold-chevron { margin-left: 0; color: var(--accent-ink); }
.xfold.pl-howto .xfold-body { padding: 4px 0 8px; max-width: 70ch; }

/* Panneau d'un sujet : le titre, la raison, deux repères, les boutons ; le détail est replié. */
.pl-panel-name { display: grid; gap: 4px; }
.pl-panel-reason { color: var(--body); line-height: 1.5; }
.pl-panel-figures { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--fs-small); color: var(--body); }
.pl-actions-note { flex-basis: 100%; }
.pl-actions-note .credit-note, .pl-actions-note p { margin: 0; }
.pl-nothing { flex-basis: 100%; margin: 0; }
.pl-pillar-hint { margin-top: -10px; }
.xfold.pl-panel-more .xfold-body { padding-top: 0; }

/* Pages à améliorer : le schéma, puis la ligne. */
.pl-improve-lead { display: grid; gap: 8px; margin: 12px 0 8px; padding-inline: 10px; max-width: 760px; }
.pl-improve-lead p { margin: 0; }

/* ---------- Améliorer une page existante ---------- */
.improve { display: grid; gap: 14px; }
.improve > p { margin: 0; max-width: 68ch; line-height: 1.55; }
.improve .card-title { margin: 0; }
.improve-topic { margin: -6px 0 0; }
.improve-sentence {
  display: block; margin-top: 6px; padding: 12px 14px; border-radius: var(--radius-control);
  background: var(--accent-soft); color: var(--text); font-family: var(--serif); font-size: var(--fs-text); line-height: 1.55;
}
.improve-excerpt {
  display: block; margin-top: 6px; padding: 12px 14px; border-radius: var(--radius-control);
  background: var(--raised); color: var(--body); font-family: var(--serif); font-size: var(--fs-body); line-height: 1.55;
}
.improve-tips { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.improve-back { justify-self: start; }
.improve .xsteps { margin: 0; padding: 0; }

/* ---------- Articles : la liste « À rédiger » et l'article conseillé ---------- */
.art-ready-lead { margin: -6px 0 10px; }
.art-advised { margin-right: 8px; vertical-align: 1px; }

/* ---------- Calendrier ---------- */
.cal-lead { margin: 10px 0 0; color: var(--body); }
.cal-sum { margin-top: 4px; }
.xfold.cal-howto { margin-top: 12px; border: 0; background: var(--raised); }
.xfold.cal-howto > summary { padding: 10px 14px; }
.xfold.cal-howto .xfold-summary { font-size: var(--fs-small); }
.xfold.cal-howto .xfold-body { padding: 0 14px 12px; }
.cal-howto-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.pl-journey .xflow-steps, .pl-improve-lead .xflow-steps { padding: 0; margin: 0; }
.pl-legend-block .pl-summary { margin-bottom: 0; }
/* Flèche de tri des colonnes : lisible (contraste suffisant), même discrète. */
.art-table .sort-mark, .kw-table .sort-mark, .written-table .sort-mark { color: var(--muted); }
.art-table .sort-btn.is-active .sort-mark, .kw-table .sort-btn.is-active .sort-mark, .written-table .sort-btn.is-active .sort-mark { color: var(--accent-ink); }