/* ═══════════════════════════════════════════════════════════════════════════
   Pages de sujets — complément de pages.css, jamais un remplacement.

   Ces pages affichent des listes longues : 552 énoncés sur une seule page
   pour la tâche 2. Tout se joue donc sur la densité. Un sujet doit se lire en
   un coup d'oeil, et l'oeil doit pouvoir sauter de l'un à l'autre sans se
   perdre, ce qu'une liste à puces classique ne permet pas au-delà de trente
   lignes.

   Elles héritent des couleurs, des polices et du mode sombre de pages.css :
   aucune couleur n'est redéfinie ici.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Les pages de sujets sont plus larges que les guides : une colonne de
   720 px allonge chaque énoncé sur trois lignes et double la hauteur de la
   page. */
.pg-main { --maxw: 860px; }

/* ── La table des matières ──
   Elle ne décore pas : sur une page de 552 sujets, c'est le seul moyen
   d'atteindre un thème. Elle dit aussi au moteur de recherche de quoi la page
   parle, avant qu'il n'ait lu le premier sujet. */
.toc-n {
  display: inline-block; margin-left: 0.3rem; padding: 0 0.35rem;
  border-radius: 999px; background: var(--cream-dark);
  font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── La méthode ──
   Encadrée, parce qu'elle est ce que les autres sites n'ont pas, et qu'elle
   doit se distinguer de la liste qui suit. */
.sj-methode {
  margin: 2.2rem 0 1.6rem; padding: 1.3rem 1.5rem;
  background: var(--cream-dark); border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.sj-methode h2 { margin-top: 0; font-size: 1.15rem; }
.sj-methode p:last-child { margin-bottom: 0; }

.sj-tache {
  margin: 2.6rem 0 0.4rem; padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border);
}
.sj-count {
  font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em; white-space: nowrap;
}

.sj-theme { margin: 1.8rem 0; scroll-margin-top: 5rem; }
.sj-theme h2 { font-size: 1.05rem; margin-bottom: 0.5rem; }

/* ── Un sujet ──
   Numéroté, parce qu'on se repère et se cite par un numéro, et séparé par un
   trait plutôt qu'une carte : 552 cartes empilées font un mur, 552 lignes
   séparées se parcourent. */
.sj-list { margin: 0; padding-left: 1.4rem; }
.sj {
  padding: 0.7rem 0 0.7rem 0.3rem;
  border-bottom: 1px solid var(--border-soft);
}
.sj:last-child { border-bottom: none; }
.sj::marker { color: var(--text-muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.sj-prompt { margin: 0; line-height: 1.6; }
.sj-doc {
  margin: 0.5rem 0 0; padding-left: 0.8rem;
  border-left: 2px solid var(--border);
  font-size: 0.92rem; color: var(--text-muted); line-height: 1.55;
}
.sj-meta {
  margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* Le sujet, pratiqué à voix haute sur la plateforme (examinateur IA). */
.sj-pratiquer {
  display: inline-block; margin-top: 0.35rem;
  font-size: 0.84rem; font-weight: 600; color: var(--ink-maple);
  text-decoration: underline; text-underline-offset: 0.2em;
}
.sj-pratiquer:hover { text-decoration-thickness: 2px; }

/* ── Les trois portes, sur l'index ── */
.sj-cards { display: grid; gap: 0.9rem; margin: 1.8rem 0 2rem; }
@media (min-width: 720px) { .sj-cards { grid-template-columns: repeat(3, 1fr); } }
.sj-card {
  display: block; padding: 1.1rem 1.2rem; text-decoration: none;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.sj-card:hover { border-color: var(--maple); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sj-card-k {
  margin: 0 0 0.25rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-maple);
}
.sj-card-t { margin: 0 0 0.4rem; font-weight: 700; color: var(--text-strong); }
.sj-card-d { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .sj-card { transition: none; }
  .sj-card:hover { transform: none; }
}

/* ── Le rappel, une fois, au milieu ──
   Sur une page de 552 sujets, l'appel de bas de page n'est vu par personne :
   trente écrans plus haut, le lecteur a déjà refermé. Celui-ci se place après
   le troisième thème et ne revient pas. Discret par construction : une phrase,
   pas un encadré coloré, parce qu'une relance qui interrompt la lecture d'une
   liste qu'on est venu lire fait fuir. */
.sj-rappel {
  margin: 1.6rem 0; padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.sj-rappel p { margin: 0; font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; }
.sj-rappel a { font-weight: 600; }

/* ── Le passage d'une langue à l'autre ──
   Un lien, pas une bascule JavaScript : chaque langue a ses propres adresses,
   et c'est ce qui permet aux deux d'exister pour un moteur de recherche. Il
   porte `hreflang` pour que le navigateur comme le robot sachent où il mène. */
.pg-lang {
  flex-shrink: 0; padding: 0.3rem 0.5rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.24); background: rgba(255,255,255,0.12);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  color: #fff; text-decoration: none;
}
.pg-lang:hover { background: rgba(255,255,255,0.2); }
@media (max-width: 640px) {
  /* Les autres liens de l'en-tête disparaissent sur téléphone ; celui-ci
     reste, parce qu'arriver dans la mauvaise langue est le seul problème que
     l'on ne peut pas résoudre en faisant défiler la page. */
  .pg-nav .pg-lang { display: inline-block; }
}

/* Correctif : pages.css masque tous les liens de l'en-tête sur téléphone avec
   `.pg-nav a:not(.cta)`, dont la spécificité (0,2,1) battait `.pg-nav
   .pg-lang` (0,2,0). Le sélecteur de langue disparaissait donc exactement là
   où il sert le plus. `a.pg-lang` rétablit l'égalité, et l'ordre de chargement
   fait le reste. */
@media (max-width: 640px) {
  .pg-nav a.pg-lang { display: inline-block; }
}