/* Style de base du portail KotoScore.
   Volontairement simple : sert de socle presentable en attendant la
   vraie maquette de Karen (voir README.md, section 4.5) — pas la
   version finale.

   Palette reprise du vrai logo (voir dossier Logo/ a la racine du
   depot) : vert fonce + vert clair. Le mode sombre est le mode par
   defaut (aucun attribut sur <html>) ; le mode clair s'active via
   [data-theme="light"], bascule par backoffice/js/theme.js. */

:root {
  /* Typographie : voir docs de tokens KotoScore (Instrument Sans) --
     une seule famille, la hierarchie se lit au poids/a la taille, pas
     au changement de police (--police-titres restait sur une serif
     avant cette version). */
  --font-sans: "Instrument Sans", Arial, Helvetica, sans-serif;
  --police-corps: var(--font-sans);
  --police-titres: var(--font-sans);

  --text-score-size: 56px;
  --text-score-line: 60px;
  --text-score-weight: 600;
  --text-h1-size: 30px;
  --text-h1-line: 38px;
  --text-h1-weight: 600;
  --text-h2-size: 24px;
  --text-h2-line: 32px;
  --text-h2-weight: 600;
  --text-h3-size: 18px;
  --text-h3-line: 26px;
  --text-h3-weight: 600;
  --text-lg-size: 17px;
  --text-lg-line: 26px;
  --text-lg-weight: 400;
  --text-md-size: 16px;
  --text-md-line: 24px;
  --text-md-weight: 400;
  --text-sm-size: 14px;
  --text-sm-line: 20px;
  --text-sm-weight: 400;
  --text-label-size: 13px;
  --text-label-line: 18px;
  --text-label-weight: 500;
  --text-caption-size: 12px;
  --text-caption-line: 17px;
  --text-caption-weight: 400;
  --text-button-size: 14px;
  --text-button-line: 20px;
  --text-button-weight: 600;

  --marque-foncee: #084734;
  --marque-claire: #c4f17b;
  --blanc: #ffffff;
  --gris-ligne: #dde2ec;
  --texte-secondaire: #4a5568;
  --rouge-erreur: #b3382c;
  --rouge-erreur-fond: #fbeae8;
  --rouge-erreur-bordure: #e3b6ae;
  --ambre-vigilance: #c98a1f;
  --ambre-vigilance-texte: #8a5a08;
  --ambre-vigilance-fond: rgba(224, 168, 60, 0.15);

  /* Mode sombre (par defaut). --fond-page habille la sidebar (voir
     .barre-laterale) -- le contenu, lui, reste blanc dans les deux
     modes (.zone-principale), donc pas besoin d'une variante sombre
     pour le contenu. */
  --fond-page: #0d1f19;
  --texte-sur-fond-page: #e8f0ea;
  --texte-sur-fond-page-att: #9fb3a8;
  --nav-actif-fond: var(--marque-claire);
  --nav-actif-texte: var(--marque-foncee);
  --nav-survol-fond: rgba(255, 255, 255, 0.08);
  --bordure-panneau-sombre: rgba(255, 255, 255, 0.1);
  /* Topbar : coloree comme la sidebar en mode sombre, mais reste
     blanche en mode clair pour se fondre avec le contenu (voir plus
     bas [data-theme="light"]). */
  --fond-topbar: var(--fond-page);
}

[data-theme="light"] {
  --fond-page: #f4f8f4;
  --texte-sur-fond-page: #16231d;
  --texte-sur-fond-page-att: #55655c;
  --nav-actif-fond: var(--marque-foncee);
  --nav-actif-texte: #ffffff;
  --nav-survol-fond: rgba(8, 71, 52, 0.06);
  --bordure-panneau-sombre: var(--gris-ligne);
  --fond-topbar: var(--blanc);
}

* {
  box-sizing: border-box;
}

/* Accessibilite (WCAG AA) : un etat de focus clavier visible partout,
   pas seulement sur les champs de formulaire deja traites plus bas. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--marque-foncee);
  outline-offset: 2px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  font-weight: var(--text-md-weight);
  background: var(--fond-page);
  color: var(--texte-sur-fond-page);
}

/* Hierarchie de titres : une seule famille (voir --font-sans), la taille
   et le poids suffisent a distinguer les niveaux -- pas de police a
   part pour "faire titre". */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  margin: 0 0 0.6em 0;
}

h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  font-weight: var(--text-h1-weight);
}

h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  font-weight: var(--text-h2-weight);
}

