/* Thème "Sécurité Incendie" (document_engine/themes/theme_catalog.py) —
   habille UNIQUEMENT le contenu (jamais .docPage lui-même : format A4
   paysage, fond blanc et espacement restent la mécanique du moteur, voir
   static/document/document-editor.css — un thème ne les redéfinit
   jamais, sous peine de casser le format garanti de la page). Chargé
   APRÈS document-editor.css (voir templates/document/
   document_edit.html et document_theme_preview.html), donc prioritaire
   à spécificité égale sur les quelques couleurs de contenu que le
   moteur pose par défaut (--forge-text, --doc-text). */

.docPageContent {
  --theme-ink: #241f1c;
  --theme-ink-muted: #6b6259;
  --theme-line: #e7dfd2;
  --theme-safety-red: #c8102e;
  --theme-safety-red-dark: #8f0b20;
  --theme-safety-red-tint: #fbe9ec;
  --theme-hazard-amber: #e3a72e;
  --theme-hazard-amber-dark: #a97815;
  --theme-ok-green: #2e7d46;
  --theme-font-display: "Oswald", sans-serif;
  --theme-font-body: "Source Sans 3", sans-serif;

  font-family: var(--theme-font-body);

  --forge-text: var(--theme-ink);
  --forge-text-muted: var(--theme-ink-muted);
}

.docText[data-kind="titre"] {
  font-family: var(--theme-font-display);
  letter-spacing: 0.01em;
}

.docText[data-kind="paragraphe"] {
  font-family: var(--theme-font-body);
}

/* ---- Étiquette (badge) : encart compact type avertissement/repère ---- */
.docBadge {
  display: inline-block;
  font-family: var(--theme-font-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--theme-safety-red-dark);
  background: var(--theme-safety-red-tint);
  padding: 8px 12px;
  border-radius: 7px;
}

/* ---- Liste à puces / numérotée : coche sécurité / pastille panneau ---- */
.docList {
  font-family: var(--theme-font-body);
}

.docList li {
  background: #faf7f2;
  border: 1px solid var(--theme-line);
  border-left: 3px solid var(--theme-hazard-amber);
  border-radius: 7px;
}

.docList[data-kind="liste_puces"] li::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 4px;
  background: var(--theme-ok-green);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z"/></svg>') center / 11px no-repeat;
}

.docList[data-kind="liste_numerotee"] {
  counter-reset: doc-theme-step;
}

.docList[data-kind="liste_numerotee"] li::before {
  counter-increment: doc-theme-step;
  content: counter(doc-theme-step);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--theme-safety-red);
  color: #fff;
  font-family: var(--theme-font-display);
  font-size: 12px;
  font-weight: 600;
}

.docList[data-kind="liste_numerotee"] li {
  border-left-color: var(--theme-safety-red);
}

/* ---- Carte : classes de feu (repère en pastille + titre + description) ---- */
.docCard {
  background: #faf7f2;
  border: 1px solid var(--theme-line);
  border-radius: 9px;
}

.docCardLabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--theme-font-display);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--theme-ink-muted);
}

.docCardTitle {
  font-family: var(--theme-font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--theme-ink);
}

.docCardDescription {
  font-family: var(--theme-font-body);
  font-size: 10.5px;
  color: var(--theme-ink-muted);
  line-height: 1.3;
}

/* ---- Bouton d'action ---- */
.docButton {
  font-family: var(--theme-font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--theme-safety-red);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgb(200 16 46 / 55%);
}

/* ---- Image : cadre discret pour un pictogramme dessiné ---- */
.docImage {
  background: #fdf3de;
  border: 1px solid var(--theme-line);
}

/* ---- Quiz : palette rouge sécurité sur fond blanc ---- */
.docQuizKicker {
  font-family: var(--theme-font-display);
  color: var(--theme-safety-red);
}

.docQuizPlayerTitle {
  font-family: var(--theme-font-display);
}

.docQuizOption {
  background: #faf7f2;
  border-color: var(--theme-line);
}

.docQuizOptionLetter {
  font-family: var(--theme-font-display);
}