/* Espace de gestion — feuille de style de l'application web.
   Pas celle des PDF (gabarits/document.css) ni du site public (site.css) :
   trois publics, trois feuilles. Aucune ressource externe : polices du
   système, icônes SVG dans web/templates/_icones.html (CLAUDE.md, règle 7).

   Organisation : jetons → base → structure (navigation latérale, page) →
   composants (boutons, tableaux, formulaires, cartes, badges, messages) →
   écrans particuliers (connexion, erreur, pipeline, blog) → adaptations. */

/* ---------- Jetons ---------- */

:root {
  --bleu-nuit: #0b1f33;
  --bleu: #0f4c81;
  --bleu-fonce: #0b3a63;
  --bleu-pale: #e8f0f8;
  --vert: #1f8a70;
  --vert-fonce: #176b57;
  --vert-pale: #e3f3ee;
  --ambre: #9a6b00;
  --ambre-pale: #fdf3d9;
  --rouge: #b3261e;
  --rouge-fonce: #8e1d17;
  --rouge-pale: #fdecea;

  --fond: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --bordure: #e3e8ee;
  --bordure-forte: #c9d3de;
  --texte: #16202b;
  --texte-2: #4f5f70;
  --texte-3: #7a8795;

  --rayon: 10px;
  --rayon-petit: 7px;
  --ombre: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --ombre-haute: 0 12px 32px rgba(11, 31, 51, 0.18);
  --anneau: 0 0 0 3px rgba(15, 76, 129, 0.18);
  --largeur-nav: 252px;
  --police: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  /* Anciens noms, encore lus par quelques gabarits conservés. */
  --couleur-fond: var(--fond);
  --couleur-surface: var(--surface);
  --couleur-bordure: var(--bordure);
  --couleur-texte: var(--texte);
  --couleur-texte-attenue: var(--texte-2);
  --couleur-primaire: var(--bleu);
  --couleur-primaire-fonce: var(--bleu-fonce);
  --couleur-accent: var(--vert);
  --couleur-danger: var(--rouge);
  --couleur-alerte-fond: var(--rouge-pale);
  --couleur-avertissement: var(--ambre);
  --couleur-avertissement-fond: var(--ambre-pale);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 1rem;
  color: var(--texte);
}

h2 {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 1.75rem 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--bordure);
  color: var(--texte);
}

h3 {
  font-size: 0.8rem;
  font-weight: 650;
  margin: 1.4rem 0 0.5rem;
  color: var(--texte-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

p { margin: 0.4rem 0 0.8rem; }

a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--anneau); border-radius: 6px; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surface-2);
  border: 1px solid var(--bordure);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

.icone { width: 18px; height: 18px; flex: none; }
.sceau { width: 36px; height: 36px; flex: none; }

/* ---------- Structure : navigation latérale et page ---------- */

body.avec-navigation {
  display: grid;
  grid-template-columns: var(--largeur-nav) minmax(0, 1fr);
  min-height: 100vh;
}

.lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--bordure);
}

.lateral .marque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 66px;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--bordure);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--texte);
  text-decoration: none;
  line-height: 1.15;
}
.logo:hover { text-decoration: none; }
.logo strong { display: block; font-size: 0.97rem; font-weight: 650; color: var(--bleu-nuit); }
.logo small { display: block; font-size: 0.72rem; color: var(--texte-3); letter-spacing: 0.02em; }

.navigation { flex: 1; padding: 0.85rem 0.75rem 1rem; }

.groupe-nav + .groupe-nav { margin-top: 1rem; }
.groupe-nav h2 {
  margin: 0 0.65rem 0.3rem;
  padding: 0;
  border: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.groupe-nav a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.46rem 0.65rem;
  border-radius: 8px;
  color: var(--texte-2);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
}
.groupe-nav a .icone { color: var(--texte-3); }
.groupe-nav a:hover { background: var(--surface-2); color: var(--texte); text-decoration: none; }
.groupe-nav a[aria-current="page"] { background: var(--bleu-pale); color: var(--bleu-fonce); font-weight: 600; }
.groupe-nav a[aria-current="page"] .icone { color: var(--bleu); }