h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  font-weight: var(--text-h3-weight);
}

h4 {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: 600;
}

.carte h2,
.carte h3 {
  margin-top: 0;
}

/* Chiffres : chasse fixe et alignes sur la ligne de base (montants,
   scores, DTI...) -- jamais de chiffres "a l'ancienne" qui sautent
   visuellement d'une ligne a l'autre dans un tableau. */
.valeur-chiffree,
.facteur-contribution,
.sous-critere-valeur,
.composition-valeur,
.stat-chiffre,
.jauge-score-valeur,
.demande-detail,
.table-donnees td {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.bouton-theme {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--texte-sur-fond-page-att);
  color: var(--texte-sur-fond-page);
  border-radius: 3px;
  cursor: pointer;
}

.bouton-theme:hover {
  border-color: var(--texte-sur-fond-page);
}

.entete {
  background: var(--marque-foncee);
  color: white;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.entete .logo {
  height: 1.6rem;
}

.entete-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.entete a {
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0.35rem 0.8rem;
  border-radius: 3px;
}

.entete a:hover {
  background: rgba(255, 255, 255, 0.15);
}

.bouton-theme-entete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
  border-radius: 3px;
  cursor: pointer;
}

.bouton-theme-entete:hover {
  background: rgba(255, 255, 255, 0.15);
}

.page-connexion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carte-connexion {
  background: var(--blanc);
  padding: 2.5rem;
  border-radius: 4px;
  border: 1px solid var(--gris-ligne);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 360px;
}

.carte-connexion .logo {
  height: 2rem;
  margin-bottom: 0.75rem;
}

.carte-connexion p.sous-titre {
  margin: 0 0 1.5rem 0;
  color: var(--texte-secondaire);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.champ {
  margin-bottom: 1.1rem;
}

.champ label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: #16233d;
}

.champ input:not([type="checkbox"]),
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--gris-ligne);
  border-radius: 3px;
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  font-family: inherit;
  background: var(--blanc);
  color: #16233d;
}

.champ input:not([type="checkbox"]):focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--marque-foncee);
  box-shadow: 0 0 0 3px rgba(8, 71, 52, 0.15);
}

.champ-case label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  cursor: pointer;
}

.champ-case input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--marque-foncee);
  cursor: pointer;
}

.aide-champ {
  margin: 0.35rem 0 0 0;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--texte-secondaire);
}

.champ-avec-icone {
  position: relative;
}

.champ-avec-icone .icone-champ {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texte-secondaire);
  pointer-events: none;
}

.champ-avec-icone input:not([type="checkbox"]) {
  /* Meme specificite que la regle de base (.champ input:not(...), plus
     haut) mais declaree apres : sans le :not() ici, cette regle perdait
     silencieusement contre le padding de base (0.7rem), le texte tapait
     alors sous l'icone au lieu de commencer apres elle. */
  padding-left: 2.75rem;
}

.champ-avec-icone .icone-champ {
  z-index: 1;
}

.erreur {
  color: var(--rouge-erreur);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  margin-top: 0.3rem;
}

/* Champ signale manquant cote client, avant meme la soumission -- voir
   formulaire_dossier.js, verification au clic sur "Calculer le score". */
.champ-erreur-client input:not([type="checkbox"]),
.champ-erreur-client select {
  border-color: var(--rouge-erreur-bordure);
}

.erreur-generale {
  background: var(--rouge-erreur-fond);
  border: 1px solid var(--rouge-erreur-bordure);
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  margin: 0 0 1.1rem 0;
}

.liste-messages {
  list-style: none;
  margin: 0 0 1.25rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.message-alerte {
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  border: 1px solid transparent;
}

.message-alerte-success {
  background: rgba(8, 71, 52, 0.08);
  color: var(--marque-foncee);
  border-color: rgba(8, 71, 52, 0.2);
}

.message-alerte-error {
  background: var(--rouge-erreur-fond);
  color: var(--rouge-erreur);
  border-color: var(--rouge-erreur-bordure);
}

.bouton-principal {
  width: 100%;
  padding: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--marque-foncee);
  color: white;
  border: none;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: var(--text-button-size);
  line-height: var(--text-button-line);
  font-weight: var(--text-button-weight);
  cursor: pointer;
}

.bouton-principal:hover {
  background: #06301f;
}

.bouton-secondaire {
  padding: 0.7rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--marque-foncee);
  border: 1px solid var(--gris-ligne);
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: var(--text-button-size);
  line-height: var(--text-button-line);
  font-weight: var(--text-button-weight);
  cursor: pointer;
}

