/* 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.
   L'icône est maintenant un vrai contenu (attribut svg_markup, voir
   _render_badge) plutôt qu'un glyphe CSS décoratif — un thème n'a plus
   qu'à dimensionner l'icône fournie, jamais à en inventer une. Largeur/
   arrondi/gras/majuscules restent des attributs PAR ÉLÉMENT (voir
   element_kind_labels.element_default_attributes) : ce thème ne pose
   ici que l'apparence par défaut d'un badge SANS ces réglages (pleine
   largeur, 7px d'arrondi) — le contenu-seed du kicker "Module
   obligatoire" les override lui-même (voir securite_incendie_seed.py). ---- */
.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;
}

.docBadgeIcon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--theme-safety-red);
}

.docBadgeIcon svg {
  width: 13px;
  height: 13px;
}

/* ---- Liste à puces / numérotée : coche sécurité / pastille panneau ----
   list-style:none supprime la puce/le numéro NATIF : ce thème affiche
   son propre badge (::before ci-dessous) à la place, jamais les deux à
   la fois (bug réel constaté le 26/09/2026 — sans ce reset, la feuille
   de base affiche désormais aussi le marqueur natif en plus du badge,
   voir static/document/document-editor.css, .docList li::before, qui a
   dû arrêter de neutraliser le display natif du <li> pour corriger un
   autre bug — retirer le thème faisait disparaître tout marqueur). ---- */
.docList {
  font-family: var(--theme-font-body);
}

/* Sélecteur avec le type d'élément (ul.../ol...), pas seulement les
   classes/attributs : static/style.css (site-wide) porte une règle
   `.content ol:not([type]) { list-style-type: decimal; }` d'une
   spécificité légèrement supérieure (elle inclut le sélecteur d'élément
   `ol`) qui l'emportait sinon silencieusement sur ce reset, même si
   celui-ci charge après. */
ul.docList[data-kind="liste_puces"],
ol.docList[data-kind="liste_numerotee"] {
  list-style: none;
}

.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: "";
  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);
  width: 22px;
  height: 22px;

  /* inline-flex, jamais flex : ce badge doit rester un ::before qui
     s'écoule EN LIGNE à côté du texte de l'élément (voir
     static/document/document-editor.css, .docList li::before) — flex
     (sans inline-) le blockifie, ce qui le repousse au-dessus du texte
     plutôt qu'à côté (bug réel constaté le 26/09/2026). inline-flex
     garde ce comportement en ligne tout en centrant quand même le
     chiffre à l'intérieur du badge (align-items/justify-content). */
  display: inline-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);
}