Corrige le style du thème Sécurité Incendie — plusieurs éléments n'avaient aucune mise en page par défaut

Signalé par capture d'écran : le rendu réel ne ressemblait pas du tout
à la maquette. Causes trouvées :
- .docImage (mode SVG inline) et .docCard n'ont AUCUNE règle de mise en
  page côté moteur (seuls .docImagePlaceholder et <img class="docImage">
  en ont une) — le thème doit leur donner leur forme, pas seulement leurs
  couleurs.
- --doc-accent/--doc-accent-2 (barre de progression et survol du Quiz)
  n'étaient jamais redéfinis, gardant l'orange générique du chrome de
  l'éditeur au lieu du rouge du thème.
- Le liseré décoratif en haut de page et la puce de l'étiquette (icône)
  avaient été omis en pensant, à tort, qu'ils relevaient du FORMAT de
  .docPage — ce ne sont que des flourishes visuels, aucun rapport avec
  la taille/le format A4 paysage qui doit rester intouchable.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

static/document/themes/securite-incendie.css

@@ -1,9 +1,12 @@
 /* Thème "Sécurité Incendie" (document_engine/themes/theme_catalog.py) —
-   habille UNIQUEMENT le contenu (jamais .docPage lui-même : format A4
+   habille le contenu ET peut ajouter des flourishes décoratifs à
-   paysage, fond blanc et espacement restent la mécanique du moteur, voir
+   .docPage (ex. le liseré ::before ci-dessous), mais ne touche JAMAIS à
-   static/document/document-editor.css — un thème ne les redéfinit
+   son FORMAT : width/aspect-ratio/max-height/overflow/background
-   jamais, sous peine de casser le format garanti de la page). Chargé
+   restent la mécanique du moteur (voir static/document/
-   APRÈS document-editor.css (voir templates/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). */
@@ -25,6 +28,15 @@
 
   --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"] {
@@ -36,9 +48,27 @@
   font-family: var(--theme-font-body);
 }
 
-/* ---- Étiquette (badge) : encart compact type avertissement/repère ---- */
+/* ---- 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-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   font-family: var(--theme-font-body);
   font-size: 12.5px;
   font-weight: 600;
@@ -49,6 +79,12 @@
   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);
@@ -97,13 +133,28 @@
   border-left-color: var(--theme-safety-red);
 }
 
-/* ---- Carte : classes de feu (repère en pastille + titre + description) ---- */
+/* ---- 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;
@@ -140,13 +191,40 @@
   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 discret pour un pictogramme dessiné ---- */
+/* ---- 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 ---- */