.bouton-secondaire:hover {
  background: rgba(8, 71, 52, 0.06);
}

.actions-formulaire {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.actions-formulaire .bouton-principal {
  width: auto;
}

.aide-connexion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 1.25rem 0 0 0;
  color: var(--texte-secondaire);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.conteneur {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.carte {
  background: var(--blanc);
  border: 1px solid var(--gris-ligne);
  border-radius: 4px;
  padding: 1.5rem;
  color: #16233d;
}

.contenu-page .carte + .carte {
  margin-top: 1rem;
}

/* --- Tables de donnees (listes de dossiers, en cours / historique) ---
   De vraies tables HTML : une colonne par attribut, pas plusieurs
   informations melangees dans une meme cellule. */

.table-donnees {
  width: 100%;
  border-collapse: collapse;
}

.table-donnees th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: 600;
  color: var(--texte-secondaire);
  border-bottom: 2px solid var(--gris-ligne);
  white-space: nowrap;
}

.table-donnees td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--gris-ligne);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: #16233d;
}

.table-donnees tbody tr:last-child td {
  border-bottom: none;
}

.table-donnees tbody tr:hover {
  background: rgba(8, 71, 52, 0.03);
}

.table-donnees a {
  color: var(--marque-foncee);
  text-decoration: none;
  font-weight: 500;
}

.table-donnees a:hover {
  text-decoration: underline;
}

.table-vide {
  padding: 0.75rem;
  color: var(--texte-secondaire);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.formulaire-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}

.formulaire-filtre .champ {
  margin-bottom: 0;
}

/* Rangee de deux champs simples (pas de bouton en bout de ligne, donc
   pas besoin d'aligner sur le bas comme .formulaire-filtre) --
   align-items: flex-end y decalerait les etiquettes des qu'une colonne
   est plus haute que l'autre (ex. un texte d'aide sur une seule des
   deux). Alignees en haut, avec l'espacement normal d'un champ apres la
   rangee (au lieu de zero, sinon la rangee colle a ce qui suit). */
.ligne-champs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.ligne-champs .champ {
  margin-bottom: 0;
}

.champ-tiers {
  flex: 1 1 160px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gris-ligne);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.pagination a {
  color: var(--marque-foncee);
  text-decoration: none;
  font-weight: 600;
}

.pagination a:hover {
  text-decoration: underline;
}

/* --- Formulaire de saisie d'un dossier --- */