.compte {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.82rem;
}
.compte .avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--bleu-pale);
  color: var(--bleu-fonce);
  font-weight: 700;
  font-size: 0.8rem;
}
.compte .identite { flex: 1; min-width: 0; line-height: 1.25; }
.compte .identite strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compte .identite span { color: var(--texte-3); }

.bouton-icone, .form-inline .bouton-icone {
  display: inline-flex;
  margin: 0;
  padding: 0.4rem;
  min-height: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--texte-3);
  cursor: pointer;
}
.bouton-icone:hover, .form-inline .bouton-icone:hover { background: var(--surface-2); color: var(--rouge); }

.menu-mobile { display: none; }

main.principal {
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  padding: 1.6rem 2rem 4rem;
}

/* ---------- En-tête de page ---------- */

.fil-ariane { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--texte-3); }
.fil-ariane a { color: var(--texte-2); }

.entete-page {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.entete-page h1 { margin: 0; }
.entete-page .sous-titre-page { margin: 0.25rem 0 0; color: var(--texte-2); font-size: 0.9rem; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* ---------- Boutons ---------- */

button, input[type="submit"], .bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 36px;
  margin: 0;
  padding: 0 0.95rem;
  background: var(--bleu);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
form > button, form > input[type="submit"] { margin-top: 1.1rem; }
button:hover, input[type="submit"]:hover, .bouton:hover { background: var(--bleu-fonce); color: #fff; text-decoration: none; }

.bouton-secondaire, button.bouton-secondaire { background: var(--surface); color: var(--texte); border-color: var(--bordure-forte); }
.bouton-secondaire:hover, button.bouton-secondaire:hover { background: var(--surface-2); color: var(--texte); border-color: #b2bfcc; }
.bouton-danger, button.bouton-danger { background: var(--rouge); color: #fff; }
.bouton-danger:hover, button.bouton-danger:hover { background: var(--rouge-fonce); }
.bouton-petit { min-height: 30px; padding: 0 0.7rem; font-size: 0.8rem; }
.bouton-large { width: 100%; min-height: 42px; }

.bouton-lien, .form-inline .bouton-lien, button.bouton-lien {
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--bleu);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: underline;
}
.bouton-lien:hover, .form-inline .bouton-lien:hover { background: none; color: var(--bleu-fonce); }

/* ---------- Tableaux ---------- */

table {
  width: 100%;
  margin: 0.5rem 0 1.25rem;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
}

th, td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--bordure);
}

th {
  background: var(--surface-2);
  color: var(--texte-2);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafcfe; }
tfoot th, tfoot td { background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--bordure); border-bottom: 0; }
tfoot th { text-transform: none; font-size: 0.85rem; letter-spacing: 0; color: var(--texte); }

.nombre { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
th.nombre { text-align: right; }
.ligne-retard td { background: #fff6f5; }
.ligne-attenuee td { color: var(--texte-3); }

/* ---------- Formulaires ---------- */

form {
  margin: 0.5rem 0 1.25rem;
  padding: 1.25rem 1.4rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

form[style*="display:inline"], .form-inline, .form-nu, .barre-filtres {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
form[style*="display:inline"] { display: inline-block !important; margin: 0 0.5rem 0.5rem 0; }

label {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--texte-2);
}
label:first-child { margin-top: 0; }

input, select, textarea {
  width: 100%;
  min-height: 38px;
  margin-top: 0.3rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--bordure-forte);
  border-radius: 8px;
  background: #fff;
  color: var(--texte);
  font: inherit;
  font-size: 0.92rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:hover, select:hover, textarea:hover { border-color: #a9b7c6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bleu); box-shadow: var(--anneau); }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; margin: 0; accent-color: var(--bleu); }
textarea { min-height: 5.5rem; line-height: 1.5; resize: vertical; }

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-weight: 500;
  color: var(--texte);
}
.checkbox-inline input { width: auto; margin: 0; }

.formulaire-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.25rem; }
.formulaire-section {
  margin: 1.4rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.formulaire-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pied-formulaire {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bordure);
}
.pied-formulaire button { margin: 0; }

.barre-filtres { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; margin: 0 0 1rem; }
.barre-filtres label { margin: 0; }
.barre-filtres input, .barre-filtres select { width: auto; min-width: 10rem; margin-top: 0.25rem; }
.barre-filtres button { margin: 0; }
.barre-filtres .checkbox-inline { margin: 0 0 0.5rem; }
.barre-filtres .checkbox-inline input { min-width: 0; }

.form-inline { display: inline; }
.form-inline select, .form-inline input { display: inline-block; width: auto; min-height: 32px; margin: 0; padding: 0.3rem 0.55rem; font-size: 0.84rem; }
.form-inline button { min-height: 32px; margin: 0; padding: 0 0.75rem; font-size: 0.82rem; }
.form-bloc { margin-top: 0.75rem; }

.aide { margin: 0.25rem 0 0; font-size: 0.84rem; color: var(--texte-2); }
.erreur, .flash-erreur { color: var(--rouge); }

/* ---------- Cartes, grilles, indicateurs ---------- */

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1rem; }
.espace-haut { margin-top: 1rem; }

.carte {
  min-width: 0;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.carte h2 { margin: 0 0 0.75rem; padding: 0; border: 0; font-size: 0.98rem; }
.carte table { margin: 0.25rem 0 0; border: 0; border-radius: 0; box-shadow: none; }
.carte .aide { margin: 0; }
.carte > p:last-child { margin-bottom: 0; }

.stat-libelle {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.stat {
  margin: 0.3rem 0 0.15rem;
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

.liste-proprietes {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.1rem;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}
.liste-proprietes dt { color: var(--texte-2); font-weight: 600; }
.liste-proprietes dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Badges et messages ---------- */

.badge {
  display: inline-block;
  padding: 0.14rem 0.6rem;
  border-radius: 999px;
  background: #e8edf3;
  color: var(--texte-2);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}
.badge-succes { background: var(--vert-pale); color: var(--vert-fonce); }
.badge-info { background: var(--bleu-pale); color: var(--bleu); }
.badge-alerte { background: var(--ambre-pale); color: var(--ambre); }
.badge-danger { background: var(--rouge-pale); color: var(--rouge); }
.badge-neutre { background: #eef0f3; color: var(--texte-2); }

.flash, .erreur, .avertissement {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--rayon-petit);
  font-size: 0.9rem;
}
.flash-succes { background: #eef7f4; border-color: #a8d4c7; border-left-color: var(--vert); color: var(--vert-fonce); }
.flash-info { background: #e9f1f9; border-color: #b9d3e8; border-left-color: var(--bleu); color: var(--bleu-fonce); }
.flash-erreur, .erreur { background: var(--rouge-pale); border-color: #f3c8c4; border-left-color: var(--rouge); color: var(--rouge); }
.flash-alerte, .avertissement { background: var(--ambre-pale); border-color: #ecd59a; border-left-color: var(--ambre); color: var(--ambre); }

.texte-attenue { color: var(--texte-2); }
.vide { margin: 0; padding: 0.5rem 0; color: var(--texte-3); font-style: italic; }
.pre { white-space: pre-wrap; }
.code-recuperation { font-family: var(--mono); font-size: 1rem; }
ul.code-recuperation { columns: 2; padding-left: 1.25rem; margin: 0.5rem 0 1rem; line-height: 1.9; }

img[alt="QR code de configuration TOTP"] {
  display: block;
  margin: 0.75rem auto;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}

/* ---------- Connexion, second facteur, erreur sans session ---------- */

main.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  padding: 2rem 1rem;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(31, 138, 112, 0.28), transparent 60%),
    linear-gradient(160deg, var(--bleu-nuit), var(--bleu) 85%);
}
.carte-auth {
  width: 100%;
  max-width: 460px;
  padding: 2rem 2.1rem 1.75rem;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--ombre-haute);
}
.marque-auth {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bordure);
  line-height: 1.2;
}
.marque-auth .sceau { width: 40px; height: 40px; }
.marque-auth strong { display: block; font-size: 1rem; color: var(--bleu-nuit); }
.marque-auth small { display: block; font-size: 0.78rem; color: var(--texte-3); }
.carte-auth h1 { margin: 0 0 0.35rem; font-size: 1.3rem; }
.carte-auth form { margin: 0.75rem 0 0; padding: 0; border: 0; box-shadow: none; }
.carte-auth form > button[type="submit"] { width: 100%; min-height: 42px; margin-top: 1.25rem; }
.carte-auth code { overflow-wrap: anywhere; }
.pied-auth { margin: 0; font-size: 0.88rem; }
.pied-auth a { color: #d6e6f4; }

.page-erreur { max-width: 560px; margin: 3rem auto; text-align: center; }
.page-erreur .code-erreur { margin: 0; font-size: 3.2rem; font-weight: 750; line-height: 1; color: var(--bleu); opacity: 0.22; }
.page-erreur h1 { margin: 0.5rem 0 0.4rem; }
.page-erreur .actions { justify-content: center; margin-top: 1.5rem; }
.carte-auth .page-erreur { margin: 0.5rem auto; }

/* ---------- Listes longues : zone à défilement ---------- */

.defilant {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}
.defilant table { margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.defilant thead th { position: sticky; top: 0; z-index: 1; }
.carte .defilant { margin-top: 0.25rem; }
/* Liste principale d'un écran : borne la hauteur à la fenêtre, en-tête fixe. */
.defilant-page { max-height: calc(100vh - 300px); min-height: 14rem; margin-bottom: 1.25rem; }

/* ---------- Onglets (un tableau par type de prospect) ---------- */

.onglets {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.25rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--bordure);
}
.onglets a {
  padding: 0.55rem 0.95rem;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: var(--texte-2);
  font-weight: 500;
  text-decoration: none;
}
.onglets a:hover { background: var(--surface-2); color: var(--texte); text-decoration: none; }
.onglets a[aria-current="page"] {
  background: var(--surface);
  border-color: var(--bordure);
  color: var(--bleu-fonce);
  font-weight: 600;
}
.onglets .onglet-reglage { margin-left: auto; color: var(--bleu); font-size: 0.85rem; }

/* ---------- Prospection : pipeline ---------- */

.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; align-items: start; }
.colonne-pipeline {
  display: flex;
  flex-direction: column;
  min-height: 12rem;
  max-height: calc(100vh - 260px);
  padding: 0.75rem;
  background: #eef2f6;
  border-radius: var(--rayon);
}
.colonne-pipeline .fiches { flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.2rem; }
.colonne-pipeline h2 {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.2rem;
  padding: 0;
  border: 0;
  font-size: 0.9rem;
}
.colonne-pipeline .total { margin: 0 0 0.6rem; font-size: 0.78rem; color: var(--texte-2); }
.fiche-affaire {
  margin-bottom: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  box-shadow: var(--ombre);
  font-size: 0.86rem;
}
.fiche-affaire a { font-weight: 600; }
.fiche-affaire .sous { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--texte-2); }
/* Glisser-déposer (web/static/pipeline.js) : poignée, fiche en vol, colonne visée. */
.fiche-affaire[draggable="true"] { cursor: grab; }
.fiche-affaire.en-deplacement { opacity: 0.45; cursor: grabbing; }
.colonne-pipeline.cible { outline: 2px dashed var(--bleu); outline-offset: -2px; background: var(--bleu-pale); }
.colonne-pipeline .fiches .vide[hidden] { display: none; }

/* ---------- Aperçu d'un article de blog (core/markdown_simple.py) ---------- */

.article-contenu { max-width: 70ch; line-height: 1.65; }
.article-contenu h2, .article-contenu h3, .article-contenu h4, .article-contenu h5 { margin: 1.4rem 0 0.5rem; padding: 0; border: 0; color: var(--bleu-fonce); }
.article-contenu h2 { font-size: 1.3rem; }
.article-contenu h3 { font-size: 1.12rem; text-transform: none; letter-spacing: 0; }
.article-contenu p, .article-contenu ul, .article-contenu ol { margin: 0 0 0.9rem; }
.article-contenu blockquote { margin: 1rem 0; padding: 0.5rem 1rem; border-left: 4px solid var(--vert); background: var(--surface-2); color: var(--texte-2); }
.article-contenu pre { padding: 0.8rem 1rem; background: var(--bleu-nuit); color: #fff; border-radius: 8px; overflow-x: auto; font-size: 0.9rem; }
.article-contenu pre code { background: none; border: 0; padding: 0; color: inherit; }
.article-contenu img { max-width: 100%; height: auto; }

/* ---------- Utilitaires (remplacent les anciens styles en ligne) ---------- */

.pleine-largeur { width: 100%; }
.mesure { max-width: 72ch; }
.mesure-formulaire { max-width: 640px; }
.sans-marge { margin: 0; }
.sans-marge-haut { margin-top: 0; }
.sans-ombre { box-shadow: none; }
.sans-retour { white-space: nowrap; }
.espace-haut-petit { margin-top: 0.75rem; }
.espace-haut-grand { margin-top: 1.5rem; }
.espace-bas-petit { margin-bottom: 0.5rem; }
.espace-gauche { margin-left: 0.75rem; }
.texte-petit { font-size: 0.88rem; }
.texte-minuscule { font-size: 0.75rem; }
.texte-grand { font-size: 1.1rem; }
.texte-danger { color: var(--rouge); }
.texte-alerte { color: var(--ambre); }
.poids-normal { font-weight: 400; }
.aligne-droite { text-align: right; }
.rangee { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.libelle-inline { display: inline; margin-top: 0; font-weight: 400; }
.liste-compacte { margin: 0.25rem 0 0.5rem; padding-left: 1.2rem; font-size: 0.88rem; }
.code-mini { font-family: var(--mono); font-size: 0.72rem; }
.champ-court { width: 6rem; }
.champ-mini { min-width: 6rem; }
.champ-moyen { min-width: 10rem; }
.champ-large { min-width: 14rem; }
.champ-etroit { max-width: 9rem; }
.champ-flex { flex: 2; min-width: 10rem; }
.champ-flex-large { flex: 2; min-width: 14rem; }
.form-tirete { box-shadow: none; border-style: dashed; }

/* Marqueur d'une valeur de configuration non saisie (même sens que sur le
   site public : doit sauter aux yeux). */
.a-remplir {
  display: inline-block;
  padding: 0.05em 0.45em;
  background: #ffe8a3;
  color: #6b4a00;
  border: 1px dashed #b98b1f;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
}

/* ---------- Adaptations : écrans étroits ---------- */

@media (max-width: 900px) {
  body.avec-navigation { display: block; }
  .lateral {
    position: relative;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--bordure);
  }
  .navigation, .lateral > .compte { display: none; }
  .menu-mobile { display: block; }
  .menu-mobile summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    list-style: none;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--bordure-forte);
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
  }
  .menu-mobile summary::-webkit-details-marker { display: none; }
  .menu-mobile[open] summary { background: var(--bleu-pale); border-color: var(--bleu); color: var(--bleu-fonce); }
  .menu-mobile nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    padding: 0.75rem;
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre-haute);
  }
  .menu-mobile .compte { margin-top: 0.75rem; padding: 0.75rem 0 0; }
  main.principal { padding: 1rem 1rem 3rem; }
  .entete-page { align-items: flex-start; }
  .grille-2 { grid-template-columns: 1fr; }
  .liste-proprietes { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .liste-proprietes dt { margin-top: 0.5rem; }
  table { display: block; overflow-x: auto; }
  .carte-auth { padding: 1.5rem 1.25rem; }
  .colonne-pipeline { max-height: 60vh; }
  .defilant { max-height: 60vh; }
}

/* ---------- Impression ---------- */

@media print {
  body.avec-navigation { display: block; }
  .lateral, .actions, .barre-filtres, .pied-formulaire { display: none; }
  main.principal { padding: 0; max-width: none; }
  .carte, table, form { box-shadow: none; }
}

/* Onglets de module (Comptabilité) : plus serrés que les onglets de types. */
.onglets-module { margin-top: 0.25rem; }
.onglets-module a { padding: 0.45rem 0.8rem; font-size: 0.88rem; }

/* Empilement vertical de cartes pleine largeur (gabarits de pipeline, fiches longues). */
.pile { display: grid; gap: 1rem; }
.espace-bas { margin-bottom: 1rem; }
/* Cinq indicateurs sur une rangée (âge des comptes). */
.grille-serree { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* Deux colonnes inégales (lettrage : la liste des lignes a besoin de place). */
@media (min-width: 1100px) {
  .grille-asymetrique { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
/* Bouton inactif (clôture pas prête, par exemple) : visiblement hors d'usage. */
button:disabled, .bouton:disabled { opacity: 0.45; cursor: not-allowed; }
/* Zone défilante haute (plan comptable, grille du budget). */
.defilant-haut { max-height: 640px; }
/* Pied de tableau (totaux, solde de clôture) toujours visible dans une zone défilante. */
.defilant tfoot th, .defilant tfoot td { position: sticky; bottom: 0; z-index: 1; background: var(--surface-2); }

/* ---------- Éditeur du blog : mise en forme / code Markdown ---------- */
.editeur { margin-bottom: 1rem; }
.editeur-entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.editeur-entete label { margin: 0; }
.editeur-modes { display: inline-flex; border: 1px solid var(--bordure); border-radius: 8px; overflow: hidden; }
.editeur-modes button { min-height: 32px; padding: 0 0.85rem; border: 0; border-radius: 0; background: var(--surface); color: var(--texte-2); font-size: 0.85rem; font-weight: 500; box-shadow: none; }
.editeur-modes button + button { border-left: 1px solid var(--bordure); }
.editeur-modes button[aria-pressed="true"] { background: var(--bleu); color: #fff; }
.barre-outils { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.55rem 0 0.4rem; }
.barre-outils button { min-height: 30px; padding: 0 0.6rem; border: 1px solid var(--bordure); border-radius: 6px; background: var(--surface-2); color: var(--texte); font-size: 0.8rem; font-weight: 500; box-shadow: none; }
.barre-outils button:hover { background: var(--surface); border-color: var(--bleu); color: var(--bleu); }
.editeur-visuel { min-height: 24rem; max-width: none; padding: 0.9rem 1.1rem; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); }
.editeur-visuel:focus { outline: 2px solid var(--bleu); outline-offset: 1px; }
.editeur-visuel:empty::before { content: "Écrivez ici…"; color: var(--texte-3); }
.editeur textarea { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9rem; }
/* Sans JavaScript : seule la zone Markdown est utilisable. */
.editeur:not([data-mode]) .barre-outils, .editeur:not([data-mode]) .editeur-modes, .editeur:not([data-mode]) .editeur-visuel { display: none; }
.editeur[data-mode="visuel"] textarea { display: none; }
.editeur[data-mode="markdown"] .editeur-visuel { display: none; }

/* Rendez-vous (G10). */
.stat-texte { font-size: 1.15rem; }
.liste-aide { margin: 0.6rem 0; padding-left: 1.1rem; color: var(--texte-2); font-size: 0.88rem; display: grid; gap: 0.25rem; }

/* ---------- Graphiques du tableau de bord (core/graphiques.py) ---------- */
.titre-section { margin: 1.75rem 0 0.75rem; font-size: 1.05rem; }
.grille-graphiques { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.carte-graphique-large { grid-column: 1 / -1; }
.entete-graphique { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
.entete-graphique h3 { margin: 0; font-size: 0.95rem; }
.entete-graphique a { font-size: 0.82rem; }
.graphique { margin: 0; }
.graphique svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Chiffre de rapprochement à zéro (banque_rapprochement.html). */
.stat-succes { color: #176b57; }
/* Sur petit écran, un graphique large défile plutôt que de rapetisser son texte. */
.carte-graphique-large .graphique { overflow-x: auto; }
.carte-graphique-large .graphique svg { min-width: 760px; }
.graphique-anneau { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.graphique-anneau svg { width: 180px; max-width: 45%; flex: 0 0 auto; }
.graphique-anneau .legende { flex-direction: column; gap: 0.45rem; margin: 0; }
.graphique text { font-family: var(--police); fill: var(--texte-2); font-size: 11px; }
.graphique .g-axe { fill: var(--texte-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.graphique .g-libelle { fill: var(--texte); font-size: 12.5px; font-weight: 600; }
.graphique .g-valeur { fill: var(--texte-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.graphique .g-etiquette { fill: var(--texte); font-size: 15px; font-weight: 600; }
.graphique .g-chiffre { fill: var(--texte); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.graphique .g-note { fill: var(--texte-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.graphique .g-centre { fill: var(--texte); font-size: 30px; font-weight: 700; }
.graphique .g-sous-centre { fill: var(--texte-3); font-size: 12px; }
.graphique .g-grille { stroke: var(--bordure); stroke-width: 1; }
.graphique .g-zero { stroke: var(--bordure-forte); stroke-width: 1.2; }
.graphique .g-piste { fill: var(--surface-2); stroke: var(--bordure); stroke-width: 1; }
.graphique .g-piste-anneau { stroke: var(--surface-2); }
.graphique .g-objectif { stroke: var(--rouge); stroke-width: 2.5; stroke-dasharray: 4 3; }
.graphique rect, .graphique .g-point, .graphique .g-part { transition: opacity 0.15s ease; }
.graphique rect:hover, .graphique .g-point:hover, .graphique .g-part:hover { opacity: 0.78; }

/* Palette : barres et points (fill), parts d'anneau (stroke), pastilles (background). */
.graphique .g-1 { fill: var(--bleu); stroke: var(--bleu); }
.graphique .g-2 { fill: var(--vert); stroke: var(--vert); }
.graphique .g-3 { fill: #d4920f; stroke: #d4920f; }
.graphique .g-4 { fill: #6b9bd1; stroke: #6b9bd1; }
.graphique .g-5 { fill: #a3b1c2; stroke: #a3b1c2; }
.graphique .g-6 { fill: var(--rouge); stroke: var(--rouge); }
.graphique rect.g-1, .graphique rect.g-2, .graphique rect.g-3, .graphique rect.g-4,
.graphique rect.g-5, .graphique rect.g-6 { stroke: none; }
.graphique .g-part { fill: none; }
.graphique .g-total { fill: #c7dbef; }
.graphique .g-partiel { fill: var(--bleu); }
.graphique .g-courbe { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.graphique .g-point { fill: var(--surface); stroke-width: 2; }

.legende { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.65rem 0 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--texte-2); }
.legende li { display: flex; align-items: center; }
.legende .pastille { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; margin-right: 0.4rem; flex: 0 0 auto; }
.pastille.g-1 { background: var(--bleu); }
.pastille.g-2 { background: var(--vert); }
.pastille.g-3 { background: #d4920f; }
.pastille.g-4 { background: #6b9bd1; }
.pastille.g-5 { background: #a3b1c2; }
.pastille.g-6 { background: var(--rouge); }
.pastille.g-total { background: #c7dbef; }
.pastille.g-partiel { background: var(--bleu); }
.pastille.g-objectif { height: 3px; border-radius: 0; background: var(--rouge); }
.pastille.g-courbe { height: 3px; border-radius: 2px; }
@media (max-width: 700px) {
  .grille-graphiques { grid-template-columns: 1fr; }
}