/* ═══════════════════════════════════════════════════════════════════════════
   Pages d'un sujet d'écrit (/sujets/ecrit-*, /topics/writing-*), complément
   de pages.css. Écrites par scripts/generer_pages_sujet.py.

   Une seule surface forte : la fiche du haut (l'énoncé et « Écris-le
   maintenant »). Le reste est du texte de guide, plus calme. Aucune couleur
   n'est redéfinie : tout vient des jetons de pages.css, mode nuit compris.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La fiche : les quatre repères, l'énoncé, l'action ── */
.sjp-fiche {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 1.2rem 1.3rem 1.25rem; margin: 0 0 1.4rem;
}
.sjp-fiche .reponse-grille .n { font-size: 1.4rem; }
.pg-main h2.sjp-enonce-t {
  font-family: "DM Mono", ui-monospace, monospace; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
  margin: 1.3rem 0 0.6rem;
}
.sjp-enonce { border-left: 3px solid var(--gold); padding: 0.1rem 0 0.1rem 1rem; }
.sjp-enonce p { margin: 0 0 0.7rem !important; }
.sjp-enonce p:last-child { margin-bottom: 0 !important; }
.sjp-consigne { font-size: 1.06rem; color: var(--text-strong); line-height: 1.55; }
.sjp-titre-doc { font-weight: 700; color: var(--text-strong); }
.sjp-doc { font-size: 0.95rem; line-height: 1.6; }
.sjp-traduction, .sjp-note { font-size: 0.9rem; color: var(--text-muted); }
.sjp-trad { margin-top: 0.4rem; font-size: 0.9rem; color: var(--text-muted); }
.sjp-trad summary { cursor: pointer; font-weight: 600; color: var(--text-strong); }
.sjp-trad p { margin: 0.5rem 0 0 !important; }
.sjp-action {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem;
  margin-top: 1.2rem;
}
.sjp-action span { font-size: 0.86rem; color: var(--text-muted); flex: 1 1 14rem; }

/* ── Ce que la consigne demande ── */
.sjp-points { list-style: none; margin-left: 0 !important; padding: 0; }
.sjp-points li { position: relative; padding-left: 1.7rem; }
.sjp-points li::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.42em;
  width: 0.85rem; height: 0.85rem; border-radius: 4px;
  border: 2px solid var(--gold);
}
.sjp-registre {
  background: var(--cream-dark); border-radius: var(--radius);
  padding: 0.8rem 1rem; font-size: 0.95rem;
}

/* ── Le plan : la barre montre la part de chaque temps, la liste la dit ── */
.sjp-barre {
  display: flex; gap: 3px; height: 30px; margin: 0.2rem 0 1.1rem;
  border-radius: 8px; overflow: hidden;
}
.sjp-barre span {
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--navy);
  font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sjp-barre span:nth-child(even) { background: #F6C68F; }
.sjp-plan { counter-reset: etape; list-style: none; margin-left: 0 !important; padding: 0; }
.sjp-plan li { counter-increment: etape; position: relative; padding-left: 2.3rem; min-height: 1.7rem; }
.sjp-plan li::before {
  content: counter(etape); position: absolute; left: 0; top: 0.05rem;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  font-size: 0.82rem; font-weight: 700; line-height: 1.65rem; text-align: center;
}
.sjp-mots { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }

/* ── Le vocabulaire : deux colonnes, la tournure puis sa note ── */
.sjp-vocab {
  list-style: none; margin-left: 0 !important; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem;
}
.sjp-vocab li {
  margin: 0 !important; padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 0.1rem;
}
.sjp-v { font-weight: 600; color: var(--text-strong); }
.sjp-vn { font-size: 0.86rem; color: var(--text-muted); }

/* ── Les pièges : le bord Persimmon dit « erreur » ── */
.sjp-piege {
  border-left: 3px solid var(--maple); background: var(--cream-dark);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.85rem 1.1rem; margin: 0 0 0.8rem;
}
.sjp-piege p { margin: 0 !important; font-size: 0.96rem; }
.pg-main .sjp-piege p.sjp-piege-t { font-weight: 700; color: var(--text-strong); margin-bottom: 0.25rem !important; }

/* ── Les exemples ── */
.sjp-ex { list-style: none; margin-left: 0 !important; padding: 0; }
.sjp-ex li {
  font-family: "Playfair Display", Georgia, serif; font-size: 1.06rem; line-height: 1.5;
  color: var(--text-strong); border-left: 3px solid var(--border);
  padding: 0.1rem 0 0.1rem 1rem; margin-bottom: 1rem;
}
.sjp-ex-en {
  display: block; margin-top: 0.3rem;
  font-family: "DM Sans", sans-serif; font-size: 0.88rem; color: var(--text-muted);
}

.sjp-tag {
  display: inline-block; margin-left: 0.3rem; padding: 0 0.4rem;
  border-radius: 999px; background: var(--cream-dark);
  font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
}

@media (max-width: 560px) {
  .sjp-fiche { padding: 1rem 0.95rem 1.1rem; }
  .sjp-vocab { grid-template-columns: 1fr; }
  .sjp-action .btn { width: 100%; text-align: center; }
}