.section-formulaire {
  border: none;
  border-top: 1px solid var(--gris-ligne);
  padding: 1.25rem 0 0 0;
  margin: 0 0 1.25rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

.section-formulaire legend {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  font-weight: var(--text-h3-weight);
  padding: 0 0 0.75rem 0;
  width: 100%;
}

.section-formulaire .champ {
  flex: 1 1 100%;
}

.section-formulaire .champ-moitie {
  flex: 1 1 calc(50% - 0.625rem);
  min-width: 220px;
}

.bloc-conditionnel {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  padding: 0.75rem;
  margin: 0 0 1.1rem 0;
  background: rgba(8, 71, 52, 0.04);
  border-radius: 3px;
}

.bloc-conditionnel[hidden] {
  display: none;
}

/* Champ sociétaire : recherche filtrante au-dessus du <select> natif, qui
   reste la source de verite pour la soumission (masque, jamais desactive
   pour ne pas perdre sa valeur) -- voir formulaire_dossier.js. */

.select-source-combo {
  display: none;
}

.combo-recherche {
  position: relative;
}

.combo-recherche-liste {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.3rem 0;
  list-style: none;
  background: var(--blanc);
  border: 1px solid var(--gris-ligne);
  border-radius: 4px;
  max-height: 14rem;
  overflow-y: auto;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.combo-recherche-liste[hidden] {
  display: none;
}

.combo-recherche-option {
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.combo-recherche-option:hover {
  background: rgba(8, 71, 52, 0.08);
}

.combo-recherche-option-vide {
  padding: 0.5rem 0.8rem;
  color: var(--texte-secondaire);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
}

/* Formulaire en etapes (nouveau_dossier.html) — voir formulaire_dossier.js.
   Modele "chemin" en fleches imbriquees (chaque etape s'encoche dans la
   suivante via un clip-path + un chevauchement de marge negative), plutot
   que des cercles relies par un trait -- lecture d'avancement plus directe. */

.stepper {
  display: flex;
  margin: 0 0 1.75rem 0;
  padding: 0;
  list-style: none;
}

.stepper-etape {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.1rem 0.7rem 2rem;
  margin-left: -1.1rem;
  background: var(--gris-ligne);
  color: var(--texte-secondaire);
  clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%, 14% 50%);
  white-space: nowrap;
}

.stepper-etape:first-child {
  margin-left: 0;
  padding-left: 1.1rem;
  clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
}

.stepper-etape:last-child {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 14% 50%);
}

.stepper-etape-cercle {
  font-size: var(--text-caption-size);
  font-weight: 700;
  opacity: 0.7;
}

.stepper-etape-libelle {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stepper-etape-active {
  background: var(--marque-foncee);
  color: var(--blanc);
}

.stepper-etape-active .stepper-etape-cercle {
  opacity: 1;
}

.stepper-etape-complete {
  background: var(--marque-claire);
  color: var(--marque-foncee);
}

.etape[hidden] {
  display: none;
}

.etape-navigation {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.etape-navigation .bouton-secondaire,
.etape-navigation .bouton-principal {
  width: auto;
  flex: 0 0 auto;
  padding: 0.6rem 1.25rem;
}

/* Champ deja renseigne (prerempli depuis le dernier dossier du sociétaire,
   ou un import CSV) — visuellement distinct, mais jamais desactive :
   l'agent doit pouvoir corriger une valeur prereplie. */

.champ-prerempli input:not([type="checkbox"]),
.champ-prerempli select {
  background: rgba(8, 71, 52, 0.05);
  border-color: rgba(8, 71, 52, 0.25);
}

/* Bulle d'aide contextuelle sur un champ complexe */

.aide-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 1px solid var(--texte-secondaire);
  color: var(--texte-secondaire);
  background: var(--blanc);
  font-size: var(--text-caption-size);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.aide-info:hover,
.aide-info:focus-visible {
  border-color: var(--marque-foncee);
  color: var(--marque-foncee);
}

.champ-avec-aide {
  position: relative;
}

.bulle-aide {
  display: block;
  margin-top: 0.4rem;
  padding: 0.5rem 0.65rem;
  background: #16233d;
  color: var(--blanc);
  border-radius: 4px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.bulle-aide[hidden] {
  display: none;
}

.carte-import {
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  background: rgba(8, 71, 52, 0.04);
  border: 1px solid var(--gris-ligne);
  border-radius: 4px;
}

.carte-import[hidden],
.source-societaire[hidden] {
  display: none;
}

.bascule-source-societaire {
  display: inline-flex;
  border: 1px solid var(--gris-ligne);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.bascule-option {
  padding: 0.5rem 1rem;
  border: none;
  border-right: 1px solid var(--gris-ligne);
  background: var(--blanc);
  color: var(--texte-secondaire);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: 600;
  cursor: pointer;
}

.bascule-option:last-child {
  border-right: none;
}

.bascule-option:hover {
  background: rgba(8, 71, 52, 0.06);
}

.bascule-option-active {
  background: var(--marque-foncee);
  color: var(--blanc);
}

.carte-import-champs {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.carte-import input[type="file"] {
  font-size: var(--text-sm-size);
}

.texte-bic {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: rgba(8, 71, 52, 0.05);
  border-radius: 3px;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: #16233d;
}

.bouton-lien {
  text-decoration: none;
  display: inline-flex;
  width: auto;
  margin-top: 1rem;
}

/* --- Ecran de resultat du score --- */

.etiquette-recommandation {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 3px;
  font-weight: 600;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  margin: 0 0 1rem 0;
}

.etiquette-recommande {
  background: rgba(8, 71, 52, 0.1);
  color: var(--marque-foncee);
}

.etiquette-vigilance {
  background: rgba(224, 168, 60, 0.15);
  color: #8a5a08;
}

.etiquette-non_recommande {
  background: var(--rouge-erreur-fond);
  color: var(--rouge-erreur);
}

.score-sur-cent {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: 400;
  color: var(--texte-secondaire);
}

.recommandation-detail {
  color: var(--texte-secondaire);
  margin: 0.25rem 0 1.25rem 0;
}

.alerte-vulnerabilite {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: rgba(224, 168, 60, 0.15);
  color: #8a5a08;
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  margin: 0 0 1.25rem 0;
  text-align: left;
}

.alerte-vulnerabilite svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.liste-facteurs {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  text-align: left;
}

.facteur {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--gris-ligne);
  flex-wrap: wrap;
}

.facteur-nom {
  font-weight: 500;
}

.facteur-contribution {
  font-family: var(--police-titres);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.facteur-positif .facteur-contribution {
  color: var(--marque-foncee);
}

.facteur-negatif .facteur-contribution {
  color: var(--rouge-erreur);
}

.facteur-detail {
  flex-basis: 100%;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--texte-secondaire);
}

.liste-contexte {
  text-align: left;
  margin: 0 0 1.25rem 0;
  padding-left: 1.2rem;
  color: #16233d;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.liste-contexte li {
  margin-bottom: 0.35rem;
}

.etiquette-decision {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 3px;
  font-weight: 600;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  margin: 0 0 0.5rem 0;
}

.etiquette-decision-accorde {
  background: rgba(8, 71, 52, 0.1);
  color: var(--marque-foncee);
}

.etiquette-decision-refuse {
  background: var(--rouge-erreur-fond);
  color: var(--rouge-erreur);
}

.justification-agent {
  text-align: left;
  color: #16233d;
  background: rgba(8, 71, 52, 0.04);
  border-radius: 3px;
  padding: 0.7rem 0.9rem;
  margin: 0 0 0.5rem 0;
}

/* Phrase reformulee par le modele de langage local (Ollama) -- a partir
   de facteurs deja calcules, jamais un nouvel avis (voir scoring/llm_ollama.py).
   Bordure gauche discrete plutot qu'un fond colore : signale que c'est
   une reformulation, sans faire concurrence visuellement aux tonalites
   rouge/ambre/vert du reste de la page. */
.phrase-llm {
  text-align: left;
  color: #16233d;
  background: var(--blanc);
  border: 1px solid var(--gris-ligne);
  border-left: 3px solid var(--marque-foncee);
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  margin: 0.5rem 0;
}

.phrase-llm-compacte {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  padding: 0.5rem 0.7rem;
}

.formulaire-decision {
  text-align: left;
  margin-top: 0.75rem;
}

.texte-bic-resultat {
  text-align: left;
  white-space: pre-wrap;
  background: rgba(8, 71, 52, 0.04);
  border-radius: 3px;
  padding: 0.8rem;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  max-height: 220px;
  overflow-y: auto;
}

.dossier-reference {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--texte-secondaire);
  margin: 1rem 0 0 0;
}

/* Ecran de resultat (resultat_score.html) -- en-tete identite + demande,
   deux colonnes (onglets + carte de score), voir resultat_score.js pour
   le changement d'onglet et l'impression. */

.fil-ariane-resultat p {
  color: #16233d;
  font-weight: 600;
}

.actions-resultat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.actions-resultat form {
  margin: 0;
}

.carte-identite-societaire {
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
}

.identite-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  align-items: center;
}

.identite-item {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--texte-secondaire);
}

.identite-item-fort {
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  font-weight: 600;
  color: #16233d;
}

.etiquette-obsolete {
  margin: 0.6rem 0 0 0;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ambre-vigilance-texte);
  background: var(--ambre-vigilance-fond);
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 3px;
}

.ligne-obsolete {
  opacity: 0.65;
}

.carte-demande {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--marque-foncee);
}

