Forge-Engine/static/document/themes/securite-incendie.css

/* Thème "Sécurité Incendie" (document_engine/themes/theme_catalog.py) —
   habille le contenu ET peut ajouter des flourishes décoratifs à
   .docPage (ex. le liseré ::before ci-dessous), mais ne touche JAMAIS à
   son FORMAT : width/aspect-ratio/max-height/overflow/background
   restent la mécanique du moteur (voir static/document/
   document-editor.css, retours utilisateur des 23-24/09/2026 sur le
   format A4 paysage et la page toujours blanche) — 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);

  /* --doc-accent/--doc-accent-2 pilotent la barre de progression et le
     survol des options du Quiz (voir static/document/
     document-editor.css, .docQuizProgressFill/.docQuizOption:hover) —
     jamais redéfinis par .docPage lui-même (seul --doc-accent-* du
     CHROME de l'éditeur s'appliquerait sinon, couleur orange générique
     sans rapport avec ce thème). */
  --doc-accent: var(--theme-safety-red);
  --doc-accent-2: var(--theme-hazard-amber);
}

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

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

/* ---- Liseré décoratif en haut de page — pas une propriété de format
   (taille/position de .docPage inchangées, déjà position:relative et
   overflow:hidden côté moteur), juste une bande de couleur superposée. ---- */
.docPage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--theme-safety-red), var(--theme-hazard-amber));
}

/* ---- Étiquette (badge) : encart compact type avertissement/repère,
   avec une puce décorative (::before, glyphe générique — le kind
   "badge" du moteur ne porte aucun slot d'icône, voir
   document_engine/rendering/render_document_element.py::_render_badge). ---- */
.docBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  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;
}

.docBadge::before {
  content: "●";
  color: var(--theme-safety-red);
  font-size: 9px;
}

/* ---- 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).
   Comme .docImage ci-dessus, .docCard n'a AUCUNE mise en page par défaut
   côté moteur (voir _render_carte) : ce thème lui donne sa forme de
   carte centrée, et une largeur égale entre cartes voisines dans une
   rangée. ---- */
.docCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 12px 8px;
  background: #faf7f2;
  border: 1px solid var(--theme-line);
  border-radius: 9px;
}

.docRow > .docCard {
  flex: 1 1 0;
  min-width: 0;
}

.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;
  border-radius: 7px;
  box-shadow: 0 6px 16px -6px rgb(200 16 46 / 55%);
}

/* ---- Image : cadre pour un pictogramme SVG dessiné (voir
   document_engine/rendering/render_document_element.py::_render_image,
   mode svg_markup). Ce <div> n'a AUCUNE taille par défaut côté moteur
   (seuls .docImagePlaceholder et <img class="docImage"> en ont une) :
   ce thème lui donne une hauteur/un centrage propres, sinon le SVG
   s'affiche à sa taille intrinsèque dans une boîte sans forme. ---- */
.docImage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 16px;
  background: #fdf3de;
  border: 1px solid var(--theme-line);
  border-radius: 10px;
}

.docImage svg {
  width: 100%;
  height: 100%;
  max-width: 150px;
}

/* Dans une rangée (voir .docRow), l'image reste une colonne compacte
   plutôt que de se partager équitablement l'espace avec le texte à côté
   — c'est un pictogramme d'appoint, pas le contenu principal de la
   rangée. */
.docRow > .docImage {
  flex: 0 1 200px;
  align-self: stretch;
}

/* ---- 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);
}