.demande-titre {
  margin: 0;
  font-weight: 600;
  color: #16233d;
}

.demande-detail {
  margin: 0.15rem 0 0 0;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--texte-secondaire);
}

/* Rappel du sociétaire, etape 1 du formulaire de saisie (voir
   nouveau_dossier.html) -- affiche des qu'un sociétaire est choisi dans
   la liste ou retrouve par un import CSV (les deux rechargent la page
   avec ?societaire=<id>). Reprend le meme style que .carte-demande et
   .carte-identite-societaire sur l'ecran de resultat, pour rester
   coherent visuellement. */
.carte-resume-societaire {
  padding: 1rem 1.5rem;
  margin: 1.25rem 0;
}

.mise-en-page-resultat {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.colonne-principale {
  min-width: 0;
}

.colonne-laterale {
  position: sticky;
  top: 1rem;
}

.onglets-resultat {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--gris-ligne);
}

.onglet-bouton {
  padding: 0.6rem 1rem;
  border: none;
  background: transparent;
  color: var(--texte-secondaire);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.onglet-bouton:hover {
  color: var(--marque-foncee);
}

.onglet-bouton-actif {
  color: var(--marque-foncee);
  border-bottom-color: var(--marque-foncee);
}

.onglet-panneau[hidden] {
  display: none;
}

.titre-impression-seul {
  display: none;
}

.bloc-volet {
  border: 1px solid var(--gris-ligne);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.bloc-volet-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.bloc-volet-entete h3 {
  margin: 0;
}

.bloc-volet-score {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  font-weight: var(--text-h2-weight);
  white-space: nowrap;
}

/* Tonalite : rouge/ambre/vert selon la valeur (voir
   scoring.calcul.orchestration._tonalite_score_0_100 / _tonalite_dti) --
   la page ne doit pas rester verte partout, un score ou sous-critere
   faible se voit d'un coup d'oeil. */
.tonalite-positive {
  color: var(--marque-foncee);
}

.tonalite-neutre {
  color: var(--ambre-vigilance-texte);
}

.tonalite-negative {
  color: var(--rouge-erreur);
}

.tonalite-fond-positive {
  background: var(--marque-foncee);
}

.tonalite-fond-neutre {
  background: var(--ambre-vigilance);
}

.tonalite-fond-negative {
  background: var(--rouge-erreur);
}

.bloc-volet-statut {
  margin: 0.2rem 0 0.75rem 0;
}

.liste-sous-criteres {
  list-style: none;
  margin: 0;
  padding: 0;
}

.liste-sous-criteres li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--gris-ligne);
}

.liste-sous-criteres li:first-child {
  border-top: none;
}

.sous-critere-nom {
  font-weight: 500;
  flex: 1 1 auto;
}

.sous-critere-valeur {
  font-family: var(--police-titres);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* Couleur portee par .tonalite-* (voir plus haut), pas fixee ici. */
}

.sous-critere-detail {
  flex-basis: 100%;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--texte-secondaire);
}

.carte-score-final {
  text-align: center;
}

.carte-score-final h4 {
  text-align: left;
  margin: 1.25rem 0 0.6rem 0;
}

.jauge-score {
  position: relative;
  width: 176px;
  height: 176px;
  margin: 0.5rem auto 1rem auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jauge-score-recommande {
  background: conic-gradient(var(--marque-foncee) calc(var(--pourcentage) * 1%), var(--gris-ligne) 0);
}

.jauge-score-vigilance {
  background: conic-gradient(var(--ambre-vigilance) calc(var(--pourcentage) * 1%), var(--gris-ligne) 0);
}

.jauge-score-non_recommande {
  background: conic-gradient(var(--rouge-erreur) calc(var(--pourcentage) * 1%), var(--gris-ligne) 0);
}

.jauge-score-interieur {
  width: 134px;
  height: 134px;
  border-radius: 50%;
  background: var(--blanc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.jauge-score-valeur {
  font-size: var(--text-score-size);
  line-height: var(--text-score-line);
  font-weight: var(--text-score-weight);
  color: #16233d;
}

@media (max-width: 480px) {
  .jauge-score-valeur {
    font-size: 48px;
    line-height: 54px;
  }
}

.liste-composition-score {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.liste-composition-score li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
}

.composition-nom {
  flex: 0 0 40%;
  color: var(--texte-secondaire);
}

.composition-barre {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: var(--gris-ligne);
  overflow: hidden;
}

.composition-barre-remplie {
  display: block;
  height: 100%;
  border-radius: 3px;
  /* Couleur portee par .tonalite-fond-* (voir plus haut), pas fixee ici. */
}

.composition-valeur {
  flex: 0 0 auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.liste-raisons {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.liste-raisons li {
  padding: 0.3rem 0;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  padding-left: 1.1rem;
  position: relative;
}

.liste-raisons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.raison-positive::before {
  background: var(--marque-foncee);
}

.raison-negative::before {
  background: var(--rouge-erreur);
}

@media (max-width: 900px) {
  .mise-en-page-resultat {
    grid-template-columns: 1fr;
  }

  .colonne-laterale {
    position: static;
  }
}

@media print {
  .no-print,
  .barre-laterale,
  .barre-superieure,
  .onglets-resultat {
    display: none !important;
  }

  .onglet-panneau[hidden] {
    display: block !important;
  }

  .titre-impression-seul {
    display: block;
  }

  .mise-en-page-resultat {
    grid-template-columns: 1fr;
  }

  .colonne-laterale {
    position: static;
  }

  .carte {
    border: none;
    padding: 0.5rem 0;
  }
}

/* --- Squelette applicatif : sidebar + barre superieure + contenu ---
   Le contenu (.zone-principale, barre superieure incluse) reste blanc
   dans les deux modes, comme .carte et .carte-connexion. C'est la
   sidebar qui suit le theme (meme fond que la page, --fond-page) --
   ses couleurs de texte/accent suivent donc les tokens qui changent
   deja avec [data-theme], pas des couleurs fixes. */

.app-shell {
  min-height: 100vh;
}

.barre-laterale {
  width: 260px;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--fond-page);
  border-right: 1px solid var(--bordure-panneau-sombre);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
}

.barre-laterale-logo {
  padding: 0 0.5rem 1.5rem 0.5rem;
}

.barre-laterale-logo .logo {
  height: 1.5rem;
  /* La sidebar suit le theme (--fond-page, sombre par defaut) -- logo
     clair (logo-inverse.svg) sur ce fond sombre, logo fonce des que le
     mode clair rend la sidebar claire (voir [data-theme="light"]
     ci-dessous). Uniquement ici : la carte de connexion, elle, reste
     toujours blanche (.carte-connexion), donc garde le logo fonce
     normal dans les deux modes -- pas de regle equivalente la-bas. */
  content: url("../img/logo-inverse.svg");
}

[data-theme="light"] .barre-laterale-logo .logo {
  content: url("../img/logo.svg");
}

.nav-section-titre {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: 600;
  color: var(--texte-sur-fond-page-att);
  margin: 0.5rem 0.5rem;
}

.navigation-laterale {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nav-lien {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.65rem;
  border-radius: 4px;
  color: var(--texte-sur-fond-page);
  text-decoration: none;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
}

.nav-lien:hover {
  background: var(--nav-survol-fond);
}

.nav-lien-actif,
.nav-lien-actif:hover {
  background: var(--nav-actif-fond);
  color: var(--nav-actif-texte);
}

.nav-form-deconnexion {
  margin: 0;
}

.nav-lien-bouton {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nav-bas {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.profil-utilisateur {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.5rem 0 0.5rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--bordure-panneau-sombre);
}

.profil-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--marque-claire);
  color: var(--marque-foncee);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-caption-size);
  font-weight: 700;
  flex-shrink: 0;
}

.profil-nom {
  margin: 0;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: 500;
  color: var(--texte-sur-fond-page);
}

.profil-role {
  margin: 0;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--texte-sur-fond-page-att);
}

.zone-principale {
  margin-left: 260px;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
}

.barre-superieure {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--fond-topbar);
  border-bottom: 1px solid var(--bordure-panneau-sombre);
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.barre-superieure-salutation {
  margin: 0;
  font-weight: 600;
  color: var(--texte-sur-fond-page);
  white-space: nowrap;
}

.barre-superieure-agence {
  flex: 1;
  margin: 0;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--texte-sur-fond-page-att);
}

.barre-superieure-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.badge-serveur {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--texte-sur-fond-page);
  background: var(--nav-survol-fond);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}

.badge-point {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--nav-actif-fond);
}

.bouton-theme-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--bordure-panneau-sombre);
  color: var(--texte-sur-fond-page);
  border-radius: 4px;
  cursor: pointer;
}

.bouton-theme-topbar:hover {
  background: var(--nav-survol-fond);
}

/* Bouton menu (sidebar hors-champ) : cache par defaut, affiche seulement
   sous 768px -- voir responsive.css et backoffice/static/backoffice/js/responsive.js. */
.bouton-menu-topbar {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--bordure-panneau-sombre);
  color: var(--texte-sur-fond-page);
  border-radius: 4px;
  cursor: pointer;
}

.bouton-menu-topbar:hover {
  background: var(--nav-survol-fond);
}

/* Voile derriere la sidebar hors-champ (mobile) : invisible et hors du
   flux par defaut, seul responsive.css lui donne un sens sous 768px. */
.voile-barre-laterale {
  display: none;
}

.contenu-page {
  flex: 1;
  padding: 1.5rem;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.contenu-page .carte {
  margin-bottom: 0;
}

.fil-ariane {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1.25rem 0;
}

.fil-ariane p {
  margin: 0;
  color: var(--texte-secondaire);
}

.fil-ariane .bouton-lien {
  width: auto;
  margin: 0;
}

/* Recherche d'un dossier par code sociétaire, sur l'accueil -- voir
   views.dashboard. */

.carte-recherche-dossier {
  margin-bottom: 1rem;
}

/* Tant que les cartes de statistiques sont desactivees (voir
   dashboard.html), la recherche reste seule sur la page -- descendue et
   centree plutot que collee en haut, pour ne pas laisser un ecran vide
   en dessous. A retirer si d'autres blocs reviennent sous la recherche. */
.carte-recherche-dossier-centree {
  max-width: 640px;
  margin: 12vh auto 0 auto;
}

.formulaire-recherche-dossier {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.formulaire-recherche-dossier .champ {
  flex: 1 1 320px;
  margin-bottom: 0;
}

.liste-resultats-recherche {
  list-style: none;
  margin: 1rem 0 0 0;
  padding: 0;
  border-top: 1px solid var(--gris-ligne);
}

.liste-resultats-recherche li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gris-ligne);
  flex-wrap: wrap;
}

.resultat-recherche-identite {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.resultat-recherche-identite .etiquette-recommandation {
  margin: 0;
}

.resultat-recherche-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

/* Action secondaire ("Scorer a nouveau" a cote d'un score deja
   existant) -- un simple lien souligne, pas un second bouton plein qui
   ferait concurrence a l'action principale ("Voir le scoring"). */
.bouton-lien-discret {
  color: var(--texte-secondaire);
  font-size: var(--text-sm-size);
  text-decoration: underline;
  white-space: nowrap;
}

.bouton-lien-discret:hover {
  color: var(--marque-foncee);
}

.grille-cartes-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.carte-stat {
  padding: 1.25rem;
}

.stat-titre {
  margin: 0 0 0.5rem 0;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--texte-secondaire);
}

.stat-chiffre {
  margin: 0;
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  font-weight: var(--text-h1-weight);
  color: var(--marque-foncee);
}

.stat-chiffre-alerte {
  color: #b3382c;
}

.stat-sous-titre {
  margin: 0.35rem 0 0 0;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--texte-secondaire);
}

/* --- Onglet Planification --- */

.actions-planification {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.actions-planification .bouton-principal,
.actions-planification .bouton-secondaire {
  width: auto;
}

/* Chemin serveur affiche pour information -- jamais modifiable, la
   valeur grisee le signale au premier coup d'oeil (voir
   backoffice/fichiers_import_planifie.py : ce dossier vit sur le
   serveur, pas sur le poste de l'agent). */
.champ-chemin-serveur:disabled {
  background: var(--fond-page);
  color: var(--texte-secondaire);
  cursor: not-allowed;
}

.formulaire-televersement {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.formulaire-televersement input[type="file"] {
  flex: 0 1 420px;
  min-width: 0;
}

.formulaire-suppression-fichier {
  display: inline;
}

.bouton-lien-danger {
  background: none;
  border: none;
  padding: 0;
  color: var(--rouge-erreur);
  text-decoration: underline;
  font-size: var(--text-sm-size);
  cursor: pointer;
}

.bouton-lien-danger:hover {
  color: #7a251c;
}

/* Detail d'une execution en erreur (voir planification.html) -- un clic
   sur le badge "Avec erreur(s)" ouvre une fenetre modale avec
   l'explication en langage clair (generee par le LLM local a partir du
   journal technique, voir scoring/llm_ollama.py::generer_explication_erreurs_import),
   le journal brut restant toujours visible en repli si cette
   explication n'a pas pu etre generee (voir planification.js). */
.bouton-voir-erreur {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.modal-detail-erreur {
  margin: auto;
  border: none;
  border-radius: 8px;
  padding: 0;
  width: min(520px, calc(100% - 2rem));
  max-height: min(70vh, 560px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  background: var(--blanc);
  color: #16233d;
}

.modal-detail-erreur::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.modal-detail-erreur-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gris-ligne);
}

.modal-detail-erreur-entete h3 {
  margin: 0;
  font-size: var(--text-md-size);
  font-weight: 600;
}

.bouton-fermer-modal {
  background: none;
  border: none;
  padding: 0 0.25rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--texte-secondaire);
  cursor: pointer;
}

.modal-detail-erreur-corps {
  padding: 1.25rem;
  max-height: calc(min(70vh, 560px) - 4rem);
  overflow-y: auto;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}

.modal-detail-erreur-corps p {
  margin: 0 0 0.75rem 0;
}

.journal-brut {
  margin: 0;
  padding: 0.6rem 0.75rem;
  /* Couleurs fixes, pas les variables de theme sombre/clair : le modal
     a toujours un fond blanc (voir .modal-detail-erreur), quel que soit
     le theme choisi dans la sidebar. */
  background: #f4f5f7;
  color: #16233d;
  border-radius: 3px;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  white-space: pre-wrap;
  word-break: break-word;
}